자바스크립트 연구 노트: 함수(1): 함수 선언 및 함수 표현_기본 지식

함수 선언

function foo() {}

foo 함수는 전체 프로그램이 실행되기 전에 호이스팅되므로 foo 함수가 정의된 전체 범위에서 사용 가능합니다. 함수가 정의되기 전에 호출되어도 문제가 없습니다.

foo(); // Works because foo was created before this code runs
function foo() {}

스코프를 소개하는 특집 글을 쓸 예정이라 여기서는 자세히 다루지 않겠습니다.

함수 표현

함수 선언의 경우 함수 이름이 필수이지만 함수 표현식의 경우 선택 사항이므로 익명 함수 표현식과 명명된 함수 표현식이 나타납니다. 다음과 같습니다:

함수 선언: function functionName (){ }
함수 선언: function functionName[선택 사항](){ }
그러면 함수 이름이 없으면 함수 표현식임은 알겠는데, 함수 이름이 있는 경우는 어떻게 판단하나요?
Javascript는 전체 함수 본문이 표현식의 일부이면 함수 표현식이고, 그렇지 않으면 함수 선언이라고 규정합니다. 다음은 표현입니다.

var fuc = foo(){}

몇 가지 극단적인 표현 예를 더 들어보겠습니다.

!function foo(){}
true && function foo(){}

위 문장은 함수식을 구별하기 위한 것일 뿐 일반적으로 이렇게 쓰지는 않습니다. 그런 다음 비교 예를 사용하여 효과를 확인하세요.

foo1();//foo1 is not defined 
foo2();//works because foo2 was created before this code runs
!function foo1() {
  alert('foo1 works');
};
function foo2() {
  alert('foo2 works');
};

익명함수 표현

var foo = function() {};

위의 예에서는 변수 foo에 익명 함수를 할당합니다.

foo; // 'undefined'
foo(); // this raises a TypeError
var foo = function() {};

var는 선언이므로 변수 foo가 여기에 호이스팅되므로 프로그램이 실행될 때 변수 foo가 호출 가능합니다.
그러나 할당문은 런타임에만 적용되므로 변수 foo의 값은 정의되지 않습니다.

이름이 지정된 함수 표현식

또 다른 이야기는 이름이 지정된 함수의 할당입니다.

var foo = function bar() {
  bar(); // Works
};
bar(); // ReferenceError

여기서는 bar라는 이름의 함수가 foo 변수에 할당되므로 함수 선언 외부에서는 보이지 않지만 bar 함수 내에서는 계속 호출할 수 있습니다. 이는 Javascript가 명명된 함수를 처리하는 방식 때문입니다. 함수 이름은 함수 내부 범위에서 항상 유효합니다.