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

// 함수 선언식
function funcDeclared() {
  return 'this is a function declaration';
}
// 함수 표현식
let funcExpressed = function() {
  return 'this is a function expression';
}

함수 선언식은 function으로 시작한다.  선언식이 let으로 선언해야될 것 같은데 그게 아니다.

반대라고 생각하면 헷갈리지 않을 것 같다.

 

// 함수 선언식
function thisIsDeclared(a, b) {
  let sum = a + b
  return sum
}

// 함수 표현식
let thisIsExpression(word1, word2) {
  let addWords = word1 + word2
  return addWords
}

 

함수 표현식과 선언문의 차이는 자바스크립트 엔진이 언제 함수를 생성하는지에 있습니다.

 

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

 

하지만 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.

 

따라서 전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 어디에서든 사용할 수 있습니다.

 

이게 가능한 이유는 자바스크립트의 내부 알고리즘 때문입니다. 자바스크립트는 스크립트를 실행하기전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성합니다. 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이죠.

 

스크립트는 함수 선언문이 모두 처리된 이후에서야 실행됩니다. 따라서 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것입니다.

 

• 함수는 값입니다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있습니다.
• “함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 됩니다.
• “함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 됩니다.
• 함수 선언문은 코드 블록이 실행되기도 전에 처리됩니다. 따라서 블록 내 어디서든 활용 가능합니다.
• 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어집니다.

함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 함수 선언문 방식을 따르는 게 좋습니다. 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋습니다.

함수 표현식은 함수 선언문을 사용하는게 부적절할 때에 사용하는 것이 좋습니다.