15 클래스와 객체, 생성자가 호출되면 일어나는 일
# 클래스와 객체
## 미션
클래스의 개념과 그 사용법을 익히시오.
<img src="http://drive.google.com/uc?export=view&id=1kk9XzT20N45-KfKvCM8YD97kzkl3kh_A" alt="홍팍-자바스크립트-클래스와-객체-미션">
## 개념
### 클래스란
객체를 찍어내는 틀, 객체를 만들기 위한 설계도, 이를 클래스(class)라 한다. 클래스를 만들면 붕어빵틀로 붕어빵을 찍어내듯, 쉽고 빠르게 객체를 만들 수 있다.
### 클래스의 필요성
클래스 없이 객체를 만든 경우, 실수할 수 있어 리스크가 있다. 반면 클래스를 통해 객체를 만들면 규격화된 객체 생성이 가능하다. 이를 통해 큰 규모의 프로그램을 안정적으로 설계 및 구현할 수 있다. 대부분 프로그래밍 언어들이 클래스를 채택한 이유가 바로 여기에 있다.
<img src="http://drive.google.com/uc?export=view&id=1kkMbILGR9tmObhX025xGTuUXFJJi-UNR" alt="홍팍-자바스크립트-클래스-필요성">
### 객체지향 프로그래밍(OOP)
여기서 특별히 객체를 조합하여 전체 프로그램을 만드는 방식, 이를 객체지향 프로그래밍(Object-Oriented Programming) 이라 하는데, 간단히 OOP로 불린다. 자바스크립트는 초창기 객체지향 언어라고 하기엔 무리가 있었지만, ES6부터 클래스를 채택하며 객체지향 언어가 돼가고 있다.
### 클래스의 구성요소, 필드와 메소드
클래스는 크게 2가지, 필드와 메소드로 구성된다. 필드는 객체가 가질 상태를, 메소드는 객체가 수행할 동작을 정의한다. 다음은 게임 캐릭터를 예로, 클래스를 설계한 것이다.
<img src="http://drive.google.com/uc?export=view&id=1kkkbvzH7M8gE7zgYvGfcVJ-SN_Wtgd96" alt="홍팍-자바스크립트-클래스-설계-예-영웅">
위 클래스를 코드로 구현하면 다음과 같다.
```
class Hero {
// fields(상태)
name;
level;
hp;
// methods(동작)
attack() { /* do something */ }
move() { /* do something */ }
spell() { /* do something */ }
}
```
클래스는 관련된 것들을 하나로 묶어 관리하는데, 이러한 개념을 캡슐화(encapsulation)라 한다.
<img src="http://drive.google.com/uc?export=view&id=1kmv3vSfPJh8ygFXwduQWOR4mdBjWFnCN" alt="홍팍-자바스크립트-클래스와-객체-캡슐화-encapsulation">
## 실습
### 03:16 기본 파일 생성
class.html
```
<!-- HTML 관련 구글링 -->
<!-- 👉 site:developer.mozilla.org {연관_키워드} -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="class.css">
<Script defer src="class.js"></Script>
</head>
<body>
<h1>클래스, 객체를 찍어내는 틀!</h1>
<h2>1. 클래스 정의하기</h2>
<pre>
대학생 홍팍, 프로그래밍 과제를 받았다.
> "생활 속 사물을 클래스로 설계하시오."
대상을 고민하던 찰나, 댕댕이가 떠올랐다.
== 개(Dog) ==
상태: 이름, 품종, 나이
동작: 짖기, 앉기, 엎드리기
</pre>
<h2>2. 객체 찍어내기</h2>
<pre>
댕댕이 설계를 마친 홍팍.
애견카페 댕댕이들을 떠올리며, 객체화 해보기로한다.
== 댕댕이들 ==
뭉치(골든리트리버, 4살)
뽀삐(시고르자브종, 2세)
콩이(푸들, 1세)
</pre>
<h2>3. 객체 값 읽고 쓰기</h2>
<pre>
댕댕이 객체, 어떻게 사용하는 걸까..?
모두 나이를 1살씩 증가시켜, 출력해보자.
== 댕댕이들 1살씩 더 먹음 ==
뭉치(골든리트리버, 5살)
뽀삐(시고르자브종, 3세)
콩이(푸들, 2세)
</pre>
<h2>4. 메소드 호출하기</h2>
<pre>
잘 객체화 된 댕댕이들..!
다양한 동작도 시켜보기로 한다.
== 다양한 명령을 알아듣는 댕댕이들 ==
댕댕이가 짖습니다.
댕댕이가 앉습니다.
댕댕이가 눕습니다.
</pre>
<h2>5. this, 메소드 수행의 주체객체</h2>
<pre>
동작을 잘하긴 하는데, 뭔가 아쉽다.
어느 댕댕이가 뭘 한건지 알고 싶다.
== 어떤 댕댕이가 뭘 했는지 알려주라능 ==
[뭉치]가 짖습니다.
[뽀삐]가 앉습니다.
[콩이]가 눕습니다.
</pre>
</body>
</html>
```
class.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
pre {
background-color: #efefef;
padding-top: 1rem;
margin: 0;
}
```
class.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
### 04:09 클래스 정의하기
```
// 1. 클래스란?
// - 클래스란? 객체를 찍어내는 틀(like a 붕어빵틀, 설계도)
// - 클래스는 필드(상태)와 메소드(동작)으로 구성 됨
// 댕댕이 클래스 만들기
class Dog {
// 필드(상태; 변수): 이름, 품종, 나이
_name;
_breed;
_age;
// 메소드(동작; 함수): 짖기, 앉기, 눕기
bark() {
console.log("댕댕이가 짖습니다.");
}
sit() {
console.log("댕댕이가 앉습니다.");
}
lieDown() {
console.log("댕댕이가 눕습니다.");
}
}
```
### 07:18 객체 생성하기
```
// 2. 생성자란?
// - 생성자란? 객체를 만들때 사용되는 메소드로 constructor라 함
// - 클래스로부터 객체를 만들 시, new 키워드가 필요
// 댕댕이 클래스 만들기
class Dog {
// 필드(상태; 변수): 이름, 품종, 나이
_name;
_breed;
_age;
// 생성자(객체를 만드는 특별한 메소드)
constructor(name, breed, age) {
this._name = name;
this._breed = breed;
this._age = age;
}
// 메소드(동작; 함수): 짖기, 앉기, 눕기
bark() {
console.log("댕댕이가 짖습니다.");
}
sit() {
console.log("댕댕이가 앉습니다.");
}
lieDown() {
console.log("댕댕이가 눕습니다.");
}
}
// 댕댕이 객체 생성
const dog0 = new Dog("뭉치", 4, "male");
const dog1 = new Dog("뽀삐", 2, "female");
const dog2 = new Dog("콩이", 1, "male");
// 객체 정보 확인
console.log(dog0);
console.log(dog1);
console.log(dog2);
```
### 13:14 객체값 읽고 쓰기
```
// 3. 객체값 읽고 쓰기
// - 필드와 메소드 모두 객체의 프로퍼티(키와 값의 쌍)임
// - 따라서 닷(.)연산, 브라켓([])연산, for..in 등 사용 가능
// 댕댕이 나이 1살씩 증가
dog0._age += 1;
dog1._age += 1;
dog2._age += 1;
// 댕댕이 정보 출력
console.log(`${dog0._name}(${dog0._breed}, ${dog0._age}살)`);
console.log(`${dog1._name}(${dog1._breed}, ${dog1._age}살)`);
console.log(`${dog2["_name"]}(${dog2["_breed"]}, ${dog2["_age"]}살)`);
// for..in 으로 프로퍼티 순회
for(let key in dog0) {
console.log(`${key} => ${dog0[key]}`);
}
```
### 16:39 메소드 호출하기
```
// 4. 메소드 호출하기
// - 메소드란? 클래스 내부에 작성된 함수로,
// - 특정 객체가 주체가되어 수행하는 동작
// 메소드 호출: 댕댕이들에게 다양한 동작을 하게 함
dog0.bark();
dog1.sit();
dog2.lieDown();
```
### 18:41 this 키워드
```
// 5. this 키워드
// - 메소드를 수행한 주체 객체를 의미(예외 있음(할말하않), 나중에..)
// - dog0.bark()가 호출될 때, this => dog0
// - dog1.sit()가 호출될 때, this => dog1
// - dog2.lieDown()가 호출될 때, this => dog2
// 댕댕이 클래스 만들기
class Dog {
// 필드(상태; 변수): 이름, 품종, 나이
_name;
_breed;
_age;
// 생성자(객체를 만드는 특별한 메소드)
constructor(name, breed, age) {
this._name = name;
this._breed = breed;
this._age = age;
}
// 메소드(동작; 함수): 짖기, 앉기, 눕기
bark() {
console.log(`[${this._name}]가 짖습니다.`);
}
sit() {
console.log(`[${this._name}]가 앉습니다.`);
}
lieDown() {
console.log(`[${this._name}]가 눕습니다.`);
}
}
```
## 구글링 훈련하기 🔥
- 자바스크립트 클래스 기본 문법
- 자바스크립트 생성자 호출
- 자바스크립트 메소드란
- 자바스크립트 함수와 메소드 차이
- 자바스크립트 메소드와 this
- 자바스크립트 객체 for..in 사용법