[JavaScript] 전개연산자 '...'

프로그래스의 다른 사람 풀이를 보면 종종 보이는 '...variable' 이 보인다. JavaScript에 대한 개념이 아직 부족하다보니 '...'이 무엇인지 궁금하여 알아보게 되었다.

---

우선 JavaScript에서 처음 보는 '...'은 전개구문(Spread Syntax)이라고 한다. 

전개구문은 객체 혹은 배열들을 풀어서 펼칠 수 있게 해주는 기능이 있다.

글로 읽고 이해하려니 어렵게 느껴진다. 다음의 예제를 살펴봤다.

 

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

 

보기의 예제를 살펴보면 (...number)을 사용하여 배열값이 사용된 것을 확인할 수 있으며, apply() 대신에 전개구문을 사용하여도 같은 결과가 나온다.

 

이미 존재하는 배열을 사용하여 새로운 배열을 생성하기 위해 push(), splice(), concat() 등의 조합을 사용했지만, 전재구문을 사용하면 다음과 같이 간결한 구문으로 나타낼 수 있다.

 

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

 

추가로 전개구문은 배열을 복사할 때도 사용되며, 이때 복사된 배열의 1 레벨 깊이에서는 깊은 복사로 기존 원시값은 영향을 받지않지만 다차원 배열 / 2 레벨 이상의 깊이를 가진 배열에는 얕은 복사로 원시값에 영향을 준다.

*깊은 복사와 얕은 복사의 자세한 내용은 다음 글에서 알아보겠다.

 

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

---------------------------------------------------------------

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// 이제 배열 a 도 영향을 받음: [[], [2], [3]]

 

다음은 전개구문을 객체에 사용하는 경우이다.

 

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 

참조 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax