spread & rest
- ... 을 이용
- spread(펼치다 퍼트리다),
- 기존에 있는 객체에 있는 내용을 참고(복사)로 새로운 객체를 만들 때 사용
- rest는 객체, 배열, 함수의 파라메터에서 사용, 모으는 역할을 함
01. 객체 spread
const slime = {
name : '슬라임'
}
const cuteSlime = {
//name : '슬라임',
...slime, // slime의 정보를 가져 온다
attribute : 'cute'
}
// 이렇게 사용하면 최상위 slime부터 purpleCuteSlime까지 동일한 값을 가지게 된다
const cuteSlime = slime;
cuteSlime.attribute = 'cute';
const purpleCuteSlime = {
//name : '슬라임',
//attribute : 'cute',
...cuteSlime,
color : 'purple'
}
const greenCuteSlime = {
...purpleCuteSlime,
//오버라이딩
color : 'green'
}
// 이렇게 사용하면 최상위 slime부터 purpleCuteSlime까지 동일한 값을 가지게 된다
const purpleCuteSlime = cuteSlime;
purpleCuteSlime.color = 'purple';
console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);
console.log(slime == purpleCuteSlime)
02. 배열 spread
const animals = ['개', '고양이', '참새'];
// const anitherAnimals = animals.concat('비둘기')
const anitherAnimals = [...animals, '비둘기'];
const.log(animals);
const.log(anitherAnimals);
const numbers = [1,2,3,4,5];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers);
03. 객체 rest
const purpleCuteSlime = {
name : '슬라임',
attribute : 'cute',
color : 'purple'
};
const { color, ...rest } =purpleCuteSlime;
//rest의 이름은 아무거나 사용해된다
const { color, ...cuteSlime } =purpleCuteSlime;
console.log(color);
// color를 제외한 name과 attribute가 들어가 있다
console.log(rest);
const { attribute, ...slime } = cuteSlime;
console.log(slime);
04. 배열 rest
const numbers = [0,1,2,3,4,5,6];
//rest는 마지막에 와야 한다
const [one, tow, ...rest] = numbers;
console.log(one);
console.log(two);
console.log(rest);
05. 함수파라메터 rest
function sum(a, b, c, d, e, f, g) {
return a + b + c + d + e + f + g;
}
//한개라도 파라메터가 없으면 실행이 안됨
console.log(sum(1,2,3,4,5,6));
function sum(a, b, c, d, e, f, g) {
let result = 0;
if (a) result += a;
if (b) result += b;
if (c) result += c;
if (d) result += d;
if (e) result += e;
if (f) result += f;
if (g) result += g;
return result;
}
function sum(...rest) {
return rest.reduce((acc, current) => acc + current, 0);
}
06. 함수 인자에서의 spread
// 파라메터는 함수에서 받아오는 것
// x,y 는 파라메터
function subtrackt(x, y){
return x - y;
}
// 인자는 함수를 사용할 때 넣어주는 값
//1,2s는 인자
const result = subtract(1, 2);
const numbers = [1,2];
//const result = subtract(numbers[0], numbers[1]);
const result = subtract(...numbers);
console.log(result);