Javascript/Javascript

[Javascript] 객체의 종류

금요일인줄 2025. 6. 9. 09:00
728x90
반응형

 

 

 

자바스크립트의 객체는 아래의 그림과 같이 크게 3가지로 분류할 수 있다.

 

 

 

네이티브 객체(Native Object)

 

네이티브 객체는 ECMAScript 명세에 정의된 객체를 의미하는데 애플리케이션 전역의 공통 기능을 제공하는 역할을 한다. 이러한 네이티브 객체는 애플리케이션의 환경에 관계 없이 언제나 사용할 수 있다.

 

네이티브 객체는 Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 활용되는 함수 객체와 메서드로 구성된다. 네이티브 객체를 Global Objects라고 부르기도 하는데 이는 전역 객체(Global Object)와는 다른 의미로 사용되므로 혼동하지 않도록 유의해야 한다.

 

cf) 전역 객체(Global Object)는 모든 객체의 최상위 객체를 의미하며 일반적으로 브라우저 환경(Browser-side)에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다.

 

 

 

Object

 

Object() 생성자 함수는 객체를 생성하는 데 쓰인다. 만약 생성자의 인수 값이 null이거나 undefined이면 빈 객체를 반환한다.

// 변수 o에 빈 객체를 저장한다
var obj = new Object();
console.log(typeof obj + ': ', obj); // object:  {}

obj = new Object(undefined);
console.log(typeof obj + ': ', obj); // object:  {}

obj = new Object(null);
console.log(typeof obj + ': ', obj); // object:  {}

 

그 이외의 경우 생성자 함수의 인수 값에 따라 강제 형변환된 객체가 반환된다. 이때 반환된 객체의 [[Prototype]] 프로퍼티에 바인딩된 객체는 Object.prototype이 아니다.

// String 객체를 반환
// var obj = new String('String')과 동일
var obj = new Object('String');
console.log(typeof obj + ': ', obj); // String {'String'}
console.dir(obj); // "String"

var strObj = new String('String');
console.log(typeof strObj + ': ', strObj); // String {'String'}

// Number 객체를 반환
// var obj = new Number(123)과 동일
var obj = new Object(123);
console.log(typeof obj + ': ', obj); // Number {123}

var numObj = new Number(123);
console.log(typeof numObj + ': ', numObj); // Number {123}

// Boolean 객체를 반환.
// var obj = new Boolean(true)과 동일
var obj = new Object(true);
console.log(typeof obj + ': ', obj); // Boolean {true}

var boolObj = new Boolean(123);
console.log(typeof boolObj + ': ', boolObj); // Boolean {true}

 

 

 

Function

 

자바스크립트에서 모든 함수는 Function 객체이다. 다른 모든 객체들과 같이 Function 객체는 new 연산자를 사용해 생성할 수 있다.

var adder = new Function('a', 'b', 'return a + b');

adder(2, 3);  // 5

 

자바스크립트의 함수는 일급 객체이다. 다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 점인데, 함수도 객체이므로 다른 값들처럼 변수나 객체, 배열 등에 저장할 수 있고 다른 함수에 전달되는 인수로도 사용할 수 있으며 함수의 반환 값이 될 수도 있다.

 

cf) 일급 객체(first-class object)란 다른 객체들에 일반적으로 ㅈ거용 가능한 연산을 모두 지원하는 객체를 말한다. 보통 함수에 인자로 넘길 수 있다거나 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라 부른다.

 

자바스크립트에서 함수를 생성할 때 일반적으로는 함수 선언문이나 함수 표현식을 사용하므로 Function 객체를 활용하는 방식이 생소할 수 있다. 그러나 함수 선언문과 함수 표현식 또한 Function 생성자 함수로 함수를 생성하는 것을 단축화시킨 축약법이다.

 

Function 생성자 함수로 함수를 만드는 문법은 다음과 같다.

new Function(arg1, arg2, ... argN, functionBody)

var square = new Function('number', 'return number * number');

// 위 생성 방식은 아래와 같다.
// var square = function(number) {
//   return number * number
// }

console.log(square(10)); // 100

 

 

 

Boolean

 

Boolean 객체는 원시 타입 boolean을 위한 wrapper 객체이다. Boolean 생성자 함수를 사용하면 Boolean 객체를 생성할 수 있다.

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

var foo = new Boolean(false); // false
var foo = new Boolean();      // false
var foo = new Boolean('');    // false
var foo = new Boolean(0);     // false
var foo = new Boolean(null);  // false

 

유의해야 할 점은 Boolean 객체와 원시 타입 boolean을 혼동하기 쉽다는 것이다. Boolean 객체는 true/false를 포함하고 있는 객체이다.

var x = new Boolean(false);
console.log(x) // Boolean {false}

if (x) { // x는 객체로 존재함. 따라서 참으로 간주됨.
  // . . . 여기의 코드는 실행됨.
}

 

 

 

Error

 

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

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

 

Error 이외에 Error에 관련된 객체는 아래와 같다.

  • EvalError
  • InternalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError

 

이들 외에도 네이티브 객체에는 Number, Math, Date, String, RegExp, Array 등이 있다. 이들에 대해서는 이 글에서 더이상 언급하지 않고 별도의 포스팅을 작성할 예정이다.

 

 

 

호스트 객체(Host object)

 

호스트 객체는 브라우저 환경에서 제공하는 window, XmlHttpRequest, HTMLElement 등의 DOM 노드 등과 같이 호스트 환경에 정의된 객체를 말한다. 따라서 브라우저 환경과 브라우저 외부에서 동작하는 환경의 자바스크립트(Node.js)는 각각 다른 호스트 객체를 가질 수 있는 것이다.

 

브라우저에서 동작하는 환경의 호스트 객체로는 전역 객체인 window와 BOM(Browser Object Model), DOM(Document Object Model), XmlHttpRequest 객체 등이 있다.

 

 

 

전역 객체

 

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

 

 

 

BOM(Browser Object Model, 브라우저 객체 모델)

 

브라우저 객체 모델은 브라우저 탭 또는 브라우저 창의 모델을 생성한다. 최상위 객체는 window 객체로 현재 브라우저 창이나 탭을 가리킨다.

 

 

 

DOM(Document Object Model, 문서 객체 모델)

 

문서 객체 모델은 현재 웹 페이지의 모델을 생성한다. 최상위 객체는 document 객체로 전체 문서를 가리킨다.

 

 

 

 

 

728x90
반응형