[JavaScript] 자바스크립트 핵심 가이드 (5장 ~ 7장) - 2/3

개요

자바스크립트의 마스터라고 불리는 더그라스 크락포드가 집필한 서적이다. 자바스크립트 언어에 대해서 제대로 공부를 하려고 하면 이 책은 한번 정도 읽어두어야 한다. 

책 소개

자바스크립트를 우수한 객체지향 언어로 만들 수 있는 장점을 담았다. 장점인 함수, 느슨한 변수 타입 검사, 동적 객체, 객체 리터럴 표현식 등과 대표적인 단점인 전역변수에 근거한 프로그래밍 모델 등을 피하는 방법을 다룬다. 장단점을 비교해 자바스크립트 언어의 단점은 피하고 장점은 살리는 코드 작성을 익힐 수 있다.

 

저자

더글라스 크락포드 (Douglas Crockford)

2008년 야후! 에서! 선임 자바스크립트 아키텍트로 일한다. JOSN(JavaScript Object Notation) 형식을 창안한 사람으로 잘 알려졌으며 콘퍼런스에서 자바스크립트의 고급 주제들에 대한 강연을 정기적으로 진행하고 ECMAScript 위원회에도 참여한다.

 

5장 상속

    데이터 타입 확인이 엄격하지 않은 자바스크립트는 캐스팅을 절대 하지 않는다.

    자바스크립트는 객체가 다른 객체로 바로 상속이 가능하다.

 

01 의사 클래스 방식(Pseudo classical)

    함수 객체가 만들어질 때, 함수를 생성하는 Function 생성자는 다음과 같은 코드를 실행한다.

    this.prototype = {constructor : this}

    

    의사 클래스를 사용하는 방법은 프로그래머에게 편안함을 제공한다.

    생성자 함수를 호출할 때 new 연산자를 잊게 되면 this는 새로운 객체와 바인딩되지 않는다.

 

02 객체를 기술하는 객체(Object Specifies)

    많은 인수를 받는 대신에 객체를 기술하는 하나의 객체를 받도록 정의하면 사용하기 편리하다.

    인수의 순서를 맞출 필요가 없으며 기본값을 설정하고 있다면 생략할 수도 있다.

    var myObject = maker( { first : f, last : l } );

 

03 프로토타입 방식

    프로토타입에 기반한 패턴에서는 클래스가 필요 없다.

 

04 함수를 사용한 방식

    객체의 모든 속성은 public이다.

    함수형 패턴은 유연성이 매우 좋다.

 

05 클래스 구성을 위한 부속품

    객체를 구성할 때도 제품을 만들 때 부속품을 가져다 조립을 하듯이 할 수 있다.   

 

6장 배열

    배열은 해당 항목의 오프셋을 계산할 수 있는 연속적인 메모리 할당이다.

    자바스크립트는 배열 같은 특성을 지닌 객체를 제공한다.

 

01 배열 리터럴

    새로운 배열을 만드는데 편리한 표기법으로 값을 쉼표로 구분하여 대괄호로 묶은 것이다.

 

02 length 속성

    모든 배열에는 length 속성이 있다.

    length 속성은 배열의 가장 큰 정수 속설 이름보다 하나 더 큰 값이다.

 

03 삭제

    배열은 실제 객체이기 때문에 배열의 요소를 delete 연산자로 삭제할 수 있다. 단 구멍이 생김.

    splice 메서드배열 요소의 일부를 삭제하고 이를 나머지 요소들로 대체할 수 있다.   

 

04 열거

    for in 문이 배열을 열거하는데 그다지 적합하지는 않다.

    for in 문은 속성들의 순서를 보장하지는 않는다.

 

05 객체와 배열의 혼동

    자바스크립트 자체도 배열과 객체의 차이점을 혼돈한다.    

    자바스크립트에는 배열과 객체를 구분하는 방법이 없다.

    

06 배열의 메서드

    Array.prototype에 원하는 메서드를 추가할 수 있다.

 

07 배열의 크기와 차원

    자바스크립트의 배열은 보통 초기화되지 않는다.

    2차원 배열이나 배열들의 배열을 만들기 위해서는 아래와 같이 만들어야 한다.

    for (i = 0; i < n; i += 1( {

        myarray[i] = []

    } 

 

 

7장 정규 표현식

    자바스크립트의 많은 부분은 다른 언어들에서 차용한 것이다.

    정규표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는 데 사용한다.

 

01 예제

    공백문자는 사용할 수 없다.

    ^ 문자는 문자열의 시작을 나타낸다.

    $ 문자는 문자열의 끝을 나타낸다.

 

02 정규 표현식 객체 생성

    정규 표현식 객체인 RegExp 객체는 두 가지 방법으로 만들 수 있다.

    정규 표현식 리터럴을 사용, RegExp 생성자를 사용

 

03 구성요소

    정규 표현식의 선택에는 하나 이상의 정규 표현식 시퀀스가 포함된다.

    정규 표현식 시퀀스는 하나 이상의 정규 표현식 요소를 포함한다.

    정규 표현식 요소는 문자, 괄호로 묶인 그룹, 문자 클래스, 이스케이프 시퀀스 등이 될 수 있다.

 

 

8장 메서드

 배열(Array)

 array.concat(item..)

concat 메서드는 자신의 복사본에 인수로 넘어온 값들을 추가한 새로운 배열을 반환한다.

 

var a = ['a', 'b', 'c'];

var b = ['x', 'y', 'z'];

var c = a.concat(b, true);

// c is ['a', 'b', 'c', 'x', 'y', 'z', true]

  

array.join(구분자)

join 메서드는 배열로 문자열을 만듭니다. 기본 구분자는 ‘,’ 이다.

각각의 문자열을 배열에 담은 후 join 메서드를 사용하는 것이 + 연산자로 합치는 것보다 빠르다.

 

var a = ['a', 'b', 'c'];

a.push('d');

var c = a.join('');    // c is 'abcd';

  

array.pop()

pop과 push 메서드는 배열을 스택처럼 동작하게 한다.

pop 메서드는 배열에서 마지막 요소를 제거하고 제거한 요소를 반환해 준다.

빈 배열일 경우 undefined을 반환한다.

 

var a = ['a', 'b', 'c'];

var c = a.pop(  );    // a is ['a', 'b'] & c is 'c'

  

array.push(item..)

push 메서드는 인수로 넘어온 항목을 배열의 끝에 추가하고 배열의 새로운 length를 반환한다.

 

var a = ['a', 'b', 'c'];

var b = ['x', 'y', 'z'];

var c = a.push(b, true);

// a is ['a', 'b', 'c', ['x', 'y', 'z'], true]

// c is 5;

  

array.reverse()

reverse 메서드는 배열 요소의 순서를 반대로 변경한다.

 

var a = ['a', 'b', 'c'];

var b = a.reverse(  );

// both a and b are ['c', 'b', 'a']

  

array.shift()

shift 메소드는 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.

빈 배열일 경우 undefined을 반환한다.

 

var a = ['a', 'b', 'c'];

var c = a.shift(  );    // a is ['b', 'c'] & c is 'a'

 

array.slice(star,end)

slice 메서드는 배열의 특정 부분에 대한 복사본을 만든다.

end 매개변수는 옵션이며 지정하지 않은 경우 기본값은 배열의 length 속성 값이다.

slice와 splice를 혼동해서는 안됩니다. 문자열문자열. slice 와도 구분해야 한다.

 

var a = ['a', 'b', 'c'];

var b = a.slice(0, 1);    // b is ['a']

var c = a.slice(1);       // c is ['b', 'c']

var d = a.slice(1, 2);    // d is ['b']

  

array.sort(비교 함수)

sort 메서드는 배열의 내용을 적절하게 정렬한다.

자바스크립트의 기본 비교 함수는 정렬될 배열 요소들을 문자열로 간주한다.

 

var n = [4, 8, 15, 16, 23, 42];
n.sort(  );
// n is [15, 16, 23, 4, 42, 8]
 
n.sort(function (a, b) {
    return a − b;
});
// n is [4, 8, 15, 16, 23, 42];

var m = ['aa', 'bb', 'a', 4, 8, 15, 16, 23, 42];
m.sort(function (a, b) {
    if (a === b) {
        return 0;
    }
    if (typeof a === typeof b) {
        return a < b ? −1 : 1;
    }
    return typeof a < typeof b ? −1 : 1;
});
// m is [4, 8, 15, 16, 23, 42, 'a', 'aa', 'bb']

  

array.splice(start, deleteCount, item..)

splice 메서드는 기존의 배열 요소들을 제거하고 그 부분을 새로운 항목으로 대체한다.

 

var a = ['a', 'b', 'c'];

var r = a.splice(1, 1, 'ache', 'bug');

// a is ['a', 'ache', 'bug', 'c']

// r is ['b']

  

array.unshift(item..)

unshift 메서드는 항목들을 배열의 뒤가 아니라 앞에다 추가한다.

배열의 새로운 length 값을 반환한다..

 

var a = ['a', 'b', 'c'];

var r = a.unshift('?', '@');

// a is ['?', '@', 'a', 'b', 'c']

// r is 5

 

 

함수(Function)

function.apply(thisArg, argArray)

apply 메서드는 this에 연결될 객체와 옵션인 인수 배열을 넘기면서 함수를 호출한다. 

Function.method('bind', function (that) {
    var method = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments, [1]);
    return function (  ) {
        return method.apply(that,
            args.concat(slice.apply(arguments, [0])));
    };
});

var x = function (  ) {
    return this.value;
}.bind({value: 777});

alert(x(  )); // 777

  

숫자(Number) 

number.toExponential(fractionDigits)

toExponential 메서드는 숫자를 지수 형태의 문자열로 변환한다. 

document.writeln(Math.PI.toExponential(0)); // 3e+0
document.writeln(Math.PI.toExponential(2)); // 3.14e+0              
document.writeln(Math.PI.toExponential(7)); // 3.1415927e+0         
document.writeln(Math.PI.toExponential(16)); // 3.1415926535897930e+0
document.writeln(Math.PI.toExponential(  )); // 3.141592653589793e+0

 

 

number.toFixed(fractionDigits)

toFixed 메서드는 숫자를 고정 소수점 형태로 변환한다. 

document.writeln(Math.PI.toFixed(0)); // 3
document.writeln(Math.PI.toFixed(2)); // 3.14
document.writeln(Math.PI.toFixed(7)); // 3.1415927
document.writeln(Math.PI.toFixed(16)); // 3.1415926535897930
document.writeln(Math.PI.toFixed(  )); // 3

 

 

number.toPrecision(precision)

toPrecision 메서드는 숫자를 10진수 형태의 문자열로 변환한다. 

document.writeln(Math.PI.toPrecision(2));    // 3.1
document.writeln(Math.PI.toPrecision(7));    // 3.141593
document.writeln(Math.PI.toPrecision(16));   // 3.141592653589793
document.writeln(Math.PI.toPrecision(  ));   // 3.141592653589793

 

 

number.toString(radix)

toString 메서드는 숫자를 문자열로 변환한다.

radix 매개변수는 진법을 지정한다. 기본값은 10이다. 

document.writeln(Math.PI.toString(2));       // 11.001001000011111101101..(중략)..
document.writeln(Math.PI.toString(8));       // 3.1103755242102643
document.writeln(Math.PI.toString(16));      // 3.243f6a8885a3
document.writeln(Math.PI.toString(  ));      // 3.141592653589793