Object (객체)

Nine·2022년 3월 3일

object 객체

Javascript

목록 보기

10/16

Object (객체)

객체란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 말합니다.

객체는 속성과 동작(메소드)으로 구성되어 있습니다.
따라서 소프트웨어에서 객체를 만든다는 것은 물리적 존재나, 추상적 생각의 구현물들을 속성과 메소드로 정의하는 과정이라고 볼 수 있습니다.

Javascript에서의 Object

JS Data Type 포스팅에서도 살펴봤지만, JS 에서는 데이터 저장을 위해 원시 자료형과 객체 이 2가지 자료형을 사용합니다.
객체는 다양한 데이터들을 하나의 컨테이너에 담아 저장하고, 데이터에 접근할 수 있게 도와줍니다.

객체의 정의

객체는 값을 저장하는 이름이 붙은 속성으로 구성됩니다.
자바스크립트에서 거의 모든 것들은 객체와 같이 동작해요. 복합 객체는 물론, 객체와 원시값 역시 객체처럼 취급할 수 있어요.
이 때문에 일부에서는 자바스크립트는 모든 것이 객체라고도 해요.
객체는 new 키워드와 함께 생성자 함수를 호출하여 만들 수 있어요.

var person1 = new Object();

person1.name = 'nine'
person1.age = 26
person1.sayHello = function(){
    console.log(this.name + 'Hello!');
}

console
  .log(person1);

function Person(name, age){
	this.name = name;
	this.age = age;
	this.sayHello = function(){
		console.log(this.name + 'Hello!');
	}
};

var person1 = new Person('nine', 26);

혹은 literal 이라는 약식 표현을 사용해 만들 수도 있어요.

var person1 = {
    name : 'nine',
    age : 26,
    sayHello : function(){
        console.log(this.name + 'Hello!');
    }
};

객체와 원시 값

객체는 참조가 저장되므로 객체를 복사하면 참조만 복사됩니다.
객체는 다른 객체와 비교할 대 서로 똑같은 객체를 참조하고 있는지를 확인해요.
즉, 객체는 서로 동일한 객체를 참조하고 있을 때만 같은 것으로 간주합니다.

객체와 Prototype

var person1 = {
    name : 'nine',
    age : 26,
    sayHello : function(){
        console.log(this.name + 'Hello!');
    }
};

person1.hobby 가 궁금해요!

객체에 속성이 참조되어 있는지 확인해요.
없으면, 생성자 함수의 prototype 속성에서 찾아요.
또 없으면, ~~prototype은 객체이고 객체는 Object() 생성자로부터 만들어지므로~~ Object()생성자의 prototype에서 찾아요.
여기서도 못 찾으면 undefined로 판단한합니다.

이렇게 js에서는 프로토타입 체인 검색을 사용해 상속을 구현해요. (프로토타입 상속)
prototype 속성은 Object() 객체라는 사실과 객체 속성 검색 체인 덕분에 모든 객체는 Object()를 상속받아요.

아래는 MDN 문서의 프로토타입 체인을 이용한 상속을 설명해요. (쭉 읽어보니깐 이해가 더 잘 되는 느낌이예요!👍👍

// o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자.
let f = function () {
    this.a = 1;
    this.b = 2;
}
let o = new f(); // {a: 1, b: 2}

// f 함수의 prototype 속성 값들을 추가 하자.
f.prototype.b = 3;
f.prototype.c = 4;

// f.prototype = {b: 3, c: 4}; 라고 하지 마라, 해당 코드는 prototype chain 을 망가뜨린다.
// o.[[Prototype]]은 속성 'b'와 'c'를 가지고 있다.
// o.[[Prototype]].[[Prototype]] 은 Object.prototype 이다.
// 마지막으로 o.[[Prototype]].[[Prototype]].[[Prototype]]은 null이다.
// null은 프로토타입의 종단을 말하며 정의에 의해서 추가 [[Prototype]]은 없다.
// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null

console.log(o.a); // 1
// o는 'a'라는 속성을 가지는가? 그렇다. 속성의 값은 1이다.

console.log(o.b); // 2
// o는 'b'라는 속성을 가지는가? 그렇다. 속성의 값은 2이다.
// 프로토타입 역시 'b'라는 속성을 가지지만 이 값은 쓰이지 않는다. 이것을 "속성의 가려짐(property shadowing)" 이라고 부른다. (더 우선시 되는 값이 있기 때문이죠)

console.log(o.c); // 4
// o는 'c'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자.
// o.[[Prototype]]은 'c'라는 속성을 가지는가? 가지고 값은 4이다.

console.log(o.d); // undefined
// o는 'd'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자.
// o.[[Prototype]]은 'd'라는 속성을 가지는가? 아니다. 다시 프로토타입을 확인해보자.
// o.[[Prototype]].[[Prototype]]은 null이다. 찾는 것을 그만두자.
// 속성이 발견되지 않았기 때문에 undefined를 반환한다.