JavaScript Object 객체 생성 - Object, typeof, instanceof, prototype

JavaScript에서 객체는 Object 객체, function()를 사용하여 생성할 수 있습니다.

​

​

Object 객체

​

Object 객체로 생성(new) 하면 객체(object)가 생성됩니다.

var obj = new Object();

console.log(obj);
--> {} --> 객체
console.log(typeof obj);
--> object

​

typeof

typeof 연산자는 객체의 타입(자료형)을 문자열로 반환합니다.

​

typeof 구문

typeof operand
// or
typeof(operand)

 

리턴되는 객체의 타입은 다음과 같습니다.

Boolean은 "boolean", Number는 "number", BigInt는 "bigint", String은 "string", Symbol은 "symbol", Function은 "function", Undefined은 "undefined", Null은 "object", 모든 객체는 "object"

​

스크립트에서는 중괄호({})로도 객체를 생성할 수 있습니다.

var obj = {};

console.log(obj);
--> {}
console.log(typeof obj);
--> object

 

그리고 function()으로도 생성(new) 할 수 있습니다.

function MyObject() {
}
// or
var MyObject = function() {
}

var obj = new MyObject();

console.log(obj);
--> MyObject {}
console.log(typeof obj);
--> object
console.log(obj instanceof Object);
--> true
console.log(obj instanceof MyObject);
--> true

function()으로 생성된 객체는 function 명이 생성자(constructor)가 됩니다.

그래서 instanceof 연산자로 확인할 수 있습니다.

 

​

instanceof

instanceof 연산자는 객체가 어떤 객체의 생성자로 생성되었는지 확인합니다.

객체의 프로토타입 체인(Prototype Chain)을 확인하여 생성자가 체인 안에 있는지 확인합니다.

​

스크립트는 프로토타입 기반 언어(prototype-based language)라고 합니다. 프로토타입 객체로 상위 객체의 메서드와 속성들을 상속받습니다. 이렇게 상속되는 관계를 프로토타입 체인(Prototype Chain)이라고 합니다.

​

instanceof 구문

object instanceof constructor

 

function()으로 생성된 객체의 프로토타입 체인(Prototype Chain)은 다음과 같습니다.

obj > MyObject > Object

그래서 instanceof 연산자로 생성자가 객체의 프로토타입 체인에 있는지 확인할 수 있습니다.

​

참고로

스크립트에서는 값이 undefined, null이 아니면 모든 객체는 if 문에서 true로 처리됩니다.

if (obj) {
	--> 실행됨
}

 

 

객체의 속성을 읽거나 추가하거나 변경하거나 삭제하거나 할 때 .(도트) 연산자나 [](대괄호)를 사용합니다.

​

.(도트) 연산자를 사용하여 속성을 추가하는 방법입니다.

​

객체 속성 추가 (.(도트) 연산자)

​

생성된 객체에 .(도트) 연산자를 사용하여 속성을 추가할 수 있습니다.

var user = new Object();
// or
var user = {};

user.name = "홍길동";
user.age = 30;

console.log(user);
--> {name: '홍길동', age: 30}

또는 객체 안에 속성을 추가하여 생성할 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

console.log(user);
--> {name: '홍길동', age: 30}

그리고 function()으로 객체를 선언할 때 속성을 추가할 수 있습니다.

function User() {
	this.name = "홍길동";
	this.age = 30;
}

var user = new User();

console.log(user);
--> User {name: '홍길동', age: 30}

function() 안에 속성을 추가할 때는 this 키워드를 사용해서 속성을 추가해야 합니다.

 

​​

객체 속성 추가, 속성 값 변경 (.(도트) 연산자)

​

생성된 객체에 .(도트) 연산자를 사용하여 속성을 추가하거나 속성 값을 변경할 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

// 속성 추가
user.no = 1;
// 속성 변경
user.age = 31;

console.log(user);
--> {name: '홍길동', age: 31, no: 1}

 

객체 속성 읽기 (.(도트) 연산자)

​

생성된 객체에 .(도트) 연산자를 사용하여 속성을 읽을 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

console.log(user.name);
--> 홍길동

 

객체 속성 삭제 (.(도트) 연산자)

​

delete 연산자를 사용하여 생성된 객체에서 속성을 삭제할 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

// 속성 삭제
delete user.age;

console.log(user);
--> {name: '홍길동'}

 

 

[](대괄호)를 사용하여 속성을 추가하는 방법입니다.

​

객체 속성 추가 ([](대괄호))

​

생성된 객체에 [](대괄호)를 사용하여 속성을 추가할 수 있습니다.

var user = new Object();
// or
var user = {};

user["name"] = "홍길동";
user["age"] = 30;

console.log(user);
--> {name: '홍길동', age: 30}

 

객체 속성 값 변경 ([](대괄호))

​

생성된 객체에 [](대괄호)를 사용하여 속성 값을 변경할 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

// 속성 추가
user["no"] = 1;
// 속성 변경
user["age"] = 31;

console.log(user);
--> {name: '홍길동', age: 31, no: 1}

 

객체 속성 읽기 ([](대괄호))

​

생성된 객체에 [](대괄호)를 사용하여 속성을 읽을 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

console.log(user["name"]);
--> 홍길동

 

객체 속성 삭제 ([](대괄호))

​

delete 연산자를 사용하여 생성된 객체에서 속성을 삭제할 수 있습니다.

var user = {
	name : "홍길동",
	age : 30
};

// 속성 삭제
delete user["age"];

console.log(user);
--> {name: '홍길동'}

 

객체 속성에 Function 추가 (.(도트) 연산자, [](대괄호))

​

생성된 객체에 .(도트) 연산자나 [](대괄호)를 사용하여 함수를 추가할 수 있습니다.

var user = {
	name : "Hong Gil Dong",
	age : 30
};

user.getUpperCaseName = function() {
	return this.name.toUpperCase();
}
// or
user["getUpperCaseName"] = function() {
	return this.name.toUpperCase();
}

console.log(user.getUpperCaseName());
--> HONG GIL DONG

 

 

toString() 메서드 변경

​

기본적으로 Object 객체에서 toString() 메서드를 지원하고 있습니다. toString() 메서드는 객체의 클래스를 문자열로 변환하여 리턴합니다.

var user = {
	name : "Hong Gil Dong",
	age : 30
};

console.log(user.toString());
--> [object Object]

 

toString() 메서드를 변경해서 객체의 정보를 문자열로 변환하여 리턴할 수 있습니다.

var user = {
	name : "Hong Gil Dong",
	age : 30
};

user.toString = function() {
	return "User name is " + this.name;
}

console.log(user.toString());
--> User name is Hong Gil Dong

 

또는 프로토타입(Prototype)을 사용하여 처리할 수 있습니다. 단 new로 생성된 객체만 가능합니다.

function User() {
	this.name = "홍길동";
	this.age = 30;
}

var user = new User();

User.prototype.toString = function() {
	return "User name is " + this.name;
}

console.log(user.toString());
--> User name is Hong Gil Dong