[JS Deep Dive] 35장 - 스프레드 문법

1. 스프레드 문법이란?

 

spread 흩뿌리다, 펼치다... 말 그대로 하나로 뭉쳐있는 여러 값들을 펼쳐서 개별적인 값들의 목록으로 만든다는 것이다.

스프레드 문법을 사용할 수 있는 대상은 for-of 문으로 순회할 수 있는 이터러블에 한정된다. 

즉 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. 

 

스프레드 문법의 결과는 값이 아니라서 
변수에 할당할 수 없다. 
따라서 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 
(함수 호출문의 인수목록, 배열 리터럴의 요소 목록, 객체 리터럴의 프로퍼티 목록)

즉! 이티러블한 객체를 나열하는 것일 뿐, 새로운 값을 생성하는 연산자가 아니다.

 

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

• 요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후 이를 함수의 인수 목록으로 전달해야 하는 경우
• 스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것

Rest  문법은 나열되어 있는 인수들을 하나의 배열로 만들어주는 문법 이었다. 
그르니까 묶어주는 거다. 

반면 스프레드 문법은 배열과 같이 뭉쳐져있는 이터러블을 펼쳐서 개별적인 값들의 목록을 만들어주는 것이기 때문에
둘은 반대되는 개념이다. 

 

//spread 사용
const person = { name: "John", age: 30 };
const updatedPerson = { ...person, age: 31, city: "Seoul" };
console.log(updatedPerson); // { name: "John", age: 31, city: "Seoul" }

//rest 사용
const person = { name: "John", age: 30, city: "Seoul" };
const { name, ...rest } = person;
console.log(name);  // "John"
console.log(rest);  // { age: 30, city: "Seoul" }

 

 

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

-concat 

두 가지 배열을 합쳐 하나의 배열을 만들고 싶을 때 -> spread 사용하면 더 굿!

var arr= [1,2].concat([3,4]);;
console.log(arr);

//[1,2,3,4]

//->스프레드문법사용
const arr = [...[1,2], ...[3,4]];
console.log(arr);

//[1,2,3,4]

 

-splice :  

특정 인덱스부터 값을 삭제하거나, 추가하는 것이 가능함... 사용하면 이처럼 객체 자체가 들어간다.

var arr1= [1,4];
var arr2= [2,3];

arr1.splice(1,0,arr2);
//객체 자체가 들어가기 때문에 [1,[2,3],4] 가 됨

// spread 사용하면 펼쳐져서 들어가기 때문에 기대한결과가 나옴

 

const arr1 = [1, 2];
const arr2 = [3, 4];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [ 1, 3, 4, 2 ]

 

3. 배열 복사

-slice 

const arr = [1, 2, 3, 4, 5];

const newarr = arr.slice();
console.log(newarr); // [1, 2, 3, 4, 5]
console.log(arr === newarr); // false

 

var origin = [1,2];
var copy = [...origin];

console.log(copy);
//[1,2]

console.log(copy === origin);
//false

 

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

arguments 객체는 이터러블이면서 유사배열 객체이다. 따라서 스프레드 문법의 대상이 될 수 있다.

2021 이후 Rest 프로퍼티와 함께 스프레드 프로퍼티를 사용하면 객체 리터럴 프로퍼티 목록에서도 스프레드 문법 사용 가능