자바스크립트 스프레드 연산자 활용 및 확장

 

"자바스크립트 스프레드 연산자 ('...')는 배열이나 객체의 요소를 펼쳐서 개별 요소로 분리하거나, 복사할 때 사용하는 유용한 문법입니다."

 

배열에서의 스프레드 연산자

배열 병합

배열을 펼쳐서 개별 요소로 분리하거나 다른 배열과 병합할 때 사용할 수 있습니다.

const arr0 = ['a', 'b', 'c', 'd', 'e'];
const arr1 = ['f', 'g', 'h', 'i', 'j'];

const alphabet = [...arr0, ...arr1];

console.log(alphabet); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

 

 

배열 복사

스프레드 연산자를 사용하여 배열을 복사할 수 있습니다.

const arr = ['a', 'b', 'c', 'd', 'e'];
const arr_copy = [...arr]

arr[0] = 'A';

console.log(arr_copy); // ['a', 'b', 'c', 'd', 'e'] 깊은 복사가 되었음

주의점이 있는데 1차원이라면 복사가 되지만 2차원이면 복사가 아닌 참조가 됩니다.

const arr = ['a', 'b', 'c', 'd', 'e', ['f','g']];
const arr_copy = [...arr]

arr[0] = 'A';
arr[5][0] = 'F';

console.log(arr_copy); // ['a', 'b', 'c', 'd', 'e', ['F', 'g']] 얕은 복사가 되었음

 

객체에서의 스프레드 연산자

객체 병합

객체에서도 스프레드 연산자를 사용하여 병합 할 수 있습니다.

const obj0 = { firstName :'Gil-Dong'};
const obj1 = { lastName : 'Hong'};

const fullName = {...obj0, ...obj1}

console.log(fullName); // {firstName: 'Gil-Dong', lastName: 'Hong'}

 

객체 복사

스프레드 연산자로 객체도 복사가 가능합니다.

const obj = { firstName :'Gil-Dong', lastName : 'Hong'};
const fullName = {... obj}
console.log(fullName); // {firstName: 'Gil-Dong', lastName: 'Hong'}

객체 역시 2차원 배열이나 객체는 복사가 아닌 참조가 됩니다.

const info = { firstName :'Gil-Dong', lastName : 'Hong', arr:[['a'],['b']], obj:{value0:'c', value1:'d'}};
const copy = {... info}

info.lastName = 'Kim';
info.arr[0][0] = 'A';
info.obj.value0 = 'C';

console.log(copy.lastName); // Hong
console.log(copy.arr[0][0]); // 'A'
console.log(copy.obj.value0); // 'C'

 

객체 속성 추가 및 변경

새로운 속성을 추가하거나 기존 속성을 변경할 때도 스프레드 연산자를 사용할 수 있습니다.

const arr0 = { firstName :'Gil-Dong', lastName : 'Hong', age:20};
const arr1 = {...arr0, age:21, country:'Chosun'}

console.log(arr1); // {firstName: 'Gil-Dong', lastName: 'Hong', age: 21, country: 'Chosun'}

 

마무리

스프레드 연산자는 코드를 간결하게 만들어 줍니다.

코드의 가독성이 올라가므로 잘 활용하면 효율적으로 코딩을 할 수 있습니다. 

주의 사항은 1차원 배열이나 객체는 복사가 되지만 2차원 배열이나 객체는 참조가 된다는 점입니다.

이러한 특성을 모르고 개발을 진행하면 나중에 난처한 상황에 직면할 수 있으니 잘 알아두어야 합니다.