JavaScript Object, 객체 생성과 활용 방법

JavaScript Object, 객체 생성과 활용 방법

JavaScript에서 객체(Object)는 매우 중요한 데이터 구조로, 다양한 데이터를 그룹화하여 효율적으로 관리할 수 있게 해줍니다. 이 가이드에서는 JavaScript 객체의 생성 방법과 주요 활용 방법을 알아보고, 객체 지향 프로그래밍의 기본 개념을 익히는 데 중점을 둡니다.

 

 

목차

1. 객체란 무엇인가?
2. JavaScript에서 객체 생성하기
3. 객체의 프로퍼티 다루기
4. 객체의 메서드 정의 및 호출
5. 객체 순회 방법
6. 객체 비교 및 복사
7. 객체의 고급 기능들

 

1. 객체란 무엇인가?

JavaScript에서 객체는 키-값 쌍으로 이루어진 데이터 구조입니다. 객체는 다양한 데이터를 그룹화할 수 있으며, 숫자, 문자열, 배열, 함수 등 다양한 타입의 값을 포함할 수 있습니다. 객체는 프로그램에서 데이터를 효율적으로 관리하고 조작하는 데 필수적입니다.

 

 

2. JavaScript에서 객체 생성하기

JavaScript에서 객체를 생성하는 방법은 여러 가지가 있습니다. 그 중 가장 흔히 사용되는 방법은 객체 리터럴과 Object() 생성자입니다.

객체 리터럴

const person = {
    name: 'John',
    age: 30,
    job: 'developer'
};

객체 리터럴 방식은 중괄호({})를 사용하여 간단하게 객체를 생성하는 방법입니다. 각 프로퍼티는 콜론을 기준으로 키와 값으로 이루어집니다.

Object() 생성자

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

new Object() 생성자를 사용하면 빈 객체를 생성한 후, 프로퍼티를 동적으로 추가할 수 있습니다. 하지만 이 방식은 객체 리터럴에 비해 자주 사용되지는 않습니다.

 

 

3. 객체의 프로퍼티 다루기

객체의 프로퍼티는 다음과 같은 방식으로 접근하거나 수정할 수 있습니다.

점 표기법

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

대괄호 표기법

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

점 표기법은 프로퍼티 이름을 직접 사용할 때, 대괄호 표기법은 변수로 프로퍼티 이름을 사용할 때 유용합니다.

 

 

4. 객체의 메서드 정의 및 호출

객체의 메서드는 객체에 포함된 함수입니다. 메서드를 정의하는 방법은 간단하며, 다음 예제를 통해 살펴보겠습니다.

const person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};

person.greet(); // Hello, John

위 예제에서 greet는 person 객체의 메서드입니다. this 키워드를 사용하여 객체 내부의 다른 프로퍼티에 접근할 수 있습니다.

 

 

 

 

5. 객체 순회 방법

객체의 프로퍼티를 순회하는 방법은 여러 가지가 있습니다.

for...in 문

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

for...in 문은 객체의 모든 열거 가능한 프로퍼티를 순회하는 데 사용됩니다.

Object.keys(), Object.values(), Object.entries()

Object.keys(person);   // ['name', 'age', 'greet']
Object.values(person); // ['John', 30, function() {...}]
Object.entries(person); // [['name', 'John'], ['age', 30], ['greet', function() {...}]]

Object.keys(), Object.values(), Object.entries() 메서드를 사용하면 각각 객체의 키, 값, 키-값 쌍을 배열로 얻을 수 있습니다.

 

 

6. 객체 비교 및 복사

객체는 참조 타입이기 때문에 비교와 복사 시 주의가 필요합니다.

객체 비교

const a = { name: 'John' };
const b = { name: 'John' };
console.log(a === b); // false

두 객체는 내용이 같더라도 서로 다른 참조를 가리키고 있기 때문에, 직접 비교는 false를 반환합니다.

객체 복사

객체를 복사할 때 얕은 복사와 깊은 복사를 고려해야 합니다.

얕은 복사

const shallowCopy = Object.assign({}, person);

깊은 복사

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

얕은 복사는 1단계 프로퍼티까지만 복사하고, 깊은 복사는 중첩된 객체까지 모두 복사합니다.

 

 

7. 객체의 고급 기능들

JavaScript 객체에는 프로토타입 상속, this 바인딩 등 고급 개념들이 있습니다.

프로토타입 상속

모든 객체는 다른 객체로부터 상속을 받을 수 있습니다. 이때 프로토타입 체인이 사용됩니다.

this 바인딩

this 키워드는 함수가 호출되는 맥락에 따라 동적으로 바인딩됩니다. 객체 메서드 내에서 this는 해당 객체를 참조합니다.