JavaScript 스프레드 문법 알아보기

ES6(ECMAScript 2015) 에서 새로 생긴 spread operator. 

spread operator는 반복 가능한(iterable) 객체에 적용할 수 있는 문법으로,

배열이나 문자열 등을 개별 요소로 분리시킬 수 있다. 

// ES6에서는 배열에 대한 스프레드 문법 사용 가능
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

 

사용하는 이유?🤔

원본배열 또는 객체를 변경하지 않고 새로운 복사본을 만들기 위해서다. 

자바스크립트에서 배열과 객체는 참조에 의해 전달되기 때문에

그냥 대입하면 참조 주소만 복사되어 두 변수가 같은 객체를 가리키게 됨. 

 

스프레드 문법 사용할때 vs 사용안할때 차이점은? 

// 원본 배열
const originalArray = [1, 2, 3];

// 스프레드 문법을 사용하여 배열 복사
const copiedArray = [...originalArray];

// 새로운 배열에 요소 추가
copiedArray.push(4);

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray);   // [1, 2, 3, 4]

 

여기서 copiedArray 는 originalArray 의 복사본이며, 원본 배열을 변경하지 않고 새로운 배열을 만든것이다. 

만약 스프레드 문법을 사용하지 않고 그냥 대입한다면?

 

// 원본 배열
const originalArray = [1, 2, 3];

// 배열을 그냥 대입
const copiedArray = originalArray;

// 새로운 배열에 요소 추가
copiedArray.push(4);

console.log(originalArray); // [1, 2, 3, 4] <-- 원본 배열도 변경됨
console.log(copiedArray);   // [1, 2, 3, 4]

 

이를 통해 데이터를 안전하게 복사하고, 수정할 수 있게된다. 

 

Object 자체는 iterable 객체가 아니며, ES6 에서 아래와 같이 사용하면 에러가 발생함. 

// 객체에 대한 스프레드 문법은 ES6에서는 지원되지 않음
const obj1 = { a: 1, b: 2 }; ❌
// const obj2 = { ...obj1 }; // 이 부분에서 에러 발생

 

객체에서도 스프레드 문법을 사용할수 있게 되었는데, ES2018 에서 새로 추가된 것이라고 한다. 

 

// 원본 객체
const originalObject = { name: 'John', age: 25 };

// 스프레드 문법을 사용하여 객체 복사
const copiedObject = { ...originalObject };

// 새로운 객체에 속성 추가 또는 변경
copiedObject.city = 'New York';

console.log(originalObject); // { name: 'John', age: 25 }
console.log(copiedObject);   // { name: 'John', age: 25, city: 'New York' }

 

Javascript에서 Array와 Object 는 Refernce Type이면서, 동시에 Mutable(가변) Type 이다. 

 

Refernce Type은 값을 저장하는게 아니라, 메모리에 할당된 주소를 저장하는타입. 

따라서 원본 배열 또는 객체를 그대로 복사시, 두 변수가 같은 참조를 가지게 되어 한쪽을 수정하면 다른쪽도 영향을 받게된다. 

 

Mutable Type은 값이 변경 가능하며, 한 변수를 통해 변경된 값을 다른 변수에서도 확인이 가능한것. 

 

스프레드 문법을 사용하면 복사값을 원본과 다른 메모리 주소에 할당하기 때문에 

복사본을 변경해도, 원본에 영향을 주지않는다. 

-> 이것이 Immutability(불변성) 을 유지하는 방법중 하나임! 불변성은 프로그램의 안전성을 높이는데 도움이된다.