ES6 최신 문법

• js에서 함수에 넘겨주는 매개변수의 개수는 제한이 없다.
• 함수의 인수를 얻는 방법
  - 아규먼트로 접근
  • 나머지 매개변수
• 화살표함수에는 아규먼츠가 없다.
• 함수로 넘어 온 모든 인수에 접근할 수 있다.

arguments

• 함수로 넘어 온 모든 인수에 접근 가능하다.
• 함수내에서 이용 가능한 지역변수이다.
• lenght와 index가 있기때문에 배열이라고 생각 할 수 있지만 Array 형태의 객체이다.
• 배열의 내장 메서드는 가지고 있지 않기에 배열 내장 함수는 사용할 수 없다. (forEach, map...)

function showName(name){
	console.log(arguments.lengt)
	console.log(arguments[0])
	console.log(arguments[1])
}
showName('Mike', 'Tom')
//2
//'Mike'
//'Tom'

Rest parameters / 나머지 매개변수

• 정해지지 않은 개수의 수를 배열로 나타날 수 있게 한다.
• 전달된 인수들은 배열로 넣어진다. 아무것도 없으면 빈배열
• 배열로 전달받기에 length를 사용 할 수 있다.
• for문 사용 가능, 배열의 메서드 사용 가능

function User(name, age, ...skills){
    this.name = name
    this.age = age
    this.skills = skills
}

const user1 = new User('mike', 30, 'js', 'html', 'node')
const user2 = new User('tom', 20, 'english', 'javascript')
const user3 = new User('anna', 10, 'css')
console.log('user1: ', user1);
console.log('user2: ', user2);
console.log('user3: ', user3);

• 주의점) 나머지 매개변수는 항상 뒤에 위치시킴

Spread Operator / 전개 연산자

• 객체나 배열의 값을 하나하나 넘기는 용도로 사용 할 수 있다.
• 객체도 사용이 가능하기에 object.assing()을 사용할 필요가 없다!

let arr = [1, 2, 3]
let arr2 = [...arr]
console.log('arr2: ', arr2);

let user = {name: 'mike', age: 30}
let user2 = {...user}
user2.name = 'Tom'
console.log(user2); //user2:  { name: 'Tom', age: 30 }

[배열 사용 시]

//concat 
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [7,8,9]

const arrWrap = arr1.concat(arr2, arr3)

// arr1을 [4,5,6,1,2,3] 으로 만들기
arr2.reverse().forEach((num) => { arr.unshift(num) })
▼
arr1 = [...arr2, ...arr1]

[객체에서 사용]

let user = {name: 'bini'}
let info = {age: 30}
let fe = ['js', 'react']
let lang = ['english', 'korean']

user = Object.assign({}, user, info, {
    skills: [],
})

fe.forEach((item)=>{user.skills.push(item)})
lang.forEach((item)=>{user.skills.push(item)})

user = {
    ...user,
    ...info,
    skills: [...fe, ...lang]
}
console.log('user: ', user);