javascript 스프레드 연산자 알아보기

ES6 신문법, spread operator 알아보기 

---

1. 스프레드 연산자란?

 

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

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

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

 

기본 형태는 세개의 점(...) 으로 이루어져있고, 이를 통해 복사, 병합, 추가 등의 작업을 좀더 간단히 수행할수 있다. 

 

2. 사용하는 이유?

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

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

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

 

스프레드 문법 사용할때 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(불변성) 을 유지하는 방법중 하나임! 불변성은 프로그램의 안전성을 높이는데 도움이된다.