[CS] Spread/Rest Day-16
Spread/Rest 문법, 구조 분해 할당
Spread 문법
function sum(x, y, z){
return x + y + z;
}
![](https://media.vlpt.us/images/cptkuk91/post/170c2730-6e1b-4bf0-b8e7-48d8f6ec223e/clout.jpeg)
const numbers = [1,2,3];
sum(...numbers);
console.log(sum(...numbers)); // 6을 출력함
주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용됩니다.
Rest 문법
function sum(...theArgs){
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1,2,3)); // 6을 반환
console.log(sum(1,2,3,4)); // 10을 반환
배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.
배열 + spread 함수는 유용합니다.
배열 합치기
let parts = ['body', 'face'];
let sports = ['soccer', ...parts, 'basketball', 'football'];
console.log(sports);
// [ 'soccer', 'body', 'face', 'basketball', 'football' ] 출력
let arr1 = [0,1,2];
let arr2 = [3,4,5];
arr1 = [...arr1, ...arr2];
console.log(arr1); // 0,1,2,3,4,5 출력
기존 배열을 변경하지 않는 (immutable) 입니다. 순서를 바꾸려면 새롭게 할당해야 합니다.
배열 복사
let arr = [1,2,3];
let arr2 = [...arr];
arr2.push(4);
console.log(arr2); // 1,2,3,4 출력
객체에서 사용하기
let obj1 = {foo: 'bar', x: 42};
let obj2 = {foo: 'baz', y: 13};
let clonedObj = {...obj1};
console.log(clonedObj); // foo: 'bar', x: 42 출력
let mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // foo: 'baz', x: 42, y: 13 출력
// ojb1의 foo를 obj2 foo가 덮어 써버림
함수에서 나머지 파라미터 받아오기
function myFun(a,b, ...manyMoreArgs){
console.log("a", a); // one 출력
console.log("b", b); // two 출력
console.log("manyMoreArgs", manyMoreArgs); // 나머지를 전부 배열에 담아서 출력
// [three, four, five, six]
}
myFun("one", "two", "three", "four", "five", "six");
구조 분해 (Destructing)
분해 후 새변수에 할당
배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(...rest); // 30,40,50
객체
const o = {p: 42, q: true};
const {p, q} = o;
console.log(p); // 42 출력
console.log(q); // true 출력
함수에서 객체 분해
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
let user = {
id: 42,
displayName: "KJ",
fullName: {
firstName: "Lee",
lastName: "SJ"
}
};
whois(user); // KJ is Lee
Spread/Rest 문법
function printMaxNum(...args){
console.log(args);
}
printMaxNum(10, 30, 40);
...args와 같은 친구를 rest parameter, rest syntax라고 부릅니다.
남아있는 모든 인자를 하나의 배열에 담기 때문입니다.
printMaxNum(10, 30, 40)에 3개의 인자가 있고 모두 printMaxNums에 전달하여 실행합니다.
따로 매개변수를 지정했다면 모를가 현재는 rest parameter args에 할당됩니다. 남은 모든 매개변수 10, 30, 40모두 할당됩니다.
배열을 Math.max에 적용시키려한다면?
let arr = [10, 30, 40, 20];
let value = Math.max(arr);
console.log(value); // NaN
Math.max는 숫자인 인자들을 비교하여 가장 큰 수를 리턴하는 메소드입니다. 하지만 arr은 배열입니다. 따라서 NaN이 출력됩니다.
spread syntax가 사용됐을 때, 요소를 펼쳐 줍니다.
let arr = [10, 30, 40, 20];
let value = Math.max(...arr);
console.log(value); // 40
...arr을 통해 arr의 모든 요소를 펼쳐서 하나의 값을 여러개의 요소로 펼친 것입니다.
따라서 Math.max에 전달하여 40을 출력할 수 있습니다.
spread syntax는 요소를 펼쳐서 넣어주는 것입니다. (배열을 복사해주는 것이 아닙니다.)
let arr = ['code', 'states'];
let value = [
...arr,
'pre',
...['course', 'student']
]
console.log(value);
// ['code', 'states', 'pre', 'course', 'student'] 가 출력됨
spread syntax는 요소를 펼쳐서 넣어주는 것입니다. 배열 자체를 넣는 것이 아니라 펼쳐서 넣어줍니다.
Author And Source
이 문제에 관하여([CS] Spread/Rest Day-16), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/CS32저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)