자바스크립트에서 객체(Object) 란?

객체(Object)란?프로퍼티 객체 생성방법 1. 객체 리터럴 / 2. Object(Native object) 생성자 함수 3. 생성자(constructor) 함수 객체의 분류 1. Built-in object / Native obejct 2. Host object 3. User-defined object

객체(Object)란?

자바스크립트의 객체는 key와 value로 구성된 property들의 모음이다.

자바스크립트에서 사용할 수 있는 모든 값들이 property의 값으로 사용 가능하다.

자바스크립트의 함수 또한 일급 객체 이므로 프로퍼티 값으로 사용할 수 있다. (프로퍼티 값이 함수일때 일반 함수와 구분하기 위해 메소드라 함)

상속을 구현하기위해 프로토타입(prototype) 객체의 프로퍼티와 메소드를 상속 받을 수 있다.

프로퍼티

프로퍼티는 키(key) 와 값(value)의 쌍으로 이루어진다. key는 객체의 프로퍼티를 식별하기 위한 식별자(identifier)이다.

객체는 프로퍼티를 열거할때 순서를 보장하지 않는다. (배열과 달리)


const obj = { a: 1 }  // a는 key, 1은 value

key로는 빈 문자열을 포함한 모든 문자열과 symbol 값을 사용할 수 있다.

문자열이나 symbol 값을 제외한 값을 지정하면 암묵적으로 문자열로 타입 캐스팅 한다.

중복으로 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

value로는 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.

객체 생성방법

1. 객체 리터럴 / 2. Object(Native object) 생성자 함수


// 객체 리터럴
const personA = {
	name: 'juicy',
	printName: function() {
		console.log(this.name);
	}
};

// Object 생성자 함수
const personB = new Object();
personB.name = 'juicy';
personB.printName = function() {
	console.log(this.name);
}

new 연산자와 Object 생성자 함수를 통해 빈 객체를 생성할 수 있다. 빈객체를 생성한후 프로퍼티를 추가하여 객체를 완성시킬 수 있다.

객체 리터럴을 이용하면 중괄호안에 프로퍼티를 작성하여 매우 간단하게 객체를 생성할 수 있다. 사실 객체 리터럴은 Object 생성자 함수를 통해 생성한 객체를 단순화(short-hand)시킨 것으로 Object 생성자 함수를 통해 생성한것과 차이가 없다.

3. 생성자(constructor) 함수


function Person(name) {
	this.name = name;
	this.printName = function() {
		console.log(this.name);
	}	
}

const personA = new Person('juicy');
const personB = new Person('jusung');

personA.printName();
personB.printName();

프로퍼티, 메소드 앞의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.

this로 바인딩 되어있는 프로퍼티, 메소드는 public 하다.

생성자 함수 내에 선언된 일반 변수는 private하다. (생성자 함수 내부에서는 접근 가능하지만 외부에서는 접근 불가능)

생성자 함수는 일반적으로 대문자로 명명한다.

자바스크립트의 생성자 함수는 형식이 정해져 있는 것이 아니라 기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

객체의 분류

객체의 분류에대해서 찾다보면 굉장히 많은 글이 잘못된 정보를 담고 있는것 같다. 가장 대표적인것이 native object와 host object의 차이점이다. window document 같은 object의 분류가 무엇이냐고 물어본다면 아마 native object라고 하는 사람도 있고, host object 라고 하는 사람도 많을것 같다. 사실 용어보다는 분류에 대한 이해가 중요하지 않을까 생각하지만 그냥 복붙식으로 잘못된(~~내가 잘못된것일수도..~~) 정보들이 퍼져있는건 참 아쉬운거 같다.

객체는 크게 3가지로 분류할 수 있다.

자바스크립트가 가지고 있는 내장 객체

런타임(브라우져, Node.js)에 의해 제공되는 객체

사용자가 정의한 객체

1. Built-in object / Native obejct

ECMAScript 스펙을 정의해논 객체들이다. (Object, String, Number, Function, Date Math 등)

일부 native object는 빌트인 되어있고 나머지는 ECMAScript 프로그램 실행과정 중에 생성 될 수 있다.

2. Host object

런타임환경(브라우저, Node.js)에 의해 제공되는 즉, 실행하는 환경에 종속된 객체 (window(BOM), document(DOM), XmlHttpRequest, HTMLElement, setTimeout, url, fs 등)

3. User-defined object

사용자가 생성한 객체, 생성자 혹은 객체 리터럴을 통해 객체를 정의하고 확장시킨것 즉 내장 객체가 구성된 이후에 구성

다시 간단하게 정리를 하자면 우리가 자바스크립트 환경에서 사용하는 객체는 자바스크립트 자체가 가지고 있는 객체, 실행 환경에서 제공되는 객체, 그리고 사용자가 작성한 객체로 나누어진다.