[JS] spread operator - 배열의 복사

 

spread operator (펼침 연산자)

 

펼침연산자는 ... 를 사용한다.

마치 String의 concat이 새로운 공간을 할당받아 이어진 문자열을 만들어 주는것 처럼,

spread operator를 사용하면 새로운 공간을 할당받아 복사된 값을 가진 배열을 만든다.

 

 

1. 배열에서의 스프레드 문법

배열을 복사하거나 다른 배열과 합칠 때 스프레드 문법을 사용할 수 있습니다.

 

배열 복사하기

배열을 복사할 때 스프레드 문법을 사용하면, 원본 배열을 그대로 복사하여 새로운 배열을 만들 수 있습니다.

const arr = [1, 2, 3];
const newArr = [...arr]; // arr을 복사하여 newArr에 할당
console.log(newArr); // [1, 2, 3]

let pre = ["apple", "orange", 100];
let newData = [...pre];
console.log(pre, newData);
console.log(pre === newData);

/* output:
[ 'apple', 'orange', 100 ] [ 'apple', 'orange', 100 ]
false */

참조가 아닌 복사이기 때문에 === 연산자로 비교하면 false가 나온다.

 

배열 합치기

두 배열을 합치고자 할 때도 스프레드 문법을 사용하면 간편하게 결합할 수 있습니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2]; // 두 배열을 합침
console.log(combinedArr); // [1, 2, 3, 4, 5, 6]

let pre = [100, 200, "hello", null];
let newData = [0, 1, 2, 3, ...pre ,4];

console.log(newData);

/* output: 
[ 0, 1, 2, 3, 100, 200, 'hello', null, 4 ]
*/

배열 중간에 다른 배열을 끼워넣고 싶을 때 spread operator를 이용해서 간단하게 합칠 수 있다.

 

2. 객체에서의 스프레드 문법

객체를 복사하거나 결합할 때 스프레드 문법을 사용할 수 있습니다.

 

객체 복사하기

객체를 복사할 때도 스프레드 문법을 사용하여 원본 객체를 새 객체로 복사할 수 있습니다.

const obj = { name: "John", age: 30 };
const newObj = { ...obj }; // obj를 복사하여 newObj에 할당
console.log(newObj); // { name: "John", age: 30 }

 

객체 합치기

두 객체를 합치고자 할 때 스프레드 문법을 사용하면, 쉽게 두 객체를 결합할 수 있습니다.

const obj1 = { name: "John" };
const obj2 = { age: 30 };
const mergedObj = { ...obj1, ...obj2 }; // 두 객체를 합침
console.log(mergedObj); // { name: "John", age: 30 }

 

3. 배열 또는 객체의 일부 값만 선택하기

스프레드 문법을 사용하면 배열이나 객체에서 특정 값만 선택하거나 제외할 수 있습니다.

 

배열에서 일부 제외하기

배열에서 첫 번째 값을 제외하고 나머지 값을 선택할 수 있습니다.

const arr = [1, 2, 3, 4];
const [first, ...rest] = arr; // 첫 번째 값은 first에, 나머지 값은 rest에
console.log(first); // 1
console.log(rest); // [2, 3, 4]

 

객체에서 일부 값만 선택하기

객체에서 특정 속성을 제외하고 나머지 속성만 선택할 수 있습니다.

const obj = { name: "John", age: 30, city: "New York" };
const { city, ...rest } = obj; // city를 제외한 나머지 값은 rest에
console.log(rest); // { name: "John", age: 30 }

 

 

스프레드 문법은 배열이나 객체를 보다 효율적으로 다룰 수 있게 해줍니다. 이를 통해 코드가 간결해지고, 가독성도 향상됩니다. 복사, 결합, 일부 값 제외 등 다양한 상황에서 유용하게 활용할 수 있는 스프레드 문법을 잘 활용하면 더욱 편리한 JavaScript 코드를 작성할 수 있습니다.