객체 프로퍼티에 접근하는 두 가지 방법의 차이점

객체의 프로퍼티 값에 접근하는 방법은 두 가지가 있다.

1. 점(.) 연산자 사용
2. 대괄호([]) 연산자 사용

두 방식은 다음과 같은 차이점을 가진다. 점 연산자를 사용한다면 오른쪽에는 프로퍼티 이름인 단순 식별자가 와야 한다. 반면 대괄호 연산자를 사용한다면 오른쪽에는 문자열로 평가되는 표현식이 와야 한다.

let author = book.author; // 점 연산자 사용
let title = book["main title"]; // 대괄호 연산자 사용

 

두 방법의 용례 상의 차이는 접근하려는 프로퍼티 값을 동적으로 변경할 수 있는가 에 있다. 식별자의 경우 자바스크립트 데이터 타입이 아니기 때문에, 프로그램에서 조작할 수 없다. 반면 문자열은 데이터 타입이기에 프로그램이 실행되는 동안 새로 생성하고 조작할 수 있다. 가령 다음과 같은 방식의 프로퍼티 접근이 가능하다.

    for (let i = 0; i<4; i++) {
        console.log(customer[`address${i}`]); // 문자열이기에 프로그램에서 조작이 가능하다.
    }

*식별자: 이름. 상수, 변수, 프로퍼티, 함수, 클래스의 이름에 식별자를 사용한다.

 

대괄호 연산자를 사용한 방식은, 접근해야 하는 프로퍼티의 이름을 코드 작성 시에 알 수 없는 경우 더욱 유용하다. 학생의 이름:나이 프로퍼티를 추가하는 함수를 작성한다고 가정해보자. 이때 런타임 이전에는 프로퍼티 이름을 알지 못한다. 따라서 점 연산자로는 프로퍼티에 접근할 수 없다. 이때 대괄호 연산자를 사용할 수 있다.

function addStudent(students, name, age) {
    students[name] = age;
}

 

+) 대괄호 연산자를 사용한 프로퍼티 접근이 가능한 이유는, 자바스크립트의 객체가 연관 배열이기 때문이다. 연관 배열(associative array)란 문자열을 인덱스로 사용하는 배열을 의미한다. 파이썬의 딕셔너리를 생각하면 이해가 쉽다.

 

+) 자바스크립트에서 객체 리터럴로 객체를 생성할 때, 프로퍼티의 이름은 자바스크립트 식별자 혹은 문자열 리터럴이 될 수 있다.

let book = {
    "main title": "Javascript", // 문자열 리터럴이기 때문에 공백을 허용한다. 
    "sub-title": "the Definitive Guide", // 대시(-) 또한 허용한다. 
    "author": "Kim",
}

// 물론 1,2번째 프로퍼티의 경우 점 연산자를 사용한 프로퍼티 접근이 불가능하다.
// 세번째는 점 연산자와 대괄호 연산자 모두 가능하다.