블로그 내 검색

2012. 5. 17.

크롬 개발자 도구로 클로저 차근차근 써보기


크롬 개발자 도구와 클로저

전에 포스팅한 자바스크립트 클로저의 글이 좀 부족한 것 같아 이번에는 새로운 접근으로 한번 풀어보려고 합니다.

그리고 이것에 더해서 크롬 개발자 도구의 유용함과 대화형으로 자바스크립트 디버깅을 하는 방법도 같이 알아보죠.
차근차근 글을 따라 타이핑 하면서 하시면 더욱 좋을 것 같습니다(?)

!! 주의 !!
완전 초보분만을 대상으로 한 포스팅입니다.
초보가 아닌 분이 본 뒤 시간낭비가 되도 책임지지 않습니다

준비

일단 크롬 브라우저가 필요합니다.

크롬을 기동하고 새로운 빈 탭을 만듭니다.
크롬의 주소창에 chrome://newtab 을 입력하면 새로운 빈 탭이 열립니다.

그 다음 F12을 눌러 개발자 도구를 엽니다.
개발자 도구가 열리면 상단의 아이콘 중 Console을 클릭합니다.

저기 있네요

이 콘솔에서는 자바스크립트를 대화형 모드로 코딩해볼 수 있습니다. 프로그래머가 코드를 입력하고 Enter를 치면 바로바로 해석해서 결과를 알려주지요.

개발자 도구 콘솔에 코딩하기

이제 준비가 다 됐습니다.
테스트로 아래와 같은 코드를 타이핑합니다.
var hello = "world";
엔터를 누르면 크롬의 자바스크립트 엔진은 위 문장을 바로 해석하여 결과를 돌려줄 겁니다.
위 문자열은 자바스크립트 문장(statement)로서 반환값이 없습니다.
그래서 undefined 가 찍힐 겁니다.

hello 변수에 값이 잘 할당되어 있는지 볼까요?
hello를 타이핑해 봅시다.
hello는 표현식(expression)으로 부르는데 계산되어 값을 표현할 수 있는 단위입니다.

결과는 예상대로...
이제 본격적으로 시작해 봅시다.
다음과 같은 코드를 타이핑해 봅니다. 여러 줄을 걸쳐 입력할 경우 시프트와 엔터를 동시에 누르면 바로 엔진에게 보내지 않고 줄바꿈이 가능합니다.
var createSeq = function() {
    var i = 0;
    return function() {
        return ++i;
    }
};

제대로 입력했다면 undefined 가 출력됩니다. 이것도 물론 문장(statement) 이기에 아무런 값을 반환하지 않죠.
제대로 입력되어 있는지 확인해보기 위해 createSeq 를 입력합니다. 방금 입력한 함수의 내용이 그대로 출력된다면 제대로 입력한 겁니다.
(함수를 실행하지 않고 바로 값을 보려고 할 경우, toSource 라는 함수의 메서드가 자동으로 호출되어 함수의 표현식을 문자열 형식으로 출력하게 됩니다.)

함수 소스를 볼 수 있군요 

이제 저 함수를 실행합니다. 반환값이 있으니 변수 a 에 담아봅시다.
var a = sreateSeq();
아 실수...제가 오타를 쳤군요...

오타;


저렇게 존재하지 않는 함수나 잘못된 문법을 입력할 경우 오류를 출력해 줍니다. 클릭해보면 오류 객체의 내용도 볼 수 있습니다.
다시 제대로 쳐봅시다.
var a = createSeq();

변수 a에는 뭐가 있을지 한번 찍어볼까요.
콘솔에 표시된 반환된 함수의 내용
function () {
    return ++i;
}
입니다.
반환된 함수 내용

그렇다면...a의 실행 결과는 어떨까요...?
일반적으로 생각하면 현재 변수 i가 없으므로 정의되지 않은 변수 오류를 내야 정상일 것 같습니다.
정말 그럴지 한번 실행해 봅시다.
i 는 정의되지 않은 변수일텐데...

어째선지 1이 찍힙니다. 변수 i 를 어디서 참조한 걸까요.
여기가 중요합니다.
전에 분명 createSeq 를 실행하여 함수를 반환받았습니다. 그 createSeq 안에는 변수 i가 선언되어 있지요.
var createSeq = function() {
    var i = 0; // 여기 선언되어 있네요!
    return function() {
        return ++i;
    }
};

우리가 createSeq를 실행해서 얻은 함수 a 는 변수를 찾을 때 자신이 선언된 곳의 변수를 참조하여 찾은 i에 ++ 연산을 수행하여 결과를 1로 반환한 것이죠.

이렇게 하면 어떨까요.
변수 i를 새로 선언합니다. 값을 99 로 줍시다.
var i =99;
전역에 i 를 선언합니다.

a를 실행하면 어떻게 될까요. a의 소스 내용을 다시 보면
function () {
    return ++i;
}

입니다.
그렇다면 결과는 99에 1을 더해 100이 될까요?

음...

결과는 2가 나옵니다.

a가 실행될 때 전역에 선언된 i를 사용하지 않고, 자신이 선언된 createSeq의 변수를 사용했기 때문입니다.

자바스크립트는 코드를 실행할 때 그 코드에 설정된 유효범위를 뒤지는데, 유효범위에도 순서가 있습니다. a의 경우 createSeq의 유효범위가 전역보다 앞에 있다고 보면 정확합니다.

뭔가 신기하다면 a 함수와 같은 기능을 하는 함수를 전역에 선언해보고 실행해 봅시다
var b = function () {
    return ++i;
}
b();

100 이 나오는군요.

변수 i를 전역에 선언했지만 a의 결과는 2

전역의 i에 ++를 수행하여 반환한 겁니다.
b는 createSeq 의 변수에 접근할 수 없는게 확실하죠. (당연한가요...)

“a는 createSeq의 유효범위의 변수를 사용할 수 있다.”

a를 보통 클로저라고 부릅니다. 여기서 좀더 생각해보면 변수 i는 a만 접근할 수 있도록 포장(encapsulation)되어 있다고도 할 수 있습니다. 다른 곳에서는 아무리 해도 a가 접근할 수 있는 i 변수를 읽을수도, 값을 변경할수도 없습니다.

자바스크립트에서는 이러한 클로저의 특성을 사용해서 private, public 등의 개념을 구현하여 각종 패턴에 사용합니다.

백견이 불여일타

크롬 개발자 도구를 사용해서 자바스크립트 코드를 타이핑해보면서 이런저런 시도를 해본다면 좀 더 자바스크립트에 대해 이해가 쉬울거라고 생각합니다.

크롬 개발자 도구 콘솔 창에서는 자동 완성은 물론 배시 쉘등에서 지원하는 방향키로 커맨드 히스토리를 볼러올 수도 있고 어시스트되는 내용으로 객체의 내용도 미리 알 수 있기에 참 유용합니다.

크롬의 DOM API에서는 get으로 시작하는 메서드들이 이런게 있군요

크롬 개발자 도구와 함께 즐거운 웹 코딩 되시길 바랍니다~

댓글 5개:

  1. 따라하기식 강의 좋습니다 ㅎㅎ

    답글삭제
    답글
    1. 직접 쳐보는게 아무래도 이해가 빠르지 않을까 해서요 ㅎㅎ

      삭제
  2. 좋은 정보 감사합니다.
    크롬 개발자도구에서 콘솔부분이 이해가 잘 안가네요 ..

    답글삭제
    답글
    1. F12를 누르면 포스트의 이미지와 다르게 크롬브라우저 하단에 붙어있는 경우도 있는데 아래 부근으로 마우스를 올리면 끌어당겨 위로 올릴 수 있습니다.

      브라우저랑 붙어 있을경우, 아이콘이 좀더 작지만 모양은 같으니 걱정마세요~

      삭제