[javascript] 함수 선언(declaration)과 함수 표현식(expresstion) 언제 사용하면 되나 ?

190409.004.jpeg

출처 : When to use a function declaration vs. a function expression

1. 차이점 - 이름

함수 선언(Function declaration)

function doStuff() {};

함수 표현(Function expresstion)

const doStuff = function() {}
  • ES6 스타일의 무기명 함수
const doStuff = () => {}

2. 차이점 - 호이스팅(Hoisting) - 끌어올리기

정상 동작

객체는 컴파일 타임에 초기화되고 파일의 어느 위치에서나 사용할 수 있습니다

doStuff();
function doStuff() {};

오류 발생

"맨 위에" 있는 함수 및 변수를 사용할 수 있음

doStuff();
const doStuff = () => {};

함수 표현식의 활용 사례

즉시 실행함수

IIFE(immediately invoked function expressions) - 즉시실행 함수 표현식

(function() => {})()



(() => {})()

콜백

mapAction 함수는 Application 어느 곳 에서나 접근 가능해진다.

function mapAction(item) {
  // do stuff to an item
}
array.map(mapAction)

아래 와 같이 사용하면 해당 scope(영역) 에서만 동작하기 때문에 효율적으로 코드를 관리할 수 있다.

array.map(item => { //do stuff to an item })



const mapAction = function(item) {
  // do stuff to an item
}
array.map(mapAction)

맺음말

  • 기본적으로는 함수 표현식 으로 작성하고, 필요시 함수 선언 으로 작성 (개인취향)
  • 단, 함수 선언 으로 작성하면 접근성이 편하니 case by case 형태로 구현한다
H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Logo
Center