📌 함수 만드는 방법

함수 선언식

function printCodeit(){
  console.log('Codeit')
}

함수 표현식

함수 선언을 변수에 할당하거나 다른 함수의 아규먼트로 활용하면서 마치 함수 선언을 값처럼 활용해서 함수를 만드는 방식

const 함수명 = function(){}

const printCodeit = function(){
  console.log('Codeit')
}

📌 Parameter

👉 파라미터(Parameter) : 함수 소괄호 안어 들어가는 값
👉 아규먼트(Argument) : 함수를 호출하는 부분에서 값을 전달하는 부분

function greeting(name){
  console.log(`Hi! My name is ${name}`)
}

greeting('heesoo')

// 👉 파라미터 - name
// 👉 아규먼트 - 'heesoo'

파라미터 기본값

function greeting(name = 'Codeit', interest){
  console.log(`Hi! My name is ${name}!`)
  console.log(`I like ${interest}!`)
}

greeting('JavaScript');
// Hi! My name is JavaScript!
// I like undefined!

파라미터의 기본값과는 상관없이 아규먼트 순서대로 파라미터 안에 들어가기 때문에 name = 'Codeit'과 같이 기본값으로 지정되는 파라미터는 맨 뒤에 작성하는 것을 권장함

function greeting(name = 'Codeit', interest = 'JavaScript'){
  console.log(`Hi! My name is ${name}!`)
  console.log(`I like ${interest}!`)
}

greeting(undefined, 'Python');

👉 undefined을 아규먼트로 사용하면 파라미터의 기본값을 불러서 사용할 수 있음

📌 Arguments

함수 내부에서 arguments를 사용할 수 있음 = 유사배열 = 배열 메서드 사용 불가

function printArguments(){
  for(const arg of arguments){
    console.log(arg);
  }
}

📌 Rest Parameter

배열이기 때문에 배열의 메소드를 자유롭게 사용 가능
rest parameter를 먼저 사용하고 대체해야 될 경우에 arguments사용을 권장합니다.

function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

📌 Arrow Function

👉 익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식
👉 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있습니다.

함수 정의

const getTwice = (number) => {
  return number * 2;
};

콜백 함수로 활용

myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});