크롬 개발자 도구에서는 클로저가 아니면 자유 변수를 참조할 수 없다.

발생일: 2014.12.28

키워드: 크롬 개발자 도구, Chorme Developer Tools, 클로져, 클로저, Free Variable, 자유 변수

문제:

옆자리 D가 개발자 도구로 디버깅할 때 클로저의 변수를 확인할 수 없다며 이상하다고 물어봤다.

대략 아래와 같은 코드였다.

function doSomething(a) {

  var b = function () {

    debugger; // (A)

    return 'bar';

  };

 

  return a + b();

}

doSomething('foo');

(A) 시점에 디버거를 걸어뒀을 때, `doSomething(a)`로 전달받은 매개변수 `a`의 값을 확인할 수 없다는 얘기였다.

실제로 돌려보면 아래와 같이 나온다.

해결책:

위 코드에서 `b` 함수는 클로저(closure)가 아니다.

`a` 또한 자유 변수(free variable)가 아니다.

`b` 함수에서 `a`를 참조하지 않고 있기 때문이다.

예전 버전의 개발자 도구에서는 이 경우에도 `b` 함수 내에서 `a`의 값을 확인할 수 있었던 걸로 기억한다.

예전에 자바스크립트 메모리 프로파일링에 대해 리서치했을 때,

V8 엔진은 클로저에 최적화되어 있어서 자유롭게 클로저를 사용해도 좋다고 들었다.

언제 업데이트되었는지는 모르겠지만, 아마도 이런 경우가 최적화 대상이지 않았을까...

여튼, 혹시 이런 코드에서 자유 변수의 확인이 필요하다면,

아래처럼 참조하는 코드를 넣어주면 된다.

function doSomething(a) {

  var b = function () {

    a; // `b` 함수가 클로저가 되게 함수 내에서 `a`를 참조한다.

    debugger;

    return 'bar';

  };

 

  return a + b();

}

doSomething('foo');