js - spread 문법

spread

-ES6에서 도입된 문법
-객체나 배열을 펼치고 새로운 데이터 구조를 만듬
-구조를 확장하거나 복사할때 사용

1) 객체 확장 : 객체 속성을 다른 객체에 추가하거나 병합할 때 사용

const dog = {
	name : 'coby'
};

const dogG = {
 	name : 'coby',
    gender : 'Male'
};

const dogF = {
	name : 'coby',
    gender : 'Male',
    Family : 'suji'
};


console.log(dog);
console.log(dogG);
console.log(dogF);

const dog = {
	name : 'coby'
};

const dogG = {
 	...dog,
    gender : 'Male'
};

const dogF = {
	...dogG,
    Family : 'suji'
};


console.log(dog);
console.log(dogG);
console.log(dogF);

2) 배열 확장 : 배열 내의 요소를 다른 배열에 추가하거나 병합할 때 사용

const mammal = ['dog','cat','hamster'];
const animal =  ['dog','cat','hamster','sparrow','crocodile'];

console.log(mammal);
console.log(animal);

const mammal = ['dog','cat','hamster'];
const animal =  [...mammal,'sparrow','crocodile'];

console.log(mammal);
console.log(animal);

배열 복사: 배열을 복사할 때 spread 문법을 사용해 얕은 복사(shallow copy)를 만들 수 있음

const mammal = ['dog','cat','hamster'];
const mammal2 = [...mammal];

console.log(mammal);
console.log(mammal2);

** 얕은 복사(shallow copy)::객체나 배열을 복사할 때 원본과 복사본이 같은데이터를 참조하는 것. 같은 객체를 참조하는 배열이므로 복사본이 속성을 변경하면 원본에서도 동일한 변경이 됨

함수 호출: 함수의 인자로 배열이나 객체를 전달할 때 spread 문법을 사용해 요소를 분해하거나 객체 속성을 전달할 수 있음

function sum(a,b,c){
    return a + b + c;
}

const numbers =[1,2,3];
const result = sum(...numbers);

console.log(result);
//결과 6

-> sum함수의 인자인 a,b,c를 따로 선언해 주지 않아도 spread문법을 사용해 배열을 인수로 넣어 사용할 수 있음