본문 바로가기

JavaScript/기본 이론

Chapter 19. 표준 객체

1. 전역 객체와 래퍼 객체

 표준 객체는 자바스크립트에서 이미 정의된 객체들을 말하며, 자바스크립트에서는 해당 객체에 포함된 메소드를 어디서나 접근할 수 있다. 

 전역 객체 또한 객체이므로  this 연산자를 통해 접근이 가능하며, 해당 객체에 있는 프로퍼티는 새로운 페이지로 로드되면 초기화된다. 

 

 래퍼 객체(wrapper object)는 변수에 담긴 데이터를 감싸는 객체로 일부 문법이나 제어문에서 특정 함수나 데이터를 참고하기 위해 임시로 생성한 객체를 말한다. 

 

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

 

 위의 예시와 같이 str이라는 문자열에 대한 객체를 생성하지 않았음에도, 해당 객체 안에 담긴 length 값을 가져오고 사용할 수 있다. 이는 해당 변수를 감싸는 객체가 임의로 생성되고, 해당 변수에 맞는 프로퍼티를 임시로 생성하기 때문이다. 

 

2. 표준 객체(Standard Object)

2.1. Number 객체

1) 객체

 숫자에 관련한 객체로 데이터를 담는 파라미터가 존재하고, 해당 파라미터는 10진수 혹은 16진수, 없는 숫자 등 다양하게 표현이 가능하다. 특수한 경우가 아니면 10진수를 기반으로 숫자가 표현되며 자바스크립트는 정해놓은 데이터 타입(변수 공간)이 없기 때문에 64비트를 기반으로 데이터를 저장한다. 

 64비트는 부동소수점, 정수, 부호로 나뉘고 비트를 나눠서 할당한다. 정수부는 15자리, 소수부는 17자리까지 유효하게 표현하며 이외에 데이터가 벗어나는 항목은 생략하거나 반올림하여 표현한다. 

 숫자 이외에 null 을 비롯한 다양한 데이터 형태를 가질 수 있으며, 해당 데이터에 따라 자바스크립트에서 인식하는 값이 상이하다. 이에 따라 제어문에서 조건이 변하는 경우도 있다. 아래의 표를 참고하자. 

 

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

 

또한 Number 객체는 아래와 같이 객체 자체에 값을 할당하고 해당 객체 값 혹은 파라미터를 가져올 수 있다. 

 

var x = 100;     // 숫자 리터럴
var y = new Number(100); // Number 객체
x;                       // 100
y;                       // 100
typeof x;                // number 타입
typeof y;                // object 타입
x == y;                  // 값이 같으므로 true
x === y;                 // 서로 다른 객체이므로 false

 

2) 메소드 

메소드 설명
Number.parseFloat() 문자열을 파싱하여, 문자열에 포함된 숫자 부분을 실수 형태로 반환함.
Number.parseInt() 문자열을 파싱하여, 문자열에 포함된 숫자 부분을 정수 형태로 반환함.
Number.isNaN() 전달된 값이 NaN인지 아닌지를 검사함.
Number.isFinite() 전달된 값이 유한한 수인지 아닌지를 검사함.
Number.isInteger() 전달된 값이 정수인지 아닌지를 검사함.
Number.isSafeInteger() 전달된 값이 안전한 정수(safe integer)인지 아닌지를 검사함.

 

3) Number.prototype 메소드

메소드 설명
toExponential() Number 인스턴스를 지수 표기법으로 변환한 후, 그 값을 문자열로 반환함.
toFixed() Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환함.
toPrecision() Number 인스턴스의 가수와 소수 부분의 합친 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환함.
toString() Number 인스턴스의 값을 문자열로 반환함.
valueOf() Number 인스턴스가 가지고 있는 값을 반환함.

 

2.2. Math 객체

1) 객체

  Math 객체는 수학에서 자주 사용하는 상수와 함수를 미리 구현해 놓은 내장 객체이다. 변수를 별도로 할당할 필요가 없고 전역에 이미 포함된 객체이므로 생성자를 사용하지 않는다. 

 

2) 메소드

메소드 설명
Math.min(x, y, ...) 인수로 전달받은 값 중에서 가장 작은 수를 반환함.
Math.max(x, y, ...) 인수로 전달받은 값 중에서 가장 큰 수를 반환함.
Math.random() 0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환함.
Math.round(x) x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환함.
Math.floor(x) x와 같거나 작은 수 중에서 가장 큰 정수를 반환함.
Math.ceil(x) x와 같거나 큰 수 중에서 가장 작은 정수를 반환함.
Math.abs(x) x의 절댓값을 반환함.
Math.cbrt(x) x의 세제곱근을 반환함.
Math.sqrt(x) x의 제곱근을 반환함.
Math.clz32(x) x을 32비트 이진수로 변환한 후, 0이 아닌 비트의 개수를 반환함.
Math.exp(x) ex 의 값을 반환함. (e : 오일러의 수)
Math.expm1(x) 1 - ex 의 값을 반환함.
Math.fround(x) x와 가장 근접한 32비트 부동 소수점 수(single precision float)를 반환함.
Math.hypot(x, y, ...) 인수로 전달받은 값들을 각각 제곱한 후 더한 총합의 제곱근을 반환함.
Math.imul(x, y) 인수로 전달받은 두 값의 32비트 곱셈의 결과를 반환함.
Math.log(x) x의 자연로그 값을 반환함. (ln x)
Math.log1p(x) ln(1 + x)의 값을 반환함.
Math.log10(x) x의 10을 밑으로 가지는 로그 값을 반환함.
Math.log2(x) x의 2를 밑으로 가지는 로그 값을 반환함.
Math.pow(x, y) x의 y승을 반환함.
Math.sign(x) x의 부호 값을 반환함.
Math.trunc(x) x의 모든 소수 부분을 삭제하고 정수 부분만을 반환함.
Math.sin(x), Math.cos(x), Math.tan(x),Math.asin(x), Math.acos(x), Math.atan(x), Math.asinh(x), Math.acosh(x), Math.atanh(x), Math.atan2(x) x의 해당 삼각 함숫값을 반환함.

 

3) 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

 

2.3. Date 객체

1) 객체 

 Date 객체는 날짜를 표현할 때 사용하는 객체로 각 년, 월, 일, 시, 분, 초 별로 데이터가 범위가 존재한다. 

 

  1. 연도(year) : 1900년(00) ~ 1999년(99)
  2. 월(month) : 1월(0) ~ 12월(11)  월은 0이 1월이다. 이 내용에 주의하자.
  3. 일(day) : 1일(1) ~ 31일(31)
  4. 시(hours) : 0시(0) ~ 23시(23)
  5. 분(minutes) : 0분(0) ~ 59분(59)
  6. 초(seconds) : 0초(0) ~ 59초(59)
 

 

// ◉ ISO 날짜 양식
new Date("1977-12-14T13:30:00"); // 날짜와 시간까지 표현함.
new Date("1977-12-14");     // 시간이 생략되면 자동으로 09:00:00으로 설정됨.
new Date("1977-12");     // 일이 생략되면 자동으로 1일로 설정됨.
new Date("1977");   // 월이 생략되면 자동으로 1월로 설정됨.

// ◉ Long 날짜 양식
new Date("Feb 19 1982");   // MMM DD YYYY
new Date("19 Feb 1982");   // DD MMM YYYY
new Date("February 19 1982");   // 월의 축약형 뿐만 아니라 전체 단어도 인식함.
new Date("FEBRUARY, 19, 1982"); // 쉼표는 무시되며, 대소문자의 구분은 없음.

// ◉ Short 날짜 양식
new Date("02/19/1982"); // MM/DD/YYYY
new Date("1982/02/19"); // YYYY/MM/DD

// ◉ Full 날짜 양식
new Date("Wed May 25 2016 17:00:00 GMT+0900 (Seoul Time)");
// GMT가 현재 국가와 다른 시간은 현재 국가의 GMT로 변환되어 표현됨.
new Date("Wed May 25 2016 17:00:00 GMT-0500 (New York Time)");

 

2) Date.prototype getter 메소드

메소드 설명 값의 범위
getDate() 현지 시각으로 현재 일자에 해당하는 숫자를 반환함. 1 ~ 31
getDay() 현지 시각으로 현재 요일에 해당하는 숫자를 반환함. 0 ~ 6
getMonth() 현지 시각으로 현재 월에 해당하는 숫자를 반환함. 0 ~ 11
getFullYear() 현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환함. YYYY
getHours() 현지 시각으로 현재 시각에 해당하는 숫자를 반환함. 0 ~ 23
getMilliseconds() 현지 시각으로 현재 시각의 밀리초에 해당하는 숫자를 반환함. 0 ~ 999
getMinutes() 현지 시각으로 현재 시각의 분에 해당하는 숫자를 반환함. 0 ~ 59
getSeconds() 현지 시각으로 현재 시각의 초에 해당하는 숫자를 반환함. 0 ~ 59
getTime() 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 숫자로 반환함. -
getTimezoneOffset() UTC로부터 현재 시각까지의 시간차를 분 단위로 환산한 값을 숫자로 반환함. -

 

3) Date.prototype UTC getter 메소드

메소드 설명
getUTCDate() 협정세계시(UTC)로 현재 일자에 해당하는 숫자를 반환함.
getUTCDay() 협정세계시(UTC)로 현재 요일에 해당하는 숫자를 반환함.
getUTCMonth() 협정세계시(UTC)로 현재 월에 해당하는 숫자를 반환함.
getUTCFullYear() 협정세계시(UTC)로 현재 연도를 4비트의 숫자(YYYY)로 반환함.
getUTCHours() 협정세계시(UTC)로 현재 시각에 해당하는 숫자를 반환함.
getUTCMilliseconds() 협정세계시(UTC)로 현재 시각의 밀리초에 해당하는 숫자를 반환함.
getUTCMinutes() 협정세계시(UTC)로 현재 시각의 분에 해당하는 숫자를 반환함.
getUTCSeconds() 협정세계시(UTC)로 현재 시각의 초에 해당하는 숫자를 반환함.

 

4) Date.prototype setter 메소드

메소드 설명 값의 범위
setDate() 현지 시각으로 특정 일자를 설정함. 1 ~ 31
setMonth() 현지 시각으로 특정 월을 설정함. 0 ~ 11
setFullYear() 현지 시각으로 특정 연도를 설정함. (연도뿐만 아니라 월과 일자도 설정할 수 있음) YYYY, MM, DD
setHours() 현지 시각으로 특정 시간을 설정함. 0 ~ 23
setMilliseconds() 현지 시각으로 특정 밀리초를 설정함. 0 ~ 999
setMinutes() 현지 시각으로 특정 분을 설정함. 0 ~ 59
setSeconds() 현지 시각으로 특정 초를 설정함. 0 ~ 59
setTime() 1970년 1월 1일 0시 0분 0초부터 밀리초 단위로 표현되는 특정 시간을 설정함. -

 

5) Date.prototype UTC setter 메소드

메소드 설명 값의 범위
setUTCDate() 협정세계시(UTC)로 특정 일자를 설정함. 1 ~ 31
setUTCMonth() 협정세계시(UTC)로 특정 월을 설정함. 0 ~ 11
setUTCFullYear() 협정세계시(UTC)로 특정 연도를 설정함. (연도뿐만 아니라 월과 일자도 설정할 수 있음) YYYY, MM, DD
setUTCHours() 협정세계시(UTC)로 특정 시간을 설정함. 0 ~ 23
setUTCMilliseconds() 협정세계시(UTC)로 특정 밀리초를 설정함. 0 ~ 999
setUTCMinutes() 협정세계시(UTC)로 특정 분을 설정함. 0 ~ 59
setUTCSeconds() 협정세계시(UTC)로 특정 초를 설정함. 0 ~ 59

2.4. String 객체

1) 객체

 자바스크립트는 Char과 String의 구별이 없기 때문에 문자열 데이터에 따옴표 구분이 없다, 또한 String 객체로 생성한 객체에는 length 와 같은 프로퍼티나 메소드가 존재한다. 

 스트링에 데이터 값은 문자열이기 때문에 하나의 선언구에서 모두 선언해야하는데 이럴 경우 가독성이 떨어진다는 단점이 있다. 이에 + 를 통해 들여쓰기를 해주거나 이스케이프 시퀀스(\)를 사용한다. 이스케이프 시퀀스는 유니코드나 16진수를 표현할 때 앞에 배치하기도 하고 표현식에서 ‘검색 기준’을 설정할 때 사용하기도 한다. 

 

2) String 메소드

메소드 설명
String.fromCharCode() 쉼표로 구분되는 일련의 유니코드에 해당하는 문자들로 구성된 문자열을 반환함.
String.fromCodePoint() 쉼표로 구분되는 일련의 코드 포인트(code point)에 해당하는 문자들로 구성된 문자열을 반환함.
String.raw() 템플릿 문자열(template string)의 원형을 반환함.

 

3) String.prototype 메소드

메소드 설명
indexOf() String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf() String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환함.
charAt() String 인스턴스에서 전달받은 인덱스에 위치한 문자를 반환함.
charCodeAt() String 인스턴스에서 전달받은 인덱스에 위치한 문자의 UTF-16 코드를 반환함. (0 ~ 65535)
charPointAt() String 인스턴스에서 전달받은 인덱스에 위치한 문자의 유니코드 코드 포인트(unicode code point)를 반환함.
slice() String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함.
substring() String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함.
substr() String 인스턴스에서 전달받은 시작 인덱스부터 길이만큼의 문자열을 추출한 새로운 문자열을 반환함.
split() String 인스턴스에서 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환함.
concat() String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환함.
toUpperCase() String 인스턴스의 모든 문자를 대문자로 변환한 새로운 문자열을 반환함.
toLowerCase() String 인스턴스의 모든 문자를 소문자로 변환한 새로운 문자열을 반환함.
trim() String 인스턴스의 양 끝에 존재하는 공백과 모든 줄 바꿈 문자(LF, CR 등)를 제거한 새로운 문자열을 반환함.
search() 인수로 전달받은 정규 표현식에 맞는 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함.
replace() 인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새 문자열을 반환함.
match() 인수로 전달받은 정규 표현식에 맞는 문자열을 찾아서 하나의 배열로 반환함.
includes() 인수로 전달받은 문자나 문자열이 포함되어 있는지를 검사한 후 그 결과를 불리언 값으로 반환함.
startsWith() 인수로 전달받은 문자나 문자열로 시작되는지를 검사한 후 그 결과를 불리언 값으로 반환함.
endsWith() 인수로 전달받은 문자나 문자열로 끝나는지를 검사한 후 그 결과를 불리언 값으로 반환함.
toLocaleUpperCase() 영문자뿐만 아니라 모든 언어의 문자를 대문자로 변환한 새로운 문자열을 반환함.
toLocaleLowerCase() 영문자뿐만 아니라 모든 언어의 문자를 소문자로 변환한 새로운 문자열을 반환함.
localeCompare() 인수로 전달받은 문자열과 정렬 순서로 비교하여 그 결과를 정수 값으로 반환함.
normalize() 해당 문자열의 유니코드 표준화 양식(Unicode Normalization Form)을 반환함.
repeat() 해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환함.
toString() String 인스턴스의 값을 문자열로 반환함.
valueOf() String 인스턴스의 값을 문자열로 반환함.

 

2.5. Array 객체

1) 객체 

  배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체에 해당한다. 

 

2) Array 메소드

메소드 설명
Array.isArray() 전달된 값이 Array 객체인지 아닌지를 검사함.
Array.from() 배열과 비슷한 객체와 반복할 수 있는 객체를 배열처럼 변환함.
Array.of() 인수의 수나 타입에 상관없이 인수로 전달받은 값을 가지고 새로운 Array 인스턴스를 생성함.

 

3) Array.prototype 메소드 1

메소드 설명
push() 하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환함.
pop() 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함.
shift() 배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환함.
unshift() 하나 이상의 요소를 배열의 가장 앞에 추가하고, 배열의 총 길이를 반환함.
reverse() 배열 요소의 순서를 전부 반대로 교체함.
sort() 해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬함.
splice() 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경함.
copyWithin() 해당 배열에서 일련의 요소들을 복사하여, 명시된 위치의 요소들을 교체함.
fill() 시작 인덱스부터 종료 인덱스 바로 앞까

 

4) Array.prototype 메소드 2 (원본 배열은 변경하지 않고 참조만 하는 메소드)

메소드 설명
join() 배열의 모든 요소를 하나의 문자열로 반환함.
slice() 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환함.
concat() 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환함.
toString() 해당 배열의 모든 요소를 하나의 문자열로 반환함.
toLocaleString() 해당 배열의 모든 요소를 하나의 문자열로 반환함.
indexOf() 전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf() 전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환함.

 

5) Array.prototype 메소드 3

메소드 설명
forEach() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함.
map() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함.
filter() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환함.
every() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환함.
some() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환함.
reduce() 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함.
(배열의 첫 번째 요소부터 시작함.)
reduceRight() 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함.
(배열의 마지막 요소부터 시작함.)
entries() 배열 요소별로 키와 값의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환함.
keys() 배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
values() 배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
find() 검사를 위해 전달받은 함수를 만족하는 배열 요소의 값을 반환함. 만족하는 값이 없으면 undefined를 반환함.
findIndex() 검사를 위해 전달받은 함수를 만족하는 배열 요소의 인덱스를 반환함. 만족하는 값이 없으면 -1을 반환함.