[JS] 객체 리터럴

개요

객체는 여러 데이터 조각을 구조화하여 저장할 수 있게 한다. 이 때, 데이터의 순서는 중요하지 않으며, 키-값 쌍으로 데이터를 저장한다. 이러한 키-값 쌍은 프로퍼티라고 불린다.

프로퍼티는 키(key)와 값(value)으로 구성되며, 키를 사용해 데이터를 읽거나 수정할 수 있다.

객체 생성하기

프로퍼티가 없는 빈 객체는 다음과 같이 생성한다.

let object = {};

프로퍼티를 갖는 객체는 다음과 같이 key: value쌍을 콤마로 구분하여 생성한다. 이 때 key를 '나 "로 묶지 않음을 유의한다.

const person = { firstName : "길동", lastName : "홍" };

객체에서 만드는 모든 키는 내부적으로 모두 문자열로 변환된다.

프로퍼티에 접근하기

객체를 생성한 뒤에는 점 표기법 또는 대괄호 표기법을 사용해 객체의 프로퍼티에 접근하거나 값을 읽고 쓸 수 있다.

대괄호 표기법

대괄호 표기법을 사용할 때에는 반드시 " 또는 ' 로 묶어줘야 한다. 대괄호 안에는 표현식을 사용할 수 있다.

// 읽기
let value = object["property"];

// 쓰기
object["property"] = "new value";

점표기법

점 표기법은 간단하게 키 이름만으로 접근할 수 있다. 이 때는 " 또는 ' 로 묶지 않는다.

// 읽기
let value = object.property;

// 쓰기
object.property = "new value";

예제

const person = { firstName: "길동", lastName: "홍" };

// 대괄호 표기법
console.log(person["firstName"]); // '길동'
console.log(person["존재하지 않는 키"]); // undefined

// 점 표기법
console.log(person.firstName); // '길동'
console.log(person.존재하지_않는_키); // undefined

배열 + 객체

배열 안에 객체

배열 안에 여러 개의 객체를 저장하여 구조화할 수 있다.

const shoppingCart = [
  {
    product: '무뚝뚝 감자침',
    price: 2900,
    quantity: 1,
  },
  {
    product: '천하장사',
    price: 11000,
    quantity: 3,
  },
  {
    product: '오렌지 주스',
    price: 3500,
    quantity: 1,
  },
];

객체 안에 배열

객체 안에 배열을 포함할 수도 있다.

const student = {
  name: "홍길동",
  age: 20,
  subjects: ["수학", "영어", "과학"], // 배열 형태로 저장
};

console.log(student.subjects[1]); // '영어'