모던 자바스크립트 입문 - Chapter 9: 객체 💻

안녕하세요! 오늘은 자바스크립트의 객체에 대해 정리해보겠습니다.

자바크스립트에서 객체는 정말 중요한 개념이니깐 차근차근 알아보도록 하겠습니다!

 

📌 목차

• 객체란 무엇인가?
• 객체 생성하기
• 프로퍼티 다루기
• 메서드 정의하기
• 객체 순회하기
• 생성자 함수
• 프로토타입 기초
• ES6+ 객체 기능

---

🤔 객체란 무엇인가?

자바스크립트에서 **객체(Object)**는 관련된 데이터와 기능을 하나로 묶어놓은 데이터 타입입니다.

• 프로퍼티(Property): 객체가 가지고 있는 데이터
• 메서드(Method): 객체가 수행할 수 있는 동작(함수)

 

// 간단한 객체 예시
const person = {
    name: "김철수",      // 프로퍼티
    age: 25,            // 프로퍼티
    greet: function() { // 메서드
        console.log("안녕하세요!");
    }
};

---

📝 객체 생성하기

1. 객체 리터럴 방식 (가장 일반적)

const student = {
    name: "이영희",
    grade: 3,
    subjects: ["수학", "영어", "과학"]
};

2. Object 생성자 사용

const car = new Object();
car.brand = "현대";
car.model = "소나타";
car.year = 2023;

3. 빈 객체 생성 후 프로퍼티 추가

const book = {};
book.title = "자바스크립트 입문";
book.author = "홍길동";
book.pages = 300;

---

📝 프로퍼티 다루기

프로퍼티 접근하기

const user = {
    name: "박민수",
    age: 30,
    "favorite color": "blue"  // 공백이 있는 프로퍼티명
};

// 점 표기법 (Dot Notation)
console.log(user.name);  // "박민수"
console.log(user.age);   // 30

// 대괄호 표기법 (Bracket Notation)
console.log(user["name"]);           // "박민수"
console.log(user["favorite color"]); // "blue"

// 변수를 사용한 접근
const property = "age";
console.log(user[property]); // 30

프로퍼티 추가/수정/삭제

const phone = {
    brand: "삼성",
    model: "갤럭시"
};

// 추가
phone.color = "검정";
phone["storage"] = "128GB";

// 수정
phone.model = "갤럭시 S24";

// 삭제
delete phone.color;

console.log(phone);
// { brand: "삼성", model: "갤럭시 S24", storage: "128GB" }

---

📝 메서드 정의하기

일반적인 메서드 정의

const calculator = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    },
    // this 키워드 사용
    result: 0,
    showResult: function() {
        console.log(`결과: ${this.result}`);
    }
};

calculator.result = calculator.add(10, 5);
calculator.showResult(); // "결과: 15"

this 키워드 이해하기

const person = {
    name: "정민호",
    age: 28,
    introduce: function() {
        console.log(`안녕하세요! 저는 ${this.name}이고, ${this.age}살입니다.`);
    }
};

person.introduce(); // "안녕하세요! 저는 정민호이고, 28살입니다."

---

📝 객체 순회하기

for...in 루프

const laptop = {
    brand: "애플",
    model: "맥북 프로",
    year: 2023,
    price: 2500000
};

// 모든 프로퍼티 키 순회
for (let key in laptop) {
    console.log(`${key}: ${laptop[key]}`);
}

Object 메서드 활용

const smartphone = {
    brand: "아이폰",
    model: "15 Pro",
    storage: "256GB"
};

// 키만 가져오기
const keys = Object.keys(smartphone);
console.log(keys); // ["brand", "model", "storage"]

// 값만 가져오기
const values = Object.values(smartphone);
console.log(values); // ["아이폰", "15 Pro", "256GB"]

// 키-값 쌍 가져오기
const entries = Object.entries(smartphone);
console.log(entries); 
// [["brand", "아이폰"], ["model", "15 Pro"], ["storage", "256GB"]]

---

📝 생성자 함수

같은 구조의 객체를 여러 개 만들 때 사용합니다.

// 생성자 함수 (대문자로 시작)
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.introduce = function() {
        console.log(`안녕하세요! ${this.name}입니다. ${this.job}을 합니다.`);
    };
}

// 객체 생성
const person1 = new Person("김개발", 25, "개발자");
const person2 = new Person("이디자인", 30, "디자이너");

person1.introduce(); // "안녕하세요! 김개발입니다. 개발자을 합니다."
person2.introduce(); // "안녕하세요! 이디자인입니다. 디자이너을 합니다."

---

📝 프로토타입 기초

모든 객체는 프로토타입을 가지고 있으며, 프로토타입을 통해 메서드와 프로퍼티를 상속받습니다.

function Animal(name) {
    this.name = name;
}

// 프로토타입에 메서드 추가
Animal.prototype.speak = function() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
};

Animal.prototype.type = "동물";

const dog = new Animal("멍멍이");
dog.speak(); // "멍멍이이(가) 소리를 냅니다."
console.log(dog.type); // "동물"

---

📝 ES6+ 객체 기능

1. 단축 프로퍼티 표기법

const name = "홍길동";
const age = 25;

// 기존 방식
const person1 = {
    name: name,
    age: age
};

// ES6 단축 표기법
const person2 = {
    name,  // name: name과 동일
    age    // age: age와 동일
};

2. 메서드 단축 구문

const mathUtils = {
    // 기존 방식
    add: function(a, b) {
        return a + b;
    },
    
    // ES6 단축 구문
    multiply(a, b) {
        return a * b;
    }
};

3. 계산된 프로퍼티 이름

const prefix = "user";
const id = 123;

const userData = {
    [`${prefix}_${id}`]: "홍길동",
    [`${prefix}_email`]: "hong@example.com"
};

console.log(userData);
// { user_123: "홍길동", user_email: "hong@example.com" }

 

---

📚 마무리 정리

오늘 배운 내용을 정리하면:

객체는 관련된 데이터와 기능을 하나로 묶어놓은 자료구조입니다

객체 리터럴 {}을 사용해서 쉽게 만들 수 있고, 점 표기법과 대괄호 표기법으로 프로퍼티에 접근할 수 있어요

생성자 함수를 사용하면 같은 구조의 객체를 여러 개 만들 수 있고, 프로토타입을 통해 메서드를 공유할 수 있습니다.

ES6+에서는 단축 프로퍼티 표기법, 메서드 단축 구문 등으로 더 간결하게 객체를 작성할 수 있어요

this 키워드는 메서드를 호출한 객체를 가리키며, 객체 지향 프로그래밍의 기초가 됩니다.

---

💡 오늘 새롭게 알게 된 것

• 계산된 프로퍼티 이름으로 동적으로 객체 키를 생성할 수 있다는 점을 알게 되었어요

🤔 어려웠던 점

• this 키워드의 동작 방식이 호출 방법에 따라 달라지는 부분이 헷갈려요
• 프로토타입 체인의 개념이 아직 완전히 이해가 되지 않아서 공부가 더 필요할 것 같습니다

---

🎯 다음 학습 계획

다음 포스팅에서는 배열의 다양한 기능에 대해 알아보겠습니다.