spread 와 rest

 

spread

spread 의 의미 : 펼치다, 퍼뜨리다.

 

예를 들어 이런 객체들이 있고 

 

새 객체를 만들 때 마다 앞의 객체의 속성을 그대로 가지고 만들어 줬다.

 

그러면서 속성은 하나씩 추가가 되었는데

 

이런 식으로 기존의 것을 건들이지 않고 새로운 객체를 만드는 함수가 spread

 

 

놀랍다 매우...

---

그리고 spread 연산자는 배열에도 사용 할 수 있따.

 

---

또한 배열에서 spread 함수를 여러번 사용도 가능!

 

 

ㅗㅜㅑ...

---

rest

 

객체에서의 rest

 

 

rest 안에 head 값을 제외한 값이 들어있다.

rest 는 객체와 배열에서 사용 할 때는 이런식의 비구조화 할당 문법과 함께 사용된다.

주로 사용할 때에는 rest 라는 키워드를 사용, 그치만 추출 값한 값의 이름이 꼭 rest 일 필욘없다.

 

이렇게 해도 된다

 

이어서 body (기본 갑옷) 까지 없앤 새로운 객체를 만들고 싶다면 이렇게 하면 된다.

... 검이랑 갑옷은 없고 투구만..있네..

 

---

배열에서의 rest

 

배열 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣었다.

 

불가능한 경우

이렇게는 할 수 없다.

---

함수 파라미터에서의 rest

 

rest 를 함수파라미터에서 사용 할 수도 있음

예를 들어 파라미터로 넣어준 모든 값들을 합해주는 함수를 만들어주고 싶다고 가정ㄱㄱ

 

function sum(a, b, c, d, e, f, g) {

    let sum = 0;

    if (a) sum += a;
    if (b) sum += b;
    if (c) sum += c;
    if (d) sum += d;
    if (e) sum += e;
    if (f) sum += f;
    if (g) sum += g;

    return sum;
}
const result = sum(1,2,3,4,5,6);
console.log(result);

위의 코드에서 sum 함수는 7개의 파라미터를 받아오는데, 이래에서 사용 할때에는 6개만 넣어줬음

그렇게 되면 g 값이 undefined 가 되서 sum 에 더하는 과정에서 += undefined 하게 되면 결과는 NaN 이 된다

고는 하는데 값은 계산이 되긴함ㅋ

 

---

아무튼 함수의 파라미터가 몇개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용함

 

function sum(...rest) {

    return rest;
}
const result = sum(1,2,3,4,5,6);
console.log(result);

 

결과

짠 6개  result 가 가르키고 있는 것은 함수에서 받아온 파라미터들로 이루어진 배열임

 

이제 파라미터들이 들어가있는 배열을 받았으니까 모두 더해주자

function sum(...rest) {

    return rest.reduce((acc, current) => acc + current, 0) ;
}
const result = sum(1,2,3,4,5,6);
console.log(result);

결과

굳?

 

reduce 함수를 모른다면 여기로!