[12일차] JavaScript 객체(Object) 이해: 기초 개념부터 활용

Programming/Javascript

[12일차] JavaScript 객체(Object) 이해: 기초 개념부터 활용

tech-living 2024. 11. 18. 13:11

객체란 무엇인가?
객체 선언 및 초기화
객체 속성 다루기
메서드와 객체 활용
객체의 반복과 순회
JavaScript 객체와 C++ 객체 요약 비교
실습: 간단한 객체 프로그램 만들기

1. 객체란 무엇인가?

객체(Object)는 키(key)와 값(value)의 쌍으로 구성된 데이터를 저장하는 JavaScript의 데이터 구조입니다.
배열이 데이터를 순서대로 저장한다면, 객체는 데이터를 의미 있는 이름(키)에 저장합니다.

예시:

let person = {
    name: "홍길동",
    age: 25,
    job: "개발자"
};

위 객체는 name, age, job이라는 키를 가지고 있으며, 각각의 키에 "홍길동", 25, "개발자"라는 값이 저장되어 있습니다.

2. 객체 선언 및 초기화

1) 객체 선언

객체는 중괄호 {}를 사용하여 선언합니다.

let emptyObject = {}; // 빈 객체
let car = {
    brand: "Hyundai",
    model: "Sonata",
    year: 2020
};

2) 객체의 키와 값

키는 문자열 또는 심볼만 가능하며, 값은 모든 데이터 타입이 가능합니다.

let user = {
    id: 1,
    username: "user01",
    isAdmin: true,
    hobbies: ["축구", "독서"]
};

3. 객체 속성 다루기

1) 속성 접근

객체 속성은 점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)으로 접근할 수 있습니다.

let person = { name: "홍길동", age: 30 };

// 점 표기법
console.log(person.name); // 홍길동

// 대괄호 표기법
console.log(person["age"]); // 30

2) 속성 추가 및 수정

객체는 동적으로 속성을 추가하거나 수정할 수 있습니다.

let car = { brand: "Kia" };
car.model = "K5"; // 속성 추가
car.brand = "Hyundai"; // 속성 수정
console.log(car); // { brand: "Hyundai", model: "K5" }

3) 속성 삭제

delete 키워드를 사용하여 객체의 속성을 삭제할 수 있습니다.

delete car.model;
console.log(car); // { brand: "Hyundai" }

4. 메서드와 객체 활용

1) 메서드란?

메서드(Method)는 객체에 포함된 함수입니다.
객체 속성처럼 정의하고 사용할 수 있습니다.

let calculator = {
    add: function (a, b) {
        return a + b;
    },
    subtract(a, b) {
        return a - b; // 축약된 메서드 선언
    }
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(5, 3)); // 2

2) `this` 키워드

객체 내 메서드에서 this는 현재 객체를 참조합니다.

let user = {
    name: "홍길동",
    greet: function () {
        console.log(`안녕하세요, ${this.name}입니다.`);
    }
};

user.greet(); // 안녕하세요, 홍길동입니다.

5. 객체의 반복과 순회

1) `for...in` 반복문

for...in 문을 사용하면 객체의 모든 키를 순회할 수 있습니다.

let person = { name: "홍길동", age: 25, job: "개발자" };

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}
// 출력:
// name: 홍길동
// age: 25
// job: 개발자

2) `Object` 클래스 메서드 활용

JavaScript는 객체와 관련된 유용한 메서드를 제공합니다.

Object.keys(obj): 객체의 모든 키 반환
Object.values(obj): 객체의 모든 값 반환
Object.entries(obj): 객체의 키-값 쌍 반환

let person = { name: "홍길동", age: 25, job: "개발자" };

console.log(Object.keys(person)); // ["name", "age", "job"]
console.log(Object.values(person)); // ["홍길동", 25, "개발자"]
console.log(Object.entries(person)); // [["name", "홍길동"], ["age", 25], ["job", "개발자"]]

6. JavaScript 객체와 C++ 객체 요약 비교

JavaScript와 C++ 모두 객체 지향 프로그래밍을 지원하지만, 객체에 대한 개념과 동작 방식은 조금 다릅니다.
아래는 두 언어의 객체에 대한 주요 차이를 요약 비교 했습니다.

특징	JavaScript 객체	C++ 객체
기반	프로토타입 기반	클래스 기반
속성 추가	동적으로 추가/삭제 가능	정적으로 정의된 멤버만 가능
클래스 필요 여부	선택적 (객체 리터럴로 생성 가능)	필수 (클래스를 기반으로 생성)
메모리 관리	가비지 컬렉터가 자동 관리	개발자가 직접 메모리 관리
상속	프로토타입 체인을 통해 상속 가능	클래스 상속을 통해 이루어짐

7. 실습: 간단한 객체 프로그램 만들기

예제: 도서 관리 프로그램

let library = {
    books: [],

    addBook: function (title, author) {
        this.books.push({ title, author });
        console.log(`${title}이(가) 추가되었습니다.`);
    },

    listBooks: function () {
        console.log("현재 도서 목록:");
        this.books.forEach((book, index) => {
            console.log(`${index + 1}. ${book.title} - ${book.author}`);
        });
    },

    findBook: function (title) {
        let book = this.books.find(book => book.title === title);
        if (book) {
            console.log(`찾으신 도서: ${book.title} - ${book.author}`);
        } else {
            console.log(`${title}을(를) 찾을 수 없습니다.`);
        }
    }
};

// 테스트
library.addBook("자바스크립트 입문", "홍길동");
library.addBook("HTML과 CSS", "이순신");
library.listBooks();
library.findBook("자바스크립트 입문");

정리 및 다음 단계

오늘은 객체의 기본 개념과 활용 방법에 대해 배웠습니다.

객체는 데이터를 구조화하고 관리하는 데 매우 유용한 도구입니다.
메서드와 this를 사용하면 더욱 강력한 기능을 구현할 수 있습니다.

다음 시간에는 JSON 형식에 대해 알아보겠습니다.
JSON은 객체와 유사하지만, 데이터 저장과 교환을 위한 표준 형식입니다.