4.6 - ES6 Rest, Spread Operator

Rest Operator 

함수의 인자, 배열 객체 중 나머지 값을 묶어 사용하도록 한다.

• 함수의 인자 중 나머지를 가리킨다.
• 배열의 나머지 인자를 가리킨다.
• 객체의 나머지 필드를 가리킨다. 

함수

function findMin(...rest){
    return rest.reduce((a,b) =>
        a<b ? a : b)
}

findMin(7, 3, 5, 2, 4, 1)

01. 함수 인자 rest operator는 이자들을 배열로 묶는다 -> rest에는 숫자들이 배열로 담긴다.
02. reduce 함수로 min 값을 리턴한다. 

객체

const o = {
    name : "Daniel",
    age : 23,
    address : "Street",
    job : "Software Engineer",
};

const {age, name, ...rest} = o;
findSamePerson(age, name);

08. 객체의 rest operator는 지정된 필드 외의 나머지 필드를 객체로 묶는다. -> age, name을 제외한 나머지 필드는 rest 변수로 할당된다. 

배열

function sumArray(sum, arr){
    if(arr.length === 0) return sum;
    const [head, ...tail] = arr;
    return sumArray(sum + head, tail);
}

sumArray(0, [1, 2, 3, 4, 5]);

03. 배열의 rest operator는 나머지 인자를 다시 배열로 묶는다. -> sumArray의 tail 변수는 첫 번째 원소 head를 제외한 나머지 값들을 다시 배열로 묶는다.
04. tail은 하나씩 줄어들게 되며, 길이가 0이 되면 합을 반환한다.(재귀 함수이다)

---

Spread Operator 

• 묶인 배열 혹은 객체를 각각의 필드로 변환한다.
• 객체는 또 다른 객체로의 spread를 지원한다.
• 배열은 또 다른 배열의 인자, 함수의 인자로의 spread를 지원한다. 

객체

let o = {
    name : "Daniel",
    age : 23,
    address : "Street",
    job : "Software Engineer",
};

let o2 = {...o, name : "Tom", age : 24}

let o3 = {name : "Tom", age : 24, ...o}

o2.job
o3.name

spread operator의 등장 순서에 따라 객체의 필드가 덮어씌워 질 수 있다.

08. ...o가 앞에 등장하였기 때문에 언급된 모든 필드가 덮어씌워졌다.
10. ...o가 뒤에 등장하였기때문에 기존 필드가 나중에 등장한 것으로 덮어씌워지지 않았다. 
12. Software Engineer
13. Daniel

배열

function findMinInObject(o){
    return Math.min(
        ...Object.values(o)
    )
}

let o1 = {a : 1}
let o2 = {b : 3}
let o3 = {c : 7}

findMinInObject(
    mergeObjects(o1, o2, o3)
)

 

02. finMinInObject에서는 객체의 필드들 중 최솟값을 반환한다.
03. Object.values는 객체 값들의 배열을 반환한다. -> 배열 spread operator로 Math.min의 인자를 넘긴다. 
12. mergeObjects는 주어진 객체들의 필드를 합친다.