[dream coding] 10강 빌트인 객체 TIL

자바스크립트는 크게 3개의 객체로 나뉜다

---

1.네이티브 객체 = 빌트인객체 = 글로벌 객체

• Native objects = Built-in objects = Global Objects
• ECMAScript 명세에 정의된 객체를 말한다.
• 애플리케이션 전역의 공통 기능 제공
• Object, String, Number, Function, Array, RegExp, Date, Math 등
• 객체 생성에 관계가 있는 함수 객체와 메서드로 구성
• 네이티브 객체를 Global Object라고 부르는데 이것은 전역객체 (Global Object)와 다른의미로 사용되므로 혼동에 주의하자

---

1.종류

💡Object

• Object() 생성자 함수 는 객체를 생성한다.

💡Function

• 자바스크립트의 모든 함수는 Function의 객체이다
• 다른 모든 객체들처럼 Function객체는 new 연산자를 사용해 생성할 수 있다.

💡Math

• Math 프로퍼티
  • Math.PI : 원주율 PI 값(π ≈ 3.141592653589793)
• Math 메서드

// static method 절대값
console.log(Math.abs(-10));	// 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);			//9
console.log(Math.pow(3, 2));	//9

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

// 랜덤한 값을 반환
console.log(Math.random());	

// 1~10
console.log(Math.floor(Math.random() * 10 + 1));	//6

💡Date

• 날짜와 시간(년,월,일,시,분,초,밀리초)을 위한 메소드 를 제공하는 빌트인 객체이면서 생성자 함수
• 생성자 함수로 생성한 Date객체는 내부적으로 숫자값을 갖는다
  : UTC(1970년 1월 1일 00:00)기점으로 현재 시간까지의 밀리초
• KST는 UTC/GMT 9시간을 더한 시간
• Date 생성자 함수
  • 날짜와 시간을 가지는 인스턴스 생성
  • 생성된 인스턴스는 기본적으로 현재 날짜 시간을 나타냄
    다른 날짜와 시간을 다루고싶다면 인수로 지정한다.
  • 주의: 0부터 시작, 0 = 1월
  • 4가지 방법
    1 ) new Date()
    2 ) new Date(dateString)
    3 ) new Date(year, month[, day, hour, minute, second, millisecond])
    4 ) new 연산자없이 호출

//3번 방법에서 년,월은 반드시 적어야함
let date = new Date(2019, 4);
console.log(date); // Wed May 01 2019 00:00:00 GMT+0900 (한국 표준시)
// 가독성이 훨씬 좋다.
date = new Date('2019/5/16/17:24:30:10');
console.log(date); // Thu May 16 2019 17:24:30 GMT+0900 (한국 표준시)

• Date 메서드

// UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환합니다.
console.log(Date.now()); 
//날짜와 시간 문자열을 구문 분석하여 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 반환합니다.
console.log(Date.parse('2022-12-17T03:24:00'));

const now = new Date();
//년도 4자리 설정
now.setFullYear(2023);
//달 설정
now.setMonth(0); // 0: 1월
//년도 반환
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());
//ISO 8601 형식 표기
console.log(now.toISOString()); 
//미국형식 표기
console.log(now.toLocaleString('en-US'));
//한국형식 표기
console.log(now.toLocaleString('ko-KR'));

💡RegExp

• 정규 표현식 참고!!

💡Array

• Array 참고!!

💡Error

• Error 생성자는 error 객체를 생성한다.
• error 객체의 인스턴스는 런타임 에러가 발생하였을 때 throw된다.

try {
  // foo();
  throw new Error('Whoops!');
} catch (e) {
  console.log(e.name + ': ' + e.message);
}

래퍼 (Wrapper) 객체

• 원시값 을 필요에 따라서 관련된 빌트인 객체(네이티브 객체)로 변환
• Number,String,Bollean,Symbol

💡원시값이 어떻게 메서드를 호출하냐

• 원시타입의 메서드를 호출하면
  1 ) 순간적으로 원시타입에 해당하는 객체 가 생성되고,
  2 ) 이 객체 의 메서드 가 호출된다.
  3 ) 메서드 처리가 끝나면 객체 는 사라지고,
  4 ) 원래의 원시타입만 남는다.
• 순간적으로 생성되었다 사라지는 객체를 ' 래퍼 객체 ' 라고 한다.

💡그럼 애초에 객체로 생성하면 되는거잖아 ! 그건 아니야. 💩

• 일단 객체는 다양한 프로퍼티, 메서드를 갖고 있으므로 무겁고 느려짐
• 원시타입은 가볍고 빠르지만 값 하나 뿐임
• 해결책으로 메서드를 호출할때만 잠깐 객체로 바꾸고 볼일 끝나면 다시 원시타입으로 복귀해
• 원시타입의 가벼움은 유지, 객체의 유용한 기능도 유지

const number = 123; // number 원시 타입
console.log(number.toString()); //number 원시타입을 감싸고 있는 Number 객체로 감싸짐

---

💡string ✨✨✨✨

• string 생성자 함수
  • new String(value);
• string 프로퍼티
  • length

const str2 = '안녕하세요!';
console.log(str2.length); // 6

• string 메서드
  • string 객체의 모든 메소드는 언제나 새로운 문자열을 반환한다
    문자열은 변경불가능(immutable)한 원시 값이기 때문

const textObj = new String('Hello World!'); // 문자열 객체타입
const text = 'Hello World!';                // 문자열 원시타입
console.log(textObj);               // [String: 'Hello World!']
console.log(text);                  // Hello World!
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

// 처음부터 찾아진 문자열이 몇번째 인덱스에 있는지 찾기
console.log(text.indexOf('l'));     // 2
// 뒤에서부터 찾아진 문자열이 몇번째 인덱스에 있는지 찾기
console.log(text.lastIndexOf('l')); // 9

//해당하는 문자열이 있는지 확인하기(대소문자 구분함)
console.log(text.includes('tx'));   // false
console.log(text.includes('h'));   // false
console.log(text.includes('H'));   // true

//특정한 문자열로 시작하는지 확인하기
console.log(text.startsWith('He'));      // true
//특정한 문자열로 끝나는지 확인하기
console.log(text.endsWith('!'));         // true

//모든 텍스트를 대문자로 변환되어 반환해줌
console.log(text.toUpperCase());        // HELLO WORLD!
//모든 텍스트를 소문자로 변환되어 반환해줌
console.log(text.toLowerCase());        // hello world!

//특정한 문자열 가져오기(시작하는 인덱스,종료인덱스)
console.log(text.substring(0, 2));

//특정 문자열 추출하기
//추출시작점인 0부터 시작하며, 추출 종료 인덱스 그 직전까지 추출됨
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(' '));
console.log(longText.split(', ', 2));

---

💡Number

• Number 생성자 함수
  • Number객체 생성 : new Number(value);
  • new 연산자를 붙이지 않아 생성자로 사용하지 않으면
    Number 객체를 반환하지 않고 원시 타입 숫자를 반환한다

//Number객체
new Number(value);

var x = Number('123');
console.log(typeof x, x); // number 123

• Number 프로퍼티
  • 정적(static) 프로퍼티로 Number 객체를 생성할 필요없다.
  • Number.propertyName

//js에서 사용 가능한 가장 큰 숫자 (1.7976931348623157e+308) 반환
Number.MAX_VALUE
//js에서 사용 가능한 가장 작은 숫자(5e-324) 반환
Number.MIN_VALUE

//js에서 안전한 최대 정수 값(2^53 - 1)
Number.MAX_SAFE_INTEGER
//js에서 안전한 최소 정수값(-(2^53 - 1))
Number.MIN_SAFE_INTEGER

//숫자가 아님을 나타내는 숫자 값 (Number.NaN == window.NaN)
Number.NaN

//음의 무한대 -Infinity 반환
Number.NEGATIVE_INFINITY
//양의 무한대 Infinity 반환
Number.POSITIVE_INFINITY

• Number 메소드
  • Number.isNaN(testValue)
  • Number.isNaN() !== 전역함수 isNaN()
    전역함수 isNaN() : 인수를 숫자로 변환 검사 수행
    Number.isNaN() : 숫자가 아닌 인수는 언제나 false

	//NaN인지 검사 후 Boolean 반환
	Number.isNaN(testValue)

	//숫자가 아닌 인수는 언제나 false
	Number.isNaN('37');     // false

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

// 반올림하여 문자열로 변환
const num4 = 1234.12;
// 매개변수로 지정된 소수점자리 반올림 
console.log(num4.toFixed());	//1234
// 숫자를 문자열로 변환 후 반환
console.log(num4.toString());	// 1234.12
console.log(num4.toLocaleString());	// 1,234.12

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

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

//매개변수a,b가 동일한지 Boolean값 반환
function isEqual(original, expected) {
  //Math.abs() : 숫자의 절대값을 반환합니다. 
  //x가 양수이거나 0이라면 x를 리턴하고, x가 음수라면 x의 반대값, 즉 양수를 반환합니다.
  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

---

💡Boolean

• Boolean 생성자 함수
  - new Boolean(value);
  • Falshy
    0, -0, null, NaN, undefined, ''
  • Truthy
    1, -1, '0', 'false', [], {}

var foo = new Boolean(true);    // true
var foo = new Boolean('false'); // true
var foo = new Boolean(false); 	// false

• Boolean객체와 boolean 원시 타입을 혼동하기 쉽다.
• Boolean객체는 true/false를 포함하는 객체임!

var x = new Boolean(false);

if (x) { // x는 객체로서 존재한다. 따라서 참으로 간주된다.
  // . . . 이 코드는 실행된다.
}

---

2. 호스트 객체

2.종류

💡전역객체

• 전역 객체는 모든 객체의 유일한 최상위 객체를 의미하며
• 일반적으로 Browser-side에서는 window 객체
• Server-side(Node.js)에서는 global 객체

💡BOM ( Browser Object Model )

• 브라우저 객체 모델은 브라우저 탭, 창의 모델을 생성한다.
• 최상위 window객체는 브라우저의 창 또는 탭을 표현
  

💡DOM ( Document Object Model )

• 문서 객체 모델은 현재 웹페이지의 모델을 생성
• 최상위 document 객체는 전체 문서로 표현
  

---

참고