모던 자바스크립트 튜토리얼 part1 - 4.1

4.1 Objects

객체 생성은 아래 두 가지 방식으로 할 수 있다.

let user = new Object(); // "object constructor" syntax
let user = {};  // "object literal" syntax

마지막 속성의 끝에 쉼표를 사용해도 무방하다. 코드 편집 시 편리할 것 같다.

let user = {
  name: "John",
  age: 30,
}

Square brackets

객체 속성에 접근하려면 '.'을 사용하면 되는데, 속성 이름이 두 개 이상의 단어로 구성되어 있다면 대괄호를 사용해야 한다.

// this would give a syntax error
user.likes birds = true

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

또한, 속성의 이름을 사용자의 입력에 맡길 수도 있다. (java에서는 이런 게 안된다.)

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

아래와 같이 사용할 수는 없다는 것에 주의하자.

let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ) // undefined

Computed properties

변수에 저장해서 활용할 수도 있다.

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// take property name from the fruit variable
bag[fruit] = 5;

// -----------------------

let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

아래처럼 속성을 간략하게 정의할 수도 있겠다. 자주 사용할 것 같다.

function makeUser(name, age) {
  return {
    name, // same as name: name
    age,  // same as age: age
    // ...
  };
}


let user = {
  name,  // same as name:name
  age: 30
};

속성의 이름으로 어떤 문자열, 심벌이든지 속성의 이름으로 가능하다. 만약 다른 타입이 들어올 경우 자동으로 문자열로 변환된다.

예를 들면, 0도 속성의 이름이 될 수 있다. ('__proto__'에 대해선 추후 정리)

let obj = {
  0: "test" // same as "0": "test"
};

// both alerts access the same property (the number 0 is converted to string "0")
alert( obj["0"] ); // test
alert( obj[0] ); // test (same property)

Property existence test, "in" operator

javascript는 존재하지 않는 객체 속성에 접근해도 에러를 뱉지 않는데, 이러한 점은 경우에 따라 속성의 존재 여부를 올바르게 판단하지 못할 수도 있다. 이럴 경우 'in' 연산자를 사용하면 속성 존재 여부를 문제없이 체크할 수 있다.

let obj = {
  test: undefined
};

alert( obj.test ); // it's undefined, so - no such property?
alert( "test" in obj ); // true, the property does exist!

The "for..in" loop

이것은 반복문에 존재하는 in이랑은 다르다. java로 치면 for (int i : arr)와 같은 느낌.

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // values for the keys
  alert( user[key] ); // John, 30, true
}

만약 속성들의 이름이 정수라면 정렬이 된 채로 반복문을 돈다. 그게 아니라면 생성 순서대로 순회.

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

만약 정수로된 속성들을 정렬하고 싶지 않다면, '+'를 붙이면 된다.

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}