자바스크립트 함수 유형 정리

• 함수 선언식
• 함수 표현식
• 즉시 실행 함수
• 화살표 함수
• 콜백 함수

 

함수 선언식

함수의 이름을 지정해서 사용하는 방법. 함수 호이스팅이 가능하다.

function printHello (hello) {
  return hello;
}

console.log(printHello("안녕"))
<< 안녕

 

 

함수 표현식

함수의 이름 없이 변수에 담아서 사용하는 방법. 단, 함수를 사용하기 전에 위쪽에서 먼저 선언되어야 사용이 가능하다. 호이스팅이 불가능하다.

let hello = function () {
  return "안녕";
}

const helloText = hello(); // 변수에 담았지만 사용은 함수처럼
console.log(helloText);
<< "안녕"

// 변수에 담지 않고 console.log(hello()); 로 사용도 가능하다

 

 

즉시 실행 함수

일반적인 함수(필요할 때마다 호출해서 실행)가 아니라 한 번만 실행하는 함수의 경우 사용한다.

// 매개변수와 인수는 필요할 때만 넣어주면 된다. 없어도 문제x

(function(매개변수) {
  let userName = prompt(`이름을 입력하세요.`);
  document.write(`안녕하세요 ${userName}님!`);
}(인수:매개변수로 들어가는 것));

 

 

화살표 함수

함수 표현식보다 단순하고 간결하게 사용이 가능하다.

let hello = () => { return "안녕"; }
let hello = () => "안녕";
// 함수의 이름을 지정하지 않아도 되며 출력 결과가 간단할 경우 중괄호를 쓰지 않아도 된다.
// 중괄호를 쓰지 않는다면 return도 작성 x

console.log(hello());
<< "안녕"

 

 

콜백 함수

다른 코드의 매개변수로 함수를 넘겨준 것. 다른 코드의 인자로서 넘겨주는 실행 가능한 코드를 말한다.

 

콜백 함수를 쓰기 전, 아래의 코드와 같이 작성을 하면 function dance()는 사용되지도 못한다.

function checkMood(mood) {
  if (mood === "good") {
    sing();
  } else {
    cry();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("cry");

 

checkMood의 파라미터로 mood말고도 기분이 좋을 때, 기분이 나쁠 때의 파라미터를 추가해 준다.

그리고 함수의 인자를 (mood, 기분 좋을 때 실행할 함수, 기분 나쁠 때 실행할 함수)로 하여 checkMood를 불러오게 되는데, 밑 코드 checkMood 인자의 sing과 cry가 콜백 함수.

인자로 들어가는 함수는 그때그때 상황에 따라 바꿔주면 되고, 이렇게 하면 위 코드에서는 쉽게 사용하지 못했던 dance()를 유동적으로 사용할 수 있다.

function checkMood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    goodCallback();
  } else {
    badCallback();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("bored", sing, cry);