[JavaScript] 자바스크립트 내장 객체

자바스크립트의 내장 객체들

• 자바스크립트는 여러 용도에 활요하는 객체를 내장하고 있다.
• 숫자 다루기, 문자 다루기, 날짜 다루기, JSON 객체 다루기 등에 유용한 객체를 제공한다.
• 핵심 내장 객체들의 기능을 이해하면, 실제 프로젝트에서 유용하게 활용할 수 있다.

 

globalThis

• globalThis는 전역 객체를 지칭하는 변수이다.
• 전역 객체는 환경에 따라 다르다.
• 브라우저 환경은 window, node환경은 global 객체를 지칭한다.
• globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다.

 

window

const targetURL = "https://www.naver.com";
const windowSize = `height=${window.innerHeight}, width=${window.innerWidth}`;
window.open(
    targetURL,
    "Target",
    windowSize
);

• DOM document를 포함하는 창을 나타내는 객체
• 전역 스코프에 선언된 변수는 모두 window의 property가 된다.
• 현재 창의 정보를 얻거나, 창을 조작한다.

 

globalThis

const targetURL = "https://www.naver.com";
const windowSize = `height=${globalThis.innerHeight}, width=${globalThis.innerWidth}`;
globalThis.open(
    targetURL,
    "Target",
    windowSize
);

• globalThis는 브라우저 환경에서 window 객체와 같다.
• 따라서 globalThis로 바꿔도 똑같이 동작한다.

 

document

function printDocumentInfo() {
    console.log("문서 URL:", document.URL);
    console.log("문서 타이틀:", document.title);
    console.log("모든 노드:", document.querySelectorAll("*"));
}

• 브라우저에 로드된 웹페이지
• 문서의 title, URL 등의 정보를 얻는다.
• element 생성, 검색 등의 기능 제공

function createTodoList(todos) {
    return todos
        .map((todo) => {
            const li = document.createElement("li")
            li.appendChild(document.createTextNode(todo))
            return li
        })
        .reduce((ul, li) => {
            ul.appendChild(li)
            return ul
        }, document.createElement("ul"))
}

• createElement, createTextNode는 동적으로 원소를 생성한다.
• 이를 이용해 자바스크립트만으로 원소를 구성할 수 있다.

 

Number, NaN

• 자바스크립트의 number 원시타입을 감싸는 객체
• 유의미한 상수값, 숫자를 변환하는 메서드 등을 제공한다.
• NaN - Not a Number를 나타내는 객체.
• isNaN() - 전역 함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사

 

function changeToUsd(krw) {
    const rate = 1046;
    return (krw / rate).toFixed(2);
}

const krw = 1000000;
console.log(changeToUsd(krw));

• Number.toFixed 메서드는 숫자의 소숫점 자릿수를 제어한다.
• 반환된 값은 반올림된 문자열이다.
• changeToUsd에서 변환된 krw를 소숫점 둘째자리까지만 처리하도록 한다.

 

function formatNumber(n) {
    if(isNaN(n)) return '0';
    return Number(n).toFixed(2);
}

formatNumber('12.345') // 12.35

• isNaN과 함께 활용하여, 유저의 입력을 포맷팅할 수 있다.
• formatNumber는 isNaN 함수로 빈 문자열, 잘못된 입력 등의 경우를 처리한다.

 

Math

• 기본적인 수학 연산 메서드, 상수를 다루는 객체.
• BigInt 타입과 호환되지 않고, Number 타입만을 인자로 다룬다.

 

function getMaxDiff(nums) {
    return Math.max(...nums) - Math.min(...nums)
}

getMaxDiff([-1, -4, -7, 11]))  // 18

• Math.max, Math.min은 개별 숫자를 인자로 받아 각각 최대, 최솟값을 리턴한다.
• getMaxDiff는 배열의 최댓값, 최솟값의 차이를 계산한다.

 

function getRandomNumberInRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Array.from({ length: 10 }).map(() => getRandomNumberInRange(50, 100))

• Math.random()은 0에서 1 사이의 float number를 구한다.
• Math.floor는 소숫점 이하 숫자를 버린다.
• getRandomNumberInRange 함수는 max, min 범위의 랜덤 숫자를 구한다.

 

Date

• 특정 시점의 날짜를 표시하기 위한 객체
• 날짜와 관련된 작업을 하기 위한 여러 메서드를 포함한다.

 

function isWeekend(today) {
    let day = today.getDay();
    return day === 0 @@ day === 6;
}

console.log(isWeekend(new Date("2021/9/12");

• Date.getDay()는 요일을 0(일요일)부터 6(토요일)로 구한다.
• 이 외에 년도, 월, 일, 시, 분, 초, 밀리초 등을 구할 수 있다.

function addDays(date, days) {
    date.setDate(date.getDate() + days)
    return date.toDateString()
}

addDays(new Date("2021/9/22"), 100))  // Fri Dec 31 2021

• setDate() 등의 메서드로 시간을 설정한다.
• 설정 시 월 변경 등의 시간 변환은 Date 객체가 처리한다.
• toDateString() 메서드는 특정 포맷의 문자열을 반환한다.

function timeDiff(date1, date2) {
    return date2.getTime() - date1.getTime()
}
let dayTime = 60 * 24 * 60 * 1000
function fromNow(date) {
    let diff = timeDiff(date, new Date())
    return `${Math.floor(diff / dayTime)} days ago...`
}

fromNow(new Date("2021/9/1"))

• getTime() 메서드는 시간을 밀리초 단위로 반환한다.
• 이때 밀리초는 1970.1.1 시점부터 흐른 시간이다.
• fromNow는 주어진 시간이 현재로부터 며칠이나 흘렀는지를 계산한다.

 

String, JSON

• 자바스크립트의 문자열 원시 타입의 래퍼 객체
• 문자열을 조작하기 위한 여러 메서드를 포함한다.
• JSON - JSON 객체와 관련된 메서드를 담은 객체

 

function toUserList(users) {
    return users
        .filter((user) => !user.includes("Admin"))
        .map((user) => user.trim().toUpperCase())
        .map((user) => `<li>${user}</li>`)
        .join("")
}

console.log(toUserList(["Daniel", "Tom", "Johnny", "Admin"]))

// <li>DANIEL</li> <li>TOM</li> <li>JOHNNY</li>

• trim(), toUpperCase() 등은 변환된 새로운 문자열을 리턴한다.
• includes() 메서드는 문자열 검색에 성공 시 true, 실패 시 false를 리턴한다.
• toUserList()는 이름의 배열을 받아 리스트 태그 목록의 문자열을 계산한다.

"Daniel,Kim,SW".split(',')
// ['Daniel', 'Kim', 'SW']
"Daniel,Kim,SW".replace(',', ' ')
// "Daniel Kim,SW"
"Daniel,Kim,SW".includes("Kim")
// true
"  Daniel,Kim,SW  ".trim()
// "Daniel,Kim,Sw"
"Daniel,Kim,SW".indexOf("Kim")
// 7

• split()은 주어진 문자열에 따라 타겟 문자열을 나눈다.
• replace()는 주어진 문자열을 검색하여 타겟 문자열로 변환한다.
  • 바꿀 문자열이 여러 개인 경우, 첫 번째로 매칭되는 문자열만 바꾼다.
• indexOf()는 특정 문자열을 검색하여 시작점의 인덱스를 반환한다. 없을 시 -1을 리턴한다.

JSON.stringify({ name: "Daniel", age: 12 })

// '{"name":"Daniel", "age":12}'

JSON.parse('{"name":"Daniel", "age":12}')

// { name: 'Daniel', age: 12 }

• JSON.stringify()는 주어진 객체를 JSON 문자열로 만든다.
• JSON.parse()는 주어진 JSON 문자열을 자바스크립트에 맞는 결과 객체로 만든다.