javascript] 함수의 인자, Rest Parameter, Spread

 

1. 함수의 인자 

parameter

: 함수를 선언할 때 외부로 부터 값을 전달받기 위해 작성하는 값으로, 아래의 (a, b, c)를 의미한다

function sum(a, b, c){
	return a + b + c
};

argument

: 함수를 호출 할 때 parameter로 전달하는 값으로, 아래 예시의  (1, 2, 3)을 의미한다

// sum 함수 호출
sum(1, 2, 3);

2. 함수의 기본값

함수를 선언할 때, parameter에 기본값을 미리 설정해놓을 수 있다. ex) (name='hana', age=20)
parameter에 기본값을 설정해놓으면, 함수를 호출 시 argument의 값이 없거나 undefined인 경우 기본값을 매개인자로 대신 사용한다.

function greeting(name='hana', age=20){
console.log(`Hi,I'm ${name}. ${age}years old`) 
}

greeting('mike', 40);				// Hi,I'm mike. 40years old
greeting('mike');					// Hi,I'm mike. 20years old
greeting(undefined, 40);			// Hi,I'm hana. 40years old
greeting('mike', null);				// Hi,I'm mike. nullyears old

 

3. Rest Parameter vs Spread

Rest Parameter

: Rest Parameter는 여러개의 argument를 하나로 묶어준다. 즉, Rest Parameter를 사용하면 함수의 파라미터로 오는 값들을 '배열(Array)'로 전달받을 수 있다.

// 예시1
function test(a, b, ...c){
    console.log(a)          // 1
    console.log(b)          // 2
    console.log(c)          // [3, 4, 5, 6, 7, 8]
}

test(1, 2, 3, 4, 5, 6, 7, 8);


// 예시2
const sumNum = (...args) => {
    let sum = 0;
    for (i of args){ 		//  args = [1, 2, 3] 
        sum = sum + i;
    } return sum;           // 6
}

Spread

:Rest Parameter와는 반대로 하나로 묶여있는 덩어리를 각각의 개별값으로 펼쳐준다. 즉, Spread를 사용하면 배열 같은 이터러블(iterable)을 각각의 '개별 요소'로 분리한다.

// 예시1
const letters = ['a', 'b', 'c', 'd'];
console.log(...letters);        	// a b c d

// 예시2
const nums = [1, 2, 3];
function sum(x, y, z) {
  return x + y + z;
}

console.log(sum(...nums));   // sum(1, 2, 3) → 6