[JavaScript] 전개 연산자

전개 연산자(spread operator)는 배열이나 객체의 모든 속성을 풀어주는 문법이다. 라고 생각했으나 여기서 문자열도 풀어준다는 사실을 알게되었다. 그런데 여기서 공통점은 모두 for문과 같은 순환하는 함수에서 사용한다는 것이다.
이러한 정보들을 가지고 한 번 더 전개 연산자를 정의를 내려보면 순환가능한 모든것들을 풀어주는 문법이다.

함수의 매개변수 입력하기

console.log('Fixed Value: ', Math.max(1, 3, 5, 7));

const nums = [1, 3, 5, 7];
console.log('Spread Operator: ', Math.max(...nums));

이렇게 비교한 이유는 전개 연산자가 동적으로 함수의 매개변수를 전달할 수 있다는 것을 알기 위해서이다.

배열과 객체 복사하기

const front = ['vue', 'react', 'angular'];
const info = {
  name: '다현',
  age: 20,
  job: 'front-end developer',
};

const copyFront = [...front];
const copyInfo = { ...info };

console.log(copyFront); // [ 'vue', 'react', 'angular' ]
console.log(copyInfo); // { name: '다현', age: 20, job: 'front-end developer' }

전개 연산자를 이용하여 새로운 배열, 객체를 생성했기 때문에 속성을 변경시켜도 원래 배열, 객체에 영향을 주지않는다.

console.log(copyFront === front); // false
console.log(copyInfo === info); // false

copyFront.pop();
copyInfo['job'] = 'back-end developer';

console.log('copyFront: ', copyFront); // copyFront:  [ 'vue', 'react' ]
console.log('copyInfo: ', copyInfo); copyInfo:  { name: '다현', age: 20, job: 'back-end developer' }

두 배열, 객체 합치기

const front = ['vue', 'react', 'angular'];
const back = ['PHP', 'Ruby', 'Python', 'Java', '.Net'];

const mixSkills = [...front, ...back];
console.log(mixSkills); // ['vue', 'react', 'angular', 'PHP', 'Ruby', 'Python', 'Java', '.Net']

const info = {
  name: '다현',
  age: 20,
  job: 'front-end developer',
};
const addInfo = {
  feel: 'Good',
};

const mixInfo = {
  ...info,
  ...addInfo,
};

console.log(mixInfo); // { name: '다현', age: 20, job: 'front-end developer', feel: 'Good' }

중복된 속성명 사용하기

const info = {
  name: '다현',
  age: 20,
  job: 'front-end developer',
};

const mixInfo = {
  ...info,
  age: 88,
  job: 'back-end developer',
};

console.log(mixInfo); //{ name: '다현', age: 88, job: 'back-end developer' }

객체 리터럴에서는 중복된 속성명을 사용할 시 마지막에 반환될 결과는 마지막에 정의한 속성명의 값이 된다.
전개 연산자와 중복된 속성명을 같이 이용하면 이전 객체에 영향을 주지 않고 특정 속성 값만 변경하여 새로운 객체를 만들 수 있다.