객체는 자바스크립트 데이터를 표현하는 기본 단위다
자바스크립트에서 객체(Object)는 키(key)와 값(value)의 쌍으로 구성된 데이터 구조로, 현실 세계의 사물을 데이터로 표현할 수 있는 강력한 수단입니다. 객체는 프로퍼티(property)와 메서드(method)를 통해 데이터를 저장하고 기능을 정의할 수 있으며, 거의 모든 자바스크립트 애플리케이션에서 기본적으로 사용됩니다. 배열, 함수, 정규표현식, 심지어는 null을 제외한 대부분의 값이 객체로 간주될 만큼, 객체는 자바스크립트의 핵심적인 요소입니다. 자바스크립트 객체는 정해진 틀이 없는 자유로운 구조를 가지며, 필요에 따라 언제든 속성을 추가하거나 삭제할 수 있습니다. 이러한 유연성은 웹 개발에 있어 객체가 매우 널리 사용되는 이유이기도 합니다. 사용자의 정보, 서버에서 받아온 JSON 데이터, 폼 입력 값 등을 모두 객체 형태로 저장하고 조작할 수 있습니다. 객체를 효과적으로 사용하려면 다양한 생성 방법, 속성 접근 및 수정 방식, 반복 처리 방법, 메서드 정의 방식 등을 명확히 이해해야 합니다. 특히 동적 속성 추가, computed property, 객체의 중첩 구조 처리, 참조에 의한 할당과 복사의 차이점은 실무에서 자주 등장하는 이슈입니다. 이번 글에서는 객체의 선언 방식부터 속성 접근, 값 변경, 반복 처리, 메서드 정의까지 자바스크립트 객체를 실전에서 완벽하게 활용할 수 있도록 핵심 내용을 정리합니다.
객체 생성, 속성 접근 및 메서드 정의 방법
1. 객체 생성 방법
가장 기본적인 객체 생성 방법은 중괄호({})를 사용하는 리터럴 방식입니다.
const person = {
name: "홍길동",
age: 30,
isMarried: false
};
또는 생성자 함수 방식도 존재합니다:
const user = new Object(); user.name = "이순신"; user.age = 45;2. 속성 접근 방법
객체의 속성(프로퍼티)은 점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)으로 접근할 수 있습니다.
console.log(person.name); // "홍길동" console.log(person["age"]); // 30대괄호 표기법은 키가 문자열이거나 변수일 경우 사용합니다.
let key = "isMarried"; console.log(person[key]); // false3. 속성 추가 및 수정
객체는 생성 이후에도 자유롭게 속성을 추가하거나 수정할 수 있습니다.
person.job = "개발자"; person.age = 31;4. 속성 삭제
delete 연산자를 사용하여 속성을 제거할 수 있습니다.
delete person.isMarried;5. 객체 속성 반복 처리
for...in 문을 사용하여 객체의 모든 키를 순회할 수 있습니다.
for (let key in person) {
console.log(key + ": " + person[key]);
}
6. 메서드 정의객체 내부에 함수를 정의하면 메서드가 됩니다.
this는 해당 객체를 가리킵니다.
const dog = {
name: "초코",
bark: function() {
console.log(this.name + "가 짖습니다!");
}
};
dog.bark(); // 초코가 짖습니다!
ES6부터는 축약 문법도 사용할 수 있습니다:
const cat = {
name: "나비",
meow() {
console.log(this.name + "가 야옹합니다!");
}
};
7. 중첩 객체와 접근객체 안에 또 다른 객체가 포함될 수 있으며, 중첩 구조는 점(.)을 연속적으로 사용하여 접근합니다.
const student = {
name: "지수",
score: {
math: 90,
english: 85
}
};
console.log(student.score.math); // 90
이처럼 객체는 계층적인 데이터 구조를 표현하는 데 매우 유용하며, JSON 형태와도 구조가 같아 서버와의 통신에서도 자주 사용됩니다.
객체는 자바스크립트의 뼈대, 정확한 이해가 필수
자바스크립트에서 객체는 단순한 데이터 저장소를 넘어서, 상태를 표현하고 기능을 구성하며 애플리케이션 전반의 구조를 담당하는 핵심 개념입니다. 객체를 어떻게 정의하고 다루느냐에 따라 코드의 설계 품질과 유지보수성이 결정된다고 해도 과언이 아닙니다. 객체는 유연하게 속성을 추가하거나 삭제할 수 있고, 함수도 값으로 저장할 수 있으며, 중첩 구조를 자유롭게 구성할 수 있습니다. 이러한 특성 덕분에 자바스크립트는 객체 지향 프로그래밍과 함수형 프로그래밍을 모두 지원할 수 있습니다. 하지만 이런 유연함이 때로는 코드의 복잡성을 증가시키고 예기치 않은 버그를 만들기도 하므로, 객체의 구조와 동작 원리를 명확히 이해하고 사용하는 것이 매우 중요합니다. 실무에서는 사용자 정보, 설정 값, API 응답 데이터 등을 객체로 표현하며, 이 객체들을 효율적으로 조작하는 능력은 개발자의 필수 역량입니다. 객체는 거의 모든 자바스크립트 코드에서 기본적으로 활용되므로, 객체를 자유자재로 생성하고 수정하며 메서드를 정의하고 중첩 구조를 다룰 수 있는 능력은 자바스크립트 실력의 핵심 지표라 할 수 있습니다. 결론적으로 객체는 자바스크립트의 가장 기본적이고도 중요한 구조입니다. 객체를 잘 이해하면 자연스럽게 클로저, 프로토타입, 클래스 등 더 깊은 개념으로 나아갈 수 있으며, 효율적이고 안정적인 웹 애플리케이션을 만들 수 있는 기반이 됩니다.