1. 공부하는 이유
코딩테스트 준비를 하면서 spread operator를 자주 쓴다.
하지만 어렴풋이 알고 있는 느낌이고 누가 물어본다면 깨갱할 게 분명하다.
그전에 확실히 알고 가면 좋아 안좋아? 좋아!
일단 내가 spread operator에 대해 가지고 있는 느낌은 변수에 자체를 건드리는 것이 좋지 않기 때문에(불변성?) 복사해서 사용하는 느낌으로 이해하고 있다. 맞을까? 공부해보자
2. spread operator
먼저 MDN을 통해 spread operator 내용을 정리해본다.
2-1. 함수 호출
1. 함수 매개변수로 배열을 넣을 때
spread operator를 활용하여 배열 그대로 매개변수에 넣어도 각자 자리를 잘 찾아간다.
[예시 1] function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args); ---------------------------------------------- [예시 2] var dateFields = [1970, 0, 1]; // 1 Jan 1970 var d = new Date(...dateFields);
솔직히 관련 데이터들을 배열에 묶어서 관리할 수 있어서 가독성에 좋을 거 같다.
특히 예시2와 같은 부분은 new Date 쓸 때 항상 year, month, day, date 하면서 주욱 길어져 보기 싫었는데, 배열 안에서 모두 선언해놓고 쓸 수 있어서 좋을 거 같다.
2-2. 배열 리터럴과 문자열
여기서 중요한 건 두 가지다.
- 배열의 깊은 복사
- 배열 연결
[예시 1 : 배열 복사] --------------------------------------------------------- const arr = [1,2,3,4] const brr = [1,2,3,4] const arr2 = arr const brr2 = [...brr] . arr2.push(5) brr2.push(5) . console.log(arr, arr2) // [1,2,3,4,5],[1,2,3,4,5] 얕은 복사 console.log(brr, brr2) // [1,2,3,4],[1,2,3,4,5] 깊은 복사 ------------------------------------------------------------ [예시 2 : 배열 연결] console.log([...arr, ...brr]) // [1,2,3,4,5,1,2,3,4]
spread operator를 활용한 배열 연결 방식은 너무 편해서 자주 쓴다.
몰랐다면 꼭꼭꼭꼭꼭꼭 쓰길!
2-3. 객체 리터럴(ECMAScript 2018에서 추가)
이번에는 객체를 연결하는 방식에 대해서 확인하고자 한다.
[예시 1]
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
// => 두 객체의 키가 같을 때 뒤에 붙는 객체의 키에 해당하는 값을 따라간다.
[예시 2]
const merge = ( ...objects ) => ( { ...objects } );
var mergedObj = merge ( {}, obj1, obj2);
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }3. 정리
공부하기 전 spread operator에 대해
"변수에 자체를 건드리는 것이 좋지 않기 때문에(불변성?) 복사해서 사용하는 느낌으로 이해하고 있다."라고 했다.
이 느낌을 조금 수정하면
"spread operator는 배열, 문자열, 객체 등 iterable 객체에 대해
복사 및 연결하는데 탁월하다.
(부연설명)
복사의 경우, 깊은 복사를 하기 때문에 원래 객체를 변화시키지 않느다.
연결의 경우, push, splice, concat과 같은 시스템 메서드를 쓰지 않고도 쉽고 간결하게 객체들을 연결할 수 있다.
"
