다시 시작하는 자바스크립트 - 내장객체

 
헷갈리는 것들만 따로 정리할 예정.
deep dive 책을 함께 공부함.
 
 
 

9. 내장객체 (Built-in Objects)

 
자바스크립트 내장객체를 이용하여 우리는 조금 더 쉽게 코딩을 할 수 있음.
 
- 호스트 객체(host objects) :
자바스크립트 만으로는 브라우저 화면을 보여주거나 네트워크 전송을 하거나, 컴퓨터에 있는 파일을 읽을 수 없음.
이런 일들을 하기 위해서는 런타임 환경에서 제공해주는 호스트 객체를 사용해야 함.
=> 브라우저 호스트가 제공해주는 다양한 객체들, 다양한 API(브라우저) / 노드에서 제공하는 API(노드)
 
- 코딩을 할 때 이것 외에도 어플리케이션에서 필요한 사용자 정의 객체(User-definned Objects)가 있음.
 
 

9-1) 래퍼 객체 (Wrapper Object)
 

원시값을 필요에 따라서 관련된 빌트인 객체로 변환함.
 

const number = 123; // number 원시 타입
console.log(number.toString()); // 객체도 아닌데 toString(); 함수를 이용하여 문자로 바뀜.
console.log(number); // number 원시 타입

 
자바스크립트에 있는 모든 원시 타입은 그냥 원시 타입으로 사용될 때는 원시 타입이고
만약에 .을 찍어서 관련된 함수를 호출하고 싶다면 원시 타입을 감싸고 있는 객체로 감싸짐.
 

const text = "text"; // string 문자열 원시 타입
console.log(text);
console.log(text.length); // String 객체
console.log(text.trim()); // 문자 공백 제거

 
 

9-2) 글로벌 객체 (Global Object)
 

- 객체가 유용함에도 불구하고 평소에 많이 사용하지 않는 이유는? :
  객체는 값 뿐만 아니라 다양한 정보들을 가지고 있어 원시타입보다 훨씬 무겁고 메모리도 많이 차지함.
  값을 만들 때마다 객체를 생성하면 메모리가 엄청 커질 수 있음.
 
그래서 필요할 때만 객체를 생성하고, 다시 원시 타입으로 변환해왔음.
 

console.log(globalThis);
// 글로벌 객체에 무엇이 있는지 출력(노드)
// 윈도우가 나옴(브라우저)
console.log(this);
// 현재 모듈에 있는 정보를 출력(노드)
// 윈도우가 나옴(브라우저)
console.log(Infinity);  
console.log(NaN);
console.log(undefined);


eval("const num = 2; console.log(num)");
// 2
// 문자열 형태로 자바스크립트 코드를 작성하면 이걸 값으로 평가해서 출력해줌.


console.log(isInfinity(1));
// true
// 숫자가 유한한지 유한하지 않은지 확인하는 것.

console.log(isInfinity(Infinity));
// false


console.log(parseFloat("12.43"));
// 12.43
// 문자를 숫자(실수)로 변경해줌
console.log(parseInt("12.43"));
// 12
// 문자를 숫자(정수)로 변경해줌
console.log(parseInt("11"));
// 11


// URL (URI, Uniform Resource Identifier 하위 개념)
// 아스키 문자로만 구성되어야 함
// 한글이나 특수문자는 이스케이프 처리해야 함
const URL = "https://드림코딩.com";
const encoded = encodeURI(URL);
// 한글이나 특수문자가 들어있는 주소가 있다면 encodeURI() 이 함수를 이용해서 escape 처리해줘야 함

// escape 처리된 것을 다시 특수문자나 한글 URL로 되돌리고 싶다면
const decoded = decodeURI(encoded);
console.log(decoded);

// 전체 URL이 아니라 부분적인 것은 Component를 사용
const part = "드림코딩.com";
console.log(encodeURIComponent(part));

 
 

9-3) 불리언(Boolean) 함수

 
불리언 역시 래퍼 객체를 사용 가능.
하지만 쓸 수 있는 래퍼 객체는 valueOf(); 함수 하나로 불리언의 value를 출력할 수 있게 해줌.

 
 
9-4) 숫자(Number) 함수
 

미리 작성해둔 글이 있어서 참고해도 좋을 듯 함 =>  https://dnjfht.tistory.com/78
 
- static 프로퍼티(속성) : 객체를 생성할 필요가 없이 class 레벨에서 접근 가능한 여러 가지 상수, 변수.
 

console.log(Number.MAX_VALUE); 
// 1.7976931348623157e+308
// e+308 => 10의 308승
// 우리가 정수에서 사용할 수 있는 가장 큰 숫자

console.log(Number.MIN_VALUE);
// 5e-324
// 우리가 정수에서 사용할 수 있는 가장 작은 숫자

console.log(Number.MAX_SAFE_INTEGER);
// 9007199254740991
// 안전하게 사용할 수 있는 최댓값

console.log(Number.MIN_SAFE_INTEGER);
// -9007199254740991
// 안전하게 사용할 수 있는 최솟값

console.log(Number.NaN);
// NaN
// 숫자가 아닌 것

console.log(Number.NEGATIVE_INFINITY);
// -Infinity
// - 무한

console.log(Number.POSITIVE_INFINITY);
// Infinity
// + 무한

 
- static 함수(메소드) 활용 예시
 

if (num1 === Number.NaN) {
  // num1이 숫자인지 아닌지 알고 싶을 때 직접 비교 가능.
  // Number.NaN은 NaN을 값으로 출력함.
  console.log("이건 분명 숫자가 아니다.");
} else {
  console.log("이건 분명 숫자가 맞다.");
}

// 바로 직접적으로 비교하는 것이 아닌, Number 클래스 안에 isNaN()이라는 정적 함수를 이용할 수 있음
// 숫자가 아닌 값을 찾는 함수
// isNaN() 함수의 더 엄격한 버전으로, 강제로 매개변수를 숫자로 변환하지 않고
// 주어진 값의 유형이 Number이고 값이 NaN이면 true, 아니면 false.

// isNaN()은 매개변수가 Number이 아닌 경우 그 값을 먼저 숫자로 형 변환 후, NaN인지 판별하기 때문에
// 예상치 못한 결과가 나올 수도 있음.

if (Number.isNaN(num1)) {
  console.log("이건 숫자가 아니다");
} else {
  console.log("이건 숫자다");
}

// 정수에서 사용할 수 있는 가장 큰 숫자보다 큰지 아닌지
if (num1 > Number.MAX_VALUE) {
  console.log("진실이지롱.");
} else {
  console.log("거짓말이지롱.");
}

console.log(Number.EPSILON);
// 0과 1 사이에서 나타낼 수 있는 가장 작은 숫자
// 2.220446049250313e-16
if (Number.EPSILON > 0 && Number.EPSILON < 1) {
  console.log(Number.EPSILON);
}

const num = 0.1 + 0.2 - 0.2;
console.log(num);
// 결과는 0.1이 아니라 0.10000000000000003
// 계산을 할 때 10진수를 2진수로 각각 변환해서 연산한 후 2진수를 다시 10진수로 반환
// 이런 과정에서 정확하게 부동소수점까지 계산이 되지 않아 근소한 오차가 발생할 수 있음
// 이렇게 작은 오차를 나타내는 것이 EPSILON

function isEqual(original, expected) {
  return original === expected;
}

console.log(isEqual(1, 1));
// true
console.log(isEqual(0.1, 0.1));
// true
console.log(isEqual(num, 0.1));
// false
// 0.10000000000000003 !== 0.1

// 미세하게 값의 차이가 있어도 같다고 해주고 싶다면
function isEqual2(original2, expected2) {
  return Math.abs(original2 - expected2) < Number.EPSILON;
  // 차이가 Number.EPSILON 값보다 작으면 true
  // 그리고 차이의 값이 마이너스로 나오지 않도록 Math.abs() 절대값 함수 이용
}

console.log(isEqual2(num, 0.1));
// true

 
- instance 함수(메소드) 활용 예시
 

// 자수표기법 (매우 크거나 작은 숫자를 표기할 때 사용, 10의 n승으로 표기)
const num3 = 102;
console.log(num3.toExponential());
// 1.02e+2
// e+2 => 10²
// 1.02 * 10²

// 반올림하여 문자열로 변환
const num4 = 1234.12;
console.log(num4.toFixed());
// 1234 / type : String

console.log(num4.toLocaleString("ar-EG"));
// 숫자를 원하는 나라에 맞게 출력하고 싶다면
// ١٬٢٣٤٫١٢ => 아라비아 숫자

// 원하는 자릿수까지 유효하도록 반올림
console.log(num4.toPrecision(5));
// 5자릿수까지라고 하였으니 1234.1
console.log(num4.toPrecision(2));
// 전체 자릿수 표기가 안될 때는 지수표기법으로 반환
// 1.2e+3 => 1.2 * 1000 = 1200

 

 

9-5) 수학 관련 함수

 

숫자를 이용하여 무언가를 계산할 때 필요한 유용한 함수들이 몇 개 들어있음.

static 프로퍼티(속성)와 메소드(함수)를 많이 가지고 있음.

 

console.log(Math.E);
// 2.718281828459045
// 오일러의 상수, 자연로그의 밑

console.log(Math.PI);
3.14159265...
// 원주율 PI값 //

// static method

console.log(Math.abs(-10));
// 절대값
// -값을 넣어도 + 값이 나옴

console.log(Math.ceil(1.4));
// 2
// 소수점 이하를 올림

console.log(Math.floor(1.4));
 // 1
// 소수점 이하를 내림

console.log(Math.round(1.4)); // 1
console.log(Math.round(1.7)); // 2
// 소수점 이하를 반올림

console.log(Math.trunc(1.5432));
//1
// 정수만 변환
// 소수점 이하를 없앰

console.log(Math.max(1, 3, 4)); // 최댓값인 4 출력
console.log(Math.min(1, 3, 4)); // 최솟값인 1 출력 
// 최대, 최솟값을 찾기 ;

console.log(3 ** 2);
console.log(Math.pow(3, 2));
// 거듭제곱

console.log(Math.sqrt(9));
// 9의 제곱근인 3을 출력
// 제곱근

console.log(Math.random());
// 랜덤한 값을 반환
// 0보다 크고 1보다 작은 숫자를 랜덤하게 만들어줌

// Q. 1~10까지 중 추출하고 싶다면?
console.log(Math.floor(10 * Math.random() + 1));
// 0보다 크고 1보다 작은 숫자에 10을 곱하고 Math.floor();를 해주면 최대 9까지 나오므로 1을 더해야 함.

 

 

9-6) 문자열 관련 함수

 

const textObj = new String("Hello World!"); // 스트링 타입의 객체를 만드는 것
const text = "Hello World!"; // 문자열 타입 

console.log(textObj); // [ String : "Hello World!" ]
console.log(text); // Hello World!

console.log(text.substring);
// string에 관한 모든 것들을 알 수 있음
// interface String { }이라는게 있는데 여기 있는 문법은 타임 스크립트를 공부하면 이해하기 쉬움
// toString이라는 함수를 호출시 string이 반환됨
// charAt(pos: number) : string; => number를 사용해서 charAt을 호출하면 그 위치에 있는 문자를 반환해줌

console.log(text);
console.log(text.length); // 12
console.log(text[0]); // H
console.log(text[1]); // e
console.log(text[2]); // l

console.log(text.charAt(0)); // H
console.log(text.charAt(1)); // e
console.log(text.charAt(2)); // l

const myName = "유승민";
console.log(myName.charAt(1)); // 승

console.log(text.indexOf("l"));
// 2
// l이 몇 번째에 있는지 알려줌

console.log(text.lastIndexOf("l"));
// 9
// l이 뒤에서 몇 번째에 있는지 알려줌

console.log(text.includes("tx"));
// false
// "tx"를 포함하고 있는지

console.log(text.includes("h")); // false
console.log(text.includes("H")); // true

console.log(text.startsWith("H"));
// true
// H로 시작하는지 안하는지

console.log(text.startsWith("p"));
// false
// p로 시작하는지 안하는지

console.log(text.endsWith("!"));
// true
// !로 끝나는지 안하는지

console.log(text.toUpperCase());
// HELLO WORLD!
// 모두 대문자로 바꾸기

console.log(text.toLowerCase());
// hello world!
// 모두 소문자로 바꾸기

console.log(text.substring(0, 2));
// He
// 0부터 2 미만까지만 잘라서 출력

console.log(text.substring(3, 7));
// lo W
// 3부터 7 미만까지만 잘라서 출력

console.log(text.slice(2));
// llo World!
// 2 미만까지 잘라내고 나머지만 출력

console.log(text.slice(-2));
// d!
// 뒤에서 2 미만까지 남겨두고 나머지만 출력
// slice => 뒤에 것을 남겨두고 앞에 것을 잘라냄

const space = " space ";
console.log(space.trim());
// space
// 공백 모두 제거

const longText = "Get to the, point";
console.log(longText.split(" "));
// ["Get", "to", "the,", "point"]
// " " => 빈 칸을 기준으로 끊어내고 싶을 때

console.log(longText.split(" ", 2));
// ["Get", "to"]
// 빈 칸을 기준으로 끊어내고 두 덩이만 갖고 싶을 때

console.log(longText.split(",", 2));
// ["Get to the", "point"]
// 콤마를 기준으로 끊어내고 싶을 때

const separation = longText.split(", ", 2);
// 콤마와 빈 칸을 기준으로 끊어내고 싶을 때
// 무엇을 기준으로 끊어낼 것인지, 몇 덩이로 나눌 것인지

console.log(separation[0]);
// Get to the
// 끊어낸 배열의 0번째 index만 출력

const email = "dnjfht@naver.com";
const separation2 = email.split("@", 2);
// [ "dnjfht", "naver.com" ]
// @를 기준으로 끊어내고 두 덩이만 가지고 싶음.

console.log(separation2[0]);
// dnjfht

 

 

9-7) 날짜 관련 함수

 

// UTC 기준 (협정 세계시, 1970년도 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 표기)

console.log(new Date());
// 2023-03-19T08:32:07.354Z
// 아무런 인자를 주지 않으면 현지 시각 설정

console.log(new Date("Jun 5, 2022"));
// 2022-06-04T15:00:00.000Z

console.log(new Date("2022-12-17T03:24:00"));
// 2022-12-16T18:24:00.000Z
// 지역에 따라서 플랫폼에서 사용하는 locale이 다르기 때문에
// 시간과 locale 두 가지를 정확히 알고 적용해야 함.
// 한국에서는 3시라고 하지만 UTC 시점에서는 전날 16시가 되기 때문
// node 개발환경은 000Z, Chrome 브라우저 콘솔창은 GMT+0900 (한국 표준시)
// T는 날짜와 시간을 구분

console.log(Date.now());
// 1670005730071
// Date.now() : 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환

console.log(Date.parse("2022-12-17T03:24:00"));
// 1671215040000
// 특정한 시간을 펄싱해서 밀리초 단위로 표기가 가능

const now = new Date();

now.setFullYear(2023);
// 년도를 설정 가능

now.setMonth(10);
// 달을 설정 가능 => 달은 0부터 시작, 0 : 1 => 10 : 11

now.setDate(24);
// 일을 설정 가능

console.log(now);
// 2023-11-24T08:32:07.369Z

console.log(now.getFullYear());
// 년도를 얻을 수 있음
// 2023

console.log(now.getDate());
// 일을 얻을 수 있음
// 24

console.log(now.getDay());
// 요일을 얻을 수 있음
// 0: 일요일부터 1... 6 : 토요일 => UTC 시간 기준 금요일로 떠서 5

console.log(now.getMonth());
// 달을 얻을 수 있음
// 10 =>11월

console.log(now.getSeconds());
// 초를 얻을 수 있음
// 7

console.log(now.toString());
// Fri Nov 24 2023 17:32:07 GMT+0900 (대한민국 표준시)

console.log(now.toDateString());
// Fri Nov 24 2023

console.log(now.toTimeString());
// 17:32:07 GMT+0900 (대한민국 표준시)

console.log(now.toISOString());
// 2023-11-24T08:32:07.369Z
// ISO 8601 형식

console.log(now.toLocaleString("en-US"));
// 11/24/2023, 5:32:07 PM

console.log(now.toLocaleString("ko-KR"));
// 2023. 11. 24. 오후 5:32:07