[Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax)

매개변수와 전달인자는 아래와 같이 다른 프로그래밍 언어에서도 흔히 사용되는 개념입니다.

function sum(a, b) { // a, b는 매개변수
	return a+b
}

let calc = sum(1, 10) // 1, 2는 전달인자

 

자바스크립트에서도 이러한 개념은 동일하지만 특이한 점이 있습니다.

console.log(sum(1)) // NaN
console.log(sum(1, 10, 100)) // 11

함수에 정해둔 매개변수의 개수보다 전달인자를 적게 혹은 더 넣어주어도 오류가 나지 않는다는 점입니다.

 

위 sum 함수에 1개의 매개변수를 넣어주면 나머지 매개변수를 undefined로 할당해 NaN이 출력되고,

더 넣어주면 왼쪽부터 순서대로 정해둔 매개변수만 사용해 출력을 내어줍니다.

 

그리고 추가적으로 담긴 전달인자를 활용하는 나머지 매개변수가 있습니다.

 

 

 

나머지 매개변수(rest parameter)

---

나머지 매개변수는 파라미터 이름 앞에 ...기호를 더해 임의의 매개변수를 정의하는 것으로 나머지 전달인자를 하나의 배열로 반환합니다.

 

반환 값이 배열이기 때문에 sort, map, forEach와 같은 메소드를 사용해 편리하게 데이터를 사용할 수 있습니다.

 

그럼 예제 코드를 보겠습니다.

function sum(...rests){
    let total = 0
    rests.forEach((rest)=>{
        total += rest
    })
    console.log(total)
}
sum(1,10)		// 11
sum(1,10,100)		// 111
sum(1,10,100,1000)	// 1111

함수의 매개변수를 rest parameter로 정의해 몇개의 전달인자를 넣어도 그 값을 모두 더해 출력해주는 코드입니다.

 

위에서 설명드렸듯 값이 배열로 반환되는 특성을 이용해 forEach 메소드로 모든 값을 더해주었습니다.

 

 

 

전개 연산자(Spread syntax)

전개 연산자는 배열같이 반복적인 요소를 펼쳐서 확장시켜주는 역할을 합니다.

 

위 나머지 매개변수와 사용하는 방법은 같으니 바로 코드를 보겠습니다.

 

const arr = [1, 2, 3]

const arr2 = [arr, 4, 5, 6]

const arr3 = [...arr, 4, 5, 6]

console.log(arr2) // [[1, 2, 3], 4, 5, 6  => length : 4 / 2차원 배열
console.log(arr3) // [1, 2, 3, 4, 5, 6]	  => length : 6 / 1차원 배열

전개 연산자를 사용하지 않고 기존 arr과 새로운 데이터를 조합해 배열을 생성하니

배열의 형태가 통째로 들어가 2차원 배열이 생성되었습니다.

 

전개 연산자를 사용해 배열을 생성하니 1차원 배열의 형태로 생성되는 것을 볼 수 있습니다.

 

그러나 2차원 이상의 배열을 추가해줄 경우 2차원 이상의 형태까지 모두 펼쳐주는 것은 아니니 참고해주세요.