자바스크립트 코딩 기법과 핵심 패턴 - 함수

함수의 name 프로퍼티

함수를 정의하는 패턴을 선택할 때는 읽기 전용인 name 프로퍼티를 쓸 일이 있는지도 고려해보아야 한다. name 프로퍼티는 표준이 아니지만 많은 실행 환경에서 사용이 가능하다.

function foo(){} // 함수 선언문

var bar = function(){} // 함수 표현식

var baz = function baz(){} // 기명 함수 표현식

console.log(foo.name); // foo

console.log(bar.name); // ""

console.log(baz.name); // baz

함수 호이스팅

모든 변수는 함수 본문 어느 부분에서 선언되더라도 내부적으로 함수의 맨 윗부분으로 끌어올려 진다. 함수 또한 결국 변수에 할당되는 객체이기 때문에 동일한 방식이 적용된다. 함수 선언문을 사용하면 변수 선언뿐 아니라 함수 정의 자체도 호이스팅되기 대문에 자칫 오류를 만들어내기 쉽다.

// 안티패턴이다.

// 전역 함수

function foo(){

console.log("global foo");

}

function bar(){

console.log("global bar");

}

function hoistMe(){

console.log(typeof foo); //function

console.log(typeof bar); // undefined

foo(); //local foo"

bar(); // type error : bar is not a function

// 함수 선언문;

// 변수 'foo'와 정의된 함수 모두 호이스팅 된다.

function foo(){

console.log('local foo');

}

// 함수 표현식

// 변수 'bar' 는 호이스팅 되지만 정의된 함수는 호이스팅되지 않는다.

var bar = function(){

console.log('local bar');

}

}

hoistMe();

보다시피, hoistMe() 함수 내에서 foo와 bar를 정의하면, 실제 변수를 정의한 위치와 상관없이 끌어올려져 전역변수인 foo와 bar를 덮어쓰게 된다. 그런데 지역변수 foo()는 나중에 정의되어도 상단으로 호이스팅되어 정상 동작하는 반면, bar()의 정의는 호이스팅 되지 않고 선언문만 호이스팅 된다. 때문에 bar()의 정의는 호이스팅 되지 않고 선언문만 호이스팅된다. 때문에 bar()의 정의가 나오기 전까지는 undefined 상태이고, 따라서 함수로 사용할 수도 없다. 또한 선언문 자체는 호이스팅 되었기 때문에 유효범위 체인 내에서 전역 bar()도 보이지 않는다.