JavaScript의 객체(Object) 기본 개념

 JavaScript는 객체기반의 스크립트 언어이다. 즉, JavaScript는 기본 타입(Primitive Type. 숫자, 문자열, boolean, null, undefined 등.)을 제외하고 모든 것이 객체로 이루어져있다. 그래서 JavaScript를 잘 다루려면 'Object'에 대해 이해하는 것이 가장 중요하다.

1. JavaScript의 객체

 JavaScript에서 객체는 Key-Value 형태의 프로퍼티(Property)들을 저장하는 컨테이너이다. 즉, 객체는 프로퍼티로 구성되어있다. 이러한 프로퍼티의 Value에는 기본타입의 값이 들어가거나, 다른 객체가 들어가기도 한다. 심지어 함수가 포함되기도 한다. (이러한 함수를 '메서드'라고 부른다.)

2. 객체 생성

 ⊙ Object() 생성자 방식

var student = new Object();

 JavaScript에서 제공하는 객체 관련 내장함수인 Object()를 사용하여 객체를 생성하는 방식이다.

 ⊙ 객체 리터럴 방식

var student = {
    name: 'preamtree',
    age: 20,
    gender: 'male'
};

 JSON 표기법으로 객체를 생성할 수 있다. 객체 리터럴 방식으로 객체를 생성하면, 내부적으로는 Object() 생성자 방식으로 객체를 생성하는 것과 같음에 유의하자.

 ⊙ 생성자 함수 방식

var Student = function (name) {
    this.name = name;
}

var student = new Student('preamtree');

 JavaScript의 함수에 new 키워드를 붙인 것이 '생성자 함수'이다. JAVA와 같은 객체지향언어의 생성자와 비슷한 동작을 한다. 위 예제에서는 객체를 만들어 student 변수에 할당했으며, 객체의 프로퍼티는 name: 'preamtree'이다.

3. 프로퍼티

 아까 전에 객체는 프로퍼티로 이루어져 있다고 했다. 객체의 구성요소인 프로퍼티의 값에 접근하는 방법은 두가지이다. 아래 예제와 함께 알아보자.

var student = {
    name: 'preamtree',
    age: 20,
    'part-time': true
};

student.age = 25;   // age 프로퍼티를 25로 변경
student.major = 'Computer Science'; // major 프로퍼티 신규 생성
student['part-time'] = false; // 이렇게도 접근 가능하다.

 마침표(.)를 사용하여 프로퍼티의 Key를 명시하면, Value를 읽을 수 있다. 게다가 이를 활용하여 변경할 수도 있고, 변경할 내용이 없으면 자동으로 신규 생성된다.

 또, 대괄호([])를 활용하여 프로퍼티에 접근할 수도 있는데, 'part-time'의 '-'가 연산자라서 그렇게 접근한 것이다. 프로퍼티의 Key 이름에 연산자 또는 예약어가 포함될 경우 대괄호를 사용하도록 하자.

4. Call-By-Reference

 함수의 파라미터로 객체를 전달할 때, Call-By-Reference 방식으로 동작한다. 아래 예제의 출력 결과를 스스로 유추해보자.

var student = {
    age: 20
};

var aaa = 10;

var testfunc = function (a, b) {
    
    a = 999;
    b.age = 888;
}

testfunc(aaa, student);
console.log(aaa);
console.log(student.age);

 정답: 10, 888이 출력됨.

5. 프로토타입

 JavaScript의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그러니까, 객체지향의 상속 개념처럼 부모 객체의 프로퍼티를 마음껏 접근할 수 있는 것이다. 이러한 부모 역할 객체를 프로토타입(Prototype)이라고 한다.

 부모 객체의 프로퍼티에 마음껏 접근할 수 있다는데.. 어떻게 하는 것일까? 비밀은 숨겨진 프로퍼티에 있다. 예제에 계속 등장한 student를 console.log()로 출력해봤다.

 분명 age와 name 프로퍼티만 있었는데, 가장 밑에 어떤 객체(Object)를 가리키는 '__proto__' 라는 프로퍼티가 보인다.  이 객체가 자신의 부모객체, 프로토타입이다. 즉 '__proto__'를 통해서 프로토타입에 접근할 수 있으며,  '__proto__'라는 프로퍼티를 명시하지 않아도 자유롭게 프로토타입에 접근이 가능하다. (숨겨져 있으니까.)

 이 예제에서 student 변수가 가리키는 객체의 프로토타입은 Object.prototype객체이다. Object.prototype객체는 모든 객체의 부모이며, toString(), valueOf()와 같이 모든 객체에서 호출 가능한 메서드를 포함한다. 

-끝-

출처및참고

송형주, 고현준, 『인사이드 자바스크립트』, 한빛미디어(2016)

http://insanehong.kr/post/javascript-prototype/