[CS] Spread/Rest Day-16

Spread/Rest 문법, 구조 분해 할당

Spread 문법

function sum(x, y, z){
    return x + y + z;
}
![](https://velog.velcdn.com/images%2Fcptkuk91%2Fpost%2F170c2730-6e1b-4bf0-b8e7-48d8f6ec223e%2Fclout.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는 요소를 펼쳐서 넣어주는 것입니다. 배열 자체를 넣는 것이 아니라 펼쳐서 넣어줍니다.