코드스테이츠 소프트웨어엔지지어링 부트캠프 +36일

오늘 배운 것

오늘 section2의 첫 걸음을 뗐다. 객체지향에 대해 공부했다.

super가 이해가 안가서 구글링을 했고, 복습할 겸 게시글을 작성했다.

https://wnsdufdl.tistory.com/72

JS : Super와 extends를 이용한 클래스 상속

---

엄밀히 말하면 js는 객체지향언어가 아니라 prototype 기반 언어이다.

 

객체 Review 차원으로 객체를 이용한 모듈화를 복습했다. 객체의 모듈화를 통해 값을 side effect로 부터 보호할 수 있고 언제든 편리하게 재사용 할 수 있다.

 

class와 instance 그리고 constructor

객체 Review를 간단히 실습하고 클래스와 인스턴스에 대해 공부했다.

쉽게 말해서 클래스는 '틀' 인스턴스는 '틀'에 쇳물을 부어 만든 각각의 제품이다.

constructor라는 생성자 함수는 인스턴스가 만들어질때마다 실행되어 인스턴스에 속성을 부여한다.

class Car {
	constructor(brand,name,color){  
    ...//생성자, 인스턴스가 만들어질 때 실행된다. 인스턴스에 brand, name, color속성을 넣어준다.
    }
   }

인스턴스를 만들 때에는 new 키워드를 사용한다. 즉시 생성자 함수가 실행되며 변수에 클래스의 설계를 꼭 닮은 새로운 객체, 즉 인스턴스가 할당된다.

let avante = new Car('hyundai','avante','black');
let mini = new Car('BMW','mini','white');

각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 가진다.

new 키워드를 통해 인스턴스가 생성되면 생성자 함수가 실행되어 속성들을 할당해준다.('hyundai','avante','black')

변수 avante와 mini에는 각 속성들이 할당된 인스턴스들이 할당된다.

그 인스턴스들은 클래스 Car의 설계를 꼭 닮아 있다.

객체 지향

객체 지향이 등장하기 전 절차적 언어가 있었다. 모든 것을 절차적으로 생각했다. 하나의 오류가 전체에 영향을 주었다

하지만 객체지향은 오류가 속해있는 한 덩어리만 고치면 문제가 해결된다.

 

밥먹을때

절차적 언어: 숟가락을 잡는다-> 밥을 푼다-> 입을 벌린다-> 씹는다-> 삼킨다. -> 밥이 사라질때까지 반복 -> 
밥상을 치운다 -> 싱크대로 다 가져간다. -> 수세미를 잡는다 -> 퐁퐁을 묻힌다 -> 씼는다 -> 헹군다.

객체 지향 : 밥먹는 알고리즘 -> 설겆이 알고리즘

객체지향의 등장으로 데이터와 기능이 별개로 취급되지 않고 한번에 묶어서 처리할 수 있게 되었다.

(자바스크립트는 엄밀히 말하면 객체 지향 언어가 아닌 프로토타입 기반 언어지만 객체 지향 패턴으로 작성된다.)

 

OOP : 모든 것은 '객체'로 그룹화 된다.

1. 캡슐화 : 기능별로 데이터를 묶어 하나의 단위로 만든다. 디테일한 내부 구조는 숨기고 외부에서 필요한 메소드만 노출시킨다.(은닉)
2. 추상화 : 캡슐화와 비슷하다. 사용자가 기능을 동작시키는 데 필요한 시스템을 인터페이스라 하는데 인터페이스를 최대한 단순하게 만들어 사용자가 사용하기 쉽게 만들고 복잡한 내부 구조는 숨긴다.  캡슐화는 '은닉'에 초점을 두었고 추상화는 '단순화'에 초점을 둔다.
3. 상속 : 부모 클래스의 특성을 자식클래스가 물려받는다. 상속을 이용하면 같은 내용을 두번 쓸 필요가 없어 편리해진다.
4. 다형성 : 똑같은 메소드가 다른 인스턴스에서 다른 결과를 내놓는다. 예를들면 HTML element에 render라는 메소드를 만들고 상속을 받게 할 수 있다. textbox는 네모 상자와 커서를, checkbox는 작은 체크박스를 내놓을 것이다. render라는 하나의 메소드가 각각 다른 HTML element에 따라 다른 결과를 내놓는다.

Prototype과 ProtoChain

prototype은 원형객체인데 유전자라고 생각하면 된다.

아주 먼 조상인 Object객체로 부터 전해져 내려오는 유전자이다.

'상속'을 자바스크립트에서 구현할 때에는 프로토타입 체인을 이용한다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

console.log(kimcoding.name) // '김코딩'

김코딩은 class Human의 instance이다.

 

부모 클래스 Human의 특성을 상속받은 자식 클래스 Student를 만들어보자.

class Student extends Human{
constructor(name,age){
super(name,age)
}
}

let parkhacker = new Student('parkhacker',20)

console.log(parkhacker.age) // 20

Student 클래스에 name과 age가 정의되지 않았지만, Student 클래스(자식)는 Human 클래스(부모)로부터 상속받았기 때문에 

변수 parkhacker에 age와 name이 할당된다.

 

이렇게 부모의 프로토타입을 찾아 올라가는 작업은 Object.prototype 까지 올라간다.