저번 시간에는 this의 특징에 대해서 알아봤습니다. this를 불러내는 방법에 따른 다양한 해석에 대해서 포스팅을 했다면 이번에는 비슷한 두 가지 문법에 대한 포스팅입니다. 바로 spread 연산자와 ...rest 문법으로 이 둘의 쓰임과 차이에 대해서 알아보도록 하겠습니다.
모양은 같지만 기능이 달라요!
spread 연산자와 rest 문법은 ECMAscript 6에 추가된 문법으로 둘다 마침표(.)를 세번 찍어서 사용합니다. reference data type(객체, 배열, 함수)에 사용하는 것 역시도 동일하지만 완전히 다른 기능을 수행하기 때문에 이 둘의 특징을 잘 숙지하고 사용해야 할 필요성이 있습니다.
이렇게 생김새가 비슷한 문법들은 우리를 혼란하게 만드는 요인 중 하나지요...
spread 연산자(spread Operator)
spread 연산자를 순수 우리말로 '펼침연산자' 라고 하며, 영단어로써 spread는 '펼치다', '퍼뜨리다' 라는 의미를 가지고 있습니다. 단어의 뜻 그대로 객체와 배열을 펼칠 수 있습니다.
코드를 통해서 간단한 사용법에 대해 알아보겠습니다.
예시1. spread 연산자 사용방법
let arr = ['hello', 'world'];
console.log(...arr);
예시처럼 spread 연산자는 배열이나 객체 앞에 ...을 입력하면 됩니다. spread 연산자를 사용해서 출력된 위 배열의 값은 문자열로 된 "hello world"로, 배열의 대괄호를 제거하고 남은 "hello", "world" 라는 두 개의 문자열을 펼쳐서 하나의 문자열이 된 것입니다.
1. spread 연산자 - 합치기
spread 연산자를 활용하면 배열과 배열, 객체와 객체끼리 값을 합치는 것이 손쉽게 가능합니다.
코드를 통해서 알아보겠습니다.
예시2. 합치기(객체) I
let lastName = {성 : "Lee"};
let firstName = {이름 : "지은"};
let iu = {...lastName,...firstName};
console.log(iu)
예시와 같이 코드를 입력한 뒤 값을 출력하면
{성: 'Lee', 이름: '지은'}
두개의 객체가 하나로 합쳐진걸 확인 할 수 있습니다. 위 코드의 과정을 살펴보면, spread 연산자를 사용해서 괄호를 없앤 각각의 객체(lastName, firstName)를 iu라는 또 다른 객체에 집어넣어서 값을 하나로 합쳐줬습니다.
이번엔 배열을 합쳐볼까요?
예시3. 합치기(배열) II
let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b];
console.log(c);
두 개의 배열을 합치는 것 역시 예시2와 동일합니다. key와 value의 구분이 따로 없는 배열은 훨씬 더 수월합니다.
예시4. 합치기(중복) III
let 아이유1 = {
이름:"이지은",
};
let 아이유2 = {
이름:"이지금",
};
let iu = {...아이유2, ...아이유1};
console.log(iu);
간혹 두 개의 객체를 합칠 때 key 값의 중복이 발생할 수 있습니다. 위 예제와 같이 두 가지 객체 모두 이름이라는 같은 key를 가지고 있는데 이렇게 중복이 발생하는 경우 뒤에 오는 객체의 key 값이 앞에 오는 key 값 보다 우위를 점하게 됩니다.
따라서 위 예제 코드의 출력 결과는 {이름: "이지은"} 입니다.
2. spread 연산자 - 복사
자바스크립트에서 객체와 배열은 reference 형태의 데이터로 등호를 사용해서 복사하는 것이 불가능합니다. 그래서 이런 reference 형태의 데이터를 복사하려면 spread 연산자를 사용해야 합니다.
예시5. 일반적인 복사
let name = '아이유';
이지은 = name;
console.log(name);
console.log(이지은);
위 예시의 출력 결과는 모두 "아이유"로 같습니다.
이처럼 등호를 사용하면 변수에 저장한 값을 쉽게 복사할 수 있습니다. 하지만 reference data type에 속하는 배열과 객체 그리고 함수의 경우, 위 예시처럼 등호만을 사용해서 값을 복사하는 것이 불가능합니다.
정확히는 "값공유" 라는 이상한 현상이 발생하는데, 이 reference data type에 대해서는 여기에서 다룰 예정이니 모르시는 분들은 참고하세요.
예시6. spread 연산자를 활용한 복사
let 아이유 = {
name:"이지은",
}
let 이지은 = {
...아이유,
age:30,
}
console.log(아이유);
console.log(이지은);
{name: "이지은"}
{name: "이지은", age: 30}
먼저 "아이유"라는 객체를 하나 만들었습니다. 그리고 "이지은"이라는 객체에 아이유 객체와 age:30 이라는 값을 추가해서 새로운 객체를 만들어냈습니다.
여기서 한가지 포인트가 있습니다.
spread 연산자를 활용해서 객체를 복사하면 기존에 먼저 만든 객체(아이유)의 값을 변경하지 않고 새로운 객체(이지은)를 만들었기 때문에, 기존 객체의 값이 그대로 유지된다는 이점이 있습니다. 원본 데이터에 수정이 발생한다면 이는 곳 프로그래밍의 복잡도가 올라가기 때문에 되도록이면 원본 데이터의 수정이 발생하지 않는 것이 좋습니다. 따라서 객체나 배열을 복사하려면 spread 연산자를 활용하는 것을 권장합니다.
정리
spread 연산자의 기능
1. reference data type(객체, 배열, 함수) 자료의 괄호를 없애고 펼쳐주는 기능
2. 객체와 객체, 배열과 배열을 합칠 수 있음
3. reference data type 자료들을 원본 수정없이 복사하는 것이 가능함
다음 글에서 이어집니다.
