자바스크립트 완벽가이드 - 7.3 연관 배열로서의 객체

객체의 프로퍼티에 접근하기 위해 사용하는 마침표(.) 연산자는 이미 알아보았다.

배열에서 주로 사용하는 [] 연산자를 사용해도 객체의 프로퍼티에 접근할 수 있다.

즉, 다음의 두 자바스크립트 표현식은 완전히 동일한 값으로 평가된다.

object.property
object["property"]

이 두 구분에 나타나는 중요한 차이점은 첫째 구분에서는 프로퍼티 이름이 식별자지만,

두 번째 구문에서는 프로퍼티 이름을 문자열로 표현했다는 점이다. 이것이 왜 중요한지 간단히 살펴보자.

C나 C++, 자바(Java) 같이 타입 제약이 엄격한 프로그래밍 언어에서, 객체는 오직 정해는 개수의 프로퍼티를 가져야 하며 프로퍼티 이름은 반드시 미리 정의되어야 한다. 반면에 자바스크립트는 타입 제약이 느슨한

프로그래밍 언어이기 때문에 위와 같은 규칙이 적용되지 않는다. 프로그램은 실행 시간에 어떤 객체든 간에 그 안에 임의 개수의 프로퍼티를 생성해낼 수 있다. 마침표(.) 연산자를 사용하여 객체의 프로퍼티에 접근할 때는 프로퍼티 이름이 식별자로 표현되어야 한다. 식별자는 자바스크립트 프로그램에 직접 표기하는 이름이며 데이터 타입이 아니기 때문에 프로그램이 실행 시간에 조작할 수 없다.

반면에 []를 사용하여 객체의 프로퍼티에 접근할 때에는 프로퍼티의 이름이 문자열로 표현된다.

문자열은 자바스크립트의 데이터 타입이므로 프로그램이 실행되는 동안 새롭게 생성되고 또 조작될 수 있다.

따라서 자바스크립트에서는 다음과 같이 코드를 작성할 수도 있다.

var addr = "";
for (i = 0; i < 4; i++){

addr += customer["address" + i] + '\n';

}

이 코드는 customer 객체의 address0, address1, address2, address3 프로퍼티를 읽어서 addr 변수에

연결한다. 위 예는 객체의 프로퍼티에 접근하기 위해 문자열 표현식과 배열의 표기법을 사용하는 방식의 유연성을 보여 준다. 위에서 보인 예는 '.' 표기법을 사용하여 다시 작성할 수도 있지만, 배열 표기법을 사용해야만 할 때가 있다. 예를 들어, 여러분이 사용자의 증권 시장 투자금의 현재 값을 계산하기 위하여 네트워크 자원을 사용하는 프로그램을 작성한다고 가정하자. 사용자는 이 프로그램을 사용하여 자신이 지닌 주식의 이름과 보유량을 입력할 수 있다. 이러한 정보가 있는 객체의 이름을 portfolio라고 하자. 이 객체는 각 주식에 대한 프로퍼티를 하나씩 가진다. 프로퍼티의 이름은 곧 주식의 이름이며, 프로퍼티의 값은 그 주식의 보유량이다.

예를 들어 사용자가 IBM에 주식이 50주 있다면, portfolio.ibm 프로퍼티의 값은 50이다.

이 프로그램에 루프를 돌면서 소유한 주식의 이름과 보유량을 사용자에게 입력받는 부분이 있다.

이 루프의 내부에서는 다음과 같은 코드가 사용될 것이다.

var stock_name = get_stock_name_from_user();
var shares = get_number_of_shares();
portfolio[stock_name] = shares;

사용자가 프로그램의 실행 시간에 자유롭게 주식의 이름을 입력하기 때문에, 프로퍼티의 이름을 미리 알아낼 방법은 없다. 즉 프로그램을 작성하는 도중에는 프로퍼티의 이름을 알 방법이 없으므로, portfolio 객체의 프로퍼티에 접근하기 위해 마침표(.) 연산자를 사용할 수 없다. 그러나 [] 연산자는 식별자(프로그래머가 프로그램 상에 직접 코딩하여 넣기 때문에 정적이다) 대신, 프로그램의 실행 시간에 동적으로 얼마든지 변경할 수 있는 문자열을 사용하여 프로퍼티의 이름을 표현하므로 위와 같은 예에서 사용할 수 있다.

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

임의의 값과 문자열을 연관지어 저장할 수 있는 자료구조다. 이와 관련하여 '대응시키다(map)'라는 용어도 자주 사용한다. 즉 "자바스크립트는 문자열(프로퍼티의 이름)을 임의의 값으로 대응시킨다." 와 같이 표현한다. 프로퍼티에 접근하기 위해서 사용되는 . 표기법 때문에 자바스크립트의 객체는 C++나 자바의 정적 객체(static object)처럼 보일 수 있다. 실제로 이러한 측면에서 자바스크립트의 객체는 C++나 자바의 정적 객체와 완전히 동일하게 사용할 수 있다. 그러나 자바스크립트 객체에는 추가로 데이터 값을 임의의 문자열과 연관지을 수 있는 강력한 기능이 있다. 즉 이러한 측면에서 자바스크립트의 객체는 C++나 자바의 객체보다는 펄(Perl)의 해시와 더 닮았다고 말할 수 있다.

6장에서 for/in 루프를 알아보았다. 이 자바스크립트 문장의 진정한 힘은 연관 배열과 함께 사용할 때에 분명해진다. 이를 위하여 주식 포트폴리오 예로 돌아가자. 사용자가 포트폴리오를 모두 입력한 후, 현재 총액을

계산하기 위해서 다음과 같은 코드를 사용할 수 있다.

var value = 0;
for (stock in portfolio) {

// 포트폴리오의 각 주식에 대하여, 이 주식의 주당 가격을 얻어오고
// 이 주당 가격을 보유량으로 곱하여 총액을 계산한다.
value += get_share_value(stock) * portfolio[stock];

}

주식의 이름을 프로그램의 실행 전에 미리 알아낼 방법이 전혀 없기 때문에, 이 코드는 for/in 루프를 사용해서만 작성할 수 있다. 즉 portfolio 같은 연관 배열(또는 자바스크립트 객체)의 프로퍼티 이름을 열거해낼 수 있는 유일한 방법이 바로 for/in 루프이다.