16.함수 업그레이드(default parameter / arguments) - ES6

---

parameter

• JS 특징 중 parameter 가 여러개 있을 경우, 보통 다른 언어들은 나중에 호출 할 때, parameter 를 다 써야 하지만, JS 는 하나만 써도 error 가 나지 않습니다.

function sum(a, b, c) {
  console.log(a)
}

sum(3)

함수의 default parameter

function sum(a, b = 10) { // b자리에 아무것도 안넣을 경우 10을 넣어주세요 라는 default parameter 설정임
  console.log(a + b) 
}

sum(1, 2) // b 자리에 parameter 를 쓰면 그것이 적용되고 default parameter 는 사용되지 않음  

함수의 arguments

• 모든 parameter 를 한꺼번에 싸잡아서 다루고 싶은 경우 array 로 감싸주는 변수에 arguments 를 사용하면 됨

function tmp(a, b, c) {
  console.log(arguments) // array 처럼 출력이 됨
  console.log(arguments[0]) 
  console.log(arguments[1]) 
  console.log(arguments[2]) 
}

tmp(1, 2, 3)

• 🔷 arguments 활용: 입력한 parameter 를 전부 console 창에 출력해주는 함수 만들기

function tmp(a, b, c) {
  for (let i = 0; i < arguments.length; i++) { // parameter 의 개수 만큼 반복문을 출력 할 수 있음
    console.log(arguments[i])
  }
}

tmp(2, 3, 4)

• 🔶 arguments 의 단점: a, b, c, d 가 있는데 특정 parameter 만 출력하고 싶다고 하면 (예로 a, c 만) 그러면 arguments 라는 자료를 쪼개고 array 같이 지정해줘야 되서 복잡할 수 있음

Rest parameter

• 📌 arguments 와 유사 하게 사용할 수 있는 ES6 신 문법 중에 rest parameter 기능이 있습니다.

• 함수안에 들어온 parameter 를 전부 담은 array을 합니다.

function tmp(a, b, ...rest) { // 실행 함수에서 들어 오는 모든 parameter 들을 arguments 와 같이 array 로 만들어 줌
  console.log(rest) // 1, 2 자리는 a, b 가 차지하고 rest 는 나머지 자리에 있는것을 담아서 출력 함
}

tmp(1, 2, 3, 4, 5, 6, 7)

• 🔑 차이점

  • arguments : 모든 parameter 를 [] 에 담아 줍니다.

  • rest parameter : 이 자리에 오는 모든 parameter 를 [] 에 잡아 줍니다. parameter 가 몇개 들어올지 미리 지정안해줘도 됩니다

  • … 이 parameter 안에 있는 경우는 : rest parameter

  • … 이 나머지 경우에 있는 경우는 : spread operator

• 🔷 Q. 모든 parameter 를 하나씩 console 창에 출력해주는 함수 만들기?

function tmp(...rest) {
  for(let x of rest)
  console.log(x)
}

tmp(1, 2, 3, 4)

• 🔶 …rest parameter 사용시 주의점

  • parameter 자리에서 가장 뒤에 써야 합니다.

  • 두번 이상 사용 할 수 없습니다.

연습문제

1.Math.max() 을 사용해서 max 값 구하기

const numbers = [2,3,4,5,6,1,3,2,5,5,4,6,7];

console.log(Math.max(...numbers)) // 출력 값 7

2.글자를 알파벳순으로 정렬해주는 함수를 만들기

function tmp(a) {
  console.log([...a].sort())
}

tmp('bear')

3.단어를 입력하면 알파벳 갯수를 세어주는 함수 만들기

function cnt(a) {
  let arr = ([...a])
  let result = {};
  for (let x of arr) { 
    // 만약 result 에 a 가 있으면 +1 해주고 없으면 a : 1 형태로 출력함
    if (result[x] > 0) {
      result[x] += 1;
    }
    else {
      result[x] = 1;
    }
  }
  console.log(result)
}

cnt('aabbccc')

🔶 🔷 📌 🔑

Reference

• poiemaweb - https://poiemaweb.com/es6-extended-parameter-handling