나머지 매개변수, 전개구분

인수전달

function showName(name){
	console.log(name)
}
showName('Suri') // 'Suri'
showName('Suri', 'Reo') // 'Suri'

showName() // undefined

함수의 인수를 얻는방법 : arguments(화살표 함수에는 없음), 나머지 매개 변수

arguments

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

function showName(name){
	console.log(arguments.length)
	console.log(arguments[0])
    console.log(arguments[1])
}

showName('Suri', 'Reo')
// 2
// 'Suri'
// 'Reo'

Rest parameters

정해지지 않은 갯수의 인수를 배열로 나타낼 수 있음(arguments는 정해진 갯수만 나옴)
없으면 undefined가 아닌 빈배열 반환

function add(...numbers){
	let result = 0
    numbers.forEach((num) => (result += num))
 	console.log(result) // 6
                        // 55
}
// 아래와 같이 매번 다른 갯수를 인자로 받을때 rest parameter 사용
add(1,2,3)
add(1,2,3,4,5,6,7,8,9,10)

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

    const user1 = new User('Suri', 40, 'js', 'react')
    const user2 = new User('Reo', 25, 'css', 'html')
    const user3 = new User('Bori', 33, 'js', 'html')
    
  console.log(user1) // {name:'Suri', age:40, skills: Array(2)}
  console.log(user2) // {name:'Reo', age:25, skills: Array(2)}
  console.log(user3) // {name:'bori', age:10, skills: Array(2)}
  

주의: 나머지 매개변수는 맨 마지막에 있어야 함!!

전개구문(Spread Syntax)

배열, 객체 모두 가능

let arr1 = [1,2,3]
let arr2 = [4,5,6]

let result1 = [...arr1, ...arr2]
let result2 = [0, ...arr1, ...arr2, 7, 8, 9]

console.log(result1) // [1,2,3,4,5,6]
console.log(result2) // [0,1,2,3,4,5,6,7,8,9]

let user = {name:'Suri'}
let info = {age:30}
let fe = ['JS', 'React']
let lang = ['Korean', 'English']

// spread 안쓰면
user = Object.assign({},
                    user,
                    info,
                    {
						skills : []
					}                        
                    )

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

// spread 쓰면
user = {
	...user,
    ...info,
    skills: [...fe, ...lang]
}