JavaScript 입문 자료구조

JavaScript 객체 기초

JavaScript 객체 기초 — 초급

객체 기초

1. 도입 (왜 배워야 하는가)

JavaScript에서 객체는 매우 중요한 개념입니다. 객체는 데이터와 기능을 하나로 묶는 구조로, 실무에서 데이터 모델링을 할 때 필수적으로 사용됩니다. 예를 들어, 웹 애플리케이션에서 사용자 정보를 처리할 때, 객체를 사용하여 이름, 나이, 이메일 등의 정보를 하나의 단위로 관리합니다. 객체를 잘 이해하지 못하면 복잡한 데이터 구조를 제대로 다룰 수 없어 유지보수나 기능 추가에 큰 어려움을 겪게 됩니다.

2. 핵심 개념 설명

객체란?

객체는 키-값 쌍으로 구성된 데이터 구조입니다. 예를 들어, '사람'이라는 객체는 이름(name), 나이(age), 성별(gender)와 같은 속성을 가질 수 있습니다. 이는 마치 실생활에서 사람에게 여러 특성이 부여되는 것과 유사합니다.

용어	설명
객체(Object)	속성과 메소드를 가진 데이터 구조
속성(Property)	객체가 가진 데이터, 객체의 특성 또는 상태를 나타냄
메소드(Method)	객체가 수행할 수 있는 동작, 함수 형태로 정의됨

3. 기본 코드 예제

아래는 간단한 객체를 생성하고 속성에 접근하는 코드입니다.

// 객체 생성
const person = {
    name: "홍길동",  // 이름 속성
    age: 30,        // 나이 속성
    gender: "남성"  // 성별 속성
};

// 속성에 접근
console.log(person.name);  // "홍길동" 출력
console.log(person.age);   // 30 출력
console.log(person.gender); // "남성" 출력

실행 결과:

홍길동
30
남성

코드 한 줄씩 동작 설명:

const person = {...}: person이라는 이름의 객체를 생성하고, 이름, 나이, 성별이라는 속성을 정의합니다.
console.log(person.name): person 객체의 name 속성에 접근하여 "홍길동"을 출력합니다.
console.log(person.age): person 객체의 age 속성에 접근하여 30을 출력합니다.
console.log(person.gender): person 객체의 gender 속성에 접근하여 "남성"을 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니 구현하기

장바구니의 아이템을 객체로 모델링할 수 있습니다.

const cartItem = {
    productId: 101,
    productName: "노트북",
    quantity: 1,
    price: 1200000,
    
    // 총 가격을 계산하는 메소드
    totalPrice: function() {
        return this.price * this.quantity;
    }
};

console.log(cartItem.totalPrice()); // 1200000 출력

설명: 이 객체는 장바구니의 한 아이템을 나타내며, totalPrice 메소드를 사용하여 총 가격을 계산합니다.

예제 2: 사용자 정보 관리하기

사용자의 정보를 객체로 관리하여 기능을 구현할 수 있습니다.

const user = {
    username: "user123",
    email: "[email protected]",
    login: function() {
        console.log(${this.username}님이 로그인했습니다.);
    }
};

user.login(); // "user123님이 로그인했습니다." 출력

설명: 사용자의 로그인 기능을 간단히 객체 안의 메소드로 구현하였습니다.

5. 흔한 실수와 주의사항

실수 1: 속성 이름 착오

const person = {
    name: "홍길동"
};

console.log(person.nmae); // undefined 출력

올바른 코드:

console.log(person.name); // "홍길동" 출력

설명: 속성 이름을 잘못 입력하면 undefined가 출력됩니다.

실수 2: 메소드 호출 시 this 키워드 사용 오류

const user = {
    username: "user123",
    login: function() {
        console.log(${username}님이 로그인했습니다.); // 오류 발생
    }
};

user.login(); // ReferenceError