[TIL] 22.08.31

1. 나머지 매개변수
2. 배열 구조 분해 할당에서 변수명 지정
3. 객체 구조 분해 할당에서 나머지 요소

💡 나머지 매개변수

• 자바스크립트에 es6 변경 사항 중 하나인 나머지 매개변수!

• 언제 쓸까 : 매개변수가 몇 개인지 모를 때 뿐만 아니라 알더라도 나머지 매개변수를 사용하는 것이 효율적이다.

• 아래와 같이 매개변수의 타입을 하나씩 지정해줘도 된다.

const add = (...numbers: [number, number, number]) => {
  return numbers.reduce((curResult, curValue) => {
    	return curResult + curValue;
  }, 0);
};

const addedNumbers = add(5, 10, 2);

• 하지만 따로 지정하지 않고 []를 넣어주면 개수에 상관없이 사용할 수 있다.
• ...numbers는 add()에 인수로 들어온 요소들을 배열에 담아준다.

const add = (...numbers: []) => {
  console.log(numbers) // [1, 2, 3, 4]
  
  return numbers.reduce((curResult, curValue) => {
    	return curResult + curValue;
  }, 0);
};

const addedNumbers = add(1, 2, 3, 4);

💡 배열 구조 분해 할당에서 변수명 지정

• 나머지 배열 요소를 ...으로 묶어서 또 하나의 배열로 만들어 줄 수 있다.

const hobbies = ["Hiking", "Cooking", "Dancing", "Sleeping"]

const [hobby1, hobby2, ...remainingHobbies] = hobbies;
console.log(remainingHobbies) // ["Dancing", "Sleeping"]

💡 객체 구조 분해 할당에서 나머지 요소

• 객체 구조 분해 할당에서 기존 키값을 내가 원하는 변수명으로 바꿔 사용할 수 있다.
• :을 사용해서 지정해주면 된다.

const person = {
  	firstName: 'Lily',
  	age: 20
};

const { firstName: userName, age } = person;

console.log(userName, age); // 'Lily', 20