자바스크립트 함수선언식 / 함수표현식

1. 자바스크립트의 함수정의 4가지

자바스크립트에서 함수를 정의하는 방법에는 4가지가 있다.

1. 함수 선언식
2. 함수 표현식
3. Function 생성자 함수
4. 화살표 함수 (ES6)

case 1 :함수 선언식

function add(x,y){
  return x+y;
}

case 2: 함수 표현식
var add = function(x,y){
  return x + y;
}

case 3: Function 생성자 함수
var add = new Function('x','y', 'return x+y');

case 4: 화살표 함수(ES6)
var add = (x,y) => x+y;

 

2. 함수선언식과 함수표현식의 차이

1️⃣ 형식

함수선언식

function 함수명() {
  구현 로직
}

 

함수표현식

var 함수명 = function () {
  구현 로직
};

 

2️⃣ 호이스팅

함수선언식: 호이스팅 O

함수표현식: 호이스팅 X

⚠️ 호이스팅: 함수선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징

함수선언식은 호이스팅에 영향을 받지만, 함수표현식은 호이스팅에 영향을 받지 않는다.

 

🤔 문제점

호이스팅에 영향을 받는것은 전역변수에서 함수가 선언된 경우,

자기도 모르게 함수의 중복이 일어나서 코드가 중복되어 꼬이는 현상이 발생할 수 있는 문제가 있다.

 

호이스팅이 안되는 함수표현식의 경우,

함수의 실행이 함수의 선언보다 먼저 일어난 경우에는 에러가 발생한다.

➡️ 함수와 변수를 가급적 코드의 상단부에서 선언함으로써, 호이스팅 스코프꼬임현상 방지가 가능

 

3️⃣ 클로저로 사용

함수선언식: 클로저 사용X

함수표현식: 클로저 사용O

 

 

4️⃣ 콜백으로 사용

함수선언식: 콜백으로 사용X

함수표현식: 콜백으로 사용O

 

함수표현식은 콜백으로 사용되어, 다른 함수의 인자로 넘길 수 있다.

⚠️콜백함수: 다른 함수의 인자로 전달된 함수

 

 

3. 정리

함수선언식	함수표현식
function add(x,y){   return x+y; }	var add = function(x,y){   return x + y; }
호이스팅 O	호이스팅 X
클로저 X 콜백함수로 X	클로저 O 콜백함수로 O

함수표현식이 장점이 더 많은것은 사실이나, 둘중에 어떤것을 쓰더라도 한가지 방식을 고수하는 일관된 코딩 컨벤션의 유지가 가장 중요하다.

 

 

 

 

 

참고자료

캡틴판교 함수 표현식 vs 함수 선언식

junh0328/prepare_frontend_interview