[JS] 알아두면 좋은 JS개념 spread와 rest 전개구문

spread와 rest는 어느곳에 쓰이는가?

spread : 객체나 배열의 내부나 함수를 호출해주는 인자에서 사용합니다.
rest : (destructuring으로 통해 값을 받아오는) 객체나 배열의 받아오는 변수나 (값을 받아오는) 함수 파라미터에서 주로 쓰입니다.

Spread

let Hong = {
    name : "홍길동",
    job : "도적",
    age : "29"
}

let Kim = {
    name : "김영희",
    job : "보험사 직원",
    age : "29"
}

let Hong2 = {
    father : {...Hong}, // Hong 객체의 속성들을 한줄로 모두 받아옴
    mother : {...Kim}, // Kim 객체의 속성들을 한줄로 모두 받아옴
    name : "홍철수",
    age : "6"
}

console.log(Hong2);
/*
{
  father: { name: '홍길동', job: '도적', age: '29' },
  mother: { name: '김영희', job: '보험사 직원', age: '29' },
  name: '홍철수',
  age: '6'
}
*/

위 코드처럼 이미 선언된 객체가 있고 그 객체를 다른 객체의 속성에 넣어야할 상황이 생긴다면
...ObjectName으로 속성에 선언 해주면 그 객체의 속성들을 모두 받아올 수 있습니다.
새로운 객체를 만들 때 다른 객체의 속성을 받아야할 일 있다면 용이하다고 말할 수 있습니다.

let oddNum = [1, 3, 5, 7, 9];
let evenNum = [2, 4, 6 ,8 ,10];

let allNum = [...oddNum, ...evenNum];

console.log(allNum);
/*
-출력-
[
  1, 3, 5, 7,  9,
  2, 4, 6, 8, 10
]
*/

물론 배열에서도 사용가능합니다.

Rest

let oddNum = [1, 3, 5, 7, 9];
let evenNum = [2, 4, 6 ,8 ,10];

let allNum = [...oddNum, ...evenNum];

let sum = (...rest) => { // 간단한 sum 함수 만들기
    let res = 0;
    for(i = 0; i < rest.length; i++) {
        res += rest[i];
    }
    return res;
}

console.log(sum(...allNum)) // 55
console.log(sum(1, 2, 5)); // 8
console.log(sum(1, 2, 5, "2")); // 82

sum(...allNum) spread형식으로 넘겨준 이유는 함수에서 rest로 받게 되면 배열로 받게 되어 배열이 배열로 감싸져서
값이 이상하게 나오기 때문에 배열의 값을 넘겨주기 위해 spread식으로 매개변수를 준 것입니다.

함수에서 매개변수로 ...변수이름로 받게 되면 매개변수가 몇개가 되어도 배열로 받게 됩니다.
문자열은 아스키코드로 변환되어 더해져서 82라는 값을 뱉는것을 알 수 있습니다.
이런식으로 매개변수가 무한인 함수도 간단히 만들 수 있습니다.

오늘도 포스팅을 읽어주셔서 감사합니다!