정의
ES6에서 도입된 스프레드 문법 (전개문법) - ...
하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값의 목록으로 만듦
사용할 수 있는 대상
배열, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments 같이 for...of문으로 순회할 수 있는 이터러블에 한정
- 스프레드 문법의 결과는 "값"이 아님
- ...이 값을 생성하는 연산자가 아님을 의미
따라서, 문법의 결과는 변수에 할당할 수 없음
이렇게 에러가 발생
값을 활용할 수 없고 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능
- 함수 호출문의 인수 목록 (인자와 파라미터)
Math.max는 매개변수 개수를 확정할 수 없는 가변 인자 함수
개수가 정해지지 않은 여러 개의 숫자를 인수로 전달받아
인수 중에서 최대값을 반환만약 여기서 배열을 인수로 전달하면 최대값을 반환할 수 없으므로 NaN을 반환
-> 그렇기에, 스프레드 문법을 통해 값을 풀어서 줌
불가 예시
가능 예시
...arr = ...[1, 2, 3]
- 배열의 리터럴 요소 목록 (배열 값들)
- 객체 리터럴의 프로퍼티 목록 (객체의 속성(키)값들)
Rest 파라미터
Rest파라미터는 함수에 전달된 인자들을 배여롤 전달받기 위해 매개변수 앞에 ...을 붙인 것
스프레드 문법은 뭉쳐있는 이터러블을 펼쳐서 개별적인 값의 목록을 만드는 것
따라서, Rest파라미터와 스프레드 문법은 서로 반대의 개념
Concat과 splice
ES5에서 2개의 배열을 1개로 결합할 때 사용됐던 것들
concat
하지만 스프레드 문법을 활용하면 보다 간단히 가능
splice
기대한 결과는 [1, 2, 3, 4] 이지만 당연하게도 [1, [2, 3], 4]가 출력
[2, 3]을 해체하고 주지 않아, arr2 배열 자체가 추가된 것arr1.splice(1, 0, ...arr2);를 활용하여 가능
배열 복사
기존 ES5
여기서 문제 Q1! copy === origin이 false인 이유는? (답 최하단)
지금 내려가면 코딩 성장판이 닫힙니다.
스프레드 문법 활용 (ES6)
이때 원본 배열의 각 요소들은 Shallow copy(얕은 복사) 하여 새로운 복사본을 생성 (slice도 마찬가지)여기서 문제 Q2! Shallow copy와 Deep copy의 차이, 그리고 Deep copy를 하는 방법은? (답 최하단)
지금 내려가면 코딩 성장판이 더더 닫힙니다.
이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없음
여기서 문제 Q3! 유사 배열 객체를 배열로 변경하는 방법은?
지금 내려가면 코딩 성장판을 포기해야합니다.
객체 리터럴 내부에서 사용할 때
스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용
이렇게 스프레드 문법을 활용하여 간단하게 객체들을 병합, 변경, 추가 가능
정답
Q1.
얕은 복사 (Shallow copy)이기 때문,
객체를 직접 대입한다면 참조에 의한 할당 (메모리 주소만 가리키는 화살표)만 복사가 되기 때문에 같은 곳을 가리킴
-> 이럴 경우 한 가지를 수정하면 다른 곳에서 당연히 자동 반영!
Q2.
Deep copy는 데이터 자체를 통째로 복사하기 때문에 복사된 두 객체는 완전히 독립적인 메모리를 차지.
객체에서 value에 적용됨
Deep Copy(깊은 복사) 방법
-
JSON.parse(JSON.stringify(object)) : 문자열로 변환하였다가 다시 객체로 변환하기에 객체에 대한 참조가 사라지는 것
단점 : 1. 성능적으로 느림, 2. function은 undefined로 처리하기 때문에 함수 복사 X -
Lodash - clonedeep 함수 : Lodash를 활용하여 사용, 함수 복사 O
Q3.
ES6부터 도입된 Array.from()을 활용하면 됨
