자바스크립트 객체(JavaScript Object)

(뤼튼을 통한 정리 내용입니다.)

 

자바스크립트에서 객체(Object)는 데이터와 기능을 함께 묶어 표현할 수 있는 중요한 데이터 구조입니다. 객체는 키-값 쌍으로 구성되어 있으며, 다양한 속성과 메서드를 가질 수 있습니다. 다음은 객체에 대한 설명과 사용 방법입니다.

1. 객체의 정의

객체(Object): 키-값 쌍으로 구성된 데이터 구조. 키는 문자열 또는 심볼이고, 값은 다양한 데이터 타입(문자열, 숫자, 배열, 다른 객체 등)을 가질 수 있습니다.

 

2. 객체 생성 방법

리터럴 표기법:

const person = {
    name: 'John',
    age: 30,
    isStudent: false
};

생성자 함수 사용:

function Person(name, age) {
    this.name = name;
    this.age = age;
}
const john = new Person('John', 30);

Object 생성자 사용:

const person = new Object();
person.name = 'John';
person.age = 30;

3. 객체 속성 접근

점 표기법:

console.log(person.name); // 'John'

 

대괄호 표기법:

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

 

4. 객체 속성 추가 및 수정

속성 추가:

person.email = 'john@example.com';

속성 수정:

5. 객체 메서드

객체는 함수도 속성으로 가질 수 있습니다. 이러한 함수를 메서드(method)라고 합니다.

const person = {
    name: 'John',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

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

6. 객체 삭제

객체의 속성을 삭제할 수 있습니다.

delete person.age;

7. 객체 순회

객체의 키와 값을 순회할 수 있습니다.

for...in 루프:

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

 

Object.keys():

Object.keys(person).forEach(key => {
    console.log(`${key}: ${person[key]}`);
});

 

8. 객체의 this 키워드

this는 메서드가 호출될 때의 객체를 참조합니다. 위의 greet 메서드에서 this.name은 person 객체의 name 속성을 참조합니다.

 

9. 중첩 객체

객체는 다른 객체를 속성으로 가질 수 있습니다.

const person = {
    name: 'John',
    address: {
        city: 'New York',
        zip: '10001'
    }
};

console.log(person.address.city); // 'New York'

10. 객체 복사

얕은 복사:

const personCopy = { ...person }; // Spread operator

깊은 복사:
객체의 중첩 구조를 복사할 때는 라이브러리(예: Lodash)를 사용하거나 JSON 방법을 사용할 수 있습니다.

const deepCopy = JSON.parse(JSON.stringify(person));

 

요약

자바스크립트에서 객체는 데이터를 구조화하고 관련 기능을 결합하는 데 매우 유용합니다. 객체를 활용하면 복잡한 데이터 구조를 쉽게 관리하고, 코드의 가독성을 높일 수 있습니다.