JavaScript - Rest, Spread

lsjoon·2022년 12월 17일
0

JavaScript

목록 보기
20/32

ES6 Rest, Spread Operator

Rest Operator

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

구조 분해 할당 (Destructuring assignment)

let {
  address: { state, ...addressRest },
  age,
  name,
  ...rest
} = o;

배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담도록 함.
...rest 를 통해 명시하지 않은 개별 변수 이외의 나머지 값도 담도록 표현


함수 Rest

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 값을 return 한다.


객체 Rest

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

cost { age, name, ...rest} = o;

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


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

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

Spread Operator

묶인 배열 혹은 객체를 각각의 필드로 변환
객체는 또 다른 객체로의 spead를 지원
배열은 또 다른 배열의 인자, 함수의 인자로의 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 			// Software Engineer
o3.name			// Daniel

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


배열 Spread

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의 인자를 넘긴다.

profile
중요한 것은 꺾여도 그냥 하는 마음

0개의 댓글