[JavaScript] 함수 표현식&선언식, 화살표 함수(arrow function)

- 지난 시간

안녕하세요. 지난 시간에는 JavaScript 함수(function)에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

 

[JavaScript] 함수(function) 정의 및 사용법

 

- 개요

지난 시간에 작성한 함수에 방식은 함수 선언식이라고 합니다. 

 

JavaScript에는 선언식 방법이 아닌 표현식과 화살표 함수도 지원합니다. 차근차근 하나씩 설명드리겠습니다.

 

1. 함수 선언식 & 함수 표현식

/**
 * @author Ryan
 * @description 함수 선언문
 */
function sayApeach() {
  console.log("Apeach")
}

/**
 * @author Ryan
 * @description 함수 표현식
 */
const sayRyan = function () {
  console.log("Ryan")
}

sayApeach()
sayRyan()

/**
 * - 실행결과 -
 * Apeach
 * Ryan
 */

 

JavaScript는 일급 객체 언어이기 때문에 변수에 함수를 할당할 수 있다고 지난 시간에 보여드렸습니다.

 

함수 표현식은 함수 이름을 없애고 변수에 함수를 할당해서 사용합니다.

 

실행 결과 두 함수 모두 잘 출력됩니다. 둘 다 사용하는데 문제가 없는데... 아무거나 사용해도 상관이 없지 않을까요?

 

사실 두 함수에 차이는 호출 가능 범위가 다릅니다.

 

• 함수 선언문 : 어디서든 호출이 가능
• 함수 표현식 : 함수를 생성(초기화) 한 코드 아래에서만 호출 가능

 

예시로 바로 보여드리겠습니다.

 

sayApeach()
sayRyan()

/**
 * @author Ryan
 * @description 함수 선언문
 */
function sayApeach() {
  console.log("Apeach")
}

/**
 * - 실행결과 -
 * Apeach
 */

/**
 * @author Ryan
 * @description 함수 표현식
 */
const sayRyan = function () {
  console.log("Ryan")
}

/**
 * - 실행결과 -
 * sayRyan()
 * ReferenceError: Cannot access 'sayRyan' before initialization
 */

 

두 함수 모두 함수를 생성하기 전에 함수를 호출했습니다.

 

결과를 확인하면 sayApeach(함수 선언식)은 Error가 발생하지 않았습니다. 하지만 sayRayn(함수 표현식)은 Error가 발생했습니다.

 

함수 선언식으로 선언된 함수는 사용 가능 범위가 해당 파일에 가장 위로 올라갑니다. 이 부분은 JavaScript에서 호이 스팅(hoisting)이라고 합니다. [호이스팅(hoisting)에 대해서는 다음에 학습하겠습니다.]

 

하지만 함수 표현식은 그렇지 않습니다. 둘에 차이는 이러한 부분이 있습니다.

 

2. 화살표(arrow) 함수

화살표 함수는 함수 표현식과 호이스팅이 동일합니다. 함수를 선언한 뒤 사용해야 Error가 발생하지 않습니다.

 

하지만 사용법이 다르기 때문에 예시로 설명드리겠습니다.

/**
 * @author Ryan
 * @description 중괄호({})가 있는 화살표 함수
 */
const sayApeach = () => {
  console.log("Apeach")
}
/**
 * @author Ryan
 * @description 중괄호({})가 없는 화살표 함수 결과물 바로 리턴
 */
const sayRyan = () => "Ryan"

sayApeach()
console.log(sayRyan())

/**
 * - 실행결과 -
 * Apeach
 * Ryan
 */

화살표 함수는 function 키워드를 제거하고 사용합니다. 또한 중괄호를 제거하면 바로 데이터를 반환합니다.

 

함수 사용법과 동일하기 때문에 엄청 어렵지는 않습니다.

 

이번 시간에는 함수 선언식, 표현식 그리고 화살표 함수에 대해 알아봤습니다.