JavaScript Objects: 개념과 활용 방법 - 좋은공간 좋은집

JavaScript에서 객체(Object)는 가장 중요한 데이터 타입 중 하나입니다. 객체는 키-값 쌍으로 이루어진 데이터 구조로, 다양한 속성과 메서드를 담을 수 있습니다. 이 글에서는 JavaScript 객체의 기본 개념과 활용 방법을 알아보겠습니다.

JavaScript 객체란?

객체는 여러 값을 하나의 단위로 묶어 관리할 수 있는 데이터 타입입니다. 객체는 key와 value의 쌍으로 이루어지며, 이를 통해 다양한 데이터를 효율적으로 관리할 수 있습니다. 객체는 중괄호 {}로 정의됩니다.

let person = {
    name: "John",
    age: 30,
    isAdult: true
};

위 코드에서 person 객체는 세 가지 속성(name, age, isAdult)을 가지고 있습니다. 각 속성은 키-값 쌍으로 표현되며, 속성 값은 문자열, 숫자, 불리언 등 다양한 타입이 가능합니다.

객체 속성에 접근하기

객체의 속성에 접근하는 방법은 두 가지가 있습니다: 점 표기법과 대괄호 표기법입니다.

점 표기법

가장 일반적인 방법으로, 객체의 속성에 접근할 때 객체명.속성명을 사용합니다.

console.log(person.name);  // 결과: "John"
console.log(person.age);   // 결과: 30

대괄호 표기법

대괄호 표기법은 객체명["속성명"] 형식을 사용합니다. 특히, 속성명이 변수로 저장된 경우 대괄호 표기법을 사용해야 합니다.

console.log(person["name"]);  // 결과: "John"

let key = "age";
console.log(person[key]);   // 결과: 30

객체 속성 추가 및 수정

객체의 속성은 언제든지 추가하거나 수정할 수 있습니다. 객체에 없는 속성을 추가하거나, 기존 속성을 덮어씁니다.

person.job = "Developer";  // 새로운 속성 추가
person.age = 31;             // 기존 속성 값 수정

console.log(person);

위 코드에서는 job 속성을 추가하고, age 값을 31로 수정합니다.

객체 메서드

JavaScript 객체는 속성뿐만 아니라 메서드(객체의 함수)도 가질 수 있습니다. 메서드는 객체의 행동을 정의하며, 함수처럼 호출됩니다.

let person = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet();  // 결과: "Hello, John"

위 코드에서 greet 메서드는 this 키워드를 사용해 객체의 name 속성에 접근하고, 인사말을 출력합니다. this는 호출된 객체를 참조하는 중요한 키워드입니다.

객체와 반복문

객체의 모든 속성을 반복적으로 처리하고 싶다면, for...in 반복문을 사용할 수 있습니다. 이 반복문은 객체의 모든 속성에 순차적으로 접근할 수 있게 해줍니다.

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

위 코드는 person 객체의 모든 속성 키와 값을 출력합니다.

객체의 속성 삭제

객체에서 속성을 삭제할 때는 delete 연산자를 사용합니다.

delete person.age;
console.log(person);  // 결과: age 속성이 삭제된 객체

delete를 사용하면 특정 속성을 객체에서 제거할 수 있습니다.

객체의 참조와 복사

객체는 참조 타입으로, 객체를 다른 변수에 할당하면 객체 자체가 아닌 메모리 주소를 복사합니다. 이는 객체를 복사했을 때 원본 객체가 수정될 수 있음을 의미합니다.

let obj1 = { name: "Alice" };
let obj2 = obj1;  // obj1의 참조를 복사

obj2.name = "Bob";
console.log(obj1.name);  // 결과: "Bob"

위 예제에서 obj2를 수정하면, obj1도 함께 수정됩니다. 이는 두 변수가 동일한 객체를 참조하고 있기 때문입니다.

객체 복사 방법

객체를 완전히 복사하려면 Object.assign() 또는 스프레드 연산자(...)를 사용할 수 있습니다.

Object.assign()을 사용한 객체 복사

let obj1 = { name: "Alice" };
let obj2 = Object.assign({}, obj1);

obj2.name = "Bob";
console.log(obj1.name);  // 결과: "Alice"

스프레드 연산자를 사용한 객체 복사

let obj1 = { name: "Alice" };
let obj2 = { ...obj1 };

obj2.name = "Bob";
console.log(obj1.name);  // 결과: "Alice"

위 두 방법을 사용하면 원본 객체와 독립적인 복사본을 만들 수 있습니다.

결론

JavaScript 객체는 데이터와 그 데이터를 처리하는 메서드를 함께 관리하는 강력한 도구입니다. 객체를 활용해 데이터를 효율적으로 저장하고 처리할 수 있으며, 객체의 속성, 메서드, 참조 등을 잘 이해하면 보다 구조적인 프로그램을 작성할 수 있습니다.

JavaScript 객체의 다양한 활용 방법을 익히고 실제 프로젝트에 적용해보세요!