▶spread / rest 문법
spread : 주로 배열을 풀어 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용함.
rest : 파라미터를 배열의 형태로 받아서 사용. 파라미터의 개수가 가변적일 때 유용하다.
→ 참고로 reduce는 배열의 각 요소를 순회하며 반복적인 연산을 하는 메서드이다. (하나의 결괏값을 반환함)
→ 남아있는 모든 인자를 하나의 배열에 담는다.
◆ spread 문법은 배열에서 강력한 힘을 발휘한다.
1. 배열 합치기
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // 참고: spread 문법은 기존 배열을 변경하지 않으므로,
// arr1의 값을 바꾸려면 새롭게 할당해야 한다.
2. 배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); // 참고: spread 문법은 기존 배열을 변경하지 않으므로,
// arr2를 수정한다고, arr이 바뀌지 않습니다.
// 질문: arr와 arr2의 값은 각각 무엇인가요?
console.log(arr); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]
◆ 객체에서 사용할 수도 있다.
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요?
console.log(clonedObj); // {foo: 'bar', x: 42}
console.log(mergedObj); // {foo: 'baz', x: 42, y: 13} 중복은 덮어 씌워짐.
◆ 함수에서 나머지 파라미터 받아오기
[참조]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters
>> 퀴즈 풀이
function findBiggestArg(...args) {
let biggestArg = 0;
for (let i = 0; i < args.length; i += 1){
if (biggestArg < args[i]){
biggestArg = args[i]
}
}
return biggestArg
}
let value = findBiggestArg(10, 30, 40, 20)
//value? 40
//findBiggestArg -> 전달인자의 개수와 상관없이 가장 큰 인자를 찾아서 리턴하는 함수
let arr = [10, 30, 40, 20]
let value = Math.max(arr)
//value? NaN
//Math.max는 숫자인 인자들을 비교하여 가장 큰 수를 리턴하는 메서드이므로,
//배열을 전달하여 실행하니 NaN이 나오는 것.
------------------------------------------------------------------------
//위 예시와 비교
let arr = [10, 30, 40, 20]
let value = Math.max(...arr) //Math.max(10, 20, 30, 40)
//value? 40
//잠깐! [...arr]는 또 다름.
//arr의 모든 요소를 "펼쳐"서 newArr에 넣어준 것. 즉, [10, 20, 30, 40]
▶구조분해할당
: spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정
//배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
//객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
//객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있다.
//유용한 예제: 함수에서 객체 분해
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
let user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
whois(user) //jdoe is John
[참조]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
'22.12.15 ~ 23.06.08 코드스테이츠' 카테고리의 다른 글
[JS/브라우저] DOM (0) | 2023.01.06 |
---|---|
JavaScript Koans (0) | 2023.01.04 |
[JavaScript] 클로저 (0) | 2023.01.04 |
[JavaScript] 스코프 (0) | 2023.01.03 |
[JavaScript] 원시 자료형 / 참조 자료형 (0) | 2023.01.02 |
댓글