함수 표현식과 함수 선언문의 차이

1. 문법

• 함수 선언문
  • 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.

<script>
// 함수 선언문
function sum(a, b) {
  return a + b;
}
</script>

• 함수 표현식
  • 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다.
  • 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다.

<script>
// 함수 표현식
let sum = function(a, b) {
  return a + b;
};
</script>

---

2. 자바스크립트 엔진이 언제 함수를 생성하는지

• 함수 선언문
  • 선언문이 정의되기 전에도 호출할 수 있습니다.

<script>
// 함수 선언문
sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}
</script>

자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성합니다. 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이죠.

• 함수 표현식
  • 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

<script>
// 함수 표현식
sayHi("John"); // 실행x

let sayHi = function(name) {  
  alert( `Hello, ${name}` );
};
</script>

---

3. 스코프

• 함수 선언문
  • 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.

<script>
let age = prompt("나이를 알려주세요.", 18);

if (age < 18) {
  // 블록 내에서 함수 선언
  function welcome() {
    alert("안녕!");
  }

} else {

  function welcome() {
    alert("안녕하세요!");
  }

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined 실행x
  </script>

<script>
let age = 16; // 16을 저장했다 가정합시다.

if (age < 18) {
  welcome();               // \   (안녕! 실행됨)
                           //  |
  function welcome() {     //  |
    alert("안녕!");        //  |  함수 선언문은 함수가 선언된 블록 내
  }                        //  |  어디에서든 유효합니다
                           //  |
  welcome();               // /   (안녕! 실행됨)

} else {

  function welcome() {
    alert("안녕하세요!");
  }
}

// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.

welcome(); // Error: welcome is not defined 실헹x
</script>

• 함수 표현식
  • if문 밖에 선언한 변수 welcome에 함수 표현식으로 만든 함수를 할당하면 됩니다.

<script>
let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 제대로 동작합니다.

</script>

물음표 연산자 이용해 짧은 코드로 작성

<script>
let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  function() { alert("안녕!"); } :
  function() { alert("안녕하세요!"); };

welcome(); // 제대로 동작합니다.
</script>

함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요?

• 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋습니다.
  함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.
• 함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 let f = function(…) {…}보다 function f(…) {…} 을 찾는 게 더 쉽죠.
• 그러나 어떤 이유로 함수 선언 방식이 적합하지 않거나, (위 예제와 같이) 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용해야 합니다.

---

요약:

함수는 값입니다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있습니다.

• “함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 됩니다.

• “함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 됩니다.

• 함수 선언문은 코드 블록이 실행되기도 전에 처리됩니다. 따라서 블록 내 어디서든 활용 가능합니다.

• 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어집니다.

---

• 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에,
  함수 선언문 방식을 따르는 게 좋습니다.
  함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋습니다.

• 함수 표현식은 함수 선언문을 사용하는게 부적절할 때에 사용하는 것이 좋습니다.