Array_like_Object.md

유사 배열객체

자바스크립트 연관 배열

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

이 글에서는 자바스크립트에서 사용되는 연관 배열과 관련된 용어를 간단히 정리해면, 일반적으로 숫자를 키로 값을 뽑을 수 있는 데이터 구조를 배열이라고 한다. 배열의 키는 연속하는 숫자이므로 순서가 있는 값의 모음이라고 생각하면 된다.

숫자 이외의 키는 대부분 문자열이지만 문자열에 한정되지 않고 임의의 타입인 키를 이용하여 키와 값의 모음을 다루는 데이터 구조를 연관 배열이라고 한다. 연관 배열을 맵이나 사전이라고 부르는 언어도 있으며, 내부 구현에서는 해시(hash)라고 부르는 언어도 있다.

이름만 다를 뿐 데이터 구조는 결국 같은 모양인데, 어떤 이름으로 쓰든 문제는 없지만 연관 배열이라는 용어를 사용하자.

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

다른 프로그래밍 언어, 특히 스크립트 계열 언어는 언어 기능으로 연관 배열 타입을 제공하고 있다. 하지만 자바스크립트에서는 객체를 연관 배열로 사용하는 것을 주로 사용하고 있다.

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

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

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

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

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

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 발생

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

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

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)'라는 용어도 자주 사용합니다.

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

Array.from

ES6에서 새로 생긴 문법인 Array.from()을 사용해서도 유사배열을 배열처럼 사용할 수 있도록 도와준다.

function from() {
    let arr = Array.from(arguments);
    arr.forEach((value, key) => {
        console.log(`${value} : ${key}`);
    });
}

from('1', '2', '3')

이외의 다른 방법도 가능하다.

[].forEach.call(['1', '2'], (el) => console.log(el))

---

Reference

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