Red-Pig Dev Story..: 더글라스 크락포드

2016년 3월 10일 목요일

[Book] 더글라스 크락포드의 자바스크립트 핵심 가이드..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

더글라스 크락포드 지음, 김명신 옮김/한빛미디어

자바스크립트계의 요다스승이라 불릴정도로(해외에선 어떻게 부르는지 모르겠지만 자바스크립트 완벽가이드에서 그런 언급이 나온뒤로는 저는 그렇게 부릅니다.) 자바스크립트의 거성이라고 할 수 있는 Yahoo!에서 자바스크립트 아키텍쳐로 일하는 더글라스 크록포드의 책입니다. 더글라스 크록포드는 JSON을 만들고 private멤버를 사용하는 방법을 공개하는등 자바스크립트의 발전에 많은 공헌을 하였습니다.

이 책은 다른 자바스크립트책과는 좀 다른 내용을 다루고 있습니다. 아주 기본적인 자바스크립트를 사용할 때의 특징들에 대해서 다루고 있습니다. 어떤 특징들이 있고 어떻게 동작을 하고 어떤것이 좋고 어떤 것이 나쁜지 등등....

봄싹스터디에서 최근 스터디 교재로 사용을 하면서 공부를 했는데 그 내용은 아주 좋습니다. 기본적인 내용임에도 아주 자바스크립트 초보라면 보기는 좀 어려울듯 합니다. 자바스크립트를 어느정도 공부를 하고 중급으로 넘어가기 위해서 기초를 다지기 위해서 한번쯤 봐두기에 딱 좋은 책이라고 생각합니다. 이런 기초적(?)인 내용들을 다 알지 못해도 보통 어느 정도의 자바스크립트는 할 수 있기 때문에 자바스크립트를 어느정도 공부하다가 한번쯤 이 책을 보면 자바스크립트라는 언어에 대한 이해도를 많이 높일수 있고 왜 그런식으로 동작했는지 이해하기 좋은 것 같습니다.

이 책은 크록포드의 자기주장이 아주 강하게 들어 있습니다.(사실 아주 친절하게 설명해 주지는 않고 대신 논지는 아주 명확한 편입니다.) JS에는 이런것들이 있는데 A는 좋고 B는 이래서 안좋기 때문에 B는 쓸필요 없고 A만 쓰면 된다!라는 식입니다. 자바스크립트의 문법들, 객체에 대한 설명등, 프로토타입, 함수의 사용과 호출에 따른 콘텍스트 바인딩, 클로저, 상속을 어떻게 하는지, 배열은 어떤 특징을 가지고 있는지 전혀 모르고 있던 내용도 가득합니다.

나름 자바스크립트 책은 많이 보았지만(책만 많이 봤습니다.) 이 책만큼 클로저에 대해서 명확하게 설명하고 있는 책은 없었던 것 같습니다. 사실 클로서는 이해가 될듯 말듯 했었는데 이 책은 쓸데없는 부분 다 빼고 클로저의 특성을 이용해서 어떤 식으로 사용하면 되는지 아주 명확하게 설명해 주고 있습니다. 클로저에 대해서 이해할 수 있는 것 만으로도 이 책의 가치는 충분한 듯 합니다.

[JS]함수호출 방식에 따른 this의 바인딩에 대해서..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

더글라스 크락포드의 자바스크립트 핵심 가이드를 공부하면서 Javascript에는 4가지 함수호출 패턴이 있다는 것을 알게 되었고 이 패턴에 따라서 함수내의 this의 값은 달라지게 됩니다. Javascript에서 this와 객체의 바인딩은 호출시에 일어납니다.

메서드 호출패턴
함수 호출패턴
생성자 호출패턴
apply 호출패턴

Javascript에서 this의 바인딩은 다룰때마가 헷갈리는 문제이므로 기본이 되는 내용을 공부한 김에 정리해 둡니다.

메서드 호출 패턴
여기서 메서드는 함수가 객체의 속성(멤버함수)로 저장되어 있는 경우에 이 함수를 메서드라고 부르고 메서드를 호출할때 this는 객체에 바인딩 됩니다.

JavaScript

1
2
3
4
5
6
7
8
var test = {
    x: 100,
    showX: function() {
        alert(this.x);
    }
}

test.showX();   // 100





함수 호출 패턴

함수가 객체의 속성이 아닌 경우입니다. 이렇게 호출했을때 this는 전역객체(window객체를 의미합니다.)에 바인딩됩니다.

JavaScript

1
2
3
4
5
6
var x = 100;
var test = function() {
    alert(this.x);
}

test();  // 100



더글라스 크록포드는 이런 특성이 자바스크립트라는 언어 설계상의 오류라고 지적합니다. 왜냐하면 내부함수를 호출했을때 this는 외부함수의 this변수에 바인딩되어야 하지만 그렇지 않고 전역객체로 바인딩 됩니다.

JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
var x = 1;
var test = {
    x: 100,
    showX: function() {
        alert(this.x);
    },
    whatisX: function() {
        var show = function() {
            alert(this.x);
        }
        show();
    }
}

test.whatisX();   // 1



이 코드를 실행했을때 whatisX의 show()는 함수호출되었기 때문에 this.x가 test.x가 아닌 window.x가 되어서 100대신에 1이 찍히게 됩니다. test.x를 가르키게 하려면 this변수를 다른 변수에 할당해 놓고 사용하여야 합니다.

생성자 호출 패턴
여기서 생성자가 의미하는 것은 new를 써서 인스턴스를 만들어서 쓰는 함수를 의미합니다. 일반적인 함수는 new를 쓸수도 있고 안쓸수도 있지만 prototype으로 확장을 함으로써 new를 써서 사용하도록 하고 파스칼형태로 첫글자를 대문자로 써줌으로써 생성자함수라는 것을 나타내줍니다.

JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var Test = function(x) {
    this.temp = x
}

Test.prototype.getTemp = function() {
    alert(this.temp);
}

var t = new Test(100);
t.getTemp();  // 100



이렇게 사용하면 new로 만든 객체에 대해서 this가 바인딩 됩니다.

apply 호출 패턴
apply함수는 첫번째 파라미터가 this에 바인딩될 객체이고 두번째 파라미터에 배열로 함수에 넘겨줄 파라미터를 지정합니다. 첫번재 파라미터가 null이나 undefined이면 전역객체에 바인딩 됩니다.

JavaScript


1
2
3
4
5
6
7
8
9
var x = 1; 
var test = {
    x: 100,
    showX: function() {
        alert(this.x);
    }
}

test.showX.apply(null);   // 1



메서드 호출패턴에 사용했던 소스에 apply를 적용했습니다. 첫번째 파라미터로 null을 넘겨주었으므로  this가 전역객체에 바인딩되어서 100이 아닌 1이 찍힙니다.

[Info]Tags categorized posts and contents patterns..

2016년 3월 10일 목요일

[Book] 더글라스 크락포드의 자바스크립트 핵심 가이드..

[JS]함수호출 방식에 따른 this의 바인딩에 대해서..