5장-3,4,5) 참조 타입 - Date 타입, RegExp 타입, Function 타입

5.3 Date 타입

자바 초기 버전의 java.util.Date에 기반한다.

따라서 날짜와 시간을 저장할 때 1970년 1월 1일 0시부터 몇 밀리초가 지났는지 나타내는 숫자를 사용한다.

1970년으로 부터 285,616년 전후의 날짜를 정확히 표현할 수 있다.

생성 방법

var now = new Date();

매개변수를 넘기지 않으면 현재 날짜와 시간이 저장된다.

밀리초를 넘기면 특정 날짜와 시간을 나타낼 수 있는데 이 계산은 복잡하므로

이를 계산하는 메서드 Date.parse()와 Date.UTC()를 보통 사용한다.

Date.parse()

날짜를 표현하는 문자열을 받아 해당 문자열을 밀리초 표현으로 변환한다.

- 월/일/년

- 월이름 일, 년

- 요일 월이름 일 년 시:분:초 타임존

- YYYY-MM-DDTHH:mm:ss,sssZ

올바른 형식이 아닐 때는 NaN을 반환한다.

Date 생성자는 문자열을 받으면 Date.parse()를 호출한다.

Date.UTC(년, 월(0~11), 일(1~31), 시(0~23), 분, 초, 밀리초)

필수 매개변수는 첫 번째와 두 번째(년, 월) 뿐이다.

일을 생략하면 1로 간주하며 다른 매개변수는 0으로 간주한다.

Date 생성자에 해당 UTC 형식의 매개변수를 넘기면 Date.UTC()를 호출한다. 하지만 GMT가 아닌 지역 시간을 사용한다.

Date.now()

ECMAScript5에서 추가되었다.

현재 시각을 밀리초 표현으로 반환한다.

5.3.1 상속된 메서드

다른 참조 타입과 마찬가지로 toLocaleString(), toString(), valueOf()메서드를 오버라이드 한다.

toLocaleString()과 toString()은 문자열로 반환하는데 이는 브라우저마다 형식에 상당한 차이가 있으므로

사용자에게 표시하기에는 적당하지 않다.

valueOf()은 비교 연산자가 정확히 작동하도록 밀리초표현을 쓴다.

5.3.2 날짜 표시 메서드

Date 타입에는 특정한 형식으로 표현하는 메서드가 여럿있다. (정확한 형식은 브라우저에 따라 다르다.)

- toDateString(): 요일, 월, 일, 년

- toTimeString(): 시, 분, 초, 타임존

- toLocaleDateString(): 요일, 월, 일, 년

- toLocaleTimeString(): 시, 분, 초, 타임존

- toUTCString(): UTC형식

5.3.3 날짜/시간 부속 메서드

날짜의 특정 부분을 가져오거나 설정하는데 쓰이는 메서드가 존재한다. (책에 표가 있지만 생략.)

5.4 RegExp 타입

다음과 같이 펄과 비슷한 문법을 써서 정규 표현식을 생성할 수 있다. (리터럴)

var exp = /pattern/flags;

pattern: 정규 표현식을 나타내는 식을 쓴다.

flags: 정규 표현식을 어떻게 동작할지 나타낸다.

- g: 전역 모드를 지정. 일치하는 패턴을 하나만 찾지 않고 문자열 전체를 검사한다.

- i: 대소문자를 구분하지 않는다.

- m: 여러 줄 모드. 텍스트의 줄 끝에 도달해도 멈추지 않고 계속 패턴을 찾는다.

다음 '메타 문자'를 패턴에 문자로 쓸 때는 반드시 역슬래시를 앞에 붙여 이스케이프를 해야한다.

( ) [ ] { } \ ^ $ | ? * + .

다음과 같이 생성자를 이용하여 정규 표현식을 만들 수 있다.

var pattern = new RegExp("[bc]at", "i");

메타 문자를 사용할 때는 이중으로 이스케이프해야 한다.

ex) 리터럴: /\w\\hello\\123/  <->  생성자: "\\w\\\\hello\\\\123"

ECMAScript 3판에서 리터럴로 생성된 정규 표현식은 항상 같은 인스턴스를 공유하지만

생성자는 호출할 때마다 새로운 인스턴스를 생성한다.

5판에서는 이런 혼란스러운 점을 제거하기 위해 리터럴로 생성할 때도 생성자를 호출하도록 정했다.

5.4.1 정규 표현식 인스턴스 프로퍼티

- global: g 플래그가 설정되었는지 나타내는 불리언 값.

- ignoreCase: i 플래그가 설정되었는지 나타내는 불리언 값.

- lastIndex: 패턴 매칭을 어느 위치에서 시작할지 나타내는 정수 값. 항상 0부터 시작.

- multiline: m 플래그가 설정되었는지 나타내는 불리언 값.

- source: 정규 표현식을 생성한 문자열. 리터럴 형식으로 반환하되 정규 표현식을 열고 닫는 /문자는 포함하지 않는다.

5.4.2 정규 표현식 인스턴스 메서드

exec()

가장 많이 쓰이는 메서드로 그룹을 캡처할 의도로 만드어진 메서드

이 메서드는 패턴을 테스트할 문자열을 매개변수로 받고 패턴에 일치하는 문자열 배열을 반환하며

일치하는 부분을 찾을 수 없을 때는 null을 반환한다.

반환하는 배열은 Array의 인스턴스인 동시에 프로퍼티 두개가 추가된다.

index라는 패턴이 일치한 위치와 input이라는 매개변수로 넘긴 문자열이다.

배열의 첫 번째 데이터는 패턴에 일치하는 부분 전체이다.

다른 데이터는 표현식에서 캡처한 부분이다.

캡처 그룹이 없다면 데이터가 단 하나만 존재한다.

g 플래그가 설정되어 있더라도 메서드 실행 한 번에 한 가지 매치에 관한 정보만 반환한다.

설정되어 있지 않으면 여러번 메서드를 호출해도 첫 번째 매치에 대한 정보만 반환한다.

test()

이 메서드 역시 문자열을 매개변수로 받지만 반환 값이 다르다.

문자열이 패턴에 일치하면 true를, 일치하지 않으면 false를 반환한다.

toLocaleString(), toString()

리터럴 표현의 문자열을 반환한다.

5.4.3 RegExp 생성자 프로퍼티

이 프로퍼티는 스코프에 포함된 정규 표현식 전체에 영향을 미치며 마지막으로 실행한 정규 표현식 조작에 따라 바뀐다.

두 가지 방법으로 프로퍼티에 접근할 수 있다.

각 프로퍼티에는 정식 이름과 짧은 이름이 있는데 오페라는 짧은 이름을 지원하지 않는다.

- input ($_) : 마지막으로 테스트한 텍스트. (오페라 미지원)

- lastMatch ($&) : 마지막으로 일치한 문자열. (오페라 미지원)

- lastParen ($+) : 마지막으로 일치한 캡처 그룹. (오페라 미지원)

- leftContext ($') : input 텍스트에서 lastMatch 앞에 있는 문자열.

- multiline ($*) : 모든 정규 표현식이 다중 행 모드(m)을 사용해야 하는지 표현하는 불리언 값. (인터넷 익스플로러, 오페라 미지원)

- rightContext ($') : input 텍스트에서 lastMatch 다음에 오는 문자열.

짧은 이름은 대부분 잘못된 식별자로 간주하는 문자가 들어 있으므로 대괄호 표기법을 써야한다.

ex) RegExp["$&"];

캡처 그룹을 아홉 개까지 저장할 수 있는 프로퍼티도 있다.

RegExp.$1 ~ RegExp.$9 형식으로 쓰이며 exec()나 test()를 호출할 때마다 자동으로 값이 설정된다.

5.5 Function 타입

함수는 사실 객체이다.

모든 함수는 Function 타입의 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티와 메서드가 있다.

함수 이름은 단순히 함수 객체를 가리키는 포인터일 뿐이다.

생성 방법

함수 선언

function sum(a,b){

return a+b;

}

함수 표현식

var sum = function(a,b){

return a+b;

};

함수 표현식은 함수 선언과 거의 일치한다.

Function 생성자

var sum = new Function("a", "b", "return a+b");

이 방법은 코드를 두 번 평가하므로 성능에 영향이 있으므로 권장하지 않는다.

5.5.1 오버로딩 없음(다시 설명합니다)

함수 이름이 단순한 포인터이므로 오버로딩을 하는 경우 함수를 덮어쓰게 된다.

5.5.2 함수 선언 vs 함수 표현식

자바스크립트 엔진은 코드를 평가할 때 제일 먼저 함수 선언을 찾은 다음 이들을 맨위로 올린다.

즉 함수 선언은 해당 함수를 호출하는 부분보다 뒤에 있다 하더라도 '끌어올려진다.(hoist)'

이러한 차이를 제외하면 함수를 이름으로 호출할 때 다른 차이는 없다.

5.5.3 값처럼 쓰는 함수

함수를 매개변수로 넘기거나, 반환하는 것이 가능하다.

이를 이용해 프로퍼티 이름에 따라 비교 함수를 생성해 반환하는 함수를 만들 수 있다.

5.5.4 함수의 내부 구조

함수 내부에는 arguments, this라는 특별한 객체가 있다.

arguments

3장에서 나오듯이 배열과 비슷한 객체이며 함수에 전달된 매개변수를 모두 포함한다.

주요 목적은 매개변수를 표현하는 것이지만, 소유자인 함수를 가리키는 포인터인 callee라는 프로퍼티도있다.

this

this는 함수가 실행 중인 컨텍스트 객체에 대한 참조이다.

함수를 전역 스코프에서 호출했다면 this는 window를 가리키는 것이다.

ECMAScript 5판에서는 함수 객체의 caller 프로퍼티도 공식화했다.

caller는 해당 함수를 호출한 함수에 대한 참조를 저장하며 전역 스코프에서 호출했다면 null이 저장된다.

이름사이의 의존성을 제거하려면 arguments.callee.caller로 사용하면 된다.

5.5.5 함수 프로퍼티와 메서드

모든 함수에 공통인 프로퍼티는 length와 prototype이다.

length

정의된 매개변수의 개수

prototype

ECMAScript에서 가장 흥미로운 부분 중 하나이다.

모든 참조 타입의 인스턴스 메서드가 존재하는 곳이다.

즉 toString()이나 valueOf() 같은 메서드는 prototype에 존재하며 객체 인스턴스는 이에 접근한다.

개발자 자신만의 참조 타입과 상속을 정의할 때 매우 중요하다.(6장에 설명)

열거할 수 없는 프로퍼티이므로 for-in문에 나타나지 않는다.

함수에는 apply()와 call()이라는 두 가지 메서드가 더 있다.

두 메서드 모두 소유자인 함수를 호출하면서 this값와 매개변수들을 넘긴다.

함수 내부에서는 넘겨지는 this값으로 호출되는 함수 내부의 this값을 바꾸는 것이나 마찬가지이다.

둘의 다른 점은 apply()는 매개변수를 배열로 넘기고 call()은 매개변수를 각각 매개변수로 넘긴다.

이 두 메서드의 진가는 함수 내부의 this를 바꾸는 데 있다.

ex)

var str='hello';

var o={str:"HELLO"};

function sayHello(){

return this.str;

}

sayHello.call(this);        // hello

sayHello.call(window);    // hello

sayHello.call(o);            // HELLO

ECMAScript 5판의 함수에 bind()라는 메서드도 정의되었다.

이 메서드는 새 함수 인스턴스를 만드는데 그 this는 bind()에 전달된값이다.

ex) 위에 코드에 덧붙임

var objFunction = sayHello.bind(o);    // sayHello의 this를 o로 바꾼 새 함수 인스턴스를 반환한다.

objFunction();        // HELLO

상속된 메서드 toLocaleString()과 toString()을 함수에서 호출하면 항상 함수의 코드를 반환한다.

코드의 정확한 형식은 브라우저마다 달라 디버그용으로는 유용할 수 있지만 중요한 기능에 그대로 사용하면 안 된다.

valueOf()는 함수 자체를 반환한다.

정리

함수    - arguments 객체    - callee 프로퍼티

- this 객체

- caller 프로퍼티

- length 프로퍼티

- prototype 프로퍼티

- apply 메서드

- call 메서드

- bind 메서드

[출처: 프론트엔드 개발자를 위한 자바스크립트 프로그래밍]