JavaScript Rest Parameter(나머지 매개변수) 와 Spread syntax(전개 연산자)

JavsScript Rest Parameter(나머지 매개변수) & Spread syntax(전개 연산자)

  표기되는 형태는 ...args로 동일하지만 의미가 다른 2가지 내용에 대해서 정리합니다. 먼저 매개변수와 전달인자부터 명확히 해야 합니다.

 

매개변수

  함수의 정의부분에 나열되어 있는 변수들을 의미합니다. 아래 예시중 함수sum의 소괄호() 안에 있는 a, b입니다. 

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

 

전달인자

  전달인자는 함수를 호출할 때 전달되는 실제 값을 의미합니다. 아래 예시중 consolo.log의 소괄호() 안에 있는 1,2입니다.

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

console.log(1, 2); // 3

  특이한 점은 자바스크립트는 호출할 때 함수의 정의보다 적은 인수가 전달되더라도 오류를 발생시키지 않습니다. 나머지 매개변수를 자동으로 undefined로 할당하게 됩니다. 그래서 동일한 함수이나 아래처럼 매개변수를 1만 넣었을 경우 1과 undefined가 각각 매개변수가 되어 결과는 NaN이 출력됩니다. 

function sum(a, b) {
  return a + b; // 1 + undefined
}

console.log(1); // NaN

 

Rest Parameter(나머지 매개변수)

  아래처럼 전달인자가 매개변수보다 많은 경우, 매개변수 만큼만 처리가 됩니다. 

function print(a) {
  console.log(a);
}

print(1, 2, 3, 4, 5); // 첫번째 전달인자 1이 출력

  나머지 매개변수는 ...기호를 이용해서 매개변수를 임의로 만드는 것으로 나머지 전달인자를 모두 하나의 배열로 반환하게 됩니다. 매개변수 갯수에 따라 반환되는 나머지 매개변수가 달라진다고 볼 수 있습니다. 만약 매개변수 없이 나머지 매개변수만 있다면 처음부터 끝까지 모든 전달인자를 하나의 배열로 반환합니다.

function print(a, ...b) {
  console.log(a); // 첫번째 전달인자 1이 출력됨
  console.log(b); // 나머지 2~5까지의 전달인자가 배열로 출력됨
}

print(1, 2, 3, 4, 5); //

// 1
// [2, 3, 4, 5]

 

Spread syntax(전개 연산자)

  전개 연산자는 iterable한 모든 것의 (대표적으로 문자열, 배열) 요소를 펼쳐주는 문법을 의미합니다. 

let arr = [10, 30, 40, 20]
let value = [arr] // 

console.log(value) // arry(4) 출력.

value = [...arr] // 배열을 펼쳐서 [10, 30, 40, 20]로 출력

2가지 이상의 배열을 중간에 합친다고 할 때 아래 예처럼 사용할 수도 있습니다. 배열메소드 없이 간편하게 처리됩니다.

let arr1 = [3, 4, 5];
let arr2 = [1, 2, ...arr1, 6, 7];
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7]

 

정리

• 매개변수(함수의 정의된 변수)와 전달인자(함수 호출시 전달되는 값)
• Rest Parameter(나머지 매개변수)는 하나의 배열을 반환
• Spread syntax(전개연산자)는 요소를 펼쳐주는 문법
• 둘 다 ...기호를 사용하나 위치가 매개변수인지 전달인자인지에 따라 다른 결과를 가짐.

 

참고

모던 자바스크립트 튜토리얼 - 나머지 매개변수와 전개 문법

나무위키 매개변수

TCPSCHOOL.COM 매개변수와 인수

MDN Rest 파라미터

MDN 전개 구문

함께 성장하는 프로독학러