자바스크립트 함수 선언식과 표현식, 제대로 알고 쓰기

함수 선언식과 표현식의 차이와 활용법

자바스크립트에서의 함수 선언 방식은 ‘함수 선언식’과 ‘함수 표현식’으로 나뉩니다. 외형은 유사하나 호이스팅, 실행 흐름, 스코프, this 바인딩 등에서 다르게 작동합니다. 이 글에서는 이 두 방식을 비교하고, 상황에 맞는 함수를 선언하는 방법을 살펴봅니다.

함수 선언식과 함수 표현식의 기본 형태

함수는 자바스크립트의 핵심 구조이며, 주로 두 가지 문법을 사용합니다.

1) 함수 선언식

함수 선언식은 function 키워드로 이름을 붙여 선언하며, 전체 코드 실행 전에 해석됩니다.

function greet() {  console.log("안녕하세요");}

주로 유틸 함수나 초기화 함수에 사용됩니다.

2) 함수 표현식

함수 표현식은 함수를 변수에 할당하며, 블록 스코프에 묶입니다.

const greet = function () {  console.log("안녕하세요");};

ES6의 화살표 함수도 포함됩니다.

const greet = () => {  console.log("안녕하세요");};

함수 표현식은 콜백 함수와 일회성 함수에 유용하나, 정의되기 전에 사용 불가합니다.

호이스팅 차이

함수 선언식과 표현식은 호이스팅 시 다른 결과를 보여줍니다.

1) 함수 선언식

호이스팅 덕분에 정의 전에도 호출이 가능합니다.

sayHi(); // "안녕하세요" 출력function sayHi() {  console.log("안녕하세요");}

2) 함수 표현식

변수 선언만 호이스팅되며, 함수 값은 실행 시점에 할당됩니다. 따라서 정의 전에 호출하면 오류가 발생합니다.

sayHi(); // ReferenceError 발생const sayHi = function () {  console.log("안녕하세요");};

이 구간을 '일시적인 사각지대(TDZ)'라고 부릅니다.

함수 표현식의 다양한 활용

1) 이름이 있는 함수 표현식

const factorial = function fact(n) {  if (n <= 1) return 1;  return n * fact(n - 1);};

2) 화살표 함수 표현식

화살표 함수는 this 바인딩 방식이 다르며, 간결한 문법을 제공합니다.

const timer = {  count: 0,  start() {    setInterval(() => {      this.count++;      console.log(this.count);    }, 1000);  },};

3) 객체 메서드 정의 시 유의 사항

객체 메서드 정의 시, 화살표 함수는 적합하지 않습니다.

const user = {  name: "아무개",  sayHi() {    console.log(this.name);  },  sayHello: function () {    console.log(this.name);  },  sayBye: () => {    console.log(this.name); // undefined  },};

마치며

함수 선언식과 표현식은 실행 원리에 밀접한 관계가 있으며, 이를 이해하면 코드 가독성과 유지보수성 향상에 도움이 됩니다. 상황에 맞는 문법을 선택하는 것이 중요합니다.