[JS] 8. 기초 문법: 함수 표현식 & 화살표 함수 (+호이스팅)

1) 함수 표현식

 

함수도 하나의 값이기 때문에 변수나 상수에 대입하여 사용할 수 있습니다. 

 

함수 표현식: 무명 함수를 변수나 상수에 대입하여 사용하는 방식

let 변수명 = function() {함수의 기능};

 

함수를 값으로 취급하는 함수 표현식에서는 함수의 이름을 별도로 명시하지 않아도 됩니다. 

그 대신에 함수를 담고 있는 변수/상수의 이름을 함수의 이름인 것처럼 사용합니다. 

 

//함수 표현식
let hello = function () {
  return "안녕하세요 여러분~!";
};

//함수 선언식
function helloFunct() {
  return "안녕하세요 여러분~!";
}

const helloText = hello();
console.log(helloText);  //'안녕하세요 여러분~!' 출력

 

 

[함수 선언식 VS 함수 표현식]

 

 

자바스크립트에는 호이스팅(hoisting)이라는 메커니즘이 있습니다.

 

자바스크립트 엔진은 코드를 실행하기 전 변수 또는 함수의 선언을 코드의 최상단으로 끌어 올립니다. 실제로 코드의 위치가 최상단으로 이동하는 것은 아니고 변수 또는 함수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮겨진 것처럼 동작합니다. 호이스팅으로 인해 코드 최상단에서 변수/함수가 만들어지기는 하나 해당 시점에 값이 할당되지는 않는다고(초기화되지는 않는다고) 생각하시면 되겠습니다. 

 

따라서 함수 선언식으로 생성된 함수들은 호이스팅이 이루어져 함수를 정의한 선언식보다 함수를 사용하는 함수 호출이 먼저 작성되어도 정상적으로 동작합니다. 반면 함수 표현식으로 생성된 함수들은 호이스팅이 이루어지지 않아 함수 표현식보다 함수 호출이 먼저 작성될 수 없습니다. (= 함수가 직접적으로 선언되어 있는 위치 이전에는 해당 함수에 접근할 수 없습니다.)

 

console.log(helloA());   //정상 실행
console.log(helloB());   //*오류 발생 

//함수 선언식
function helloA() {
  return "안녕하세요 여러분~!";
}

//함수 표현식
let helloB = function () {
  return "안녕하세요 여러분~!";
};

 

---

2) 화살표 함수

 

화살표 함수를 이용하면 함수 표현식을 더 간략하게 작성할 수 있습니다. 

 

함수 표현식과 마찬가지로 화살표 함수 또한 호이스팅의 대상이 아닙니다.

 

//함수 표현식
let helloA = function () {
  return "안녕하세요 여러분~!";
};

//화살표 함수
let helloB = () => {
  return "안녕하세요 여러분~!";
};

let helloC = () => "안녕하세요 여러분~!";