[JavaScript 문법] 8일차: 객체 기초

객체란?

객체는 여러 값들을 하나의 단위로 묶어서 관리할 수 있는 복합 데이터 타입입니다. 객체는 속성과 메서드로 구성됩니다. 속성은 객체의 상태를 나타내고, 메서드는 객체의 동작을 정의합니다.

객체 리터럴

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

 

기본 문법

let 객체이름 = {
  속성1: 값1,
  속성2: 값2,
  ...
};

 

예제

let person = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

속성 접근

객체의 속성에 접근하는 방법에는 점 표기법과 대괄호 표기법이 있습니다.

 

점 표기법

console.log(person.name); // 'Alice'
console.log(person.age); // 25

 

대괄호 표기법

console.log(person['name']); // 'Alice'
console.log(person['age']); // 25

속성 추가 및 삭제

객체에 속성을 추가하거나 삭제할 수 있습니다.

속성 추가

person.job = 'Engineer';
console.log(person.job); // 'Engineer'

속성 삭제

delete person.city;
console.log(person.city); // undefined

메서드

메서드는 객체의 동작을 정의하는 함수입니다. 메서드는 객체의 속성처럼 정의할 수 있습니다.

 

예제

let person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet(); // 'Hello, my name is Alice'

this 키워드

this 키워드는 메서드 내부에서 객체 자신을 참조합니다.

 

예제

let person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet(); // 'Hello, my name is Alice'

객체 생성자

객체 생성자는 새로운 객체를 생성하는 데 사용되는 함수입니다. 생성자는 대문자로 시작하는 이름을 가지며, new 키워드를 사용하여 호출됩니다.

 

예제

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log('Hello, my name is ' + this.name);
  };
}

let person1 = new Person('Bob', 30);
let person2 = new Person('Carol', 28);

person1.greet(); // 'Hello, my name is Bob'
person2.greet(); // 'Hello, my name is Carol'

객체의 속성과 메서드

객체의 속성은 객체의 상태를 나타내며, 메서드는 객체의 동작을 정의합니다.

 

예제

let car = {
  brand: 'Tesla',
  model: 'Model S',
  year: 2020,
  drive: function() {
    console.log('Driving the car...');
  }
};

console.log(car.brand); // 'Tesla'
console.log(car.model); // 'Model S'
car.drive(); // 'Driving the car...'

객체와 배열의 차이점

객체는 키-값 쌍으로 데이터를 저장하는 반면, 배열은 인덱스를 사용하여 데이터를 저장합니다.

 

예제: 객체

let person = {
  name: 'Alice',
  age: 25
};

console.log(person.name); // 'Alice'
console.log(person.age); // 25

 

예제: 배열

let numbers = [1, 2, 3, 4, 5];

console.log(numbers[0]); // 1
console.log(numbers[1]); // 2

 

객체의 유용한 메서드

Object.keys()

객체의 모든 속성 이름을 배열로 반환합니다.

let keys = Object.keys(person);
console.log(keys); // ['name', 'age']

Object.values()

객체의 모든 속성 값을 배열로 반환합니다.

let values = Object.values(person);
console.log(values); // ['Alice', 25]

Object.entries()

객체의 모든 속성 이름과 값을 배열로 반환합니다.

let entries = Object.entries(person);
console.log(entries); // [['name', 'Alice'], ['age', 25]]

결론

객체는 JavaScript에서 데이터를 구조화하고 관리하는 데 중요한 역할을 합니다. 이번 글에서는 객체 리터럴, 속성 접근, 속성 추가 및 삭제, 메서드, this 키워드, 객체 생성자, 객체의 유용한 메서드에 대해 배웠습니다. 다음 글에서는 객체의 프로토타입에 대해 알아보겠습니다.

다음 글에서 만나요!