JS 내장객체 1
JS의 내장 객체들
- JS는 여러용도에 활용하는 객체를 내장하고 있다.
- 숫자 다루기, 문자 다루기, 날짜 다루기, JSON 객체 다르기 등에 유용한 객체를 제공한다.
- 핵심 내장 객체들의 기능을 이해하면, 실제 프로젝트에서 유용하게 활용할 수 있다.
globalThis
- globalThis는 전역 객체를 지징하는 변수이다.
- 전역 객체는 환경에 따라 다르다.
- 브라우저 환경은 window, node환경은 globl 객체를 지칭한다.
- globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다.
window
- DOM document를 포함하는 창을 나타내는 객체
- 전역 스코프에 선언된 변수는 모두 windeow의 property가 된다. 즉, window객체는 굉장히 많은 property가 있다.
- 현재 창의 정보를 얻거나, 창을 조작한다.
const targetURL =
"https://www.naver.com";
const windowSize =
`height=${window.innerHeight},
width=${window.innerWidth}`;}
window.open(
targetURL,
"Target",
windowSize
);- 앞서 언급했듯 globalThis와 window 객체가 브라우저 환경에서는 같기 때문에 바꿔서 써도 무방하다.
document
- 브라우저에 로드된 웹페이지
- 문서의 title, URL등의 정보를 얻는다.
- element 생성, 검색 등의 기능 제공
function printDocumentInfo(){
console.log("문서 URL :", document.URL);
console.log("문서 타이틀 :", document.title);
console.log("모든 노드 :", document.querySelectorAll("*"));
}- createElement, createTextNode는 동적으로 원소를 생성한다.
- 이를 이용해 JS만으로 원소를 구성할 수 있다.
- 그런데 당연히 생성만 해서 나타나는 것은 아니고 innerHTML등 다른 함수를 써야지만 나타난다.
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"))
}
JS 내장객체 2
Number, NaN
- JS의 number 원시타입(primitive type)을 감싸는 객체.
- 유의미한 상수값, 숫자를 변환하는 메서드 등을 제공한다.
- NaN - Not a Number를 나타내는 객체
- isNaN() - 전역함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사.
function chageToUsd(krw){
const rate = 1046;
return (krw / rate).toFixed(2);
}
const krw = 1000000;
colsole.log(chageToUsd(krw));- Number.toFixed 메서드는 숫자의 소수점 자릿수를 제어한다.
- 반환된 값은 반올림된 문자열이다.
- chageToUsd에서 변환된 krw를 소수점 둘째자리까지만 처리하도록 한다.
function formatNumber(n){
if(isNaN(n)) return '0';
return Number(n).toFixed(2);
}
formatNumber('12.345') // 12.35- isNaN과 함께 활용하여, 유저의 입력을 포매팅할 수 있다.
- formatNumber은 isNaN 함수로 빈 문자열, 잘못된 입력 등의 경우를 처리한다.
Math
- 기본적인 수학 연산 메소드, 상수를 다루는 객체.
- Math객체는 constructor가 없으므로 new 키워드로 생성할 시 TypeError가 발생한다.
- BigInt 타입(100000...0000000n)과 호환되지 않고, Number 타입만을 인자로 다룬다. ex) Math.pow(BigInt Type,2)이면 안 된다.
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 범위의 랜덤 숫자를 구한다.
JS 내장객체 3
Date
- 특정 시점의 날짜를 표시하기 위한 객체.
- new Date()로 Date 객체를 생성하면, 객체를 생성한 시점의 시간 정보만을 얻을 수 있다.
- 실시간으로 현재 시간의 밀리초를 얻기 위해선 정적 메서드인 Date.now()를 활용해야 한다.
- 날짜와 관련된 작업을 하기위한 여러 메서드를 포함한다.
function isWeekend(today){
let day = today.getDay();
return day === 0 || day === 6;
}
console.log(isWeekend(new Date("2022/10/11")));- Date.getDay()는 요일을 0(일요일)부터 6(토요일)로 구한다.
- 이 외에 년도, 월, 일, 시, 분, 초, 밀리초 등을 구할 수 있다.(getDate, getMonth....)
function addDays(date, days) {
date.setDate(date.getDate() + days)
return date.toDateString()
}
addDays(new Date("2022/10/11"), 100)) // Thu Jan 19 2023- setDate()등의 메서드로 시간을 설정한다.
- 설정 시 월 변경 등의 시간 변환은 Date 객체가 처리한다.
- toDateString() 메서드는 특정 포맷의 문자열을 반환한다.
- new Date(‘1/1/2021’) 등으로 문자열로 된 시간을 Date 객체로 변환하면, 정상적으로 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("2022/10/11"))- getTime() 메서드는 시간을 밀리초 단위로 반환
- 이때 밀리초의 기준은 1970/1/1 이다.
- fromNow는 주어진 시간이 현재로부터 며칠이나 흘렀는지를 계산한다.
String, JSON
- JS의 문자열 primitive type의 래퍼 객체. 즉
let a = "abc".repeat(2)가 된다. - 문자열을 조작하기 위한 여러 메서드를 포함한다.
- 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을 리턴한다.
- trim()은 앞뒤의 공백 문자열을 제거한다.
JSON.stringify({
name : "Daniel",
age : 12
})
// '{"name":"Daniel","age":12}'
JSON.parse('{
"name" : "Daniel",
"age" : 12
}')
// {name:'Daniel',age:12}- JSON.stringify()는 주어진 객체를 JSON 문제열로 만든다.
- JOSN.parse()는 주어진 JSON 문자열을 자바스크립트에 맞는 결과 객체로 만든다.
- 서버가 JSON 형태의 파일을 요구하거나 반환할 때 위과 같은 함수를 써서 사용하면 된다.
- 문자열을 String으로 감싸지 않고도 문자열 메서드를 호출할 수 있다.
자바스크립트는 자동으로 문자열을 String 래퍼 객체로 변환하므로, 문자열 메서드를 문제없이 호출할 수 있습니다. - new를 이용해 생성하면 타입이 객체가 됩니다. String(10) 등 new를 사용하지 않으면 문자열 타입을 반환합니다.
智(지)! 德(덕)! 體(체)!