1. 개념
전개 연산자(Spread Operator) 는 객체나 배열, 함수의 인자 등 나열형 자료를 연결하거나 추출하는 데 사용되는 문법으로, 배열이나 객체 또는 함수 인자의 표현식 내부에서 배열이나 객체, 변수명 앞에 ... 을 붙여 사용한다.
2. 배열과 함수에서의 사용
전개 연산자가 배열과 함수에서는 어떻게 사용되는지 살펴보자. 쉽다.
2.1 Assign(할당)
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = 당신은 arr1 과 arr2 를 합쳐 [1, 2, 3, 4] 를 만들고 싶다!ES6 등장 이전에는 당신이 목적을 달성하려면 아래의 방식 등을 사용해야 했다.
const arr3 = [arr1[0], arr1[1], arr2[0], arr2[1]]
또는
const arr3 = arr1.concat(arr2)하지만 ES6 의 등장 이후 전개 연산자를 사용하면 다음과 같은 방식으로 arr3 를 만들 수 있다. 전개연산자를 배열 표현식에 사용하면 해당 배열의 요소들이 배열의 껍데기를 벗고 차례대로 할당된다.
const arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4]
const arr4 = [...arr2, ...arr1]
console.log(arr4) // [3, 4, 1, 2]여기서 한 발자국 더 나가면, 아래와 같이 일반적인 배열 표현법에 섞에서 사용할 수 있다는 점에서 유용하다.
const arr5 = ['졸', ...arr1, '려', ...arr2]
console.log(arr5) // ['졸', 1, 2, '려', 3, 4]2.2 Extract(추출)
배열의 요소를 추출해서 특정 변수의 값으로 할당하고 싶은 경우에 활용 가능한 새로운 방식을 살펴보자.
const arr = [ '바람의', '노래를' ,'보면은', '구름의', '춤이', '들려']
// const first = arr[0]
// const second = arr[1]
const [first, second, ...rest] = arr;
console.log(first) // '바람의'
console.log(second) // '노래를'
console.log(rest) // ['보면은', '구름의', '춤이', '들려']주석을 단 부분은 종래에 사용하던 방식이고, ES6 이후에는 ① 배열 표현식을 변수 부분에 때려넣고 ② 그 안에 변수명을 입력하고 ③ 할당값으로 원하는 배열의 이름을 입력하면 ④ 해당 배열을 참조해서 왼쪽에 입력한 변수명이 위치한 인덱스와 동일한 인덱스의 값을 할당한다.
이 때 배열표현식 맨 마지막 자리에 전개 연산자를 사용할 수 있는데, 위 예시에서 ...rest 에는 앞서 할당된 first와 second 를 제외한 나머지 요소들이 추출되어 배열에 담겨 한꺼번에 전달된다.
2.3 Function(함수)
전개 연산자는 함수의 인자(parameter)에도 사용이 가능하다. 아래에서 가볍게 살펴보자.
function arleady2am(first, second, ...args) {
console.log(first);
console.log(second);
console.log(args);
}
arleady2am(1,2,3,4,5);
// 1
// 2
// [3, 4, 5]이렇게 전개 연산자는 요소들을 묶던 끈(배열)을 풀어서 뿌려주는 역할뿐만 아니라, 뿌려져 있던 요소들을 하나의 배열로 묶어서 전달해주기도 한다.
중요한 것은, 전개 연산자가 배열로부터이나 인자들로부터 어떤 요소들을 뽑아내 배열로 담아 전달해주는, 다시말해 extract(추출)하는 용도로 사용될 때에는 반드시 표현식의 가장 마지막에 사용되어야 한다는 점이다.
function thisNotWork(first, ...args, last) { ... }이와 같은 방식으로는 전개 연산자를 사용할 수 없다.
3. 객체에서의 사용
거진 배열에서의 사용과 대동소이하나, key-value의 쌍으로 구성되는 그 특성상 배열과 약간은 남다른 용법도 가진다.
3.1 Assign(할당)
const obj1 = { 이틀째: 1, 택배가:2, 서마포에서: 3, 안움직여: 4 };
const obj2 = { 마음이: 5, 초조해져: 6, 이틀째: 7};
const obj3 = { ...obj1, ...obj2 };
console.log(obj3) // { 이틀째: 7, 택배가:2, 서마포에서: 3, 안움직여: 4 마음이: 5, 초조해져: 6 }할당용법 자체는 대괄호만 중괄호로 바뀌었을 뿐 배열에서와 동일하다. 다만, 위 코드에서 '이틀째' 라는 key가 obj1 과 obj 2에서 중복되어 충돌하는데, 이 때 key 는 먼저 등장한 것이 살아남되 그 값은 뒤에 등장한 key의 value 로 대체된다. 서로 반씩 나눠갖는 공정한 중재.
3.2 Extraction(추출)
const obj1 = { A: 1, B: 2 };
const obj2 = { C: 3, D: 4 };
console.log(obj1.A); // 1
const { A } = obj1;
console.log(A) // 1
const { F } = obj1;
console.log(f) // udefined
위처럼 중괄호 안에 내가 추출하고 싶은 키값을 넣고, 오른쪽에는 그 키값이 담겨있는 객체명을 적으면 해당 키를 변수로 선언하면서 그 키의 값을 할당하는 것과 같은 효과를 얻을 수 있다. 단, 이 경우에는 중괄호 내부의 입력값을 통해 객체의 키에 접근하므로 F처럼 존재하지 않는 키를 넣을 경우 undefined 가 발생한다.
객체에서 키에 접근해 값을 추출하되 변수명은 내가 원하는 이름을 사용하고 싶다면 아래처럼 사용한다.
const obj1 = { A: 1, B: 2 };
const obj2 = { C: 3, obj: obj1 };
const { A : 변수명 } = obj1;
console.log(변수명) // 1
const { obj : 객체도가능 } = obj2;
console.log(객체도가능) // { A: 1, B: 2 }
const { obj : { B : 약간복잡 } } = obj2;
console.log(약간복잡) // 2-
키 옆에 : 을 입력하고 그 오른편에 내가 사용하고 싶은 변수명을 적으면, 그 변수명에 키 A의 값이 담긴다. 다시 요약하자면 ① obj1 객체를 참조해서 ② 키 A 의 값을 ③ 변수명에 할당한다.
-
위와같은 흐름에서 키의 값이 객체라면 그 객체 전체가 할당된다. 이러한 특성은 또 하나의 접근법을 낳는데 이게 처음 볼 때는 조금 복잡할 수 있다.
-
상술한 코드의 세 번째 용법을 보면, obj2 객체를 참조하여 obj 키를 보니 그 값이 객체다. 그 객체에서 B 라는 키에 접근하고 싶은 경우, 다시 중괄호를 열고 B 키에 접근하여 그 값을 약간복잡 이라는 변수에 할당하겠다고 선언할 수 있는 것이다. 어렵게 느껴진다면 두 번째 용법이 아직 덜 익숙해서 그런거니 두 번째 용법을 연습한 후 재도전해보자!
