js

javascript 객체

no-easy-ray 2021. 6. 4. 08:19

객체 (Object)

JavaScript는 객체 기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체입니다.

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value Pair를 저장할 수 있는 구조이다.

 

객체 생성 방법에는리터럴 방법과 생성자를 이용한 방법이 있습니다.

 

리터럴 방법

const obj = {
  type1: "hoon", //문자열
  type2: 2020, //숫자
  type3: true, //boolean
  type4: {}, //객체 리터럴
  type5: [], //배열
  type6: function () {}, //함수
};

 

생성자 함수를 이용한 방법

const obj = new Object();

obj.type1 = "string";
obj.type2 = 2020;
obj.type3 = true;
obj.type4 = {};
obj.type5 = [];
obj.type6 = function () {};

 

프로토타입(prototype)

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.

즉, 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다.

 

프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다.

이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 됩니다.

생성자 함수를 정의 (function의 이름은 대문자로 시작하는 걸 권장한다.) 함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성된다.

 

function Person(name, job) {
  this.name = name;
  this.job = job;
};

 

생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있습니다.

Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 __proto__를 가지고 있습니다.

 

 

constructor는 Prototype Object와 같이 생성되었던 함수를 가리키고 있는 걸 확인할 수  있습니다.

 

__proto__는 Prototype Link입니다.

 

간단한 예제를 통해 확인해 보도록 하겠습니다.

 

function Person(name, job) {
  this.name = name;
  this.job = job;
}

Person.prototype.age = 27;
Person.prototype.gender = "m";

const kim = new Person("kim", "job1");
const park = new Person("park", "job2");

console.log(kim.age); // 2
console.log(park.age); // 2

 

Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/삭제할 수 있습니다.

즉, kim과 park은 Person 함수를 통해 생성되었으니 Person.prototype을 참조할 수 있게 됩니다.

 

 

Prototype Link

 

kim에는 age라는 속성이 없는데도 kim.age를 실행하면 27이라는 값을 참조하는 것을 볼 수 있습니다.

위에서 설명했듯이 Prototype Object에 존재하는 age 속성을 참조하게 되는 것입니다.

 

그렇다면 어떻게 age라는 값을 참조할 수 있는 걸까요? 바로 kim이 가지고 있는 __proto__가 그것을 가능하게 해주는 열쇠가 됩니다!

 

prototype 속성은 함수만( Person.prototype ) 가지고 있던 것과는 달리 __proto__속성은 모든 객체가 빠짐없이 가지고 있는 속성이기 때문입니다.

 

__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킵니다.

즉, kim객체는 Person함수로부터 생성되었으니 Person 함수의 Prototype Object를 가리키고 있는 것입니다.

 

위의 내용을 그림을 통해서 보면 다음과 같습니다.