[JavaScript] ES6 Rest, Spread Operator

Rest Operator

• 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
• 함수의 인자 중 나머지를 가리킨다.
• 배열의 나머지 인자를 가리킨다.
• 객체의 나머지 필드를 가리킨다.

 

함수 인자 Rest Operator

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

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

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

 

객체 Rest Operator

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

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

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

 

배열 Rest Operator

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]);

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

 

Spread Operator

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

 

객체 Spread Operator

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  // Software Engineer
o3.name // Daniel

• spread operator의 등장 순서에 따라, 객체의 필드가 덮어씌워질 수 있다.
• ...o가 뒤에 등장하면, 기존의 name 필드가 나중에 등장하여 앞의 name: "Tom"을 덮어씌운다.

 

배열 Spread Operator

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)
)  // 1

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