8. 전역(Global) 객체와 래퍼(Wrapper) 객체

1. 키워드

전역 객체(Global Object)
래퍼 객체(Wrapper Object)
표준 객체(Standard Object)

2. 전역 객체와 래퍼 객체

1) 전역 객체

전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 한다.
전역 객체 그 자체는 전역 범위에서 this 연산자를 통해 접근할 수 있다.

자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 된다.
웹 브라우저가 새로운 페이지를 로드하면, 자바스크립트는 새로운 전역 객체를 만들고 해당 프로퍼티들을 초기화한다.

2) 래퍼 객체

var str = "문자열"; // 문자열 생성
var len = str.length; // 문자열 프로퍼티인 length 사용

위의 예제에서 생성한 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티를 사용할 수 있다.
프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문이다.

이렇게 생성된 임시 객체는 String 객체의 메서드를 상속받아 프로퍼티를 참조하는 데 사용된다.
이후 프로퍼티의 참조가 끝나면 사용된 임시 객체는 자동으로 삭제된다.
이렇게 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체라고 한다.

var str = "문자열"; // 문자열 리터럴 생성
var strObj = new String(str); // 문자열 객체 생성

str.length; // 리터럴 값은 내부적으로 래퍼 객체를 생성한 후에 length 프로퍼티를 참조함.

str == strObj; // 동등 연산자는 리터럴 값과 해당 래퍼 객체를 동일하게 봄.
str === strObj; // 일치 연산자는 리터럴 값과 해당 래퍼 객체를 구별함.

typeof str; // string 타입
typeof strObj; // object 타입

3) 표준 객체

자바스크립트에서 표준 객체는 다른 객체의 기초가 되는 핵심적인 객체이다.

자주 사용되는 대표적인 자바스크립트 표준 객체는 다음과 같다.

1] Number 객체

2] Math 객체

3] Date 객체

4] String 객체

5] Array 객체

3. `Number` 객체

1) 자바스크립트에서의 수 표현

자바스크립트에서는 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.
자바스크립트에서 모든 숫자는 IEEE 754 국제 표준에서 정의한 64비트 부동 소수점 수로 저장된다.

2) 진법 표현

자바스크립트에서는 기본적으로 10진법을 사용하여 수를 표현한다.
하지만 0x 접두사를 사용하여 16진법으로 수를 표현할 수도 있다.

var x = 0xab; // 16진법으로 표현된 10진수 171
var y = 29; // 10진법으로 표현된 10진수 29

x + y; // 두 수 모두 10진법으로 자동으로 변환되어 계산됨. -> 200

위의 예제처럼 자바스크립트에서는 산술 연산 시 모든 수가 10진수로 자동 변환되어 계산된다.

또한, 숫자에 toString() 메서드를 사용하여 해당 숫자를 여러 진법의 형태로 변환할 수 있다.

var num = 256;

num.toString(2); //  2진법으로 변환: 100000000
num.toString(8); //  8진법으로 변환: 400
num.toString(10); // 10진법으로 변환: 256
num.toString(16); // 16진법으로 변환: 100
// 2진수로 변환한 결괏값을 문자열로 반환함.
num.toString(2); // 100000000
// 문자열을 숫자로 나눴기 때문에 자동으로 10진수로 변환되어 산술 연산된 결괏값
num.toString(2) / 2; // 50000000

toString() 메서드는 해당 숫자의 진법을 실제로 바꿔주는 것이 아닌, 전달된 진법으로 변환된 형태의 문자열을 반환해 주는 것이다.

3) `Infinity`

자바스크립트에서는 양의 무한대를 의미하는 Infinity 값과 음의 무한대를 의미하는 -Infinity 값을 사용할 수 있다.
Infinity 값은 사용자가 임의로 수정할 수 없는 읽기 전용 값이며, 자바스크립트의 어떤 수보다도 큰 수로 취급된다.

var x = 10 / 0; // 숫자를 0으로 나누면 Infinity를 반환함.
var y = Infinity * 1000; // Infinity에 어떠한 수를 산술 연산해도 Infinity를 반환함.
var z = 1 / Infinity; // Infinity의 역수는 0을 반환함.

x; // Infinity
y; // Infinity
z; // 0

4) `NaN`

NaN(Not A Number)는 숫자가 아니라는 의미로, 정의되지 않은 값이나 표현할 수 없는 값을 가리킨다.
0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값이다.

var x = 100 - "10"; // "10"은 자동으로 숫자로 변환되어 계산됨.
var y = 100 - "문자열"; // "문자열"은 숫자로 변환할 수 없기 때문에 NaN을 반환함.
var z = 0 / 0; // 0을 0으로 나눌 수 없기 때문에 NaN을 반환함.

x; // 90
y; // NaN
z; // NaN

자바스크립트의 전역 함수 중 하나인 isNaN() 함수를 사용하면, 전달받은 값이 숫자인지 아닌지를 판단해 준다.

var x = 100 * "문자열";

if (isNaN(x)) {
  // 전달된 값이 숫자인지 아닌지를 검사함.
  document.write("변수 x의 값은 숫자가 아닙니다.");
} else {
  document.write("변수 x의 값은 숫자입니다.");
}

5) `null`, `undefined`, `NaN`, `Infinity`에 대한 비교

자바스크립트에서는 약간은 비슷한 것 같으면서도 전혀 다른 4가지 값을 제공하고 있다.

null은 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미하는 값이다.
undefined는 null과는 달리 하나의 타입이며, '타입'이 정해지지 않은 것을 의미하는 값이기도 하다.
NaN은 number 타입이며, '숫자가 아님'을 의미하는 숫자이다.
Infinity는 number 타입이며, '무한대'를 의미하는 숫자이다.

자바스크립트는 타입 검사가 매우 유연한 언어이다.
따라서 위의 값들 또한 문맥에 따라 다음과 같이 자동으로 타입 변환이 이루어진다.

값	`Boolean` 문맥	`Number` 문맥	`String` 문맥
`null`	`false`	`0`	`"null"`
`undefined`	`false`	`NaN`	`"undefined"`
`NaN`	`false`	`NaN`	`"NaN"`
`Infinity`	`true`	`Infinity`	`"Infinity"`

typeof null; // object
typeof undefined; // undefined
typeof NaN; // number
typeof Infinity; // number

Boolean(null); // false
Boolean(undefined); // false
Boolean(NaN); // false
Boolean(Infinity); // true

Number(null); // 0
Number(undefined); // NaN
Number(NaN); // NaN
Number(Infinity); // Infinity

String(null); // null
String(undefined); // undefined
String(NaN); // NaN
String(Infinity); // Infinity

6) `Number` 객체

자바스크립트에서 숫자는 보통 숫자 리터럴을 사용하여 표현한다.

하지만 수를 나타낼 때 new 연산자를 사용하여 명시적으로 Number 객체를 생성할 수도 있다.
이러한 Number 객체는 숫자 값을 감싸고 있는 래퍼 객체이다.

var x = 100; // 숫자 리터럴
var y = new Number(100); // Number 객체

x; // 100
y; // 100

typeof x; // number 타입
typeof y; // object 타입

== 연산자는 리터럴 값과 객체의 값이 같으면 true를 반환한다.
하지만 === 연산자는 숫자 리터럴과 Number 객체의 타입이 다르므로, 언제나 false를 반환한다.

var x = 100; // 숫자 리터럴 100
var y = new Number(100); // Number 객체 100

x == y; // 값이 같으므로 true
x === y; // 서로 다른 객체이므로 false

Note

new 연산자를 사용하여 객체를 생성할 때에는 매우 많은 추가 연산을 해야만 한다.
따라서 가능한 숫자 리터럴을 사용하여 수를 표현하고, Number 객체는 래퍼 객체로만 활용하는 것이 좋다.

4. `Math` 객체

1) `Math` 객체

Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다.
Math 객체는 다른 전역 객체와는 달리 생성자가 존재하지 않는다.
따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메서드나 프로퍼티를 바로 사용할 수 있다.

2) `Math` 프로퍼티

자바스크립트는 수학에서 사용하는 다양한 상수들을 Math 프로퍼티를 이용해 제공하고 있다.

프로퍼티	설명	대략값
`Math.E`	오일러의 수(Euler's Constant)라고 불리며, 자연로그(Natural Logarithms)의 밑(Base) 값	`2.718`
`Math.LN2`	2의 자연로그 값	`0.693`
`Math.LN10`	10의 자연로그 값	`2.303`
`Math.LOG2E`	오일러 수(e)의 밑 값이 2인 로그 값	`1.443`
`Math.LOG10E`	오일러 수(e)의 밑 값이 10인 로그 값	`0.434`
`Math.PI`	원의 원주를 지름으로 나눈 비율(원주율) 값	`3.14159`
`Math.SQRT1_2`	2의 제곱근의 역수 값	`0.707`
`Math.SQRT2`	2의 제곱근 값	`1.414`

5. `Date` 객체

1) 자바스크립트에서의 날짜 표현

자바스크립트에서는 Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다.
Date 객체는 연월일, 시분초의 정보와 함께 밀리초(Millisecond)의 정보도 함께 제공한다.

자바스크립트에서 날짜와 시간을 나타내기 위한 값의 범위는 다음과 같다.

1] 연도(Year): 1900년(00) ~ 1999년(99)

2] 월(Month): 1월(0) ~ 12월(11)

3] 일(Day): 1일(1) ~ 31일(31)

4] 시(Hours): 0시(0) ~ 23시(23)

5] 분(Minutes): 0분(0) ~ 59분(59)

6] 초(Seconds): 0초(0) ~ 59초(59)

2) `Date` 객체

자바스크립트에서 Date 객체를 초기화하는 방법은 다음과 같다.

1] new Date()

2] new Date("날짜를 나타내는 문자열")

3] new Date(밀리초)

4] new Date(년, 월, 일, 시, 분, 초, 밀리초)

Date 객체를 생성할 때 어떠한 인수도 전달하지 않으면, 현재 날짜와 시간을 가지고 Date 객체를 생성한다.

var date = new Date(); // Date 객체 생성
document.write(date);

Date 객체를 생성할 때 인수가 전달되면, 그 형태에 따라 특정 날짜와 시간을 가리키는 Date 객체를 생성한다.

new Date("December 14, 1977 13:30:00"); // 날짜를 나타내는 문자열
new Date(80000000); // 1970년 1월 1일 0시부터 해당 밀리초만큼 지난 날짜
new Date(16, 5, 25); // 3개의 숫자로 나타내는 날짜이며, 시간은 자동으로 0시 0분 0초로 설정됨.
new Date(16, 5, 25, 15, 40, 0); // 7개의 숫자로 나타내는 날짜
new Date(2016, 5, 25, 15, 40, 0); // 2000년대를 표기하고자 할 때에는 연도를 전부 표기해야 함.

Note

자바스크립트에서 날짜 계산의 모든 기준은 1970년 1월 1일 00:00:00(UTC, 협정세계시)부터이다.
또한, 하루는 86,400,000 밀리초로 계산된다.

3) 자바스크립트 날짜 양식

자바스크립트에서 날짜를 표현할 수 있는 양식은 다음과 같다.

1] ISO 날짜 양식

2] Long 날짜 양식

3] Short 날짜 양식

4] Full 날짜 양식

6. `String` 객체

1) 자바스크립트에서의 문자열 표현

자바스크립트에서 문자열 리터럴은 ""(큰따옴표)나 ''(작은따옴표)를 사용하여 손쉽게 만들 수 있다.

var firstStr = "이것도 문자열입니다."; // 큰따옴표를 사용한 문자열
var secondStr = "이것도 문자열입니다."; // 작은따옴표를 사용한 문자열
var thirdStr = "나의 이름은 '홍길동'이야."; // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var fourthStr = '나의 이름은 "홍길동"이야.'; // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.

2) 문자열의 길이

자바스크립트에서 문자열의 길이는 length 프로퍼티에 저장된다.

var strKor = "한글";
var strEng = "abcABC";

strKor.length; // 2
strEng.length; // 6

오랫동안 사용되어 온 아스키(ASCII) 인코딩 환경에서 영문자는 한 글자당 1바이트, 한글은 한 글자당 2바이트로 표현된다.
하지만 UTF-8 인코딩 환경에서는 영문자는 한 글자당 1바이트, 한글은 한 문자당 3바이트로 표현된다.
자바스크립트의 length 프로퍼티는 해당 문자열의 총 바이트 수를 저장하는 것이 아닌 글자의 개수만을 저장한다.

3) 이스케이프 시퀀스(Escape Sequence)

자바스크립트는 더욱 다양한 문자 표현을 위해 여러 가지 이스케이프 시퀀스 방식을 제공한다.
자바스크립트에서 제공하는 이스케이프 시퀀스 방식은 다음과 같다.

1] 16진수 이스케이프 시퀀스(Hexadecimal Escape Sequence)

2] 유니코드 이스케이프 시퀀스(Unicode Escape Sequence)

3] 유니코드 코드 포인트 이스케이프(Unicode Code Point Escape)

// 16진수 이스케이프 시퀀스로 \x 다음은 16진수 수로 인식됨.
"\xA2";

// 유니코드 이스케이프 시퀀스로 \u 다음은 유니코드로 인식됨.
"\u00A2";

// ECMAScript 6부터 새롭게 추가된 유니코드 코드 포인트 이스케이프 방식임.
String.fromCodePoint(0x00a2);

4) 긴 문자열 리터럴을 나누어 표현하기

자바스크립트에서는 길이가 긴 문자열 리터럴을 보기 좋게 표현하기 위해서 \나 + 연산자를 사용할 수 있다.

document.write(
  "이 문자열은 아주 긴 문자열입니다. \
따라서 몇 번에 걸친 줄 나누기가 필요합니다. \
자바스크립트에서는 역슬래시와 문자 결합 연산자를 사용하여 줄을 나눌 수 있습니다.<br>"
);

document.write(
  "이 문자열은 아주 긴 문자열입니다." +
    " 따라서 몇 번에 걸친 줄 나누기가 필요합니다." +
    " 자바스크립트에서는 역슬래시와 문자 결합 연산자를 사용하여 줄을 나눌 수 있습니다."
);

5) `String` 객체

자바스크립트에서 문자열은 보통 문자열 리터럴을 사용하여 표현한다.

하지만 문자열을 나타낼 때 new 연산자를 사용하여 명시적으로 String 객체를 생성할 수도 있다.
이러한 String 객체는 문자열 값을 감싸고 있는 래퍼 객체이다.

var str = "JavaScript";
var strObj = new String("JavaScript");

str; // "JavaScript"
strObj; // "JavaScript"

typeof str; // string
typeof strObj; // object

str == strObj; // 문자열 값이 같으므로, true를 반환함.
str === strObj; // 문자열 값은 같지만 타입이 다르므로, false를 반환함.

7. `Array` 객체

1) `Array` 객체

자바스크립트에서 배열은 정렬된 값들의 집합으로 정의되며, Array 객체로 다뤄진다.

8. 전역(Global) 객체와 래퍼(Wrapper) 객체

1. 키워드

2. 전역 객체와 래퍼 객체

1) 전역 객체

2) 래퍼 객체

3) 표준 객체

3. Number 객체

1) 자바스크립트에서의 수 표현

2) 진법 표현

3) Infinity

4) NaN

5) null, undefined, NaN, Infinity에 대한 비교

6) Number 객체

4. Math 객체

1) Math 객체

2) Math 프로퍼티

5. Date 객체