[ JavaScript ] 함수 선언식Function Declaration) VS 함수 표현식 (Function Expression)

 

안녕하세요 질서정연입니다 🧶

 

이번시간에는 JS에서 함수 선언식과 함수 표현식의 차이에 대해 알아보겠습니다. 

 

 

함수 선언식 Function Declaration

---

함수 선언 (function declaration) 은 지정된 매개변수 (parameter)를 갖는 함수를 정의 합니다. 

 

 

함수 선언으로 생성된 함수는 Function 객체로 Function 객체의 모든 속성 , 메소드 및 행위 특성을 갖습니다. 

 

기본적으로 함수는 undefined 를 반환하며 다른 값을 반환하기 위해서 함수는 반환값을 지정하는 return 문이 있어야 합니다. 

 

JS를 공부 하다가 hoisting 에 관해서 들어보셨나요? 

 

Hoisting은 JS의 기본 동작이며 선언을 현재 scope의 최상단으로 올려 줍니다. 

 

JS에서 선언은 hoisting 됩니다.

JS에서 변수는 선언 전에 사용 될 수 있습니다.

hoisting 때문에요 !

 

 

Function Declaration 으로 선언된 함수 또한 hoisting 되어 현재 scope의 최상단으로 올라갑니다.

그래서 Function Declaration 으로 함수를 선언 할 경우 선언 전에 함수를 사용할 수 있어요

 

 

함수 표현식 Function Expression

---

함수 표현식 Function Expression은 variable에 함수를 저장하는 방식입니다.

 

또한 화살표함수를 사용하여 함수 이름을 생략 할 수 있습니다. 

 

Function Expression으로 함수가 선언 되면 variable은 함수처럼 사용 될 수 있어요 

 

 

위의 함수를 보시면 함수에 이름이 없는데요, 이를 익명함수 라고 합니다!

variable에 저장되는 함수는 이름이 필요 없어요. 

variable의 이름으로 불려지기 때문입니다.

 

그리고 함수 표현식은 hosting 되지 않기 때문에 Function Declation 처럼 선언 전에 사용하는 것이 불가능 합니다.

 

 

혹시 조건절 안에 (if, for등) function을 넣어주고 싶다면 Function Expression으로 함수를 생성 해 주는 것이 좋습니다.

Function Declaration 으로 선언하면 hoisting되어 조건에 따라 다르게 함수가 생성 되지 않고 

최상단 스코프에서 함수가 선언 되어 의도한 방향과 다르게 함수가 생성되기 때문이에요 

 

정리

---

• 선언된 모든 함수들은 모두 Function 객체입니다. 그래서 Function 객체의 모든 속성 (property) , 메서드 및 행위 특성을 갖습니다.
• Function Declaration 은 함수에 이름이 필요합니다. hoisting 되어 현재스코프의 최상단에서 선언됩니다. 때문에 선언 전에 사용 가능합니다. 
• Function Expression 은 variable에 함수를 저장합니다. 때문에 이름이 없는 함수인 익명 함수를 사용합니다. hoisting되지 않아 선언 전에 사용 불가능 합니다. 

 

또한 선언된 함수는 즉시 실행되지 않습니다.

 

함수들은 나중에 사용하기 위해 저장됩니다. 

 

함수를 실행하기 위해서는 myfunction(1,3) 이런식으로  함수를 호출 해 주어야 합니다! 

 

 

 

간단하게 함수 선언식과 표현식에 대해 알아보았습니다.

 

더 자세한 내용은 MDN과 W3School을 참고하시는 것이 좋을 것 같습니다!

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

함수 - JavaScript | MDN

 

https://www.w3schools.com/js/js_function_definition.asp

JavaScript Function Definitions

 

 

 

 

도움이 되셨으면 좋겠어요 :) 

 

그럼 다들 즐코 ~ 👓