5장-6,7) 참조타입 - 원시 래퍼 타입, 내장된 싱글톤 객체

5.6 원시 래퍼 타입

Boolean, Number, String은 원시 값을 편리하게 조작하기 위해 디자인된 참조 타입이다.

이들은 다른 타입과 같이 동작하지만 대응하는 원시 값과 연관된 독특한 동작 방식도 가진다.

원시 값을 읽을 때마다서 이에 해당하는 래퍼 타입이 이면에서 생성되므로 메서드를 사용할 수 있다.

ex)

var s1 = "some";

var s2 = s1.substring(2);

이 코드에서 s1은 원시 값인 문자열을 담고 있는 변수다.

다음 행에서 s1은 substinrg()메서드를 호출하고 결과를 s2에 저장한다.

원시 값은 객체가 아니므로 논리적으로 메서드를 가질 수 없지만 별다른 코드 없이도 메서드를 호출했다.

사실은 이면에서 이를 수행되게 만드는 많은 코드가 실행된다.

두 번째 줄에서 s1에 접근하는 순간 (메모리에서 값을 읽는 순간)

String 타입의 인스턴스를 만든 후, 해당 인스턴스에서 메서드를 호출한 뒤, 인스턴스를 파괴한다. 

이러한 동작으로 인해 원시 문자열 값을 마치 객체처럼 사용할 수 있는 것이다. (Boolean, Number 이하동문)

참조 타입과 원시 래퍼 타입의 주요 차이는 생명 주기이다.

참조 타입은 new 연산자를 사용해 인스턴스를 만들면 스코프를 벗어날 때까지 메모리에 존재하지만

자동으로 생성된 원시 래퍼 타입은 해당 행을 벗어나는 즉시 파괴된다.

따라서 원시 래퍼 타입에는 런타임에 프로퍼티나 메서드를 추가할 수 없다.

ex)

var str = "some";

str.color = "red";

alert(str.color);       // undefined

Boolean, Number, String 생성자를 이용하여 원시 래퍼 객체를 생성할 수 있지만, 이렇게 하면

원시 값인지 래퍼 객체인지 혼란스러울 수 있으므로 이는 사용을 한정해야 한다.

typeof (래퍼 객체) 는 "object"를 반환하며 (래퍼 객체) instanceof String는 true를 반환한다.

주의할 점은 new를 사용해 래퍼 객체를 만든 것과 같은 이름의 형변환 함수를 호출한 결과는 다르다는 것이다.

ex)

var str = "25";

alert(typeof Number(str));    // "number"

var obj = new Number(str);

alert(typeof obj);            // "object"

Number(str)은 원시 값 25를 나타내지만 obj는 Number의 인스턴스이다.

obj같이 객체를 명시적으로 생성하는 일은 추천하지 않지만 원시 값을 조작하려면 래퍼 객체의 기능이 필요하다.

5.6.1 불리언 타입

불리언 값에 대응하는 참조 타입이다.

Boolean 객체를 생성하려면 생성자에 true나 false를 넘긴다.

Boolean 인스턴스는 valueOf()와 toString() 메서드를 "true" 혹은 "false"를 반환하도록 오버라이드한다.

ECMAScript에서 Boolean 객체는 불리언 표현식에서는 모든 객체를 자동으로 true로 변환한다는

혼란스러운 점이 있어 자주 쓰이지 않는다.

또한 typedef시 원시 타입은 "boolean"을 반환하며 참조 타입은 "object"를 반환하며,

원시 값 instanceof Boolean을 사용하면 false를 반환한다.

5.6.2 Number 타입

숫자형 값의 참조 타입이다.

Number 객체는 생성자에 숫자를 넘겨 생성한다.

valueOf(), toString(), toLocaleString()을 오버라이드하며, valueOf()는 숫자형 값을 반환하고 나머지 두 메서드는 문자열을 반환한다. toString()은 옵션으로 진법 매개변수를 받는다.

다양한 형식의 문자열로 반환하는 메서드

toFixed()

매개변수 수만큼의 소수점 자리를 나타낸 문자열을 반환한다.

toExponential()

숫자를 지수 표기법 문자열로 반환한다. toFixed()와 마찬가지로 매개변수를 받는다

toPrecision()

숫자에 따라 지수 표기법이나 소수점 표기법을 선택하여 반환한다. 매개변수는 총 자리 수를 나타낸다.

Number 객체는 숫자형 값을 다룰 때 중요한 기능을 포함하지만,

Boolean 객체와 비슷한 문제가 잠재하므로 사용을 피하는 것이 좋다.

5.6.3 String 타입

생성자에 문자열을 넘겨 생성한다.

객체의 메서드 모두 원시 문자열에서 사용할 수 있다.

valueOf(), toLocaleString(), toString() 모두 객체의 원시 문자열 값을 반환한다.

글자 메서드

문자열의 특정 문자에 접근하는 메서드는 charAt()과 charCodeAt() 두 가지이다.

각 메서드는 원하는 문자의 인덱스 매개변수를 받는다.

charAt()은 문자 자체를, charCodeAt()은 문자 코드를 반환한다.

ECMAScript 5판에는 대괄호 표기법을 이용해 접근하는 방법도 있다.

문자열 조작 메서드

concat()

문자열을 병합하여 결과를 반환한다.

매개변수 제한이 없다. 하지만 + 연산자가 더 빠르다.

slice(), substr(), substring()

자신의 문자열의 일부분을 반환하는 메서드이다.

매개변수는 한 개 또는 두 개를 받는다.

첫 번째 매개변수는 어디서부터 가져올 것인지를 나타내며,

옵션인 두 번째 매개변수는 slice()와 substring()은 가져오기를 끝내는 위치 바로 다음이다.

substr()은 문자를 몇 개 가져올지 나타낸다.

매개변수에 음수를 넘기면

slice()는 문자열 길이에 해당 매개변수를 더한 값을 사용한다. (끝부터 카운팅)

substr()은 첫 번째 매개변수에서는 문자열 길이에 해당 매개변수를 더한 값을 이용하며, 두 번째 매개변수에서는 0을 사용한다.

substring()은 모든 음수 매개변수를 0으로 바꾼다.

세 메서드 모두 원래 문자열을 변경하지 않으며 새로운 원시 문자열 값을 반환한다.

문자열 위치 메서드

원하는 문자열의 위치를 찾는 메서드는 indexOf()와 lastIndexOf() 두 가지이다.

매개변수로 넘긴 문자열을 몇 번째에 찾았는지를 반환하며 못 찾으면 -1을 반환한다.

lastIndexOf()는 끝부터 검색을 시작한다.

옵션으로 두 번째 매개변수를 넘길 수 있는데, 이는 검색을 시작할 인덱스이다.

두 메서드를 반복 호출하여 원하는 문자를 모두 찾을 수 있다.

trim()메서드

문자열을 복사한 후 앞뒤 공백을 모두 제거한 결과를 반환한다.

trimRight(), trimLeft()는 비표준 메서드이다.

대소문자 메서드

toLowerCase(): 소문자로 변환한 문자열을 반환한다.

toLocaleLowerCase(): 위의 메서드와 같지만 지역에 맞게 사용하도록 만든 지역 메서드이다.

toUpperCase(): 대문자로 변한환 문자열을 반환한다.

toLocaleUpperCase(): 위의 메서드와 같지만 지역에 맞게 사용하도록 만든 지역 메서드이다.

문자열 패턴 매칭 매서드

match()

RegExp 객체의 exec()와 같은 결과를 반환한다.

매개변수로 전규 표현식 리터럴이나 RegExp 객체를 하나 받는다.

반환하는 배열은 exec()메서드가 반환하는 것과 같다.

search()

match()와 마찬가지로 정규표현식 리터럴이나 객체를 매개변수로 받는다.

패턴에 일치하는 첫 번째 문자열 인덱스를 반환하며 일치하는 것을 찾지 못했을 때는 -1을 반환한다.

항상 문자열 처음에서 검색을 시작한다.

replace()

문자열의 일부를 바꾼다.

첫 번째 매개변수는 RegExp 객체,리터럴 또는 문자열이고

두 번째 매개변수는 문자열 또는 문자열을 반환하는 함수이다.

일치하는 문자열 전체를 바꾸려면 정규 표현식에 g플래그를 써서 넘기는 방법 외에는 없다.

두 번째 매개변수에 문자열을 쓸 때는 정규 표현식에서 얻은 정보를 다양한 방법으로 응용하는 특수문자가 있다.

(특수문자 표 생략)

ex)

var text = "cat, bat, sat, fat";

result = text.replace(/(.at)/g, "word ($1)");

alert(result);        // word (cat), word (bat), word (sat), word (fat)

두 번째 매개변수에 함수를 사용하면 일치하는 문자열이 하나뿐일 때 콜백함수는 자동으로 세 개의 매개변수를 받는다.

일치하는 문자열, 해당 문자열의 위치, 마지막으로 전체 문자열이다.

일치하는 것이 여럿일 때는 이들 모두가 매개변수로 전달되며 그다음에는 매치한 위치, 마지막으로 원래 문자열이 전달된다.

콜백함수는 반드시 문자열을 반환해야 하며 그 문자열로 일치한 문자열을 대체한다.

ex)

function htmlEscape(text){

return text.replace(/<>"&/g, function(match, pos, originalText){

switch(match){

case "<":

return "&lt;";

...

}

});

}

split()

텍스트를 구분자를 기준으로 분리해서 배열에 담아 반환한다.

구분자에는 문자열과 RegExp 객체를 쓸 수 있는데 문자열을 정규 표현식으로 간주하지는 않는다.

옵션인 두 번째 매개변수는 반환받을 배열의 크기를 나타낸다.

일치하는 것이 없을 때 브라우저마다 동작이 크게 다르다.

정규 표현식에서 캡처 그룹을 사용할 때의 차이점은 이 외에도 더 있다.

localeCompare() 메서드

문자열 두 개를 비교한 후 세 가지 값 중 하나를 반환한다.

* 메서드를 호출한 문자열(이하 A)이 매개변수 문자열(이하 B)보다 알파벳 순서상 뒤에 있다면 음수를 반환한다. (대부분 -1)

* A와 B가 일치한다면 0을 반환한다.

* A가 B보다 알파벳 순서상 앞에 있다면 양수를 반환한다. (대부분 1)

독특한 점은 메서드가 어떻게 동작할지는 실행하는 지역에따라 다르다는 것이다.

fromCharCode()메서드

문자 코드를 받아 이를 문자열로 변환하는 메서드이다.

charCodeAt()의 역함수라고 생각하면 된다.

매개변수에 제한이 없다.

HTML 메서드

자바스크립트에서 동적으로 HTML 형식을 생성할 필요가 있음을 깨닫고 만든 메서드이다.

(표 생략)

5.7 내장된 싱글톤 객체

ECMA-262 명세에서 내장 객체를 "ECMAScript 구현에서 제공하는 객체는 호스트 환경에 무관하며 ECMAScript 프로그램이 실행되는 즉시 이미 존재한다."라고 정의한다.

다시 말해 개발자가 내장 객체를 명시적으로 인스턴스화 할 필요가 없다는 것이다.

ECMA-262는 Object, Array, String같은 내장 객체 외에도 Global, Math 두 가지 싱글톤 객체를 더 정의한다.

(싱글톤 객체: 인스턴스를 하나만 만들도록 의도한 객체)

5.7.1 Global 객체

명시적으로 접근할 수 없다는 점에서 가장 독특한 객체이다.

소유자가 없는 모든 프로퍼티와 메서드를 갖는 객체이다.

사실 전역 변수나 전역 함수라는 것은 존재하지 않으며 그것들은 모두 Global 객체의 프로퍼티가 된다.

또한 isNan(), isFinit(), parseInt() 함수 등은 Global 객체의 메서드이며 이외에도 여러가지 메서드가 있다.

URI 인코딩 메서드

encodeURI(): 브라우저에 전달할 URI를 인코딩한다. 공백문자등의 일부 특수 문자를 포함할 수 없다.

 UTF-8인코딩을 써서 사용할 수 없는 문자를 브라우저가 인식하고 이해할 수 있는 문자로 바꾼다.

 URI의 일부분으로 쓰이는 특수문자는 인코드하지 않는다.

decodeURI(): encodeURI()의 반대 메서드로 일부 특수 문자들을 디코드한다.

encodeURIComponent(): URI의 일부분만 조작한다. encodeURI()와 달리 모든 비표준 문자를 인코드한다.

decodeURIComponent(): encodeURIComponent()의 반대 메서드로 모든 비표준 문자를 디코드한다.

eval() 메서드

매개변수로 문자열을 하나 받는데 이 문자열은 실행하는 ECMAScript 코드여야 한다.

인터프리터가 eval()을 만나면 매개변수를 실제 ECMAScript 문자으로 해석해서 코드가 있던 위치에 삽입한다.

이 메서드 내부에서 정의한 변수나 함수는 이 장에서 설명한 끌어올림의 대상이 아니다.

스트릭트 모드에서는 내부에서 정의한 모든 변수와 함수에 접근할 수 없으므로 에러를 낸다. 또한, eval을 변수명으로 사용할 수 없다.

Global 객체의 프로퍼티 (생략)

Window 객체

ECMA-262에서는 Global객체에 직접적으로 접근할 수 없지만

웹 브라우저에서 window객체를 통해 접근할 수 있다.

5.7.2 Math 객체

수학 공식과 각종 상수를 갖고있다.

Math 객체의 프로퍼티

E: 자연로그 밑수인 e의 값 

LN10: 10의 자연로그

LN2: 2의 자연로그

LOG2E: e의 밑수가 2인 로그

LOG10E: e의 밑수가 10인 로그

PI: π 값

SQRT1_2: 1/2의 제곱근

SQRT2: 2의 제곱근

min()과 max() 메서드

가장 작은 수와 가장 큰 수를 찾는다.

매개변수로 숫자를 받으며 매개변수 개수에 제한이 없다.

배열 데이터에서 찾을 때에는 apply()를 사용하면 편하다. (ex. Math.max.apply(Math,[1,2,3,4,5]))

반올림 메서드 

ceil(): 가까운 정수로 값을 올림 연산한다.

floor(): 가까운 정수로 값을 내림 연산한다.

round(): 반올림. 소수점 아래 부분이 0.5 이상이면 올림, 아니면 내림 연산한다.

random() 메서드

0과 1 사이의 난수를 반환하되 0이나 1을 반환하지는 않는다.

난수 범위 공식은 다음과 같다.

Math.random()*원하는 수의 개수+시작하는 숫자

ex) Math.random()*5+2;    // 2~6

기타 메서드 (표 생략)

절댓값, e의 제곱승, 자연로그, 제곱승, 삼각함수

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