자바스크립트에서 제공하는 Data Type과 관련된 유용한 객체들
Built-in Objects
란 ECMAScript
명세에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공한다.
그래서 개발자는 애플리케이션의 환경과 관계없이 언제나 Built-in Objects
를 사용할 수 있다.
Built-in Objects
는 Object
, String
, Number
, Function
, Array
, RegExp
, Date
, Math
등과 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다.
래퍼 객체는 원시값을 필요에 따라서 관련된 빌트인 객체로 변환하는 것을 뜻한다.
객체는 원시값보다 메모리사용 부담이 크기 때문에 무분별한 사용은 권장하지 않는다.
자바스크립트 원시값에 .
을 사용해 관련된 함수를 호출하면 데이터 타입에 해당되는 래퍼객체로 변환된다.
// number 원시타입
const number = 123;
// number 원시타입을 감싸고 있는 Number 객체로 감싸짐
console.log(number.toString());
// 다시 number 원시 타입으로 변환
console.log(number);
전역 객체는 언어 자체나 호스트 환경에 기본 내장되있는 객체이다.
자바스크립트에서 **golbalThis
, this
는 기본적으로 window
**즉 글로벌 객체를 의미한다.
console.log(globalThis); // window
console.log(this); // window
Infinity
NaN
undefined
eval()
: 문자열 형태의 자바스크립트 코드를 값으로 평가eval('const num = 2; console.log(num)'); // 2
isFinite()
: 숫자값의 무한유무를 평가console.log(isFinite(1)); // true
console.log(isFinite(Infinity)); // false
parseInt(), parseFloat()
: 문자열 형태의 숫자값을 정수, 소수형태의 값으로 변환console.log(parseFloat('12.43')); // 12.43
console.log(parseInt('12.43')); // 12
console.log(parseInt('11')); // 11
Boolean
객체는 boolean값에 해당하는 전역 객체이다.
Boolaen
객체를 통해 값을 생성하는 방법은 메모리에 부담이 되므로 가급적 사용을 하지 않는 것이 좋다.
Boolaen
객체는 valueOf
, toString
두가지 함수만을 내장하고 있다.
// const isTrue = new Boolean(true);
const isTrue = true;
console.log(isTrue.valueOf()); // true
Truthy
와 Falsy
는 자바스크립트의 문법이 아닌 자바스크립트의 특성이다.
Truthy
는 말 그대로 값이 true
같은 것, Falsy
는 값이 false
같은 것으로 보여지는 값이다.
즉 true
나 false
는 아니지만 자바스크립트가 true
나 false
로 인식하는 값들을 의미한다.
Truthy
→ 0이 아닌 값 (1, -1, ‘0’, ‘false’, [], {} ....등등)Falshy
→ 0, -0, null, NaN, undefined, ‘’Number
객체는 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체입니다.
Number
객체 생성const num1 = 123;
const num2 = new Number(123);
console.log(num1); // 123
console.log(typeof num1); // number
console.log(num2); // [Number: 123]
console.log(typeof num2); // object
Number
객체 Static 변수console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
console.log(Number.NaN); // NaN
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.POSITIVE_INFINITY); // Infinity
Number
객체 Static 함수// 1. isNaN : 값의 숫자 유무
const num1 = 1;
console.log(isNaN(num1)); // false
// 2. 지수표기법 (매우 크거나 작은 숫자를 표기할 때 사용, 10의 n승으로 표기)
const num2 = 102;
console.log(num2.toExponential()); // 1.02e+2 -> e+2는 10^2
// 3. 반올림하여 문자열로 반환
const num3 = 1234.12;
console.log(num3.toFixed()); // 1234 (문자열)
// 4. 숫자를 문자열로 반환 (나라별 표기법 적용가능)
const num4 = 12;
console.log(num4.toString()); // 12 (문자열)
console.log(num4.toLocaleString('ar-EG')); // ١٢ (문자열)
// 5. 원하는 자릿수까지 유효하도록 반올림, 전체 자릿수 표기가 안될때는 지수표기법 사용
const num5 = 1234.567;
console.log(num5.toPrecision(5)); // 1234.6
console.log(num5.toPrecision(4)); // 1235
console.log(num5.toPrecision(2)); // 1.2e+3
// 6. 0과 1사이에서 나타낼 수 있는 가장 작은 숫자
if (Number.EPSILON > 0 && Number.EPSILON < 1) {
console.log(Number.EPSILON); // 2.220446049250313e-16
}
// 6-1. 자바스크립트에서 실수끼리의 계산은 미묘한 차이가 발생
// 이러한 차이를 감지하고 싶다면 Number.EPSILON 사용
const num6 = 0.1 + 0.2 - 0.2;
console.log(num6); // 0.10000000000000003
function isEqual(original, expected) {
return Math.abs(original - expected) < Number.EPSILON;
}
console.log(isEqual(num6, 0.1)); // true
Math
객체는 수학과 관련된 연산을 수행할 때사용하는 원시 래퍼 객체입니다.
Math
객체 Static 변수Marh.E
: 자연로그의 밑console.log(Math.E); // 2.718281828459045
Math.PI
: 원주율 PI값console.log(Math.E); // 2.718281828459045
Number
객체 Static 함수Math.abs
: 절대값console.log(Math.abs(-10)); // 10
Math.ceil
: 소수점 이하를 올림console.log(Math.ceil(1.4)); // 2
Math.floor
: 소수점 이하를 내림console.log(Math.ceil(1.4)); // 1
Math.round
: 소수점 이하를 반올림console.log(Math.round (1.4)); // 1
console.log(Math.round (1.7)); // 2
Math.trunc
: 정수만 반환console.log(Math.trunc (1.44875)); // 1
Math.max, min
: 최대, 최소값을 찾기console.log(Math.max(1, 5, 7)); // 7
console.log(Math.min(1, 5, 7)); // 1
Math.pow
: 거듭제곱console.log(2 ** 3); // 8
console.log(Math.pow(2, 3)); // 8
Math.sqrt
: 제곱근console.log(Math.sqrt(9)); // 3
Math.random
: 0 ~ 1사이의 랜덤한 값을 반환// 1 ~ 10사이의 랜덤값
console.log(Math.floor(Math.random() * 10 + 1));
String
객체는 문자를 표현하고 다룰 때 사용하는 원시 래퍼 객체입니다.
String
객체 생성const textObj = new String('Hello World');
const text = 'Hello World';
console.log(textObj); // [String: 'Hello World']
console.log(typeof textObj); // object
console.log(text); // Hello World
console.log(typeof text); // string
String
객체 Static 변수// 문자열의 길이
const text2 = 'Hello';
console.log(text2.length); // 5
String
객체 Static 함수// 1. 특정 문자에 접근
const text = 'Hello World!';
console.log(text[0]); // H
console.log(text.charAt(0)); // H
// 2. 특정 문자에 인덱스 위치, 처음으로 찾은 위치 반환
// 2-1 처음부터 시작
console.log(text.indexOf('l')); // 2
// 2-2 끝부터 시작
console.log(text.lastIndexOf('l')); // 9
// 3. 특정 문자 포함여부, 대소문자 구분
console.log(text.includes('tx')); // false
console.log(text.includes('h')); // false
console.log(text.includes('H')); // true
// 4. 특정 문자로 시작, 종료여부, 대소문자 구분
console.log(text.startsWith('h')); // false
console.log(text.startsWith('H')); // true
console.log(text.endsWith('!')); // true
// 5. 대문자, 소문자로 변환
console.log(text.toUpperCase()); // HELLO WORLD!
console.log(text.toLowerCase()); // hello world!
// 6. 특정 문자열 삭제
console.log(text.substring(0, 2)); // He
console.log(text.slice(2)); // llo World!
console.log(text.slice(-2)); // d!
// 7. 문자열 공백 제거
const space = ' space ';
console.log(space.trim()); // space
// 8. 지정한 문자로 분할한 뒤 배열로 반환
const longText = 'Get to the Point';
console.log(longText.split(' ')); // [ 'Get', 'to', 'the', 'Point' ]
console.log(longText.split(' ', 2)); // [ 'Get', 'to' ]
Date
객체는 날짜, 시간을 표현하고 다룰 때 사용하는 원시 래퍼 객체입니다.
Date
객체는 UTC기준 (협정 세계시, 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 표기)으로 시간을 표현한다.
Date
객체 생성console.log(new Date()); // 2022-04-05T06:11:28.400Z
console.log(new Date('Jun 5, 2022')); // 2022-06-04T15:00:00.000Z
console.log(new Date('2022-12-17T03:24:00')); // 2022-12-16T18:24:00.000Z
Date
객체 Static 함수// 1. 현재 시간을 ms단위로 반환
console.log(Date.now()); // 1649139342441
// 2. 특정 시간을 ms단위로 반환
console.log(Date.now('2022-12-17T03:24:00')); // 1649139342447
// 3. 특정날짜의 데이터를 지정 (월, 일은 0부터 시작)
// 월 -> 0: 1월, 1: 2월, 2: 3월....
// 일 -> 0: 일요일, 1: 월요일, 2: 화요일....
const now = new Date();
now.setFullYear(2023);
now.setMonth(0);
console.log(now); // 2023-01-05T06:18:21.565Z
// 4. 특정날짜의 데이터를 가져오기
console.log(now.getFullYear()); // 2023
console.log(now.getMonth()); // 0
console.log(now.getDay()); // 4
console.log(now.getTime()); // 1672899813499
// 5. 날짜의 특정 데이터를 출력
console.log(now.toString()); // Thu Jan 05 2023 15:24:19 GMT+0900 (대한민국 표준시)
console.log(now.toDateString()); // Thu Jan 05 2023
console.log(now.toTimeString()); // 15:24:52 GMT+0900 (대한민국 표준시)
console.log(now.toISOString()); // 2023-01-05T06:25:18.037Z
console.log(now.toLocaleString('en-US')); // 1/5/2023, 3:25:56 PM
console.log(now.toLocaleString('ko-KR')); // 2023. 1. 5. 오후 3:25:56
표준 내장 객체 - JavaScript | MDN
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼