모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 10장 객체 리터럴

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 10장 객체 리터럴

10.1 객체란?

객체는 키와 값으로 이루어진 데이터 구조를 말합니다.

10.2 객체 리터럴에 의한 객체 생성

객체 리터럴은 중괄호 {}를 사용하여 객체를 정의하는 방법입니다.

10.3 프로퍼티

객체에서 키와 값 쌍으로 이루어진 값을 프로퍼티라고 합니다.

let myObject = {
  property1: "hello"
}

10.4 메서드

객체의 메서드는 해당 객체에 연관된 함수를 나타냅니다.

let person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

10.5 프로퍼티 접근

2가지 방법으로 접근할 수 있습니다. 점 표기법과 대괄호 표기법. 점 표기법은 객체 뒤에 점과 프로퍼티 이름을 입력하여 사용합니다. 대괄호 표기법은 프로퍼티 이름을 대괄호 안에 넣어 사용합니다.

let person = {
  "firstName": "John",
};

console.log(person.firstName); // 출력: "John"
console.log(person[firstName]); // 출력: "John"

10.6 프로퍼티 값 갱신

객체의 프로퍼티 값을 갱신하려면 해당 프로퍼티에 접근한 다음, 새 값을 할당하면됩니다.

let person = {
  "firstName": "John",
};

person.firstName = "Jane";
console.log(person.firstName); // 출력: "Jane"

10.7 프로퍼티 동적 생성

새로운 프로퍼티를 추가하려면, 그냥 새로운 프로퍼티에 값을 할당하면 됩니다.

let person = {
  firstName: "John"
};

person.age = 30;

console.log(person.age); // 출력: 30

10.8 프로퍼티 삭제

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

let person = {
  firstName: "John",
  age: 30
};

delete person.age;

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

10.9.1 프로퍼티 축약 표현

객체를 생성할 때, 변수에서 프로퍼티의 이름과 값을 한 번에 가져올 수 있습니다.

let name = 'John';
let age = 30;

let person = { name, age };

10.9.2 계산된 프로퍼티 이름

객체에서 대괄호를 사용하여 속성 이름을 변수를 이용하여 동적으로 지정할 수 있습니다.

let key = 'job';

let person = {
  [key]: 'Engineer'
};

10.9.3 메서드 축약 표현

객체의 메서드를 정의할 때, function 키워드를 생략할 수 있습니다.

let person = {
  sayHello() {
    console.log('Hello!');
  }
};