JavaScript의 객체 - 1 (Object of JavaScript)

이번 시간에는 자바스크립트의 객체에 대해 이야기 해보겠습니다. 객체란 연관된 데이터와 함수들의 집합을 의미합니다. 자바스크립트에서 이러한 객체가 어떻게 생성되고, 어떤 내용을 갖고 처리되는지 함께 알아봅시다.

 

MDN 문서에 따르면 "객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다." 라고 기술되어있습니다. 따라서 자바스크립트의 객체는 그 개체의 특징이 되는 여러 프로퍼티를 가진다고 볼 수 있습니다. 이런 타입과 프로퍼티들이 어떻게 할당되는지 객체의 생성 방식부터 순서대로 알아보겠습니다.

 

생성 방식

먼저 객체의 생성 방식입니다.

객체를 생성하는 방법은 크게 두 가지가 있습니다. 바로 리터럴 형식과 생성자 형식입니다.

 

리터럴 형식은 중괄호를 이용하여 객체 내의 프로퍼티들을 직접 지정해주는 방법입니다.

예시는 다음과 같습니다.

var literalObject = {
	type: "object",
	way: "literal"
}

이런식으로 [ Key : Value ] 형식의 데이터들을 그대로 집어넣어 리터럴(literal) 이라는 이름이 붙게 되었습니다.

 

 

생성자 형식은 생성자 키워드를 이용하여 객체들을 생성하고, 접근자(.)를 통해 객체의 프로퍼티들을 지정해줍니다.

예시는 다음과 같습니다.

var constructorObject = new Object();
constructorObject.type = "Object";
constructorObject.way = "constructor";

 

어떤 생성 방식을 사용하더라도 생성되는 객체가 달라지지는 않습니다. 결과적으로 위 두 예시의 객체는 이름과 내부의 값들을 제외하고 같은 Object입니다.

 

object

 

 

 

타입

다음으로는 객체의 타입입니다.

위의 방법들로 생성한 객체들은 모두 object 라는 타입을 가집니다.

 

 

지난번 타입에 관한 글에서 설명했었지만, object는 자바스크립트의 원시 타입 중 하나입니다. 미리 선언되어있는 내장 객체들의 타입을 찍어보면 모두 각각의 타입으로 출력되어 혼동할 수 있지만, 실제 타입은 모두 객체입니다. 신기한 자바스크립트 세상입니다.

 

 

Array 이외에도 String, Number, Boolean, Object, Function, Date, RegExp, Error 등이 이러한 내장 객체에 속합니다. 특히 String과 Number, Boolean은 원시 타입처럼 보이니 주의해야 합니다.

 

 

프로퍼티

이번엔 프로퍼티에 관한 내용입니다.

아까전 접근 연산자 . 를 이용하여 객체 내의 프로퍼티에 접근할 수 있다고 하였습니다. 객체의 프로퍼티로는 대부분의 이름을 사용할 수 있지만, 접근자가 사용할 수 있는 이름은 제한적입니다. 언더바(_)와 달러 기호($) 를 제외한 특수문자 또는 공백은 식별자로 사용할 수 없습니다.

 

또한 ES6부터 스펙에 추가된 계산된 속성명(Computed Property Names)이 있습니다. 단축 속성명이라고도 불리는데, 대괄호[  ] 를 이용해 프로퍼티를 다양하게 지정할 수 있습니다.

 

아래는 그 예시입니다.

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

 

 

배열

위에서 배열(Array) 또한 내장 객체라고 언급했었습니다. 배열 또한 다른 객체들처럼 대괄호 [ ] 를 이용하여 프로퍼티를 불러오는 점은 동일합니다. 다만 인덱싱을 이용하여 일반적인 객체보다 조금 더 체계적인 접근과 저장을 지원합니다. 다른 언어와 비교해보면 공통적으로 인덱스가 0부터 시작하는 양수의 범위를 갖고 있고, 다른 점은 내장 객체이기 때문에 객체의 속성을 그대로 가지고 있다는 점입니다.

 

예를 들면, 배열에 프로퍼티를 추가해버리는 이런 코드도 동작합니다.

 

 

물론 이런 코드는 객체의 속성을 갖고 있다는 점을 보이기 위한 예시일 뿐, 이런식의 활용을 권장하는 방법은 아닙니다. 배열 또한 정해진 용도에 최적화 되어있는 컨테이너이기 때문에 이런식의 프로퍼티를 추가하는 작업을 하려면 일반적인 객체를 사용하는 것이 좋습니다.

 

 

이번 포스트에선 객체의 생성 방식부터 몇 가지 속성들을 알아보았습니다. 이 장에서 다루지 않았던 중요한 내용들은 다음 포스팅에 이어집니다.