10장. 객체 리터럴

"모던 자바스크립트 Deep Dive" 자바스크립트의 기본 개념과 동작 원리

 

🔶 객체란?

---

객체는 다양한 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조입니다. 자바스크립트에서는 거의 모든 것이 객체로 이루어져 있으며, 객체는 0개 이상의 프로퍼티로 구성됩니다. 각 프로퍼티는 키와 값으로 이루어지며, 객체는 상태(프로퍼티)와 동작(메서드)을 함께 포함할 수 있습니다.

 

🔶 객체 리터럴을 사용한 객체 생성

---

자바스크립트에서는 여러 가지 방법으로 객체를 생성할 수 있지만, 가장 간단하고 직관적인 방법은 객체 리터럴을 사용하는 것입니다. 객체 리터럴은 중괄호 ``{}`` 안에 프로퍼티를 정의하여 객체를 생성하는 방식입니다.

const person = {
  name: "박제로",
  age: 24,
  greet: function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

위와 같이 객체를 생성하면, ``person`` 객체에는 ``name``, ``age`` 프로퍼티와 ``greet`` 메서드가 포함됩니다.

 

🔶 프로퍼티

---

객체는 프로퍼티의 집합입니다. 프로퍼티는 키(key)와 값(value)으로 구성되며, 여러 개의 프로퍼티는 쉼표(,)로 구분합니다.

• 프로퍼티 키 : 문자열 또는 심벌 값만 사용 가능하며, 식별자 네이밍 규칙을 따랐을 경우 따옴표(``' '``)를 생략할 수도 있습니다.
• 프로퍼티 값 : 자바스크립트에서 사용 가능한 모든 값이 올 수 있습니다.

const book = {
  title: "모던 자바스크립트 Deep Dive",
  author: "이웅모",
  pages: 926
};

 

 

🔶 메서드

---

객체의 프로퍼티 값으로 함수를 정의할 수도 있습니다. 이 경우 메서드라고 부릅니다.

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(5, 3)); // 2

 

🔶 프로퍼티 접근 방법

---

객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다. 식별자 네이밍을 준수한 경우 두 방법 모두를 사용할 수 있지만, 준수하지 않았다면 대괄호 표기법으로만 접근할 수 있습니다.

마침표 표기법

console.log(person.name);  // "박제로"
console.log(book.title);   // "모던 자바스크립트 Deep Dive"

대괄호 표기법

console.log(person["name"]); // "박제로"
console.log(book["title"]);  // "모던 자바스크립트 Deep Dive"

 

🔶 프로퍼티 값 변경 및 추가

---

객체의 프로퍼티 값은 동적으로 변경하거나 새롭게 추가할 수 있습니다.

person.age = 25; // 기존 값 변경
person.job = "개발자"; // 새로운 프로퍼티 추가
console.log(person);

 

🔶 프로퍼티 삭제

---

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

delete person.job;
console.log(person);

 

🔶 ES6 객체 리터럴 확장 기능

---

프로퍼티 축약 표현

변수 이름과 동일한 프로퍼티 키를 사용할 경우, 키를 생략할 수 있습니다.

const name = "제로";
const age = 25;
const user = { name, age };
console.log(user); // { name: "제로", age: 25 }

계산된 프로퍼티 이름

대괄호를 사용하여 동적으로 프로퍼티 키를 생성할 수 있습니다.

const key = "score";
const student = {
  [key]: 100
};
console.log(student.score); // 100

메서드 축약 표현

``function`` 키워드를 생략하고 메서드를 정의할 수 있습니다.

const user = {
  greet() {
    console.log("안녕하세요!");
  }
};
user.greet();