객체

• 자료형챕터에서 배웠듯이 자바스크립트엔 여덟 가지 자료형이 있습니다.
• 이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부릅니다.
• 그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다.
• 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있죠.
• 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 합니다.
• 서랍장을 상상하면 객체를 이해하기 쉽습니다.
• 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하시면 됩니다.
• 복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 추가나 삭제도 마찬가지입니다.

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

• 서랍장에 파일을 추가하고 뺄 수 있듯이 개발자는 프로퍼티를 추가, 삭제할 수 있습니다.
• 점 표기법(dot notation)을 이용하면 프로퍼티 값을 읽는 것도 가능합니다.

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

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

delete user.age;

대괄호 표기법

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

// 문법 에러가 발생합니다.
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"];

계산된 프로퍼티

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

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

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

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

단축 프로퍼티

• 실무에선 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있습니다.

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

let user = makeUser("John", 30);
alert(user.name); // John

• 위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일하네요.
• 이렇게 변수를 사용해 프로퍼티를 만드는 경우는 아주 흔한데, 프로퍼티 값 단축 구문(property value shorthand) 을 사용하면 코드를 짧게 줄일 수 있습니다.
• name:name 대신 name만 적어주어도 프로퍼티를 설정할 수 있죠.

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
    // ...
  };
}

‘in’ 연산자로 프로퍼티 존재 여부 확인하기

• 자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다는 것입니다.
• 이런 특징을 응용하면 프로퍼티 존재 여부를 쉽게 확인할 수 있습니다.

let user = {};

alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.

"key" in object

‘for…in’ 반복문

• for..in반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다.
• for..in은 앞서 학습했던 for(;;)반복문과는 완전히 다릅니다.

for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

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

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

요약

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

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

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

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

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

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

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

지금까진 '순수 객체(plain object)'라 불리는 일반 객체에 대해 학습했습니다.

자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있습니다.

• Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임
• Date – 날짜와 시간 정보를 저장할 때 쓰임
• Error – 에러 정보를 저장할 때 쓰임
• 기타 등등

객체마다 고유의 기능을 제공하는데, 이에 대해선 추후 학습하겠습니다. 사람들은 종종 'Array 타입’이나 'Date 타입’이라는 용어를 쓰곤 합니다. 사실 Array와 Date는 독립적인 자료형이 아니라 '객체’형에 속합니다. 객체에 다양한 기능을 넣어 확장한 또 다른 객체이죠.

객체는 다재다능한 자료구조로 자바스크립트에서 그 영향력이 막강합니다. 지금까진 객체라는 거대한 주제의 극히 일부만 다루었습니다. 튜토리얼 뒤쪽에서 객체에 대한 더 상세한 내용을 다루도록 하겠습니다.