내장 객체
globalThis
globalThis 는 전역 객체를 지칭하는 변수
전역 객체는 환경에 따라 다름
브라우저 환경은 window, node 환경은 global 객체를 지칭
globalThis 는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다.
window
DOM document 를 포함하는 창을 나타내는 객체
전역 스코프에 선언된 변수는 모두 window의 property가 된다.
현재 창의 정보를 얻거나, 창을 조작한다.
document
브라우저에 로드된 웹페이지
문서의 title, URL 등의 정보를 얻는다.
element 생성, 검색 등의 기능 제공
createElement, createTextNode 는 동적으로 원소를 생성
이를 이용해 JS만으로 원소를 구성할 수 있음
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.crateElement("ul"))
}Number, NaN
JS 의 number 원시타입을 감싸는 객체
유의미한 상수값, 숫자를 변환하는 메서드 등을 제공
NaN - Not a Number 를 나타내는 객체
isNaN() - 전역 함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사
function changeTo Usd(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.35isNaN 과 함께 활용하여, 유저의 입력을 포맷팅 할 수 있음
formatNumber 는 isNaN 함수로 빈 문자열, 잘못된 입력 등의 경우를 처리
Math
기본적인 수학 연산 메서드, 상수를 다루는 객체
BigInt 타입과 호환되지 않고, Number 타입만을 인자로 다룸
Math.abs(nums) 절대값
Math.ceil(nums) 올림
Math.floor(nums) 내림
Math.rond(nums) 반올림
Math.max(...nums) 개별 숫자를 인자로 받아 최대값을 리턴
Math.min(...nums) 개별 숫자를 인자로 받아 최솟값을 리턴
Math.random() 0에서 1사이의 float number를 구함
Math.floor 소숫점 이하의 숫자를 버림
Date
특정 시점의 날짜를 표시하기 위한 객체
날짜와 관련된 작업을 하기 위한 여러 메서드를 포함
Date.getDay() 요일을 0(일요일)부터 6(토요일)로 구함
Date.getMonth, getYear, getDay, getMinutes 등으로 활용
function addDays(date, days) {
date.setDate(date.getDate() + days)
return date.toDateString()
}
addDays(new Date("2021/9/22"), 100)) // Fri Dec 31 2021setDate() 시간을 설정
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...`
}getTime() 시간을 밀리초 단위로 반환 (1970.1.1 부터 시작)
String, JSON
JS 문자열 원시 타입의 래퍼 객체
문자열을 조작하기 위한 여러 메서드를 포함
JSON - JSON 객체와 관련된 메서드를 담은 객체
trim() 문자열 양 끝의 공백 제거
toUpperCase() 문자열을 대문자로 변환
include("str") 문자열 검색에 성공 시 true, 실패 시 false 리턴
toUserList() 이름의 배열을 받아 리스트 태그 목록의 문자열을 계산
parseInt(nums) 문자열을 정수 형태로 변환 ( "20.6" > 20 )
parseFloat() 문자열을 실수 형태로 변환 ( "20.6 > 20.6 )
const string = "Daniel, Kim, SW"
string.length; // 15
string.split(',') // [ 'Daniel', 'Kim', 'SW' ]
string.replace(',', ' ') // Daniel Kim SW
string.includes("Kim") // true
string.indexOf('Kim') // 9
string.lastIndexOf('i') // 10
string.charAt(0); // D
string.substr(13, 14) // SW
string.substring(0, 6) // Daniel
string.slice(9, 11) // Kim / Daniel, , SW
string.replace("Kim", "Lee") // Daniel, Lee, SW
length 문자열의 길이를 반환
split("str") 특정 문자열(str)에 따라 문자열을 나누어 배열로 반환
replace('str', 'str2') 특정 문자열을 검색하여 타겟 문자열(str2)로 변환
includes(str) 특정 문자열이 있는지 확인하여 boolean 값으로 반환
indexOf(str) 특정 문자열을 검색하여 시작점의 인덱스를 반환, 없을시 -1 반환
lastIndexOf(str) 특정 문자열을 검색하여 마지막의 인덱스를 반환
charAt(index) 특정 인덱스의 문자를 반환
substr(start[, length] start 인덱스부터 length 길이 만큼의 문자열 반환
substring(indexStart[, indexEnd]) start 인덱스부터 end 인덱스까지의 문자열 반환
slice(indexStart[. indexEnd]) start 인덱스부터 end 인덱스까지를 추출하여 새로운 문자열로 반환
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 문자열을 JS에 맞는 결과 객체로 만든다.
Array
var fruit = ["사과", "배", "포도"];
fruit.length; // 3
fruit.push("딸기"); // ["사과", "배", "포도", "딸기"]
fruit.unshift("레몬"); // ["레몬", "사과", "배", "포도", "딸기"]
fruit.pop(); // ["사과", "배"]
fruit.shift(); // ["배", "포도"]arr.length 배열(arr)의 데이터 개수 = 3
arr.push() 배열 뒤에 데이터 삽입
arr.unshift() 배열 앞에 데이터 삽입
arr.pop(); 배열 뒤의 데이터 제거
arr.shift() 배열 앞의 데이터 제거
