꿈꾸는 개발자의 블로그
[JavaScript] ES6 Rest, Spread Operator 본문
Rest Operator
함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
함수 인자
function getMin(...rest) { // 인자들을 배열로 담음
return rest.reduce((a, b) =>
a < b ? a : b)
}
getMin(7, 4, 5, 1) // 1
배열
let arr = [1, 2, 3, 4, 5];
let [head, ...tail] = arr; // arr 배열의 첫 번째 원소를 head, 나머지 값들을 tail에 배열로 묶음
객체
let o = {
name: "Daniel",
age: 23,
address: "Street",
job: "Software Engineer",
};
let { age, name, ...rest } = o; // age, name을 제외한 나머지 필드는 rest 변수로 할당
Spread Operator
묶인 배열 혹은 객체를 각각의 필드로 변환한다. 등장 순서에 따라 필드가 덮어씌워 질 수 있다.
배열
let arr1 = [1, 2, 3];
let arr2 = [0, ...arr1, 4, 5]; // [0, 1, 2, 3, 4, 5]
let str1 = 'Spread';
let str2 = [...str1]; // ['S', 'p', 'r', 'e', 'a', 'd']
객체
let o = {
name: "Daniel",
age: 23,
address: "Street",
job: "Software Engineer",
};
let p1 = { ...o, name: "An" } // 기존의 name 필드에 덮어씌움
let p2 = { name: "An", ...o } // 기존의 name 필드가 덮어씌움
console.log(p1.name); // "An"
console.log(p2.name); // "Daniel"
728x90
728x90
'Programming > JavaScript' 카테고리의 다른 글
[JavaScript] this (0) | 2022.07.19 |
---|---|
[JavaScript] map(), filter(), reduce() (0) | 2022.06.28 |
[JavaScript] 문자열 추출하기 : slice(), splice() (0) | 2022.06.19 |
[JavaScript] DOM, Document, Node란? (0) | 2022.04.18 |
[JavaScript] 이벤트 등록 및 삭제하기 : EventListener (0) | 2022.04.18 |
Comments