JS 내장객체

강정우·2022년 10월 11일
0

JavaScript

목록 보기
19/53
post-thumbnail

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를 사용하지 않으면 문자열 타입을 반환합니다.
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글