[js] 객체 공부

 

이렇게 복수의 단어로 Key값을 줄때는 "" 로 묶어줘야 한다. 

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

 

대괄호 표기법

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

// 문법 에러 발생
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

 

 

계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property) 라고 함

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력될 것

위 예시에서 [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.

사용자가 프롬프트 대화상자에 apple을 입력했다면 bag엔 {apple: 5}가 할당되었을 거고

콘솔에 찍어보면 apple에는 5가 할당되어있을 것

 

 

다음 예시처럼 대괄호 안에는 복잡한 표현식이 올 수도 있다.

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

대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력하지만, 작성하기 번거롭다는 단점이 있다.