17. 함수 표현식

함수는 값이다

JavaScript에서 함수는 값으로 취급됩니다.

이는 다른 프로그래밍 언어와의 중요한 차이점이며, JavaScript를 유연하게 만들어주는 강력한 기능입니다. 함수가 값이라는 점은 함수를 다른 변수에 할당하거나, 함수의 인수로 전달하거나, 반환값으로 사용할 수 있음을 의미합니다.

---

함수를 만드는 방법

JavaScript에서는 함수를 만드는 두 가지 주요 방법이 있습니다.

1. 함수 선언(Function Declaration)

함수를 독립적인 구문으로 정의하는 방식입니다.

이 방식은 코드 실행 전에도 함수가 미리 준비되므로 **호이스팅(hoisting)**됩니다.

// 함수 선언
function sayHi() {
  alert("Hello");
}

sayHi(); // Hello

2. 함수 표현식(Function Expression)

함수를 변수에 할당하는 방식으로, 실행 흐름이 해당 위치에 도달해야 함수가 생성됩니다.

이 방식으로 생성된 함수는 변수에 할당되기 때문에 독립적인 이름이 없습니다. 이를 **익명 함수(Anonymous Function)**라고 부릅니다.

// 함수 표현식
let sayHi = function () {
  alert("Hello");
};

sayHi(); // Hello

---

함수가 값으로 취급되는 예제

1. 함수 출력

함수도 값이므로 변수처럼 다룰 수 있습니다.

예를 들어, 함수의 본문(코드)을 출력할 수 있습니다.

function sayHi() {
  alert("Hello");
}

alert(sayHi); // 함수 코드 자체가 출력됩니다.

sayHi 옆에 괄호 ()를 붙이지 않으면 함수가 호출되지 않고, 함수 코드가 문자형으로 반환됩니다.

---

2. 함수 복사

함수를 변수에 할당하거나 복사할 수 있습니다.

function sayHi() {
  alert("Hello");
}

let func = sayHi; // 함수를 복사
func(); // Hello
sayHi(); // Hello

여기서 func는 sayHi와 동일한 함수를 가리킵니다. 두 변수는 같은 함수를 참조하므로 둘 다 동일하게 작동합니다.

---

콜백 함수

• *콜백 함수(callback function)**는 함수를 다른 함수의 인수로 전달하여, 특정 작업이 완료된 후 호출되도록 만드는 방식입니다.

예제: 콜백 함수 사용하기

1. 기본 구조ask(question, yes, no)라는 함수가 있다고 가정해봅시다.

• question: 사용자에게 물어볼 질문
• yes: "Yes"를 선택했을 때 호출할 함수
• no: "No"를 선택했을 때 호출할 함수

function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

function showOk() {
  alert("동의하셨습니다.");
}

function showCancel() {
  alert("취소 버튼을 누르셨습니다.");
}

// 사용법
ask("동의하십니까?", showOk, showCancel);

1. 익명 함수 사용하기 콜백 함수로 익명 함수를 사용하면 코드가 더 간결해집니다.

ask(
  "동의하십니까?",
  function () {
    alert("동의하셨습니다.");
  },
  function () {
    alert("취소 버튼을 누르셨습니다.");
  }
);

이 방식은 함수의 이름을 정의하지 않아도 되므로 재사용하지 않을 함수에 적합합니다.

---

함수 선언 vs 함수 표현식

함수 선언과 표현식은 사용 목적과 동작 방식에서 차이가 있습니다.

1. 문법 차이

• 함수 선언(Function Declaration)

  function sum(a, b) {
    return a + b;
  }
  

• 함수가 주요 코드 흐름 중간에 독립된 구문으로 존재합니다.
• 함수 표현식(Function Expression)

  let sum = function (a, b) {
    return a + b;
  };
  

• 함수가 표현식의 일부로 생성되며, 값처럼 취급됩니다.

2. 생성 시점

• 함수 선언:

  greet(); // "Hello!"
  
  function greet() {
    console.log("Hello!");
  }
  

• 코드 실행 전에 자바스크립트 엔진이 모든 함수 선언을 처리(호이스팅)하므로, 선언 위치에 상관없이 호출할 수 있습니다.
• 함수 표현식:

  greet(); // ReferenceError: Cannot access 'greet' before initialization
  
  const greet = function () {
    console.log("Hello!");
  };
  

• 실행 흐름이 해당 표현식에 도달해야 함수가 생성되므로, 선언 전에 호출할 수 없습니다.

3. 스코프(범위)

• 함수 선언:

  {
    function greet() {
      console.log("Hello!");
    }
  }
  
  greet(); // ReferenceError: greet is not defined
  

• 블록 스코프 내에서 유효하며, 블록 밖에서는 사용할 수 없습니다.
• 함수 표현식:

  let greet;
  {
    greet = function () {
      console.log("Hello!");
    };
  }
  
  greet(); // "Hello!"
  

• 표현식으로 선언된 변수의 스코프에 따라 사용 가능 여부가 결정됩니다.

4. 호이스팅(hoisting)

• 함수 선언: 선언 위치에 상관없이 호출 가능.
• 함수 표현식: 변수의 선언과 초기화가 끝난 후에만 호출 가능.

---

요약

1. 함수는 값으로 취급됩니다. 따라서 변수에 할당하거나 인수로 전달할 수 있습니다.
2. 함수 생성 방법: 함수 선언(Function Declaration)과 함수 표현식(Function Expression).
3. 함수 선언은 코드 실행 전 미리 처리되어 어디서든 호출할 수 있습니다(호이스팅).
4. 함수 표현식은 실행 흐름이 함수에 도달했을 때 생성되므로 선언 전에 호출할 수 없습니다.
5. 콜백 함수는 다른 함수에 전달되어 특정 작업 완료 후 호출되는 함수입니다.