자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.
1. 표준 빌트인 객체
- ECMAScript 사양에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공한다.
2. 호스트 객체
- ECMAScript 사양에 정의되어있지 않지만, 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.
3. 사용자 정의 객체
- 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의된 객체를 말한다.
표준 빌트인 객체
- Object, Number, Boolean, Symbol, Data, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체를 제공
- Math, Reflect, JSON(정적 메서드만 제공)을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체(프로토타입 메서드와 정적 메서드를 제공)다.
const strObj = new String('Lee');
//string 생성자 함수를 통해 생성한 strObj 객체의 프로토타입은 String.prototype이다.
console.log(Object.getPrototypeOf(strObj) === String.prototype); //true
- 표준 빌트인 객체의 prototype 프로퍼티에 바인딩 된 객체(ex. String.prototype)는 다양한 기능의 빌트인 프로토타입 메서드를 제공한다.
- 그리고 표준 빌트인 객체는 인스턴스 없이도 호출 가능한 빌트인 정적 메서드를 제공한다.
const numObj = new Number(1.5);
//Number.prototype의 프로토타입 메서드
console.log(numObj.toFixed()); //2
//Number의 정적 메서드
console.log(Number.isInteger(0.5)); //false
원시값과 래퍼 객체
- 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 함.
const str = 'hi';
//원시 타입의 문자열이 래퍼 객체인 String 인스턴스로 변환됨.
console.log(str.length); //2
console.log(str.toUpperCase()); //HI
//래퍼 객체로 프로퍼티에 접근하거나 메서드 호출한 후, 다시 원시값으로 되돌림
console.log(typeof str); //string
- 래퍼 객체의 처리가 종료되면, 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시 값으로 원시의 상태 즉, 식별자가 원시값을 갖도록 되돌리고 래퍼 객체는 가비지 컬랙션의 대상이 된다.
- String, Number, Boolean 생성자 함수를 new 연산자와 함께 호출하여 문자열, 숫자, 불리언 인스턴스를 생성할 필요가 없고 권장하지도 않음.
전역 객체
- 전역 객체는 코드가 실행되기 이전 단계에 js엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체다.
- 브라우저 환경 : window(또는 self, this, frames)
- Node.js 환경 : global
globalThis : ES11에서 도입된 모든 환경에서 사용 가능한 통일된 식별자
globalThis === this //true
globalThis === global //true
전역 객체는
표준 빌트인 객체와
환경에 따른 호스트 객체,
그리고 var 키워드로 선언한 전역 변수와 전역 함수를
프로퍼티로 갖는다.
- 전역 객체가 최상위 객체라는 것은 프로토타입 상속 관계상에서 최상위 객체라는 의미가 아니라,
전역 객체 자신은 어떤 객체의 프로퍼티도 아니며, 객체의 계층적 구조상 표준 빌트인 객체와 호스트 객체를 프로퍼티로 소유한다는 것을 말함.
- 전역객체의 특징
1) 전역객체는 개발자가 의도적으로 생성할 수 없음. 즉, 전역객체를 생성할 수 있는 생성자 함수가 제공되지 않음.
2) 전역객체의 프로퍼티를 참조할 때 window를 생략할 수 있음.
window.pareseInt('F', 16); //15
pareseInt('F', 16); //15
window.parseInt === parseInt; //true
3) 전역 객체는 Object, String, Number, Boolean, Function, Array, RegExp, Date, Math, Promise 같은 모든 표준 빌트인 객체를 프로퍼티로 가지고 있다.
4) 자바스크립트 실행환경에 따라 추가적으로 프로퍼티와 메서드를 갖는다. 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web API를 호스트 객체로 제공하고, Node.js 환경에서는 Node.js 고유의 API를 호스트 객체로 제공한다.
5) var 키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티가 된다.
//var 키워드로 선언한 전역 변수
var foo = 1;
console.log(window.foo); // 1
//선언하지 않은 변수에 값을 암묵적 전역, bar은 전역 변수가 아니라 전역 객체의 프로퍼티
bar = 2;
console.log(window.bar); //2
//전역 함수
function baz() { return 3; }
console.log(window.baz()); //3
6) let이나 const로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. let이나 const 키워드로 선언한 전역 변수는 보이지 않는 개념적인 블록(전역 렉시컬 환경의 선언적 환경 레코드) 내에 존재하게 된다.
7) 분리되어 있는 자바스크립트 코드는 하나의 전역을 공유한다
빌트인 전역 프로퍼티
- 전역 객체의 프로퍼티를 의미함.
Infinity
- 무한대를 나타내는 숫자 값
console.log(window.Infinity === Infinity); // true
console.log(3/0); // Infinity
console.log(-3/0); // -Infinity
console.log(typeof Infinity); // number
NaN
- Not a Number
- console.log(window.NaN);
undefined
- console.log(window.undefined);
빌트인 전역 함수
- 전역 객체의 메서드
eval (이 함수의 사용은 금지해야 한다.)
- eval함수를 통해 사용자로부터 입력받은 콘텐츠를 실행하는 것은 보안에 매우 취약하다.
- 그리고 eval함수를 통해 실행되는 코드는 js엔진에 의해 최적화가 수행되지 않아서 일반적인 코드 실행에 비해 처리 속도가 느림
isFinite
isNaN
parseFloat
parseInt
encodeURI / decodeURI
- 쿼리 스트링 구분자로 사용되는 =, ?, &는 인코딩하지 않음
encodeURIComponent / decodeURIComponent
- 쿼리 스트링 구분자로 사용되는 =, ?, &는 인코딩함.
암묵적 전역
var x = 10; //전역 변수
function foo() {
//선언하지 않은 식별자에 값을 할당
y = 20; //window.y = 20;
}
//선언하지 않은 식별자 y를 전역에서 참조가능
console.log(x+y); //30
- 선언하지 않은 식별자 y는 마치 선언된 전역 변수처럼 동작한다.
- 이는 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 되기 때문임. (y는 전역객체에 프로퍼티를 동적 생성해서 마치 전 역 변수처럼 동작함)
- y는 변수 선언 없이 단지 전역 객체의 프로퍼티로 추가되었을 뿐이므로 y는 변수가 아니다. (변수 호이스팅이 발생하지 않는다.)
//전역 변수 x는 호이스팅이 발생함
console.log(x); //undefined
//전역 변수가 아니라 단지 전역 객체의 프로퍼티인 y는 호이스팅이 발생하지 않는다.
console.log(y); //ReferenceError: y is not defined
var x = 10; //전역 변수
function foo() {
//선언하지 않은 식별자에 값 할당
y = 20; // window.y = 20;
}
foo();
console.log(x+y); //30'Javascript' 카테고리의 다른 글
| [js] event.target vs. event.currentTarget (0) | 2025.04.17 |
|---|---|
| [js] this (4) | 2025.02.09 |
| [js] strict mode (2) | 2025.01.31 |
| [js] 프로토타입 (2) 프로토타입 체인, 교체, instanceof, 직접상속, 정적프로퍼티, 프로퍼티 열거 연산자 (3) | 2025.01.29 |
| [js] 프로토타입 (1) 객체지향프로그래밍, 객체와 생성자함수와 프로토타입의 관계, 객체 생성 방식에 따른 프로토타입 형태 (2) | 2025.01.23 |