내장객체(Built-in Objects)

자바스크립트만으로는 브라우저화면을 보여주거나, 네트워크를 전송하거나 컴퓨터에 있는 파일을 읽을 수 없다.

이러한 일을 하기위해서는 자바스크립트 밖에있는(런타임환경에서 제공해주는) 호스트객체가 필요하다.  

호스트객체는 브라우저환경에서 브라우저가 제공해주는 API,  노드환경에서 노드가 제공해주는 API가 있다.

---

래퍼 객체(Wrapper Object) 

객체가 아님에도 불구하고 객체에서 함수를 호출하는것처럼, 원시값에서 메서드를 호출할 수 있게 해주는것이 래퍼객체이다.

래퍼 객체(Wrapper Object)는 필요에 따라서 원시값을  사용할때만 한시적으로 관련된 빌트인 객체로 변환한다.

Wrapper객체가 유용하니까 그냥 원시타입을 그때그때마다 Wrapper객체로 변환해주지말고, Wrapper객체를 항시적으로 사용하면 안되나요? -> 객체는 기본적으로 여러 프로퍼티와 메서드를 담고있기때문에 원시타입보다 무겁다. 따라서 필요할때만 최소한으로 Wrpper객체를 사용하는게 바람직하다.

const number = 123; // number은 숫자데이터타입을 할당한 원시(primitive)타입임

// '.객체함수'를 쓰는순간 number 원시타입을 감싸고 있는 Number 객체로 감싸짐(객체함수를 쓸때만 한시적으로)
console.log(typeof number.toString());
console.log(number); // 다시 객체함수를 쓰지 않으면 원시타입이다.

const text = "text"; // string 문자열
console.log(text); // string 문자열
text.length; // String 객체로 변환(객체함수를 쓸때만 한시적으로)
text.trim(); // String 객체로 변환(객체함수를 쓸때만 한시적으로)

---

전역 객체(Global Object)

• isFinite: 유한한지 무한한지 검사 -> True of False
• parseFloat: string타입 숫자를 number타입 숫자로 변환
• parseInt: 실수의 숫자를 정수의 숫자로 변환
• enodeURI: 아스키코드가 아닌 값을 이스케이프처리해줌
• decodeURI: 아스키코드로 이스케이프된 값을 다시 언이스케이프시켜줌
• encodURIComponenet: 아스키코드가 아닌 값을 부분적으로 이스케이프처리해줌

console.log(globalThis);	// 전역객체목록을 출력해줌
console.log(this);	// 브라우저환경에서는 globlathis와 마찬가지로 전역객체 목록을 출력해줌
// 브라우저환경과 node환경에서 this는 약간 다르게 쓰인다. 브라우저환경에서의 this는 전역객체를 가르키지만,
// node환경에서의 this는 현재 모듈에 있는 정보를 출력하기떄문에 따로 export하지않았다면 빈 모듈 {}가 출력된다.
console.log(Infinity);
console.log(NaN);
console.log(undefined);

// 자바스크립트를 한줄한줄씩 표현할 수 있는 전역함수 eval -> 값으로 평가해서 출력해줌.
eval("const num = 2; console.log(num)");
console.log(isFinite(1)); // 수가 유한한지 아닌지
console.log(isFinite(Infinity)); // false
console.log(parseFloat("12.43")); // string데이터타입의 숫자를 numbere데이터타입의 숫자로 변환
console.log(parseInt("12.43")); // 신수범위의 숫자를 정수의 수로 변환

// URL은 URI(Uniform Resource Identifier-리소스의 주소를 고유하게 나타내는 것)의 하위 개념이다.
// URL는 아스키 문자로만 구성되어야 함 (한글이나 특수문자는 이스케이프 처리해야 한다.)
const URL = "https://코끼리.com";
const encoded = encodeURI(URL); // 한글이나 특수문자를 이스케이프해주는 객체함수
console.log(encoded);

const decoded = decodeURI(encoded);
console.log(decoded);

// 전체 URL이 아니라 부분적인 것에 아스키코드를 적용하려면 encodeURIComponent이용
// encodeURIComponent는 https://코끼리.com의 https와 .com은 이스케이프하지않지만 ://같은부분은 이스케이프해버린다.
// 그래서 그냥 ://다음부분부터만 부분적으로 입력하는 것이 좋겠다.
const part = "코끼리코딩.com";
console.log(encodeURIComponent(part));

 

---

Bollean Wrapperobject

Falsy	Truthy
0	1
-0	-1
null	'0'
NaN	'false' (모든 문자열은 Truthy)
undefined	[ ]
' '	{ }

const isTrue = true; // new Boolean(true); <- 앞서말한것처럼 객체는 뚱뚱하기때문에 메모리관리상 좋지않은 방법
console.log(true.valueOf());

---

Number의 정적프로퍼티, 정적메서드, Instance함수

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

Mdn을 찾아보면 Number의 정적프로퍼티, 정적메서드, Instance함수목록을 참고할 수 있다.

 

⚠️caution

(Number의 정적메서드는 전역객체파트에 작성해둠)

===를 사용하여 NaN을 NaN과 비교하는 표현은 사용해서는 안된다. 

자바스크립트에서 NaN은 NaN과 같지 않다고 판단되어 false를 리턴하기때문

console.log(Number.NaN === Number.NaN);   // false

 

Number 인스턴스 만들기

const num1 = 123;
const num2 = new Number(123); // 굳이 만들수는 있으나, 객체는 메모리낭비이므로 위의 방식이 올바르다.

 

Number의 Static properties

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.MAX_SAFE_INTEGER);	// 안전하게 사용할 수 있는 최댓값
console.log(Number.MIN_SAFE_INTEGER);	// 안전하게 사용할 수 있는 최솟값
console.log(Number.NaN);		// NaN
console.log(Number.POSITIVE_INFINITY);	//Infinity
console.log(Number.NEGATIVE_INFINITY);	//-Infinity
console.log(Number.EPSILON);		//2.220446049250313e-16(아래 사용예제 있음)

 

Number.EPSILON사용예제

인간이 작성한 10진수의 수를 자바스크립트엔진이 2진수로 변환후 계산한뒤

다시 인간이 읽을 수 있도록 10진수로 반환하는 과정에서 생기는 오류 -> 부동소수점 산술연산은 정확하지 않을 수 있음

const num = 0.1 + 0.2 - 0.2;

다음 예제와 같이 부동소수점 산술 연산은 정확한 결과를 기대하기 어렵다. 정수는 2진법으로 오차 없이 저장 가능하지만 부동소수점 2을 표현하기 위해 가장 널리 쓰이는 표준인 IEEE 754는 2진법으로 변환했을 때 무한소수가 되어 미세한 오차가 발생할 수밖에 없는 구조적 한계가 있다. from 모던자바스크립트 Deep Dive

Number.EPSILON은 부동소수점으로 인해 발생하는 오차를 해결하기 위해 사용한다.

절대값이 Number.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 -> 같은 수가 아님

function isEqual(original, expected) {
  return Math.abs(original - expected) < Number.EPSILON;
}
console.log(isEqual(1, 1));	//true -> 같은 수임
console.log(isEqual(0.1, 0.1));	//true -> 같은 수임
console.log(isEqual(num, 0.1));	//true -> 같은 수임

위에 적혀진 console.log 6개의항목중 3번과 6번console.log항목에 집중해보자.

3번을 보면 실제 num과 0.1은 값이 아니지만, 두 값의 차이가 Number.EPSILON보다 작은 것은 맞다.

이게 바로 Number.EPSILON의 존재이유다. 두 값의 차이를 계산한뒤 Number.EPSILON보다 작다면 같은 값으로 인정하는 것.

 

Number의 Instance methods

// 실수를 반올림하여 문자열로 변환
const num4 = 1234.12;
console.log(num4.toFixed());

// 숫자를 문자열로 변환
console.log(num4.toString());

// 지정한 국가별에 적합한 숫자로 변환
console.log(num4.toLocaleString("ar-EG"));

// 원하는 자릿수까지 유효하도록 반올림
console.log(num4.toPrecision(5));
console.log(num4.toPrecision(4));
console.log(num4.toPrecision(2)); // 전체 자릿수 표기가 안될때는 지수표기법

---

Math built-in object

Unlike many other global objects, Math is not a constructor. All properties and methods of Math are static.
by-Mdn

 

Meth의 Static properties

console.log(Math.E); // 오일러의 상수, 자연로그의 밑
console.log(Math.PI); // 원주율 PI값

 

Meth의 Static method

// 절대값
console.log(Math.abs(-10));
// 소수점 이하를 올림
console.log(Math.ceil(1.4));
// 소수점 이하를 내림
console.log(Math.floor(1.4));
// 소수점 이하를 반올림
console.log(Math.round(1.7));
// 정수만 반환
console.log(Math.trunc(1.5432));

// 최대, 최소값을 찾기
console.log(Math.max(1, 3, 4));
console.log(Math.min(1, 3, 4));

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

// 제곱근
console.log(Math.sqrt(9));

// 0<x<1범위의 랜덤한 값 x를 반환
console.log(Math.random());

// Math.random 응용 1<x<10범위의 랜덤한 값 x를 반환
console.log(Math.floor(Math.random() * 10 + 1));

---

String built-in object

string 원시값을 사용하면 string 래퍼객체를 이용할 수 있다. 

알고리즘문제에서도 많이 쓰이기때문에 가성비가 좋은 파트이다.

 

const textObj = new String("Hello World!");
const text = "Hello World!";
console.log(textObj);
console.log(text);
console.log(text.length);

// 기능적으로 차이가 없다. (함수호출이 or 배열인덱스호출의 차이)
console.log(text[0]);
console.log(text[1]);
console.log(text[2]);
console.log(text.charAt(0));
console.log(text.charAt(1));
console.log(text.charAt(2));

console.log(text.indexOf("l")); // 최초로 찾아진 문자를 반환후 종료
console.log(text.lastIndexOf("l")); // 마지막에서 최초로 찾아진 문자를 반환후 종료

console.log(text.includes("tx")); // 포함되는지 아닌지, 대소문자를 가리므로 정확히 작성해야함
console.log(text.includes("He"));
console.log(text.includes("H"));

console.log(text.startsWith("He")); // 어떤 문자열로 시작하는지
console.log(text.endsWith("!")); // 어떤 문자열로 종료되는지

console.log(text.toUpperCase()); // 문자열전부를 대문자로 변환
console.log(text.toLowerCase()); // 문자열전부를 소문자로 변환

console.log(text.substring(0, 2)); // 특정범위의 문자열을 반환
console.log(text.slice(2)); // 특정위치의 문자열을 삭제
console.log(text.slice(-2)); // 마이너스는 "뒤에서부터"를 의미함

const space = "            space       ";
console.log(space.trim()); // 공백 제거한 후 문자열만 반환

const longText = "Get to the, point";
console.log(longText.split(" ", 2)); // 배열로 변환
console.log(longText.split(", ", 2)); // 2는 '잘라진것에서 순서대로 몇개의 요소를 가져올지'를 의미한다.

---

Date built-in object

// UTC기준 (협정 세계시, 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 표기)
console.log(new Date()); // 현재시간이 출력됨
console.log(new Date("Jun 5, 2022"));
console.log(new Date("2022-12-17T03:24:00"));

// date의 static method
console.log(Date.now()); // 현재시간이  UTC기준으로 출력됨
console.log(Date.parse("2022-12-17T03:24:00")); // 시간인자가 UTC기준으로 변환되어 출력됨

// date의 instance method
const now = new Date();
now.setFullYear(2023);
now.setMonth(0); // 0-> 1월, 1->2월...
console.log(now.getFullYear());
console.log(now.getDate()); // 0 1일부터...
console.log(now.getDay()); // 0 일요일일부터, 1... 6: 토요일
console.log(now.getTime());
console.log(now);

console.log(now.toString());
console.log(now.toDateString());
console.log(now.toTimeString());
console.log(now.toISOString()); // ISO 8601 형식
console.log(now.toLocaleString("en-US"));
console.log(now.toLocaleString("ko-KR"));

---

Quiz

Node에서 제공해주는 전역함수인 setInterval을 이용해 1초에 한번씩 시간을 출력하기

setInterval(() => {
  const now = new Date();
  console.log(now.toLocaleString('ko-KR'));
}, 1000);