♠ 객체: 기본

♣ 3.1 객체

객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)입니다.

객체는 프로퍼티(키-값 쌍)를 저장합니다.

• 프로퍼티 키는 문자열이나 심볼이어야 합니다. 보통은 문자열입니다.
• 값은 어떤 자료형도 가능합니다.

아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있습니다.

• 점 표기법: obj.property
• 대괄호 표기법 obj["property"]. 대괄호 표기법을 사용하면 obj[varWithKey]같이 변수에서 키를 가져올 수 있습니다.

객체엔 다음과 같은 추가 연산자를 사용할 수 있습니다.

• 프로퍼티를 삭제하고 싶을 때: delete obj.prop
• 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때: "key" in obj
• 프로퍼티를 나열할 때: for (let key in obj)

♥ eddy’s point

대괄호 표기법

여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없습니다.

    // 문법 에러가 발생합니다.
    user.likes birds = true

자바스크립트는 위와 같은 코드를 이해하지 못합니다. user.likes까지는 이해하다가 예상치 못한 birds를 만나면 문법 에러를 뱉어냅니다.

'점’은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있습니다. 유효한 변수 식별자엔 공백이 없어야 합니다. 또한 숫자로 시작하지 않아야 하며 $와 _를 제외한 특수 문자가 없어야 합니다.

키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있습니다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작합니다.

    let user = {};
    
    // set
    user["likes birds"] = true;
    
    // get
    alert(user["likes birds"]); // true
    
    // delete
    delete user["likes birds"];

이제 문법 에러가 발생하지 않네요. 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의하시기 바랍니다. 따옴표의 종류는 상관없습니다.

대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있습니다.

    let key = "likes birds";
    
    // user["likes birds"] = true; 와 같습니다.
    user[key] = true;

변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있습니다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용됩니다. 이를 응용하면 코드를 유연하게 작성할 수 있습니다.

예시:

    let user = {
      name: "John",
      age: 30
    };
    
    let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
    
    // 변수로 접근
    alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

그런데 점 표기법은 이런 방식이 불가능합니다.

    let user = {
      name: "John",
      age: 30
    };
    
    let key = "name";
    alert( user.key ) // undefined