spread operator 전개 구문

spread operator 는 es6 문법 중 하나이다.

'...변수명' 의 형태로 사용한다.

나머지 매개변수 (rest parameter) 와 생김새는 비슷하지만
사용할 수 있는 위치에 대한 제약이 다르다.
나머지 매개변수는 꼭 맨 뒤에 위치해야 하지만 전개 구문은 어느곳에 있어도 상관이 없다.
{...user, 3, ...color} 이런식도 가능하다.

 

객체 활용

객체에 사용하면 객체를 쉽게 복사할 수 있다.

let user = {
  name : 'jin',
  age : 33
}

let user2 = {...user};
console.log(user2);

let newUser = {
  name : 'jin',
  age : 33,
  favorite : {
    color : 'red',
    animal : 'dog'
  }
}

let newUser2 = {...newUser};
console.log(newUser2);

 

배열 활용

복사하거나 합칠 수 있다.

let number = [1, 2, 3];
let number2 = [4, 5, 6];
console.log(...number);

let newNumber = [...number, ...number2]; //(6) [1, 2, 3, 4, 5, 6]

console.log(Math.max(...number));

 

또한, Math.max() 에 바로 배열을 넣어서 사용할 수 없는데 이때, 전개 구문을 활용하면 쉽게 사용할 수 있다.

 

문자열 활용

문자열을 배열로 변환할 수 있다.

let text = 'Hello world';
console.log([...text]); //(11) ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

이렇게 배열로 변환하기 보다 Array.form 을 사용하는 것이 보편적이다.