자바스크립트 스프레드 연산자

자바스크립트로 코테준비를 하다가 스프레드 연산자 사용이 헷갈려 적었다!

const obj1 = { age: 10, name: '영희' };

const obj2 = { age: 20, name: '철수' };

const objTest1 = { ...obj1, ...obj2 };

const objTest2 = { ...obj1, obj2 };

const arr1 = ['banana'];

const arr2 = ['apple', 'pineApple'];

const arrTest1 = [...arr1, arr2];

const arrTest2 = [...arr1, ...arr2];

console.log(objTest1); // { age: 20, name: '철수' }

console.log(objTest2); // { age: 10, name: '영희', obj2: { age: 20, name: '철수' } }

console.log(arrTest1); // [ 'banana', [ 'apple', 'pineApple' ] ]

console.log(arrTest2); // [ 'banana', 'apple', 'pineApple' ]

객체의 경우 스프레드 연산자를 붙이면 원래 있던 값이 뒤에 있는 값으로 덮어씌워지고
스프레드 연산자를 사용하지 않으면 원래 있던 객체에 변수이름으로 된 key가 생성되어 그 값이 들어가게 된다.

배열의 경우 내가 원래 알고 있던대로 스프레드 연산자를 모두 붙이면 원래 있던 배열에 추가하고자 하는 배열의 값들이 추가되고
스프레드 연산자를 안 붙이면 추가하고자 하는 배열의 값이 아니라 배열 그 자체가 원래 배열에 추가 된다.