[JS] JavaScript의 최신 기능 (스프레드 연산자, Rest 매개변수)

기본 매개변수

함수를 쓸 때 매개변수가 있으면 그걸 쓰고 없으면 기본 매개변수의 값을 사용한다.
디폴트 매개변수는 여러 개 사용할 수 있지만,

function rollDie(numSides = 6) {

}

스프레드 연산자

스프레드 연산자를 사용하면 배열과 같이 반복 가능한 객체를 전개구문을 사용해 확장한다.

반복 가능한 객체를 펼치면 어떻게 되는가?

배열 펼치기

Math.max(1,3,6,15,25,4,23,99,45,101,143,21,5); //143

const nums = [1,3,6,15,25,4,23,99,45,101,143,21,5];
Math.max(nums); //NaN - not a number
Math.max(...nums); //143 - 배열이 펼쳐지고 인수는 따로 따로 들어가게 된 것이다!

console.log(nums); //[1,3,6,15,25,4,23,99,45,101,143,21,5]
console.log(...nums); //1,3,6,15,25,4,23,99,45,101,143,21,5

//문자열 한 덩어리가 문자 하나하나로 분리됐다!
console.log("hello"); //hello
console.log(..."hello"); //h e l l o

배열 펼쳐서 합하기

const dog = ['모리', '제리'];
const cat = ['나비', '']
const catDog = [...cat, ...dog, '강아지', '고양이'];

객체 리터럴에서 스프레드 연산자 사용하기

객체 리터럴에서는 스프레드 연산자를 사용해서 객체에 있는 특성을 복사해 새로운 객체를 만들 수 있다. 또한 객체 여러 개를 묶어 하나의 객체로 만들 수 있다.

const catDog = {...feline, ...canine}

동일한 특성이 있는 경우, 덮어쓰기가 일어난다.

{...[2,4,6,8]} // 키: 인덱스 / 값: 배열의 원소 {0: 2, 1: 4, 2: 6, 3: 8}
{..."hello"} 

이렇게 자주 작업하지는 않으나 이렇게 할 수 있음.

인수 객체

인수 객체는 배열같은 오브젝트로, 함수로 전달된 인수를 모두 갖는 객체이다.

function sum(){
 console.log(arguments);
}

이 인수 객체는 모든 인수를 자동으로 모아준다. 이 때 화살표 함수 안에서는 arguments객체를 사용할 수 없다. 화살표 함수는 this와 arguments를 생성하지 않기 때문에, 상위 스코프의 arguments를 참조한다.

그러나arguments는 객체타입이므로 배열 메서드를 사용할 수 없다

Rest Parameter

나머지 연산자를 사용하여 남아있는 모든 인수를 모아 하나의 배열로 나타낼 수 있다.

function sum(...nums){
  console.log(nums);
  return nums.reduce((total, el) => total + el);
}

---

배열 구조 분해

const [gold, silver, bronze, ...everyoneElse] = scores;

객체 구조 분해

//01. 기본틀
const firstName = user.firstName
const lastName = user.lastName
const emial = user.email

const { firstName, lastName, email } = user

//02. 변수명을 키 값과 다르게 짓기
const { born : birthYear } = user;

//03. 디폴트값 주기
const {city, state, died = 'N/A'} = user2;

매개변수 구조 분해

function fullName(user){
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

function fullName({ firstName, lastName }){ 
  return `${firstName} ${lastName}`;
}

이런식으로도 이용할 수 있다

movies.filter( (movie) => movie.score >= 90)
movies.filter( ({ score }) => score >= 90)

movies.map(movie => {
  return `${movie.title} (${movie.year}) is rated ${movie.score}`
})
movies.map({title, year, score} => {
  return `${title} (${year}) is rated ${movie.score}`
})