프로그래밍 언어/JavaScript + TypeScript

[JavaScript] 함수 선언문 vs 함수 표현식

2021. 3. 23. 11:46
목차
  1. 1. 문법
  2.  
  3. 2. 함수의 생성 시기
  4.  
  5. 3. 스코프

함수 선언문과 함수 표현식을 사용하는 방식에 혼란이 있어 간략하게 정리를 했다.

 

1. 문법

함수 선언문

독자적인 구문 형태로 존재

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

함수 표현식

표현식이나 구문 구성(syntax construct) 내부에 생성

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

 

2. 함수의 생성 시기

함수 선언문

함수 선언문으로 작성된 함수는 함수 선언문이 정의되기 전에도 호출할 수 있다.

자바스크립트는 스크립트를 실행하기 전 준비단계에서 전역으로 선언된 함수 선언문을 찾고, 그에 해당하는 함수를 생성한다. 즉 "초기화"단계에서 함수를 생성한다.

sayHi("John");

function sayHi(name) {
  console.log(`Hello, ${name}`);
}

함수 표현식

함수 표현식으로 작성된 함수는 실행 흐름이 해당 함수에 도달했을 때부터 사용할 수 있다.

왜냐하면 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성하기 때문이다.

sayHi("John"); // error!
 
let sayHi = function(name) {
  console.log(`Hello, ${name}`); 
}

 

3. 스코프

함수 선언문

엄격모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다.

하지만, 블록 밖에서는 함수에 접근하지 못한다.

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

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

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

} else {

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

}

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

함수 표현식

함수 표현식이 코드 블록 내에 위치하더라도 블록 밖에서 함수에 접근할 수 있다.

변수의 개념으로 생각하면 좀 더 이해하기 쉽다.

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

let welcome;

if (age < 18) {

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

} else {

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

}

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

 


참고

ko.javascript.info/function-expressions

저작자표시 비영리 (새창열림)

'프로그래밍 언어 > JavaScript + TypeScript' 카테고리의 다른 글

[스크랩] JavaScript(ES6), TypeScript, Node.js 개발자를 위한 무료 e북 4가지  (0) 2021.06.22
[You Don't Know JS] 2. 값(Value)  (0) 2021.06.22
[You Don't Know JS] 1. 타입(Type)  (0) 2021.06.21
[JavaScript] 펼침 연산자: spread operator  (0) 2021.02.17
[JavaScript] 변수 선언: const, let, var 차이  (2) 2021.02.14
  1. 1. 문법
  2.  
  3. 2. 함수의 생성 시기
  4.  
  5. 3. 스코프
'프로그래밍 언어/JavaScript + TypeScript' 카테고리의 다른 글
  • [You Don't Know JS] 2. 값(Value)
  • [You Don't Know JS] 1. 타입(Type)
  • [JavaScript] 펼침 연산자: spread operator
  • [JavaScript] 변수 선언: const, let, var 차이
코택
코택
TaxFree코택 님의 블로그입니다.
코택
TaxFree
코택
전체
오늘
어제
  • 분류 전체보기 (369)
    • Spring (29)
      • Spring (18)
      • 스프링 핵심 원리 - 고급편 (11)
    • Spring Batch (4)
    • JPA (4)
    • CS (89)
      • 자료구조 (2)
      • 네트워크 (5)
      • 운영체제 (1)
      • 데이터베이스 (4)
      • SQL (7)
      • 알고리즘 이론 (4)
      • 알고리즘 문제 풀이 (66)
    • 웹 (28)
      • React.js (4)
      • Next.js (1)
      • Node.js (14)
      • FastAPI (4)
      • Django (5)
    • 프로그래밍 언어 (45)
      • Python (5)
      • Java + Kotlin (29)
      • JavaScript + TypeScript (11)
    • 테스트코드 (26)
      • ATDD, 클린 코드 with Spring (4)
      • 이규원의 현실 세상의 TDD: 안정감을 주는 코드.. (20)
    • 인프라 (6)
      • AWS (2)
      • Kubernetes (4)
    • 트러블슈팅 (25)
    • 책 (89)
      • Effective Java (54)
      • Effective Kotlin (14)
      • 도메인 주도 개발 시작하기: DDD 핵심 개념 정.. (11)
      • 웹 프로그래머를 위한 데이터베이스를 지탱하는 기술 (6)
      • 도메인 주도 설계 첫걸음 (4)
    • Git (10)
    • 회고 (5)
    • etc (8)

블로그 메뉴

  • 홈
  • 방명록
  • 관리
  • GitHub
  • LinkedIn

공지사항

  • 스킨 관련

인기 글

태그

  • 브루트포스
  • Shortest Path
  • 백준
  • dp
  • 깊이 우선 탐색
  • atdd
  • Git
  • 그래프 탐색
  • http
  • mysql
  • fastapi
  • 장고
  • BOJ
  • 그래프
  • 파이썬

최근 댓글

최근 글

hELLO · Designed By 정상우.
코택
[JavaScript] 함수 선언문 vs 함수 표현식
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.