함수 선언식 vs 함수 표현식

함수 선언식(Function Declaration)

일반적인 프로그래밍 언어에서 사용되는 선언 방법이다.

선(先)이니까 function을 앞에 쓴다... 라고 기억을 해보자 ㅎㅎ

function hello(){
	return 'hello~';
}

hello(); // hello~

 

함수 표현식(Function Expression)

JavaScript에서 함수를 다른 방법으로 생성하는 방법이다.

javaScript는 유연한 친구니까!!

const hello = function () {
  return "hello~";
};

hello(); // hello~

 

그렇다면 함수선언식을 써야해 ? 함수 표현식을 써야해? 라는 의문점이 생긴다.

함수선언식과 함수표현식의 차이점에 대해서 알아봅시다.

 

함수선언식 vs 함수표현식 차이점

- 함수선언식은 호이스팅의 영향을 받지만, 함수표현식은 호이스팅의 영향을 받지 않습니다.

  -> 함수선언식은 호이스팅으로 인해 맨 위로 끌어올려져서 순서에 영향을 받지 않지만,

      함수표현식은 호이스팅 되지 않기 때문에 선언 후에 함수를 사용할 수 있습니다

console.log(declarationHello()); //저는 함수선언식 이에요

console.log(expressionHello()); // Cannot access 'expressionHello' before initialization

function declarationHello() {
  return "저는 함수선언식 이에요";
}

const expressionHello = function () {
  return "저는 함수표현식 이에요";
};

함수선언식으로 선언된 함수는 호이스팅으로 인해 위에서 호출하더라도 사용이 가능하지만,

함수표현식으로 선언된 함수는 선언 전이라 에러가 발생한다.

 

그렇다면 함수 표현식은 왜 사용할까??

함수표현식이 활용 되는 이유를 알아보자

 

함수표현식의 사용

클로져사용, 인자전달

1. 클로저를 사용할 수 있다.(클로저 자세히!)
   
   클로저 미사용 코드
   

   let i;
   
   for (i = 0; i < 10; i++) {
       setTimeout(() => {
           console.log(i);
       }, 100);
       
   }​

   위 코드의 결과는 10이 총 10번 찍힌다.
   그 이유는 이미 위에서 선언된 i의 변수에 for 문의 최종값인 10이 할당되고 console.log 함수가 실행 될 때는 최종 i값을 참조하기 때문입니다.

    클로저 사용 코드

let i;

for (i = 0; i < 10; i++) {
    (function(j){
        setTimeout(() => {
            console.log(j); // 클로저
        }, 100);
    })(i) // IIFE
}

위 코드의 결과는 0 ~ 9 까지의 값이 찍히게 됩니다.
위 코드에서는 IIFE (Immediately Invoked Function Expression : 즉시 실행 함수 표현식) 를 사용하여 클로저 함수를 구현하였습니다.
for문이 실행되면서 i의 값이 익명함수의 매개변수(j) 전달되면서 setTimeout 에서 그 변수를 j로 사용하고 있습니다.

 

2. 인자 전달
함수를 임시 변수에 할당 하지 않고 바로 전달할 수 있습니다.

가장 큰 예로 forEach 문 사용이 있습니다.

const arr = ['apple','banana','kiwi']

arr.forEach(function(data){
    console.log(data);
})

 

수정 해야 할 사항이 있다면 언제든지 댓글 부탁드립니다 ^^.