(JS) Built-in Objects

Mirrer·2022년 5월 1일
0

JavaScript

목록 보기
8/24
post-thumbnail

Built-in Objects란?

자바스크립트에서 제공하는 Data Type과 관련된 유용한 객체들

Built-in ObjectsECMAScript 명세에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공한다.

그래서 개발자는 애플리케이션의 환경과 관계없이 언제나 Built-in Objects를 사용할 수 있다.

Built-in ObjectsObject, String, Number, Function, Array, RegExp, Date, Math등과 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다.


래퍼 객체 (Wrapper Object)

래퍼 객체는 원시값을 필요에 따라서 관련된 빌트인 객체로 변환하는 것을 뜻한다.

객체는 원시값보다 메모리사용 부담이 크기 때문에 무분별한 사용은 권장하지 않는다.

자바스크립트 원시값에 .을 사용해 관련된 함수를 호출하면 데이터 타입에 해당되는 래퍼객체로 변환된다.

// number 원시타입
const number = 123; 

// number 원시타입을 감싸고 있는 Number 객체로 감싸짐
console.log(number.toString());

// 다시 number 원시 타입으로 변환
console.log(number);

Global 객체 (전역 객체)

전역 객체는 언어 자체나 호스트 환경에 기본 내장되있는 객체이다.

자바스크립트에서 **golbalThis, this는 기본적으로 window **즉 글로벌 객체를 의미한다.

console.log(globalThis); // window
console.log(this); // window

Global 객체의 속성 (Property)

  • Infinity

  • NaN

  • undefined

Global 객체의 함수 (Function)

  • 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 객체는 boolean값에 해당하는 전역 객체이다.

Boolaen객체를 통해 값을 생성하는 방법은 메모리에 부담이 되므로 가급적 사용을 하지 않는 것이 좋다.

Boolaen객체는 valueOf, toString 두가지 함수만을 내장하고 있다.

// const isTrue = new Boolean(true);
const isTrue = true;
console.log(isTrue.valueOf()); // true

Truthy, Falshy

TruthyFalsy는 자바스크립트의 문법이 아닌 자바스크립트의 특성이다.

Truthy는 말 그대로 값이 true같은 것, Falsy는 값이 false같은 것으로 보여지는 값이다.

truefalse는 아니지만 자바스크립트가 truefalse로 인식하는 값들을 의미한다.

  • Truthy → 0이 아닌 값 (1, -1, ‘0’, ‘false’, [], {} ....등등)
  • Falshy0, -0, null, NaN, undefined, ‘’

Number Object

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 Object

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 Object

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 Object

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 튜토리얼

profile
memories Of A front-end web developer

0개의 댓글