[Javascript] 전역객체, 표준 빌트인 객체, 래퍼 객체, valueof, 빌트인전역프로퍼티, 빌트인전역함수, eval, isFinite,isNaN,parseFloat, parseInt,encodeURI,encodeURIComponent,decodeURI

I. 전역 객체 global object

• 언제 어디서든 들어마실 수 있는 공기와도 같은...
• 코드로 선언하거나 하지 않아도 전역 범위에 항상 존재하는 객체
• 👉 MDN 문서 보기

 

브라우저의 콘솔에 출력해 볼 것

console.log(this);

 

console.log(

this === window,

window === self,

self === frames

);

Node.js에서 문서로 실행해 볼 것

console.log(this);

// ⚠️ Node.js로 문서 실행시의 this는 전역 객체를 가리키지 않음

// 이후 모듈 관련 강에서 배울 것

 

console.log(global);

⭐️ globalThis 통일된 식별자 - 양쪽 모두에서 실행해 볼 것

console.log(globalThis);

💡 전역 객체에 포함되는 것

1. 표준 빌트인 객체
2. 호스트 객체 - 환경에서 제공하는 기타 객체들 : 브라우저의 Web API, Node.js API 등
3. (브라우저 한정) - 전역으로 설정된 var 변수와 전역 함수

var myGlobalVar = 1;

const myGlobalConst = 1;

​

function myGlobalFunc () {};

​

console.log(

globalThis.myGlobalVar,

globalThis.myGlobalConst,

globalThis.myGlobalFunc

);

---

 

II. 표준 빌트인 객체 standard built-in objects

👉 MDN 문서 보기

• ECMAScript 사양에 정의된 객체들 - 어떤 환경에서든 사용 가능
• 전역 프로퍼티로 제공됨 - globalThis등을 붙이지 않고 바로 사용 가능
• 👉 표준 빌트인 객체 MDN 문서

 

💡 Node.js에서는 globalThis 출력시 표준 빌트인 객체들은 출력하지 않음

console.log(globalThis);

 

// 그러나 요소들로 갖고 있는 것은 확인 가능

console.log(globalThis.Infinity);

console.log(globalThis.isNaN);

console.log(globalThis.Object);

---

 

III. 래퍼 객체 wrapper object

const str = 'abcde';

console.log(

str.length,

str.toUpperCase(),

str[0]

);

 

const num = 123.4567;

console.log(

typeof num.toString(),

num.toFixed(2)

);

• 원시값이 어떻게 프로퍼티를 갖고 있을까?

 

💡 콘솔에서 프로퍼티와 프로토타입을 펼쳐 확인해보자.

const str = new String('abcde');

const num = new Number(123.4567);

const bool = new Boolean(true);

​

console.log(typeof str, str);

console.log(typeof num, num);

console.log(typeof bool, bool);

Number, String, Boolean 등은 표준 빌트인 객체에 속하는 래퍼 객체

• 원시값을 필요시 래퍼 객체로 감싸서 wrap 그것의 인스턴스로 만들어 기능 실행
• 원시값에서 객체를 사용하듯 해당 래퍼 객체의 프로퍼티를 호출할 때 래핑이 발생

⭐️ 해당 기능 사용 후에는 원시 객체로 돌아감 - 메모리 절약

const str = 'abcde';

console.log(str.length);

console.log(typeof str, str);

valueOf 함수 - 래퍼 객체의 인스턴스에서 원시값 반환

const str = new String('abcde');

const num = new Number(123.4567);

const bool = new Boolean(true);

​

console.log(str.valueOf());

console.log(num.valueOf());

console.log(bool.valueOf());

 

I. 빌트인 전역 프로퍼티

👉 MDN 문서 보기

스스로 다른 프로퍼티나 메서드를 갖지 않고 값만 반환

console.log(globalThis.Infinity);

console.log(globalThis.NaN);

console.log(globalThis.undefined);

 

console.log(globalThis.globalThis);

 

console.log(

globalThis == globalThis.globalThis,

globalThis == globalThis.globalThis.globalThis,

globalThis == globalThis.globalThis.globalThis.globalThis

);

• Infinity, NaN, undefined 등의 원시값들은 이 프로퍼티들을 가리킴
• 💡 null은 포함되지 않음 - 가리키는 값이 없음을 의미하므로...
• globalThis 스스로에 대한 참조를 프로퍼티로 포함

---

 

II. 빌트인 전역 함수

👉 MDN 문서 보기

1. eval - 문자열로 된 코드를 받아 실행

값을 반환하는 코드(표현식)이라면 해당 값을 반환

const x = eval('1 + 2 + 3');

​

// 객체나 함수의 리터럴은 괄호로 감싸야 함

const obj = eval('({a: 1, b: 2})');

​

console.log(x, obj);

표현식이 아닐 경우 해당 코드 실행

const code = `

let x = 1;

console.log(x++, x);

`;

​

eval(code);

⚠️ 매우 특별한 경우가 아닌 이상 절대 사용하지 말 것

• ☢️ 보안에 취약함
• 엔진이 코드를 최적화하지 못하므로 처리 속도가 느림
• 👉 관련 MDN 문서

2. isFinite - 유한수 여부 반환

console.log(

isFinite(1),

isFinite(0),

isFinite('1'),

isFinite(null)

);

• 유한수이거나 유한수로 평가될 수 있는 (null은 0) 값 : true

 

console.log(

isFinite(1/0),

isFinite(Infinity),

isFinite(-Infinity),

isFinite(NaN),

isFinite('abc')

);

• 무한수이거나 수로 평가될 수 없는 값: false

3. isNaN - NaN 여부 반환

console.log(

isNaN(NaN),

isNaN('abcde'),

isNaN({}),

isNaN(undefined)

);

• 숫자로 인식될 수 없는 값 : true
• Number 타입이 아닌 경우 Number로 변환하여 평가 NaN도 타입은 Number
• 💡 뒤에 배울 Number.isNaN은 타입변환을 하지 않음

4. parseFloat - 인자로 받은 값을 실수로 변환

console.log(

parseFloat(123.4567),

parseFloat('123.4567'),

parseFloat(' 123.4567 ')

);

• 문자열의 경우 앞뒤공백은 무시

console.log(

parseFloat('123.0'),

parseFloat('123'),

parseFloat(' 123ABC '),

parseFloat([123, 456, 789])

);

• 숫자로 시작할 경우 읽을 수 있는 부분까지 숫자로 변환
• 배열의 경우 첫 요소가 숫자면 해당 숫자 반환

console.log(

parseFloat('ABC123'),

parseFloat({x: 1}),

parseFloat([]),

parseFloat(['a', 1, true])

);

• 기타 숫자로 변환이 안 되는 경우 NaN 반환

5. parseInt - 인자로 받은 값을 정수(타입은 실수)로 변환

console.log(

parseInt(123),

parseInt('123'),

parseInt(' 123.4567 '),

parseInt('345.6789')

);

• 소수점 뒤로 오는 숫자는 버림 반올림하지 않음

console.log(

parseInt('abc'),

parseInt('{}'),

parseInt('[]')

);

 

💡 두 번째 인자로 숫자(2~36) 넣으면

console.log(

parseInt('11'),

parseInt('11', 2),

parseInt('11', 8),

parseInt('11', 16),

parseInt('11', 32),

​

parseInt('11', 37),

parseInt('11', 'A'),

);

• 주어진 값을 해당 진법의 숫자로 해석하여 10진법 숫자로 반환
• 무효한 숫자는 NaN 반환

6. encodeURI, encodeURIComponent

const searchURI = 'https://www.google.com/search?q=얄코';

const encodedURI = encodeURI(searchURI);

​

console.log(encodedURI);

• URI(인터넷 자원의 주소)는 🔗 아스키 문자 셋으로만 구성되어야 함
• 아스키가 아닌 문자(한글 등)와 일부 특수문자를 포함한 URI를 유효하게 인코딩

 

const keyword = '얄코';

const encodedKeyword = encodeURIComponent(keyword);

​

console.log(encodedKeyword);

 

const searchURI = `https://www.google.com/search?q=${encodedKeyword}`;

console.log(searchURI);

• URI에 들어갈 요소를 인코딩

 

💡 둘의 정확한 차이

const raw = '?q=얄코';

console.log(encodeURI(raw));

console.log(encodeURIComponent(raw));

• URI에서 특정 기능을 갖는 =, ?, & 등을 인코딩하는가의 여부
• encodeURI는 인자를 완성된 URI로, encodeURIComponent는 요소로 인식하기 때문

7. decodeURI, decodeURIComponent

encodeURI(Component)와 반대로 동작

const encodedURI = 'https://www.google.com/search?q=%EC%96%84%EC%BD%94';

const decodedURI = decodeURI(encodedURI);

​

console.log(decodedURI);

 

const encodedComp = '%EC%96%84%EC%BD%94';

const decodedComp = decodeURI(encodedComp);

​

console.log(decodedComp);