1. 객체
자바스크립트엔 일곱 가지 자료형이 있습니다. 이 중 여섯 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부릅니다.
그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있죠. 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 합니다.
객체는 중괄호 {…}를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데,
- 키('프로퍼티 이름’이라고도 부름)에는 문자형,
- 값엔 모든 자료형이 허용됩니다.
대괄호 표기법
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없습니다.
// 문법 에러 발생(SyntaxError: Unexpected identifier)
user.likes birds = true점 표기법은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있습니다(유효한 변수 식별자가 되려면 공백이 있으면 안 됩니다).
키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라불리는 방법을 사용할 수 있습니다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작합니다.
let user = {};
// set
user["likes birds"] = true;
// get
alert(user["likes birds"]); // true
// delete
delete user["likes birds"];이제 문법 에러가 발행하지 않네요. 대괄호 표기법을 사용할 때는 대괄호 안 문자열을 따옴표로 묶어줘야 한다는 점에 주의하시기 바랍니다. 따옴표의 종류(큰따옴표, 작은따옴표)는 상관없습니다.
대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있습니다.
let user = {};
let key = "likes birds";
// user["likes birds"] = true; 와 같습니다.
user[key] = true; // user = { "likes birds": true }변수 key는 런타임에 평가되거나 사용자 입력에 따라 그 값이 변경될 수 있습니다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용됩니다. 이를 응용하면 코드를 유연하게 작성할 수 있습니다.
예시:
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
// 변수로 접근 (변수 key에 "name"이 할당됨)
alert( user[key] ); // John ("name"을 입력한 경우)그런데 점 표기법은 위와 같은 방식으로 사용할 수 없습니다.
let user = {
name: "John",
age: 30
};
let key = "name";
alert( user.key ) // undefined
// 점 표기법은 프로퍼티 키로 접근해야 값을 조회할 수 있음
alert( user.name ) // John계산된 프로퍼티
객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있다면, 이를 계산된 프로퍼티(computed property) 라고 부릅니다.
예시:
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.위 예시에서 [fruit]은 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미합니다.
사용자가 프롬프트 대화상자에 apple을 입력했다면 bag엔 {apple: 5}가 할당되었을 겁니다.
아래 예시는 위 예시와 동일하게 동작합니다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};
// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;
alert( bag.apple );두 방식 중 객체 리터럴 안에 직접 대괄호를 사용한 방식(계산된 프로퍼티를 사용한 예시)이 더 깔끔해 보이네요.
한편, 아래와 같이 대괄호 안에 복잡한 표현식을 사용하는 것도 가능합니다.
let fruit = 'apple';
let bag = {
[fruit + 'Computers']: 5 // bag.appleComputers = 5
};대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력합니다. 그런데 작성하기 번거롭다는 단점이 있습니다.
이런 이유로 (프로퍼티 이름이 확정된 상황이고, 이름도 단순하다면) 처음엔 점 표기법을 사용하다가 뭔가 복잡한 상황이 발생했을 때 대괄호 표기법으로 바꾸는 경우가 많습니다.
