[자바스크립트] 객체 (Javascript - Object)

이번 글은 자바스크립트의 핵심이기도 하지만, 이해하기 어려운 객체에 대해서 다뤄보려고 합니다.

자바스크립트는 객체 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것들이 객체로 존재합니다.

그렇기 때문에 자바스크립트를 공부할 때 꼭 정복해야 해야 하는 것이 바로 “객체”이기도 합니다.

한마디로 객체는 자신의 정보를 가지고 있는 독립적인 주체입니다.

객체를 이해하려면 '프로퍼티'와 '메소드'를 이해하고 있어야합니다.

객체란 것은 결국 포장을 이루는 말이고 실제 객체를 완성시켜주는 것은 프로퍼티와 메소드라는 구성요소이기 때문입니다.

이해하기 쉽게 아래 그림으로 객체에 대해 쉽게 설명해 보겠습니다.

우리가 객체라고 부르는 것은 바로 컴퓨터 케이스에 해당하는데요.

실제 컴퓨터를 구성하는 것은 메모리, 그래픽카드, CPU 등등을 안에 포함하고 있기 때문에 그것을 쓸모있는 객체로서 컴퓨터 케이스를 가리키며 이를 컴퓨터라고 부를 수 있는 것입니다.

그렇다면 실제 객체를 완성시켜주는 구성요소들을 배워보도록 하겠습니다.

프로퍼티 (Property)

프로퍼티란 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 형태입니다.

한마디로 특정 객체가 가지고 있는 정보를 품고 있죠.

기본적으로 이름 : 값을 가지고 객체의 정보를 담고 있는 구성요소입니다.

프로퍼티를 추가하고 접근하고 싶다면?

접근 연산자 '.' 를 사용하면 됩니다.

그렇다면 자바스크립트에서 프로퍼티에 아무런 값도 할당하지 않으면 어떻게 될까요?

자바스크립트에서 사용하는 변수는 값을 할당하지 않고 선언만 할 경우 자바스크립트 엔진이 강제적으로 undefined를 할당합니다.

하지만 프로퍼티는 값이 할당되지 않으면 syntax error가 뜹니다.

왜냐하면 객체의 정보를 담고 있어야 할 요소인 프로퍼티가 그 어떤 정보도 할당받지 않았다면 객체로서 쓸모없는 구성요소이기 때문입니다.

프로퍼티를 추가할 때 이점을 반드시 주의해야 합니다.

메소드 (Method)

메소드는 객체가 가지고 있는 동작입니다.

동작이라는 의미에서 함수와 메소드를 구분하지 못하는 분들이 많습니다.

왜냐하면 일련의 동작을 실행한다는 점에서 동일하기 때문입니다.

함수 vs 메소드

메소드는 위에서 설명했듯이 객체가 가지고 있는 동작입니다. 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행해야합니다. 한마디로 동작을 수행하는 주체는 바로 객체이고 그 동작을 수행하기 위해서는 객체에게 그 동작을 수행하라고 지시해야합니다. 

반면 함수는 그 동작을 수행하기 위해서는 객체에게 어떤 동작을 수행하라고 명령하지 않아도 됩니다. 그 이유는 함수자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행하기 때문이죠.

요약하자면, 메소드는 객체를 움직이는 동작이고 그 동작을 수행하기 위해서 객체의 정보를 담고 있는 프로퍼티를 사용할 수 있습니다.

자바스크립트에서 사용되는 메소드는 다른 언어와 다른 특징을 가지고 있습니다. Java와 같은 Class 기반 객체생성 모델의 언어를 다루던 개발자라면 메소드는 단지 meta data 이며 객체에 속한 동작에 대한 선언일 뿐일 것입니다. 

하지만 자바스크립트는 다른데요.

자바스크립트에서의 메소드는 각각 개별 객체로 존재합니다. 객체에 속한 메타 데이터를 사용하는 것이 아니라 그 객체로부터 파생되어 확장된 새로운 객체를 사용하는 것입니다.

자바스크립트의 객체(Object) 구성

위에 객체의 기본적인 개념을 이해 했다면 자바스크립트에서의 객체란 무엇인지 이해해야합니다.

ECMA Script에서는 객체를 크게 3가지로 구분하고 있습니다.

1. Built-in Object (자바스크립트 내장객체)

Built-in Object에는 Global, Object, String, Number, Boolean, Date, Array, Math, RegExp 등 많은 내장객체들이 있습니다. 이것들은 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트 코드 어디에서든 사용이 가능한 객체들입니다.

2. Native Object (브라우저 내장객체)

Native Object 역시 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체들입니다. 하지만 이들은 자바스크립트 엔진이 구성하는 기본객체라고 하기 보단 브라우저 즉 자바스크립트 엔진을 구동하는 측에서 빌드되는 객체들입니다.

자바스크립트 프로그램을 작성하면서 사용하는 브라우저객체모델(BOM)과 문서객체모델(DOM)들이 이에 속하죠. 이 객체들은 Built-in Object 가 구성된 후에 구성됩니다. Native Object는 역시 내장객체인데요. Built-in Object와 동일하게 자바스크립트 구동시점부터 바로 사용이 가능합니다. 하지만 이를 굳이 Naive Object라고 분류한 이유는 브라우저마다 Native Object를 사용함에 있어서 그 구성을 달리하는 경우가 있기 때문입니다.

3. Host Object (사용자 정의 객체)

Host Object는 말그대로 사용자가 생성한 객체들 입니다. constructor 혹은 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시켰기 때문에 Built-in Object와 Native Object가 구성된 이후에 구성이 됩니다.

자바스크립트의 객체(Object) 생성

자바스크립트에서 객체를 생성하는 방법은 크게 2가지로 나누어 집니다. constructor를 이용하여 생성하는 방식과 객체 리터럴을 이용하는 것입니다. 객체리터럴을 이용한 방식은 JSON(JavaScript Object Notation)을 이용하여 표현합니다.

이 두 가지 방법은 모두 객체를 생성하는 방법이라는 관점에서는 동일하지만 객체의 사용이라는 방식에서는 차이가 있습니다. JSON 방식을 사용하면 객체리터럴이기 때문에 단일 객체로만 활용된다. 하지만 constructor를 이용하면 동일한 구성을 가진 객체를 여러 개 만들 수 있습니다.

자바스크립트의 객체(Object) 참고해야 되는 사항

자바스크립트에서 생성하는 모든 객체는 Object 객체에서 파생되어 나온 객체들이라는 것을 인지하고 계셔야합니다!

(자연스럽게 프로토타입까지 공부해야됨을 암시하고 있다.... 주륵)

Object 객체

Object 객체는 Built-in 객체로서 최상위레벨의 객체(Top-Level-Object)입니다.

즉 모든 객체는 이 Object 객체에서 파생되어 나온 확장형태인 것인데요. Object 객체라는 최상위 객체를 껍데기로 파생되는 객체들은 Object 객체가 가지고 있는 기본적인 구성요소를 상속받게 됩니다.. 사실 자바스크립트의 모든 객체가 자유롭게 확장될 수 있는 이유도 Object 객체가 가진 특별한 구성요소 때문입니다.

Object 객체가 가진 특별한 구성요소들이란 바로 constructor, prototype 이라는 프로퍼티와 hasOwnProperty(), toString(), isPrototypeOf() 라는 메소드들이입니다.

이 부분은 나중에 Prototype부분에서 다루도록 하겠습니다 !

자바스크립트의 모든 객체가 Object에서 파생되었다는 것은 객체를 생성할 때 사용된 생성자 함수의 prototype을 저장하는 _proto_를 통해 알 수 있고 객체들이 기본적으로 가지는 메소드들을 보면서 확인할 수 있습니다.