자바스크립트 내장 객체에 대해 알아보자.
1. globalThis
- globalThis는 전역 객체를 지칭하는 변수이다.
- 전역 객체는 환경에 따라 다르다.
- 브라우저 환경은 window, node 환경은 global 객체를 지칭한다.
- globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다.
2. window
- DOM document를 포함하는 창을 나타내는 객체
- 전역 스코프에 선언된 변수는 모두 window의 property가 된다.
- 현재 창의 정보를 얻거나, 창을 조작한다.
- globalThis는 브라우저 환경에서 window 객체와 같다.
3.document
- 브라우저에 로드된 웹페이지
- 문서의 title, URL 등의 정보를 얻는다.
- element 생성, 검색 등의 기능 제공
- createElement, createTextNode와 같은 함수로 DOM 노드 원소를 동적으로 생성 가능
- 이를 이용해 자바스크립트만으로 원소를 구성할 수 있다.
4. Number, NaN
- 자바스크립트의 number 원시타입을 감싸는 객체
- 유의미한 상수값, 숫자를 변환하는 메서드 등을 제공
- NaN-Not a Number를 나타내는 객체
- isNaN()-전역 함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사
function formatNumber(n){
if(isNaN(n)) return '0';
return Number(n).toFixed(2);
}
formatNumber('12.345') // 12.35
formatNumber('') // 0- Number.toFixed 메서드는 숫자의 소숫점 자릿수를 제어
- 반환된 값은 반올림된 문자열
- isNaN과 함께 활용하여, 유저의 입력을 포맷팅할 수 있다.
- formatNumber는 isNaN 함수로 빈 문자열, 잘못된 입력 등의 경우를 처리한다.
5. Math
- 기본적인 수학 연산 메서드, 상수를 다루는 객체
- BigInt 타입과 호환되지 않고, Number 타입만을 인자로 다룬다.
- Math 객체는 constructor가 없으므로, new 키워드를 이용하여 새로운 객체 생성 시 TypeError가 발생한다.
1. Math를 이용하여 배열의 최댓값과 최솟값의 차이 계산하기
function getMaxDiff(nums) {
return Math.max(...nums) - Math.min(...nums);
}
getMaxDiff([-1, -4, -7, 11]); // 18- Math.max, Math.min은 개별 숫자를 인자로 받아 각각 최대, 최솟값을 리턴한다.
- getMaxDiff는 배열의 최댓값, 최솟값의 차이를 계산한다.
2. Math를 이용하여 0에서 1사이의 랜덤한 값을 구하기
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 범위의 랜덤 숫자를 구한다.
6. Date
- 측정 시점의 날자를 표시하기 위한 객체
- 날짜와 관련된 작업을 하기 위한 여러 메서드를 포함한다.
1. Date를 이용하여 주말이면 true로 나타내기
function isWeekend(today) {
let day = today.getDay();
return day === 0 || day === 6;
}
console.log(isWeekend(new Date("2023/09/23"))); //true- Date.getDay() 는 요일을 0(일요일)부터 6(토요일)로 구한다.
- 이 외에 년도, 월, 일, 시, 분, 초, 밀리초 등을 구할 수 있다.
2. Date를 이용하여 디데이 구하기
function addDays(date, days) {
date.setDate(date.getDate() + days);
return date.toDateString();
}
addDays(new Date("2023/09/22"), 100); // Sat Dec 30 2023- setDate() 등의 메서드로 시간을 설정한다.
- 설정 시 월 변경 등의 시간 변환은 Date객체가 처리한다.
- toDateString() 메서드는 특정 포맷의 문자열을 반환한다.
3. Date를 이용하여 기준일로부터 며칠 지났는지 구하기
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("2023/9/22"));- getTime() 메서드는 시간을 일리초 단위로 반환한다.
- 이때 밀리포는 1970.1.1 시점부터 흐른 시간이다.
- fromNow는 주어진 시간이 현재로부터 며칠이나 흘렀는지를 계산한다.
7. String, JSON
- 자바스크립트의 문자열 원시 타입의 래퍼 객체
- 문자열을 조작하기 위한 여러 메서드를 포함
- JSON-JSON 객체와 관련된 메서드를 담은 객체
1. 예시
function toUserList(users) {
return users
.filter((user) => !user.includes("Admin"))
.map((user) => user.trim().toUpperCase())
.map((user) => `<li>${user}</li>`)
.join("");
}
console.log(toUserList(["Hannah", "Yang", "Goon", "Admin"]));
// <li>HANNAH</li><li>YANG</li><li>GOON</li>- trim(), toUpperCase()등은 변환된 새로운 문자열을 리턴한다.
- include() 메서드는 문자열 검색에 성공 시 true, 실패 시 false를 리턴한다.
- toUserList()는 이름의 배열을 받아 리스트 태그 목록의 문자열을 계산한다.
2. 예시
"hannah,Avery,SW".split(","); // ['hannah', 'Avery', 'SW']
"hannah,Avery,SW".replace(",", " "); // "hannah Avery SW"
"hannah,Avery,SW".includes("Avery"); // true
" hannah,Avery,SW".trim(); // "hannah,Avery,SW"
"hannah,Avery,SW".indexOf("Avery"); // 7- split()은 주어진 문자열에 따라 타겟 문자열을 나눈다.
- replace()는 주어진 문자열을 검색하여 타겟 문자열로 변환한다. 바꿀 문자열이 여러 개인 경우, 첫 번째로 매칭되는 문자열만 바꾼다.
- indexOf()는 특정 문자열을 검색하여 시작점의 인덱스를 반환한다. 없을 시 -1을 리턴한다.
3. 예시(JSON 객체)
JSON.stringify({ name: "Hannah", age: 27 });
// '{ "name": "Hannah", "age": 27 }'
JSON.parse('{"name":"Hannah", "age":27}');
// { name: "Hannah", age: 27 }- JSON.stringify()는 주어진 객체를 JSON문자열로 만든다.
- JSON.parse()는 주어진 JSON 문자열을 자바스크립트에 맞는 결과 객체로 만든다.
