[JS/ES2015] 자바스크립트 ES2015(ES6) 문법 정리(2) - Rest Parameter / Spread Operator / Destructuring

바닐라코딩 부트캠프 프렙 과정을 끝마치고 본과정으로 들어가기 전

일주일 동안의 휴식 기간이 있었는데, 정말 최선을 다해(!) 열심히(!) 놀았다. ㅋㅋㅋ

이제 다음주 월요일에 부트캠프 시작하고 열심히 달려야하니까

오늘부터 슬슬 그동안 공부했던거 읽어보면서 기억을 되살려보려고 한다...

 

오늘은 프렙 과정에서 배웠던 내용들 중에서 아직 정리를 못한 

Rest Parameter, Spread Operator와 Destructuring에 대해서 정리를 해보려고 한다.

 

 

---

 

 

1. Rest Parameter (나머지 인자들)

Rest Parameter는 나머지 인자들, 혹은 여분의 인자들이라는 뜻이다.

함수를 정의할 때 마지막 인자 앞에 ...을 붙이면

해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만든다.

 

function foo (a, b, ...c) {
  console.log(arguments);
  console.log(Array.isArray(arguments));  // false
  console.log(c); // ['c', 'd', 'e'] - 첫번째 두번째 인자를 제외한 나머지 인자들을 모두 배열로 만든다
  console.log(Array.isArray(c));  // true
}
foo('a', 'b', 'c', 'd', 'e');

 

즉, 위의 예시를 보면 3번째 인자인 c 인자 앞에 ...을 붙였으므로

'c'. 'd', 'e' 이 3개의 항목이 c라는 이름의 배열로 만들어진다.

 

arguments라는 속성이 함수의 모든 파라미터를 유사 배열로 가져오는 것과 비교하면 많은 차이점이 있다.

Rest Parameter는 유사 배열이 아닌 진짜 배열로 만들어주기 때문에 isArray() 함수를 사용하면 true가 출력된다.

 

 

 

 

2. Spread Operator (전개 연산자)

Spread Operator는 말 그대로 배열이나 객체의 항목들을 펼친다는 뜻이다.

 

예제를 보면 이해하기 쉽다.

 

var arr1 = [['a', 'b', 'c'], 2, 3];
var arr2 = [4, 5, 6];

var total = [...arr1, ...arr2];
console.log(total);		// [['a', 'b', 'c'], 2, 3, 4, 5, 6]

 

Spread Operator는 내가 펼치고자 하는 object 앞에 ...을 붙이면 된다.

위에 arr1과 arr2 앞에 각각 ...을 붙여서 total이라는 새로운 배열을 만들었다.

total을 콘솔 창에 출력해보면 arr1과 arr2 배열의 항목들이 total에 펼쳐져있는 것을 확인할 수 있다.

 

...을 사용하여 Rest Parameter와 착각하기 쉽지만

Rest Parameter는 함수를 선언할 때, 함수의 인자 앞에 쓰는 것이고

Spread Operator는 함수를 실행할 때 내가 펼치고자 하는 객체의 앞에 쓰는 것이므로 다르다.

 

 

 

function foo (a, b, c) {
  console.log(a + b + c);
  return a + b + c;
}
foo(...[1, 2, 3]);	// 6

const arr = [4, 5, 6];
foo(...arr);	// 15

 

이번에는 a, b, c라는 3개의 인자를 모두 더하여 리턴하도록 foo 함수를 정의하였다.

 

그리고 foo함수를 실행할 때 인자로 배열을 넘기되, Spread Operator를 사용하였다.

이 경우 배열의 항목들이 spread되어 a, b, c 자리에 1, 2, 3이 각각 들어간다.

그러므로 첫번째 foo 함수를 실행하면 1 + 2 + 3 = 6이 리턴된다.

 

그리고 arr이라는 배열을 정의하고 그 배열을 다시 Spread Operator를 사용하여 foo 함수의 인자로 전달하였다.

이번에는 4, 5, 6이 인자로 들어가므로 4 + 5 + 6 = 15가 리턴된다.

 

 

 

var agentA = {
  codeName: 'oi',
  powerLevel: -999
};
var agentAA = {
  ...agentA,
  codeNum: 123
}
console.log(agentAA);  // {codeName: "oi", powerLevel: -999, codeNum: 123}

 

그렇다면 이번엔 객체에 Spread Operator를 사용해보자.

agentAA 객체 안에 agentA 객체를 Spread하였다.

이렇게 하면 agentA 객체의 항목들이 agentAA에 합쳐져서 출력된다.

 

 

 

 

3. Object Destructuring (객체 구조분해)

Destructuring이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

 

 

var address = {
  city: 'New York',
  state: 'NY',
  zipcode: '10003'
};

var { city, state } = address;
console.log(city + ', ' + state);	// New York, NY

 

위의 예시를 살펴보자. 

var를 쓰고 {} 안에 address 객체의 key값을 넣었다.

그리고 거기에 address 객체를 할당한다.

 

이것은 마치 아래와 같이 적은 것과 같다.

 

var city = address.city;

var state = address.state;

 

 

 

var { city: c, state: s } = address;
console.log(c + ', ' + s);  // New York, NY

 

만약에 address 객체의 key와 다른 이름을 사용하고 싶다면 위와 같이 사용하면 된다.

 

 

 

function logAddress ({ city, state }) {
  console.log(city + ', ' + state);
}
logAddress(address);	// New York, NY

 

Object Destructuring을 이용하여 함수의 인자를 줄 수도 있다.

 

 

 

 

4. Array Destructuring (배열 구조분해)

var numbers = [1, 3, 4, 5, 6];
var [one, three, four, five, six, seven] = numbers;

console.log(one);	// 1
console.log(seven);	// undefined

var [one, , , , six] = numbers;
console.log(six);	// 6

 

배열 구조분해는 위의 예제와 같이

내가 변수에 담고자하는 값의 위치에 변수 이름을 넣으면 된다.

 

 

 

var numbers = [1, 2, 3, 4, 5];
function sum([a, b, c, d]) {
  console.log(a, b, c, d, e);
}
sum(numbers);	// error: e is not defined

 

만약에 위와 같이 구조분해할 때, 4개의 이름만 넣은 경우에

e를 출력하면 e is not defined 에러가 발생한다.

 

 

 

var numbers = [1, 2, 3, 4, 5];
function sum([a, b, ...c]) {
  console.log(a);	// 1
  console.log(b);	// 2
  console.log(c);	// [3, 4, 5]
}
sum(numbers);

 

위의 예제는 Destructuring과 Rest parameter를 이용한 예제이다.

a, b, c는 각각 destructuring에 의해 numbers 배열의 값이 순서대로 할당된다.

이 때, c 인자 앞에 ...이 붙었으므로 3번째 이후 모든 요소들을 배열로 만든다.

 

 

 

const numbers = [ 1, 2, 3, 4, 5 ];

function example (...num) {
  const [ [ a, b, c, d, e ] ] = num;
  return c;
}

const result = example(numbers);	// 3

 

위 예제를 살펴보자. numbers라는 배열을 만들어 1, 2, 3, 4, 5라는 숫자를 할당하였다.

그리고 example 함수는 num이라는 이름으로 rest parameter를 배열로 만들도록 되어있다.

 

example 함수에 numbers 배열을 인자로 전달하고 실행하였으므로

num 인자는 [1, 2, 3, 4, 5]를 인자로 하는 배열을 새로 생성하므로 [[1, 2, 3, 4, 5]]가 된다.

 

이 이중배열을 destructuring 하여 변수를 각각 a, b, c, d, e로 할당하였으므로 c는 3이 된다.