📌 나머지 매개변수

🔷 사용법

...

🔷 함수의 인수

◾ 갯수

• JS에서 함수에 넘겨주는 인수의 갯수 제한 → 없음

• 인수 갯수 정해놓고 함수 만들어도

  → 호출할 시 갯수 맞출 필요 x
  

• 아무것도 전달하지 않아도

  • error 발생 x

• 예시 코드
  

    function showName(name){
      console.log(name)
    }
    
    showName('Tom') // 'Tom'
    showName('Tom', 'Mike') // 'Tom' (인수 갯수: 제한 x & 맞출 필요 x)
    showName() // undefined (아무것도 전달 안해도 o)

◾ 얻는 법

1. arguments 로 접근

   • 화살표 함수에 없음

2. 나머지 매개변수

   • 현재 추세 (여러 장점 有)

🔷 arguments

• 함수로 넘어 온 모든 인수에 접근 가능

• 함수 내에서 이용 가능한 지역 변수

• Array 형태의 객체

  • length / index 有

  • 배열의 내장 메서드 無

    (forEach, map)
    

• 예시 코드
  

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

🔷 나머지 매개변수 (Rest parameters)

함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있게 함.

• ES6 사용 가능한 환경이면 → 가급적 ‘나머지 매개변수’ 사용 권장

• 사용법

  ...배열명

  • 배열명 안에 전달된 인수들이 들어감

  • 아무것도 전달하지 않으면

    → 빈 배열 ([])이 나타남
    

  • 배열 메소드 사용 가능

  • 주의 : 항상 마지막 위치에 있어야 함.

• 예시 코드
  

// [기본 예제]

    function showName(...names){
      console.log(names)
    }
    
    showName() // []
    showName('Mike') // [ 'Mike' ]
    showName('Mike', 'Tom') // [ 'Mike', 'Tom' ]

// [예제 2] 전달 받은 모든 수를 더하기

    function add(...numbers){
    	// 방법 1. forEach 활용
      let result = 0;
      numbers.forEach((number)=> result += number)
      console.log(result)
    
    	// 방법 2. reduce 활용
    	console.log(numbers.reduce((prev, cur)=>prev+cur))
    }
    
    add(1,2,3) // 6
    add(1,2,3,4,5,6,7,8,9,10) // 55

// [예제 3] user 객체를 만들어주는 생성자 함수 만들기

    function User(name, age, ...skills){
      this.name = name;
      this.age = age;
      this.skills = skills;
    }
    
    const user1 = new User('Mike', 30, 'html', 'css')
    const user2 = new User('Tom', 20, 'JS', 'React')
    const user3 = new User('Jane', 10, 'English')
    
    console.log(user1)
    // User {
    //   name: 'Mike',
    //   age: 30,
    //   skills: [ 'html', 'css' ],
    //   __proto__: { constructor: ƒ User() }
    // }
    console.log(user2)
    // User {
    //   name: 'Tom',
    //   age: 20,
    //   skills: [ 'JS', 'React' ],
    //   __proto__: { constructor: ƒ User() }
    // }
    console.log(user3)
    // User {
    //   name: 'Jane',
    //   age: 10,
    //   skills: [ 'English' ],
    //   __proto__: { constructor: ƒ User() }
    // }

📌 전개 구문

🔷 배열

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

let result1 = [...arr1, ...arr2]
// ...arr1은 '1, 2, 3'을 풀어서 쓴 것
// ...arr2은 '4, 5, 6'을 풀어서 쓴 것
console.log(result1) // [ 1, 2, 3, 4, 5, 6 ]

// 중간에 사용 가능
let result2 = [0, ...arr1, ...arr2, 7,8,9]
console.log(result2) // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

🔷 객체

let user = {name: 'Mike'}
let mike = {...user, age: 30}

console.log(mike) // { name: 'Mike', age: 30 }

🔷 복제

• Object.assign 필요 x

let arr = [1,2,3]
let arr2 = [...arr] // [ 1, 2, 3 ]

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

user2.name = "Tom"

console.log(user.name) // 'Mike'
console.log(user2.name) // 'Tom'

🔷 예시 코드

// [ 예시 1 ] arr1을 [ 4, 5, 6, 1, 2, 3 ]으로
let arr1 = [1,2,3]
let arr2 = [4,5,6]

// [방법 1] 전개구문 x
arr2.reverse().forEach(num=>arr1.unshift(num))

// [방법 2] 전개구문 활용
arr1 = [...arr2, ...arr1];

console.log(arr1) // [ 4, 5, 6, 1, 2, 3 ]

// [ 예시 2 ] user에 info 넣고 fe, lang을 skill로 만들어서 넣기
let user = {name: "Mike"};
let info = {age: 30};
let fe = ["JS", "React"];
let lang = ["Korean", "English"];

// [방법 1] 전개 구문 없이
user = Object.assign({},user,info,{
  skills: []
})
fe.forEach(item => user.skills.push(item))
lang.forEach(item => user.skills.push(item))

// [방법 2] 전개 구문
user = {
  ...user,
  ...info,
  skills : [...fe, ...lang],
}

console.log(user)
// {
//   name: 'Mike',
//   age: 30,
//   skills: [ 'JS', 'React', 'Korean', 'English' ]
// }

---

참고

• 코딩앙마_자바스크립트 중급