함수 선언문 vs 함수 표현식 차이

함수선언문

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

1. 형태

2.언제 함수를 생성하는지?

함수표현식

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

1. 형태
   선언문 : 문이다. {} 중괄호가 있는 문장, 문. JS에서 일반적으로 함수를 선언하는 방식.
   표현식 : 식이다. 등호가 있는 변수에 할당하는 식.

2.언제 함수를 생성하는지?
선언문 :
어디서든 다 호출 가능. JS 동작 원리 때문인데, JS는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 즉 스크립트 실행전 초기화 단계서 선언방식으로 정의한 함수가 생성된다.

//가능
sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

표현식 :
인터프리터 방식으로 런타임시에 실제 실행 흐름이 해당 함수에 도달 했을때 함수를 생성. 따라서 할당식 이전에는 호출 못한다!

//불가능
sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

3. 스코프
   Strict 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근 가능. 하지만
   블록 밖에서는 함수에 접근 못함.

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

// 조건에 따라 함수를 선언함
if (age < 18) {

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

} else {

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

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

위에선 welcome()은 if 블록 내에서 선언되었기에 밖에서 welcome() 호출이 불가능하다.
아래 예도 동일하다

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

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

} else {

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

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

welcome(); // Error: welcome is not defined

만약 if문 밖에서 welcome 함수를 호출하려하면, 함수 표현식을 사용하면 가능하다
아래 코드는 동작한다.

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

let welcome;

if (age < 18) {

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

} else {

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

}

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

요약

• 함수는 값입니다.
• 따라서 함수도 값처럼 할당, 복사, 선언할 수 있습니다.
• “함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 됩니다.
• “함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 됩니다.
• 함수 선언문은 코드 블록이 실행되기도 전에 처리됩니다. 따라서 블록 내 어디서든 활용 가능합니다.
• 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어집니다.
• 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 함수 선언문 방식을 따르는 게 좋습니다. 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋습니다.

윗글 출처 : https://ko.javascript.info/function-expressions

즉시 실행함수(IIFE)

요즘엔 잘안쓰는데 옛날 소스에서 자꾸 보여서 알아두는게 좋다 ㅠ
함수가 기형적으로 요상하게 생긴,, 뒤에 ()소괄호 한개가 더 있는 형태

(function() {

  let message = "Hello";

  alert(message); // Hello

})();

해석하자면 앞에 function () {} 부분은 단순 함수를 정의한 것이고, 소괄호로 감싸면 함수 선언문이 아닌 표현식으로 인식하도록 속일수 있다. 표현식이 되면 이름이 없어도 괜찮고, 즉시 호출도 가능해진다.
그래서 마지막 괄호는 단순히 math() 같이 함수 호출하는 호출 괄호 문이다.
즉 별거 없이 함수를 표현식 형태로 익명으로 호출하고 호출한 즉시 실행하겠다는 의미이다.

출처 : https://ko.javascript.info/var#ref-349