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

트릴로니·2021년 11월 20일

자바스크립트

목록 보기
7/31
  1. 자바스크립트 엔진이 언제 함수를 생성 하는지

함수표현식은 스크립트가 위에서 아래로 실행되다가 함수 표현식을 담은 변수를 만다고 함수 표현식에 도달했을 때 비로소 함수가 만들어집니다. 그러므로 그 후부터 해당 함수를 호출하거나 할당하는 등 해당 함수를 사용할 수 있습니다.

함수 선언문은 자바스크립트를 실행하기 전 준비단계에서 스크립트 내에 선언된 모든 함수 선언문을 찾고 생성합니다.(호이스팅) 이미 스크립트가 실행되기 전에 모든 함수 선언문은 생성된 상태이죠. 그래서 스크립트 어디에서든 함수 선언문으로 선언한 함수에 접근할 수 있습니다.
자바스크립트를 짤 때 함수 호출이 함수 선언문보다 먼저 나오게 되었을 때도 오류가 나지 않고 정상적으로 실행되는 것을 확인 할 수 있습니다.

함수 표현식은 호이스팅에 영향을 받지 않으므로 클로저로 사용되거나 콜백으로 사용될 때 함수 선언식보다 유용합니다.

2.스코프 차이
함수 선언문이 블록내에 위치하면 블록 내에서는 어디서든 해당 함수에 접근할 수 있지만 블록 밖에서는 함수에 접근하지 못합니다.
함수 표현식은 블록 밖에서도 함수에 접근할 수 있습니다.
다음과 같이 let으로 chosenNum를 변수 선언해주고 함수를 할당하면 chosenNum()을 블록 밖에서 사용해도 코드가 동작합니다

let num = [1, 2, 3, 4, 5];
let randomIdx = Math.floor(Math.random()*num.length)
let chosenNum;

if (num[randomIdx] < 3) {
  chosenNum = function() {
    alert(`${num[randomIdx]<3}`);
  };
} else if(num[randomIdx] >= 3)) {
  chosenNum = function() {
    alert(`${num[randomIdx] >= 3}`);
}
chosenNum();

0개의 댓글