JavaScript에서의 객체와 프로퍼티 이해하기

JavaScript에서의 객체와 프로퍼티 이해하기

소개

JavaScript의 객체는 키-값 쌍의 모음으로, 데이터와 기능을 함께 그룹화하여 관리할 수 있습니다. 객체 내 각 데이터 항목이나 함수를 '프로퍼티' 또는 '메서드'라고 부릅니다. 객체와 프로퍼티를 사용하는 방법을 알아보겠습니다.

객체 생성

JavaScript에서 객체를 생성하는 가장 간단한 방법은 중괄호 {}를 사용하는 리터럴 문법입니다.

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

프로퍼티 접근

객체의 프로퍼티에 접근하는 방법은 두 가지입니다. 점 표기법(dot notation)과 대괄호 표기법(bracket notation)입니다.

• 점 표기법

  console.log(person.name); // Alice

• 대괄호 표기법

  console.log(person['age']); // 30

대괄호 표기법은 키를 변수로 사용하거나, 키 이름에 공백이나 특수 문자가 포함된 경우 유용합니다.

프로퍼티 추가 및 수정

객체에 새로운 프로퍼티를 추가하거나 기존 프로퍼티를 수정할 수 있습니다.

person.job = 'Developer';  // 새 프로퍼티 추가
person.age = 31;           // 기존 프로퍼티 수정

프로퍼티 삭제

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

delete person.job;

프로퍼티 존재 여부 확인

• in 연산자

  • 객체에 특정 프로퍼티가 존재하는지 확인하는 연산자입니다.

  console.log('name' in person); // true
  console.log('job' in person);  // false

• !== undefined 검사

  • 프로퍼티 값이 undefined인지 확인하여 존재 여부를 파악합니다.

  console.log(person.name !== undefined); // true
  console.log(person.job !== undefined);  // false

계산된 프로퍼티 이름

ES6부터 객체 리터럴 내에서 계산된 프로퍼티 이름을 사용할 수 있습니다. 이는 동적으로 프로퍼티 키를 생성할 때 유용합니다.

let property = 'score';
let value = 100;
let student = {
    [property]: value
};
console.log(student.score); // 100

메서드

객체의 메서드는 객체의 프로퍼티에 할당된 함수입니다. 객체와 관련된 동작을 정의할 때 사용합니다.

person.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};
person.greet(); // Hello, my name is Alice

this 키워드는 메서드가 속한 객체를 참조합니다.

객체 프로토타입

모든 JavaScript 객체는 Object.prototype에서 메서드와 속성을 상속받습니다. hasOwnProperty와 같은 메서드는 거의 모든 객체에서 사용할 수 있습니다.

console.log(person.hasOwnProperty('name')); // true

객체 키 목록 및 값 접근

• Object.keys 메서드

  • 객체의 모든 키를 배열로 반환합니다.

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

• Object.values 메서드

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

  console.log(Object.values(person)); // ['Alice', 30]

결론

JavaScript의 객체와 프로퍼티는 데이터를 구조화하고 코드를 모듈화하는 데 매우 유용합니다. 객체의 다양한 특성과 메서드를 활용하여 더욱 효율적이고 유지보수가 용이한 코드를 작성해 보세요.