1. 구조 분해 할당

배열 구조 분해 할당

• 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있게하는 표현식

let [x,y] =[1,2]
let users=['a','b','c']
let [user1,user2,user3]=users
// let user1=users[0]
// let user2=users[1]
// let user3=users[2] 동일
let [a,b,c] = [1,2]
// c = undefined
let [a=3,b=4,c=5] = [1,2] 
// 기본 값 설정가능

let [user1,,user2]=['a','b','c','d']

• 구조분해 내 기본 값 설정 가능
• 구조분해 내 일부 반환 값 무시 가능

let a=1
let b=2
// 할당된 변수 갑승ㄹ 바꾸려면 의미없는 변수를 만들어야함
// b에 a값을 a에 b값으로 바꾸고싶다면?
// a=b하면 기존 a값 사라지기에 c로 임시로 사용
let c= a
a=b
b=c
// 이를 구조분해로 하면
[a,b]=[b,a]

• 구조분해 내 일부 반환 값 무시 가능

객체 구조 분해 할당

• 객체도 구조 분해 할당 동일하지만 순서 상관하지 않아도 된다.

let user = {name:'k',age:1}
//순서 무관 let {age, name} = user
let {name, age} = user 
// 새로운 변수명 할당 가능
let {name:userName, age:ageName} = user
// 기본 값 할당가능 
let {name, age, gender='male' } = user 

• 새로운 변수로 이름으로 할당 할 수 있다.
• 기본 값 할당 가능

2. 나머지 매개변수

• ...을 통해 사용하는데
• 자바스크립트에서 함수에 전달하는 인수의 갯수엔 제약이 없음
• 함수의 인수를 전달하는 방식은 크게 2가지가 존재해 argument와 나머지 매개변수하며 화살표함수는 arguments 사용 불가능

arguments

• 함수에 넘어온 모든 인수에 접근 가능
• 함수 내 이용 가능한 지역 변수
• length / index 존재
• Array 형태의 객체
• 배열의 내장 메서드는 없음(forEach, map)

function showName(name) {
    arguments.length
    arguments[0]
    arguments[1]
}
showName('a','b')

• ES6를 사용하는 환경에선 가급적 나머지 매겨변수를 권장

나머지 매개변수 (rest parameters)

• 정해지지 않은 갯수 인수를 배열로 나타낼 수 있게함
• 아무것도 넘기지 않으면 빈배열

function showNameByRestParams(...names ) {
    names
}
showNameByArguments() // []
showNameByArguments('c') // ['c']

• 나머지 매개 변수를 사용해 전달 받은 모든 수를 더해보자
• 나머지 매개 변수는 항상 마지막에 전달해야할 함

function add(...nums) {
    // [1,2,3]
    let res = 0
    nums.forEach(num => 
        res += num  
    )
    return res
}

3. 전개구문

• 전개구문은 해당 배열을 풀어서 쓸 때 사용
• 배열을 중간 넣고 빼고 병합하는 과정을 쉽게 해준다

let arr1=[1,2]
let arr2=[3,4]
let res = [...arr1 ...arr2]

let user ={name:'a',age:30}
let user2 = {...user}

• 중간에 사용 가능하며 객체도 복제 시 쉽게 사용 가능