전개 구문(Spread)

전개구문 (Spread)

• Spread의 사전적인 의미는 퍼지다, 확산하다
• 배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법.
• 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성
• 전개 구문식이라고 불림

전개구문 사용방법

Array(배열) 전개구문

const num1 = [1, 2, 3];
const num2 = [10, 11, 12];

const N_arr1 = [...num1, ...num2];
console.log(N_arr1); //[1,2,3,10,11,12]

const N_arr2 = [...num2, ...num1];
console.log(N_arr2); //[10,11,12,1,2,3]

Object(객체) 전개구문

const obj1 = { name: "JJamVa", age: 27 };
const obj2 = { food: "meat", grade: 4 };

const sum1 = { ...obj1, ...obj2 };
console.log(sum1); // {name:"JJamVa", age: 27, food:"meat", grade:4}

const sum2 = { ...obj2, ...obj1 };
console.log(sum2); // {food:"meat", grade:4, name:"JJamVa", age: 27}

caution

Object(객체) 전개구문에서 주의사항

const hello = { name: "Hello" };
const world = { name: "World" };

const hello_world = { ...hello, ...world };
console.log(hello_world); //{name:"World"}

const hello_world = { ...world, ...hello };
console.log(hello_world); //{name:"Hello"}

이와 같이 객체안에 있는 key가 같을 경우 값이 하나만 출력이 된다.
객체의 특성으로 인해 동일한 key값을 가진 경우 공통키 값을 가진 객체 중 맨뒤에 호출된 객체의 value값으로 수정된다.