[JS] 자바스크립트 함수 : 함수 선언식 vs 함수 표현식 ?

자바스크립트에서는 함수를 만들 때 사용할 수 있는 여러가지 문법이 있다.

오늘은 함수 선언식과 함수 표현식의 차이점에 대해 알아보자. 🤔

---

 

함수 선언식(Function Declarations) ?

 

함수 선언식은 자주 보게되는 기본적인 형태를 띄고 있다.

함수 선언 또는 함수 정의는 function 키워드로 시작한다.

그 뒤로 함수의 이름을 적고, 중괄호 사이에 함수의 기능?을 적게된다.

 

function handleIt() {
    console.log("I can handle it!!");
}

handleIt();

 

 

함수 표현식 (Function Expression) ?

 

함수를 만드는 다른 방법으로 함수 표현식이 있다.

유연한 자바스크립트의 특징을 활용한 선언 방식으로

함수 표현식은 익명 함수를 만들며, 변수에 값을 대입할 수 있다.

 

const handleIt = function() {
    console.log("I can handle it!!");
};

handleIt();

 

호출의 결과는 동일하다!

하지만 유의해야할 점은 바로 '호이스팅'이다.

즉, 함수를 선언하기 전에 함수를 호출하여 사용이 가능 / 불가능하느냐이다.

 

 

✳︎ 함수 선언식  : 호이스팅의 영향을 받는다.

✳︎ 함수 표현식  : 호이스팅의 영향을 받지않는다.

 

//함수 선언식, 표현식의 호이스팅 여부
//Expected: I can handle it!!

//함수 선언식
handleIt();

function handleIt() {
    console.log("I can handle it!!");
    //Result: I can handle it!!
}

//함수 표현식 
handleIt();

const handleIt = function() {
    console.log("I can handle it!!");
    //Result: TypeError: handleIt is not a function
};

 

함수 표현식의 경우

• 호이스팅의 영향을 받지않는다.
• 가독성이 좋다.
• 클로저, 콜백(다른 함수으 인자)로 사용될 수 있다.
• 즉시 실행 함수(IIFE)로 사용될 수 있다.

 

와 같은 추가적인 장점을 가지고 있다.
이에대해서는 다음 포스팅에서 자세히 알아보자!!!! 🤓

 

 

 

+) 

함수 표현식에서 조금 다른 점이 있다!!!

긴가민가했는데 잘 보면 함수 표현식에는 }; 뒤에 세미콜론을 확인할 수 있다.

이유는 함수 표현식의 경우 코드블록이 아닌 값처럼 취급되어 할당되기 때문이다!

 

출처 : ko.javascript.info

 

---

함수 표현식

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***