자바스크립트 완벽 가이드 6e 번역개정판 - 나름대로 정오표 및 공부

자바스크립트를 공부하기로 했다.

그래서 책을 구매하려고 보니.. 제일 유명한게 "자바스크립트 완벽 가이드".

그런데.. 5e은.. 잘못 번역되어 있는게 너무 많아.. 욕을 꽤나 먹는 상황.

마침 3월 말에, 6e이 나와서.. 이 책을 구매 했다.

하지만, 여전히 몇가지 잘못 된 부분이 보여. 이곳에 정리하고자 한다.

인사이트에 올려두면 더 좋겠지만. 오랜만에 내 블로그에 글도 좀 적고..

꾸준히 공부하는 내용도 정리 좀 하고... 할 겸.

내용은 발견하는대로 귀찮지 않으면 업데이트 할 예정이다.

8페이지 중간 부분 수정

var square = function(x); { // 여기서 함수는 값이 되고, 변수 square에 할당된다.

var square = function(x) { // 여기서 함수는 값이 되고, 변수 square에 할당된다.

로 ; 를 제거해야 한다.

9페이지 윗부분 수정

function abs(x) {    // 절대 값을 계산하는 함수를 정의한다.

    if ( x>= 0 ) {   // 괄호 안의 표현식 값이 참이면

        return x;    // if 절 안의 코드를 실행한다.

}                    // if 절의 끝을 나타낸다.

function abs(x) {    // 절대 값을 계산하는 함수를 정의한다.

    if ( x>= 0 ) {   // 괄호 안의 표현식 값이 참이면

        return x;    // if 절 안의 코드를 실행한다.

   }                 // if 절의 끝을 나타낸다

로 괄호의 위치가 잘못 되었다.

53페이지에서 String Warpper 객체 및 동작에 대한 설명 추가

var s = "test"; // 이 문자열을 사용한다.

s.len = 4;      // 문자열 프로퍼티에 값을 할당한다.

var t = s.len;  // 프로퍼티를 참조하라.

이 코드를 실행해 보면 t 값은 undefined이다. 2행은 생성된 임시 String 객체의 len프로퍼티에 4를 할당한다. 그리고 임시 객체는 바로 삭제 된다. 3행은 기존 문자열 값과 같은 값을 가진 새로운 String 객체를 생성하고 len 프로퍼티를 읽으려고 한다. 이 프로퍼티는 존재하지 않아서 undefined로 평가된다. ... 문자열이나 숫자, 불리언 값에서 프로퍼티(혹은 메서드)의 값을 읽으려고 할 때, 문자열, 숫자, 불리언 값이 객체처럼 동작하는 것을 보여준다. ... 값을 할당하는 것은 임시 객체에서 수행되며, 지속되지 않는다.

위의 문장을 이해하기 어려웠는데, 52 페이지에서 마지막에 설명된 내용과 53페이지의 마지막 내용을 잘 읽어보면 이해할 수 있다.

// javascript 에서 s 는 test라는 값을 가지는 단순한 문자열 리터럴일뿐이다.

var s = "test";

// javascript 에서 s의 프로퍼티에 접근하는 순간, s를 String 객체로 만든 뒤에 처리한다. 그 후 사용하고 난 String객체는 버린다.

s.indexOf(" ");   

// 위의 문장은 아마도 내부에서는 

// var anonymousStringObject = new String(s); 

// anonymousStringObject.indexOf(" ");

// 

// anonymousStringObject = undefined; 

// 또는 anonymousStringObject = (function () { return; })(); 로

// 처리가 될 듯 함.

// java 에서 "test" 자체가 String object이다. variable의 type역시 String class으로 받게 된다.

// java

String str = "test";

// 하지만 javascript에서는 "string"이라는 type이 따로 있고, new String(..)으로 정의할 수 있는 String object가 따로 있다.

// javascript

//

// typeof("AA") : "string"

//

// var str = new String("AA");

// typeof(str) : "object"

 63 페이지 중간 부분(3번째 단락)

+와 == 연산자는 객체를 원시 타입으로 변환할 때 Data 타입 객체는 특별하게 취급한다.

 +와 == 연산자는 객체를 원시 타입으로 변환할 때 Date 타입 객체는 특별하게 취급한다.

로 Data를 Date로 변경해야 한다.

 63 페이지 중간 부분 Date 동작이 특이한 점

javascript에서 객체타입이 원시타입으로 변환 될 때는, 기본적으로 객체에서 숫자로의 변환이다. 이 떄는 valueOf()가 사용된다. Date 객체가 참 특이하게, +와 == 연산자랑 같이 사용 할 때는 toString()이 사용되어 string type으로 변환되고, 나머지인 < 나 -(빼기) 등의 연산자랑 같이 사용 할 때는 valueOf()이 사용된다.

 66 페이지 두번째 소스 들여쓰기 잘못.

var scope = "global scope";

function checkscope() {

    var scope = "local scope";

        function nested() {

            var scope = "nested scope";

            return scope;

        }

    return nested();

}

checkscope();

var scope = "global scope";

function checkscope() {

    var scope = "local scope";

    function nested() {

        var scope = "nested scope";

        return scope;

    }

    return nested();

}

checkscope();

와 같이 들여쓰기가 잘못되었음.

 66 페이지 마지막 예제... 자바스크립트알못이지만... 설명이 애매하다... 또한, 들여쓰기도 잘못되어 있다.

function test(o) {

    var i = 0;

    if ( typeof o == "object") {

        var j = 0;

        for ( var k=0; k < 10 ; k++ ) {

            console.log(k);

        }

        console.log(k);

    }

    console.log(j);   // j는 정의되어 있고, 초기화 되어 있지 않을 것이다.

}

해당 부분은 javascript의 특징인 hoisting 을 설명하는 부분이다. hoisting이란, 변수의 정의 및 할당이 실제 코드의 순서에서 아랫쪽에 되어 있다고 하더라고, 해당 변수의 정의를 상단으로 끌어 올린것으로 처리 된다는 설명이다. 또한, javascript에서는 변수의 scope가 블록 기호인 { } 로 묶이는 부분에 대해서 scope를 가지는것이 아니라, 함수 전체에 영향을 받는것으로 되어 있다.

예제에는 j라는 변수가 if 문 안에서 정의되어 있으나, console.log(j)에서도 j의 선언부가 hoisting 되어서 접근이 가능하다는것을 표현하고 싶었던것 같은데, 그렇다면 parameter로 받는 o의 상태에 따라 j가 0이 될 수도 있고, undefined 상태일 수도 있다고 설명을 좀 더 정확하게 적었어야 했다.

hoisting 상태를 고려한다면 위의 코드는 아래와 같이 변할 것으로 예상된다.

function test(o) {

    var i = 0;

    var j;

    if ( typeof o == "object") {

        j = 0;

        for ( var k=0; k < 10 ; k++ ) {

            console.log(k);

        }

        console.log(k);

    }

    console.log(j);   // o가 object가 아닌 경우, j는 정의되어 있고, 초기화 되어 있지 않을 것이다.

}

73 페이지 첫번째 소스 코드

[?]          // 빈 배열: 대괄호 안에 표현식이 없으면 원소가 없음을 말한다.

[]        // 빈 배열 : 대괄호 안에 표현식이 없으면 원소가 없음을 말한다.

? 가 필요 없이 들어가 있다.

73 페이지 마지막 소스 코드

var p = { x:2.3, y:-1.2 };    // 두개의 프로퍼티를 가진 객체

var q = {?};                  // 프로퍼티가 없는 빈 객체

q.x = 2.3; q.y = -1.2;        // 객체 q와 p는 같은 프로퍼티를 갖는다.

var p = { x:2.3, y:-1.2 };    // 두개의 프로퍼티를 가진 객체

var q = { };                  // 프로퍼티가 없는 빈 객체

q.x = 2.3; q.y = -1.2;        // 객체 q와 p는 같은 프로퍼티를 갖는다.

?가 필요 없이 들어가 있다.

83페이지 마지막 예제

1 + 2                   // => '3'

"hello" + " " + "there" // => 'hello there'

"1" + "2"               // => '12'

1 + 2                   // => 3

"hello" + " " + "there" // => 'hello there'

"1" + "2"               // => '12'

문자 3이 아니라, 숫자 3으로 계산되어야 한다.

84페이지 중간 예제

 1 + {?}     // => "1[object Object]" : 객체를 문자열로 바꾼 후 이어붙이기

 1 + {}     // => "1[object Object]" : 객체를 문자열로 바꾼 후 이어붙이기

로 필요 없이 ? 가 들어가 있다.

 94 페이지 첫번째 예제가 나온 뒤 4번째 줄에 대한 설명

또한 우변 피연산자가 함수가 아니라면 TypeError 예외가 발생한다.

일반적으로는 "함수"가 아니라, "클래스"가 아니라면 TypeError이 발생한다고 생각 할 수 있다.

하지만 javascript에서는 class라는 형태를 function으로 정의 하기 때문에, 함수가 아니라면 TypeError가 난다고 말 하는게 맞는듯 하다.

97 페이지 첫번째 예제 설명이 명확하지 않음

// max_width가 정의되어 있으면 이것을 사용한다.

// 이 외의 경우 preference 객체에 속한 값을 찾아 본다.

// 그것조차 정의되어 있지 않을 경우 하드코딩된 상수를 사용한다.

var max = max_width || preferences.max_width || 500;

 

위 설명에서 잘못된 부분이 있다.

"max_width가 정의되어 있으면 이것을 사용한다." 부분이다. 정의되어 있는것은 당연히 중요하고, max_width가 어떤 값을 가지느냐도 중요한 문제이다.

max_width가 정의되어 있지 않으면 당연히 max_width는 false로 처리 되고, 그 이후 prefrenerces.max_width를 평가할 것이다.

하지만 max_width가 정의되어 있고 0이라는 값을 가지고 있을때는 어떻게 동작할 것인가? 당연히 0은 false로 처리 될 것이고, prefrernces.max_width을 확인해야 할 것이다. 그러므로 해당 설명을 정확하게 하려면 다음고 같이 바뀌어야 한다.

// max_width가 정의되어 있으면서 0 이 아니라면, 이것을 사용한다. 정의되어 있더라도 0 이라면 이것을 사용하지 않는다.

 97 페이지 두번째 예제

function copy(o, p) {

    p = p || {?};   // 만약 인자 p가 null이면, 새롭게 객체를 생성한다.

    // ...

}

function copy(o, p) {

    p = p || {};   // 만약 인자 p가 null이면, 새롭게 객체를 생성한다.

    // ...

}

로 ? 가 쓸데 없이 들어 있다.

전반적으로 ;; 소스코드 부분의 들여쓰기나, 띄워쓰기(코딩 컨벤션)가 일정하게 되어 있지 않다. 세미콜론 처리 역시 어떤 예제는 꼬박꼬박 넣고, 어떤 예제는 두 줄이상의 소스코드인데도, 넣었다(99페이지 마지막 예제) 안 넣었다(97페이지 마지막예제) 한다. 그래서 이런건 또 왠만해서는 생략.

빈객체나 빈 문배열등을 만들때 쓸데 없이 ? 가 들어 있는 경우가 많다. ? 에 대한 문제는 너무 많아서 이제 부터는 생략.

{?} 나 [?] (?) 등을 보시게 되면... ? 는 없는 것으로 생각하고 코드를 보시라.

자바 스크립트는 기본적으로 Type Checking이라던지, 각종 코드에 대한 검사를 덜 하는것으로 판단된다. 예를 들면 변수를 선언하지 않고도 바로 사용한다던지, 읽기 전용 속성인데도 값을 할당한다던지 하는것에 대해서 에러를 발생시키지 않는다. 

이러한 방식은 코드를 더 쉽게, 그리고 유연하게 만들 수 있는 장점이 있겠지만, 나 같은 사람들에게는 오히려 혼란을 가중 시키기도 한다. 이러한 문제를 해결 하기 위해서 "strict mode"라는 것을 지원한다. 이 기능을 켜 두게 되면, 자바 스크립트가 말 그대로 "엄격"한 검사를 통해서 실행된다. 

"엄격"하게 자바스크립트를 작성하고, 실행하고 싶다면 js 파일의 첫번째 줄에 "use strict"; 를 추가해 주면 된다. 특정 함수만 "엄격"하게 실행하고 싶다면 함수 구현의 첫번째 줄에 "use strict"; 라고 넣으면 된다. ( " 를 빼 먹지 말고 다 적어야 한다. ) - IE 10 미만 버젼에서는 사용할 수 없다고 한다.

"use strict";  // 이 선언으로 인해서 현재 js 파일은 엄격 모드로 실행되게 된다.

function a() {

    // ....

}

function b() { // 아래와 같이 특정 함수만 엄격 모드로 실행되게 할 수도 있다.

    "use strict";

    // .....

}

106페이지 delete연산자 6번째줄 부터 있는 예제

var o = { x:1, y:2 };

delete o.x;

"x" in o;

뜬금 없는 문법 오류로 보일 수 있지만 in 이라는 연산자가 있는 것이다. 

"PROPERTY_NAME" in OBJECT 의 형태로 사용할 수 있다.

106페이지 중간 즈음에 delete 연산자 설명중

delete 연산자의 피연산자는 좌변값(lvalue)이다. 피연산자가 좌변 값이 아니면 연산자는 아무런 동작을 하지 않고, true를 반환한다. 피연산자가 좌변값이면 연산자는 해당 좌변 값을 삭제하려고 시도하며, 피연산자가 성공적으로 삭데되었을 경우 true를 반환한다.

좌변값이라는 용어를 먼저 알아야 한다.

변수에 값을 할달 하는 경우 아래와 같이 코드를 작성한다.

var x = 10;

위 코드에서 = 를 기준으로 왼쪽에 있는 것을 좌변값(left-value,lvalue)라고 하고, 오른쪽에 있는것 우변값(right-value,rvalue)라고 한다. variable이 좌변 값이 된다. 즉, 어떤 값을 할당 할 수 있는것들이 lvalue가 되고, 이것들을 delete 시킬 수 있다는 것이다.

설명상 "delete 연산자의 피연산자는 좌변값(lvalue)이다." 라는것은, delete의 왼쪽에 있는 값이 피연산자라는것이 아니라, delete 다음에 올 수 있는 피연산자는 lvalue 형태의 것들만 올 수 있다는 의미이다.

그 아래쪽에도 나오지만, 정확하게 말하면 위의 코드에서 x를 delete 시킬 수는 없다. delete 시킬 수 있는것은 property 형태만 가능하다. 107페이지 첫번째 예제에서 this.x 에 값을 할당 한 뒤, 그냥 x를 delete 시킬 수는 없었지만, this.x 를 delete 시킬 수는 있게 된다.

107페이지, 110페이지

부수효과

계속해서 부수효과라는 용어가 등장한다. 부수효과라는 용어는 Side Effect라는 용어의 한국어 번역 단어로 많이 사용된다. 우리가 일반적으로 생각하는 Side Effect는 "예상치 못했던 문제 상황"을 뜻하는데, 여기서는 그렇지 않다.

여기서 말하는 부수효과를 쉽게 말하면, state 를 바꾸는것을 생각하면 된다. 아래의 코드를 보자

var x = 3;

위의 코드는 사실상 아무것도 하지 않는것으로 느껴지지만, x라는 변수를 생성하고 이 변수에 3을 할당한 코드이다. x의 state가 변경된 것이다. 이렇다면 이는 "부수효과가 있다"고 볼 수 있다. 하지만 다음 코드를 보자.

Math.cos(Math.PI);

위 코드는 PI 값으로 코사인 정보를 얻어왔지만, 아무곳에서 할당하지 않았다. 즉, state의 변화가 없다. 이 경우 "부수효과가 없다." 고 볼 수 있다.