TIL 42 - spread와 rest
8851 단어 JavaScriptTILJavaScript
Intro
- Spread와 rest 문법은 ES6에서 도입된 문법들이다.
spread
- '펼치다', '퍼뜨리다'
- 이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다.
- spread 문법의 핵심은 기존의 것을 건드리지 않고 새로운 객체를 만들 수 있다는 것이다.
객체
const flower = {
name: '장미'
};
const redFlower = {
...flower,
color: 'red'
}
const leafFlower = {
...redFlower,
leaf: true
}
console.log(flower) // { name: '장미' }
console.log(redFlower) // { name: '장미', color: 'red' }
console.log(leafFlower) // { name: '장미', color: 'red', leaf: true }
배열
const flowers = ['장미', '해바라기', '코스모스'];
const anotherFlowers = [...flowers, '백합' ];
// ['장미', '해바라기', '코스모스', '백합']
rest
- 객체, 배열, 함수의 파라미터에서 사용 가능
객체
const leafFlower = {
name: '장미',
color: 'red',
leaf: true
}
const {color, ...rest} = leafFlower;
// color -> 'red'
// rest -> { name: '장미', leaf: true }
- '펼치다', '퍼뜨리다'
- 이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다.
- spread 문법의 핵심은 기존의 것을 건드리지 않고 새로운 객체를 만들 수 있다는 것이다.
객체
const flower = {
name: '장미'
};
const redFlower = {
...flower,
color: 'red'
}
const leafFlower = {
...redFlower,
leaf: true
}
console.log(flower) // { name: '장미' }
console.log(redFlower) // { name: '장미', color: 'red' }
console.log(leafFlower) // { name: '장미', color: 'red', leaf: true }
배열
const flowers = ['장미', '해바라기', '코스모스'];
const anotherFlowers = [...flowers, '백합' ];
// ['장미', '해바라기', '코스모스', '백합']
rest
- 객체, 배열, 함수의 파라미터에서 사용 가능
객체
const leafFlower = {
name: '장미',
color: 'red',
leaf: true
}
const {color, ...rest} = leafFlower;
// color -> 'red'
// rest -> { name: '장미', leaf: true }
const leafFlower = {
name: '장미',
color: 'red',
leaf: true
}
const {color, ...rest} = leafFlower;
// color -> 'red'
// rest -> { name: '장미', leaf: true }
rest를 사용하면 color를 제외한 name과 leaf 값을 제외한 값이 들어있다. 이 때, 추출한 값의 이름이 꼭 rest일 필요는 없다.
배열
const numbers = [6,7,8,9,10];
const [six, ...rest] = numbers;
console.log(one); // 6
console.log(rest); // [7,8,9,10]
배열 비구조화 할당으로 원하는 값을 밖으로 꺼낼 수 있다.
하지만
const numbers = [6,7,8,9,10];
const [...rest, last] = numbers;
console.log(one); // 6
console.log(rest); // [7,8,9,10]
이렇게는 작성하면 동작하지 않는다.
또 함수의 파라미터가 몇 개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용하다.
sum = (...rest) => {
return rest.reduce((acc, current)=> acc + current, 0);
}
const result = sum(2,4,6,8,10);
console.log(result); // 30
Author And Source
이 문제에 관하여(TIL 42 - spread와 rest), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@silviaoh/TIL-42-spread와-rest저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)