JavaScript | 내장 객체(1) - [래퍼 객체, 전역 객체]

yuni·2022년 10월 6일

JavaScript 내장객체 래퍼객체 전역객체

javascript

목록 보기

8/16

👁‍🗨 내장 객체 (Built-in object)

브라우저의 자바스크립트 엔진에 내장된 객체

✔ 래퍼 객체(Wrapper object)

⇨ 래퍼객체는 원시 타입을 감싸는 형태의 객체이다. 래퍼 객체는 프로퍼티를 참조할 때 임시생성되며
프로퍼티 참조가 끝나면 사라진다.

원시타입 : string, number, boolean, null, undefined, symbol (ECMAScript 2015에 신규로 추가)
래퍼 객체 : String, Number, Boolean, Symbol

// 래퍼 객체
//원시값을 필요에 따라서 관련된 내장 객체로 변환

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

const text = '한글'; //string 문자 원시타입
console.log(text);
console.log(text.length); //String 객체

//프로퍼티 참조 생성 → 프로퍼티 참조끝나면 사라짐
let happy = 'smile';
happy.len = 5;

console.log(happy.len);  //undefined

⇊⇊　 원시타입과 래퍼객체의 차이점　 ⇊⇊

let string = 'text';  //type: string
let object1 = new string('text'); //type: object
let object2 = new string('text'); //type: object

string == object1;  //false
object1 == object2;  //false

⇒　String 객체는 진짜 객체이기 때문에 원시타입의 문자열과 String 객체는 동일 하지 않습니다.
또한 String객체는 개별 객체이기때문에 자기자신에게만 동일합니다.

✔ 전역 객체 (Global object)

⇨ 모든 객체의 유일한 최상위 객체를 의미한다. 전역 객체의 이름은 사용하는 환경에 따라 달라진다.
일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다.

전역객체를 생략할 수 있다.
개발자가 전역 객체를 생성하는 것은 불가능
전역 스코프를 갖게 된다.
전역 변수는 전역 객체의 프로퍼티이다.
전역 함수는 전연 객체의 메소드이다.

▶ Value properties

⇒ 애플리케이션 전역에서 사용하는 값들을 나타내기 위해 사용한다.

globalThis : this 값을 가진 전역 객체를 반환
Infinity : 양/음의 무한대
NaN : 숫자가 아님을 나타냄
undefined : 원시 타입 undefined를 값

▶ 전역 함수(Global function)

⇒ 애플리케이션 전역에서 호출할 수 있는 함수로서 전역 객체의 메소드이다.

1. eval()

eval(string)
⇒ 매개변수에 전달된 문자열 구문 또는 표현식을 값으로 평가 또는 실행한다.
*string : code 또는 표현식으로 나타내는 문자열

2. isFinite()

isFinite(value)
⇒ 매개변수에 전달된 값이 정상적인 유한수인지 검사하여 그 결과를 Boolean으로 반환한다.
값이 숫자가 아닌경우, 순자로 변환한 후 검사를 수행한다.

console.log(isFinite(Infinity));  // false
console.log(isFinite(10));         // true
console.log(isFinite('10'));      // true: '10' → 10
console.log(isFinite(null));      // true: null → 0

3. isNaN()

isNaN(value)
⇒ 매개변수에 전달된 값이 NaN인지 검사하여 그 결과를 Boolean으로 반환한다.
값이 숫자가 아닌경우, 순자로 변환한 후 검사를 수행한다.

isNaN(NaN)       // true
isNaN(undefined) // true: undefined → NaN
isNaN('text')    //true

isNaN(true)      // false: true → 1
isNaN(null)      // false: null → 0
isNaN(22)        // false
isNaN('22')      // false: '22' → 22

4. parseFloat()

parseFloat(string)
⇒ 매개변수에 전달된 문자열을 부동소수점 숫자(floating point number)로 변환하여 반환한다.
문자열의 첫 숫자만 반환되며 전후 공백은 무시된다. 그리고 첫문자를 숫자로 변환할 수 없다면 NaN을 반환한다.

parseFloat('1.23');     // 1.23
parseFloat('12.34');    // 12
parseFloat('12 34 56'); // 12
parseFloat(' 24 ');     // 24
parseFloat('22 years'); // 22
parseFloat('D Day 29') // NaN

5. parseInt()

parseInt(string, radix);
string: 파싱 대상 문자열
radix: 진법을 나타내는 기수(2 ~ 36, 기본값 10))
⇒ 매개변수에 전달된 문자열을 정수형 숫자(Integer)로 반환한다. 반환값은 언제나 10진수이다.
첫번째 매개변수에 전달된 값이 문자열이 아니면 문자열로 변환한 후 숫자로 해석하여 반환한다.
문자열의 첫 숫자만 반환되며 전후 공백은 무시된다. 그리고 첫문자를 숫자로 변환할 수 없다면 NaN을 반환한다.

parseInt(12);     // 12
parseInt(12.345); // 12

parseInt('12');     // 12
parseInt('12.345'); // 12

parseFloat(' 24 ');     // 24
parseFloat('22 years'); // 22
parseFloat('D Day 29') // NaN

6. encodeURI() / decodeURI()

encodeURI(URI)
// URI: 완전한 URI
decodeURI(encodedURI)
// encodedURI: 인코딩된 완전한 URI

encodeURI : 매개변수로 전달된 URI(Uniform Resource Identifier)를 인코딩한다.
인코딩이란? URI의 문자들을 이스케이프 처리(아스키 문자로 변환)하는 것
한글이나 특수문자는 이스케이프 처리 해야한다. (알파벳, 0~9의 숫자, - _ . ! ~ ‘ ( ) 제외)
decodeURI() : 매개변수로 전달된 URI을 디코딩한다.

//encodeURI / decodeURI
const URL = 'https://해피코딩.com';
const encoded = encodeURI(URL); //인코딩: 문자들을 이스케이프처리
const decoded = decodeURI(encoded); //디코딩

console.log(encoded);  //https://%ED%95%B4%ED%94%BC%EC%BD%94%EB%94%A9.com
console.log(decoded); //https://해피코딩.com

7. encodeURIComponent() / decodeURIComponent()

전체 URL이 아니라 부분적인 것은 Component 이용
encodeURIComponent() : 매개변수로 전달된 URI(Uniform Resource Identifier) component(구성 요소)를 인코딩한다.
(알파벳, 0~9의 숫자, - _ . ! ~ * ‘ ( ) 제외)
decodeURIComponent() : 매개변수로 전달된 URI component(구성 요소)를 디코딩한다.

const URL = 'https://해피코딩.com';
let encoded = encodeURI(URL); //인코딩: 문자들을 이스케이프처리
let decoded = decodeURI(encoded); //디코딩

console.log(encoded); //https://%ED%95%B4%ED%94%BC%EC%BD%94%EB%94%A9.com
console.log(decoded); //https://해피코딩.com

// encodeURIComponent / decodeURIComponent
encoded = encodeURIComponent(URL);
decoded = decodeURIComponent(encoded);

console.log(encoded); //https%3A%2F%2F%ED%95%B4%ED%94%BC%EC%BD%94%EB%94%A9.com
console.log(decoded); //https://해피코딩.com