모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

객체

자바스크립트에는 여덟가지 자료형이 있고, 이중 일곱개는 오직 하나의 데이터만 담을 수 있어 원시형이라고 부른다. 그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있는 것이다.

객체는 중괄호를 이용해를 만들 수 있다. 중괄호 안에는 키(key) : 값(value) 쌍으로 구성된 프로퍼티를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용된다. 프로퍼티 키는 프로퍼티 이름이라고도 부른다. 객체에서는 키를 이용해서 프로퍼티를 쉽게 찾을 수 있다. 추가나 삭제도 마찬가지이다.

빈 객체(빈 서랍장)를 만드는 방법은 두 가지가 있다.

let user = new Object(); // 객체 생성자 문법
let user = {}; // 객체 리터럴 문법

중괄호를 이용해 객체를 선언하는 것을 리터럴이라고 부른다. 객체를 선언할 땐 주로 이 방법을 사용한다.

리터럴과 프로퍼티

중괄호 안에는 키 : 값 쌍으로 구성된 프로퍼티가 들어간다.

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

콜론을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티 이름 혹은 식별자라고 부른다. 개발자는 프로퍼티를 추가, 삭제할 수 있다. 점 표기법을 이용하면 프로퍼티 값을 읽는 것도 가능하다.

alert(user.name); // John
alert(user.age); // 30

프로퍼티 값엔 모든 자료형이 올 수 있다. 불린형 프로퍼티를 추가해보자.

user.isAdmin = true;

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.

delete user.age;

여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표를 묶어줘야 한다.

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

마지막 프로퍼티의 끝도 쉼표로 끝날 수 있다.

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

이런 쉼표를 trailing(길게 늘어지는) 혹은 hanging(매달리는) 쉼표라고 부른다.

상수 객체는 수정될 수 있다.

const로 선언된 객체는 수정될 수 있다.

const user = {
  name: "John"
};

user.name = "Pete";
alert(user.name);

const는 user=…를 전체적으로 설정하려고 할 때에만 오류가 발생하므로, 객체 자체가 바뀌지 않은 상태에서 일부를 수정하는 것은 가능하다.

대괄호 표기법

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

user.likes birds = true

자바스크립트는 위와 같은 코드를 이해하지 못한다. 점은 키가 유요한 변수 식별자인 경우에만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없고, 숫자로 시작하지 않으며 $와 _를 제외한 특수문자가 없어야 한다.

키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 대괄호 표기법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있든 상관없이 동작한다. 단, 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의해야 한다. 따옴표 종류는 상관 없다.

let user = {};

user["likes birds"] = true;

alert(user["likes birds"]); 

delete user["likes birds"];

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

let key = "likes birds";

user[key] = true;

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

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

let key = prompt("사용자의 어떤 정보를 얻고 싶은신가요?", "name");

// 변수로 접근
alert(user[key]);

점 표기법은 이런 방식이 불가능하다.

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

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

계산된 프로퍼티

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

객체를 만들 때