spread operator
... 마침표를 연달아 3개를 찍는게 spread 연산자 이다. 한국어로는 펼침연산자 정도로 설명할 수 있다. 말 그대로 펼침/전개 를 하는 연산자 이다. 괄호를 제거해주는 연산자 정도로 생각하면 쉽다.
아래 예시를 보자.
array에 사용했을 경우
var a = ["Hello", "world!"];
console.log(a);
console.log(...a);
a를 콘솔창에 출력해 봤을 때 첫번째는 array그대로 출력된 것을 볼 수 있고 ... 연산자를 썼을 경우에는 괄호가 제거되어 문자열만 출력된 것을 확인할 수 있다.
문자열에 사용했을 경우
var a = "Hello world!";
console.log(a[0]); // 문자열도 인덱싱 가능
console.log(a);
console.log(...a);
문자열에 ...을 사용하면 문자 하나하나씩 출력되는 것을 확인할 수 있다. 문자열은 위의 예시 코드처럼 a[i] 이렇게 인덱싱이 가능하다. 문자열은 각 문자 하나하나가 원소이고 보이지 않는 괄호가 있는 array라고 생각하면 이해하기 쉬울 것 같다. 예) ['H', 'e', 'l', 'l', 'o', ... , '!' ]
spread operator 활용
array 합치기
var a = [1, 2, 3];
var b = [4, 5];
var c = [...a, ...b];
console.log(c);
이렇게 손쉽게 array를 합칠 수 있다.
array 복사 (Deep copy)
기존의 방법으로는 복사할 수 없다.
var a = [1, 2, 3];
var b = a;
console.log(a);
console.log(b);
a.push(4); // a만 수정하였다.
console.log(a);
console.log(b);
- 자바스크립트의 array는 참조형 변수이다.
- 그래서 변수를 등호로 복사를 하면 각각 값을 갖는것이 아니라 그 변수가 있는 주소를 공유한다.
- 따라서 위의 코드에서는 변수
b에[1, 2, 3]가 담긴것이 아니라[1, 2, 3]가 어디있는지에 대한 주소가 담겨지게 된다. - 변수
a와b는 같은 변수에 대한 주소를 갖고있기 때문에 변수a만 수정하였지만b도 바뀌는 것을 위의 코드에서 확인할 수 있다.
spread operator 이용한 복사
하지만 spread operator 를 사용하여 복사하면 각 변수마다 독립적인 값을 가지게 할 수 있다.
var a = [1, 2, 3];
var b = [...a]; // ... 사용한 복사
console.log(a);
console.log(b);
a.push(4); // a만 수정하였다.
console.log(a);
console.log(b);
...을 이용하여 복사하니 이전의 코드와는 다르게 a를 변경했음에도 b는 바뀌지 않은 것을 확인할 수 있다.
object 합치기 (Deep Copy)
자바스크립트의 object는 array와 마찬가지로 참조형변수이다. 따라서 object를 복사할때도 ...이 필요하다.
var obj1 = { a: 1, b: 2 };
var obj2 = { ...obj1, c: 3 };
console.log(obj2);
object를 기존 object에 복사하다가 값 중복이 일어나면 마지막에 있는 값을 사용한다. 아래 예시 코드를 보자.
var obj1 = { a: 1, b: 2 };
var obj2 = { a: 100, b: 999, ...obj1 };
console.log(obj2);
기존에 a: 100, b: 999 값이 있었지만 나중에 들어온 a: 1, b: 2 값으로 변경된 것을 확인할 수 있다.
함수 파라미터에
3개의 파라미터를 받아 더하여 콘솔창에 출력하는 함수를 정의해보았다.
var a = [10, 20, 30];
function add(a, b, c) {
console.log(a + b + c);
}
add(10, 20, 30); // 기존방법
add(...a); // ...을 이용한 방법
기존 방법은 함수를 사용할때 직접 파라미터를 넣어줬지만 ... 연산자를 사용하면 array를 편리하게 함수의 파라미터로 사용할 수 있다.
