JavaScript 기초 <11. JavaScript의 객체(Object)와 프로토타입 개념>

자바스크립트 JavaScript

11. JavaScript의 객체(Object)와 프로토타입 개념 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 객체(Object)란?

JavaScript에서 객체(Object)는 키(key)와 값(value)으로 이루어진 데이터 구조입니다.
객체를 사용하면 데이터를 구조화하고, 여러 개의 관련 정보를 하나로 묶어서 관리할 수 있습니다.

📌 객체는 JavaScript에서 가장 중요한 데이터 타입이며, 거의 모든 요소가 객체로 동작함!

---

 

2. 객체(Object) 생성 방법

객체를 생성하는 방법은 여러 가지가 있습니다.

✅ 1) 객체 리터럴 (가장 일반적인 방법)

const person = {
    name: "Alice",
    age: 25,
    greet: function () {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
};

console.log(person.name); // "Alice"
person.greet(); // "안녕하세요, 저는 Alice입니다."

📌 객체 리터럴은 {}을 사용하여 간편하게 객체를 생성하는 방법임!

---

✅ 2) 생성자 함수(Constructor Function) 사용

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const user1 = new Person("Alice", 25);
console.log(user1.name); // "Alice"

📌 생성자 함수는 new 키워드를 사용하여 새로운 객체를 생성함!

---

✅ 3) Object.create()를 사용한 객체 생성

const personProto = {
    greet: function () {
        console.log("안녕하세요!");
    }
};

const user2 = Object.create(personProto);
user2.greet(); // "안녕하세요!"

📌 Object.create()를 사용하면 프로토타입을 명시적으로 설정할 수 있음!

---

✅ 여기까지 객체의 기본 개념과 생성 방법을 배웠습니다!
👉 "그렇다면, 객체의 프로토타입(Prototype)이란 무엇이고, 왜 중요한가?"
✅ 2부에서 프로토타입 개념, 상속, __proto__, prototype까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 프로토타입(Prototype) 개념

JavaScript에서는 모든 객체가 prototype이라는 숨겨진 속성을 가진다.
즉, 객체는 프로토타입을 통해 다른 객체의 속성과 메서드를 상속받을 수 있다.

📌 프로토타입은 JavaScript에서 상속을 구현하는 핵심 개념임!

---

 

2. 프로토타입 체인(Prototype Chain)

const person = {
    greet: function () {
        console.log("안녕하세요!");
    }
};

const user = Object.create(person);
user.sayHello = function () {
    console.log("반갑습니다!");
};

user.greet(); // "안녕하세요!" (프로토타입에서 상속됨)
user.sayHello(); // "반갑습니다!"

✅ 결과:

 

안녕하세요!
반갑습니다!

📌 객체는 __proto__를 통해 부모 객체의 속성을 찾는다! (프로토타입 체인)

---

 

3. __proto__ vs prototype 차이점

구분설명

__proto__	객체 인스턴스가 자신의 프로토타입을 참조하는 속성
prototype	생성자 함수가 객체의 프로토타입을 정의하는 속성

✅ 1) __proto__ 사용 예제

const user = {
    name: "Alice"
};

console.log(user.__proto__); // Object의 프로토타입을 가리킴

✅ 2) prototype 사용 예제

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

Person.prototype.greet = function () {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
};

const user1 = new Person("Alice");
user1.greet(); // "안녕하세요, 저는 Alice입니다."

📌 prototype은 생성자 함수에서만 사용되며, __proto__는 모든 객체가 가지고 있는 속성임!

---

 

✅ 지금까지 객체의 프로토타입 개념과 상속 원리를 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 배열과 고차 함수(map, filter, reduce)는 어떻게 동작할까?"
✅ 다음 회차에서 배열과 고차 함수의 활용법을 배워봅시다! 🚀