[JavaScript] 35. 스프레드 문법

💡 ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(spread) 개별적인 값들의 목록으로 만든다.

 

 🔹 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.

 

💡  스프레드 문법의 결과물은 값으로 사용할 수 X, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능

🔹 함수 호출문의 인수 목록

🔹 배열 리터럴의 요소 목록

🔹 객체 리터럴의 프로퍼티 목록

01. 함수 호출문의 인수 목록에서 사용하는 경우

예제 35-06 에는 apply 메소드를 활용하여 Max 값을 구한 경우이고,

예제 35-07 에는 스프레드 문법을 사용하여 구한 경우인데, 더 간결하고 가독성이 좋은 것을 확인해볼 수 있다.

 

⚠️ Rest 파라미터와 형태가 동일하여 혼동하지 않도록 주의해야 한다.

➡️ Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해

➡️ 스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만들기 위해

02. 배열 리터럴 내부에서 사용하는 경우

1. concat

🔹 2개의 배열을 1개의 배열로 합치는 경우 concat 메서드 사용

2. splice

🔹 배열의 중간에 다른 배열의 요소들을 추가하거나 제거할 때 사용

3. 배열 복사

🔹 배열을 복사하려면 slice 메서드를 사용

➡️ 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성

4. 이터러블을 배열로 변환

🔹 ES5에서 이터러블을 배열로 변환하려면, Function.prototype.apply 또는 Function.prototype.call 메서드를 사용하여 slice 메서드를 호출해야 한다.

➡️ 이터러블와 이터러블이 아닌 유사 배열 객체도 배열로 변환 가능

 

🔹 스프레드 문법을 사용하여 배열로 변환 가능

➡️ 이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없다.

03. 객체 리터럴 내부에서 사용하는 경우

🔹 스프레드 문법의 대상은 이터러블이어야 하지만, 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용한다.

🔹 스프레드 프로퍼티가 제안되기 이전에는 Object.assign 메서드를 사용하여 여러 개의 객체를 병합하거나 특정 프로퍼티를 변경 또는 추가했다.

➡️ 스프레드 프로퍼티는 Object.assign 메서드를 대채할 수 있는 간편한 문법이다.

 

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard