연관 배열로서의 객체 (=유사배열 객체)

자바스크립트 연관 배열

자바스크립트 객체의 프로퍼티명을 키, 프로퍼티 값을 값이라고 하며 객체 리터럴이 다중값 데이터 표현으로서의 객체라고 할 수 있습니다.

이 글에서는 자바스크립트에서 사용되는 연관 배열과 관련된 용어를 간단히 정리해 보도록 하겠습니다.

일반적으로 숫자를 키로 값을 뽑을 수 있는 데이터 구조를 배열이라고 합니다.

배열은 대부분의 프로그래밍 언어에 있는 기본적인 데이터 구조입니다.

배열의 키는 연속하는 숫자이므로 순서가 있는 값의 모음으로 볼 수 있습니다. 

숫자 이외의 키는 대부분 문자열이지만 문자열에 한정되지 않고 임의의 타입인 키를 이용하여 키와 값의 모음을 다루는 데이터 구조를 연관 배열이라고 합니다.

그리고 연관 배열을 맵이나 사전이리고 부르는 언어도 있으며 내부 구현에서는 해시(hash)라고 부르는 언어도 있습니다.

이름만 다를 뿐 데이터 구조는 같습니다. 어떤 이름으로 쓰든 문제는 없지만 이 글에서는 연관 배열이라는 용어를 사용합니다.

연관 배열의 주된 용도는 키로 값을 뽑아내는 조작입니다.

다른 프로그래밍 언어, 특히 스크립트 계열 언어는 언어 기능으로 연관 배열 타입을 제공하고 있다고 합니다.

하지만 자바스크립트에서는 객체를 연관 배열로 사용하는 것이 정석입니다.

다시 말해, 연관 배열용 객체가 있는 것이 아니라 객체를 다른 시선으로 보는 것 뿐입니다.

그래서 자바스크립트에서는 객체를 연관 배열로 사용하는 경우 객체 리터럴로 생성하는 것이 일반적입니다.

유사 배열객체(=연관 배열)

자바스크립트에서는 length 프로퍼티를 가진 객체를 유사 배열객체(array-like objects)라고 부릅니다.

예를 들어 일반 객체에 length 프로퍼티가 있다고 가정해 본다면 그 일반 객체는 유사배열객체이며 이러한 유사배열 객체의 가장 큰 특징은 객체임에도 불구하고 자바스크립트의 표준 배열메서드를 사용하는게 가능하다는 것입니다.

다음의 코드를 살펴보겠습니다.

JavaScript

var arr = ['foo'];

// 배열 표준메서드인 push로 데이터 추가
arr.push('bar');
console.log(arr); // ['foo', 'bar'] 기록

var obj = {
	name : 'jaehee',
	length : 1
};

// obj는 일반 객체지만 length프로퍼티를 지정해 줌
// 똑같이 표준메서드인 push로 데이터 추가
obj.push('pub');
console.log(obj); // Uncaught TypeError: undefined is not a function => error 발생

위의 코드에서 length 프로퍼티를 지정한 유사배열객체인 obj는 당연히 배열이 아니기 때문에 배열 메서드인 push()메서드를 사용할 수 가 없기 때문에 에러가 발생합니다.

하지만 일반 객체가 프로토타입과 apply() 메소드를 이용하면 객체지만 표준 메소드를 사용하는 것이 가능하도록 하게 할 수 있습니다.

다음의 코드를 살펴보겠습니다.

JavaScript

var obj = {
	name : 'jaehee',
	length: 1
};

Array.prototype.push.apply(obj,['pub']);
console.log(obj);

위의 코드는 유사배열객체인 obj에 대해 push() 메소드를 사용하여 pub을 추가한 것입니다.

실제로 결과값을 보면 obj 객체의 '1'프로퍼티에 'pub'이 추가되고 length 값은 2로 증가한 것을 확인 할 수가 있습니다.

이러한 유사 배열객체는 arguments 객체나 jQuery 객체가 이러한 유사배열 객체형태로 되어 있습니다.

객체의 프로퍼티에 접근하기 위해 사용되는 [] 연산자는 식별자(식별자는 프로그래머가 프로그램 상에 직접 코딩하여 넣기 때문에 정적이다) 대신, 프로그램 실행 시간에 동적으로 얼마든지 변경할 수 있는 문자열을 사용하여 프로퍼티의 이름을 표현할 수가 있습니다.

이러한 방식으로 객체를 사용할 때 이를 연관 배열(associative array)이라 부릅니다. 

연관 배열은 동적으로 임의의 값과 임의의 문자열을 연관지어 지정할 수 있는 자료구조입니다.

이와 관련하여 '대응시키다(map)'라는 용어도 자주 사용합니다. 

즉, "자바스크립트는 문자열(프로퍼티의 이름)을 임의의 값으로 대응시킨다"와 같이 표현합니다.

Jaehee's WebClub