클래스를 이용한 모듈화, Prototype, 생성자 함수

---

정답을 맞추는게 답이 아니라 끝까지 도전하는 자세가 중요 ! 

 

객체 지향 JavaScript  

 

객체 지향 프로그래밍: OOP, Object-oriented programming

데이터와 기능을 한 곳에 묶어서 처리 / 속성과 메소드가 하나의 "객체" 라는 개념이며 클래스(Class)라고 부른다.

객체 지향이 트렌드지만, 객체 지향이 무조건 좋은건 아니다 ! 

하나의 프로그래밍 방법론일뿐, 각 방법론의 장단점을 잘 알고, 상황에 맞는 방법론을 선택하는게 Best! 

ex) 메모리 관리가 중요하다면 ? -> 메모리를 적게 쓰는 절차지향
      사람들과의 협업이 필요하면? -> 코드 이해가 쉬운 객체지향

자바스크립트는 객체지향 언어가 아니라 프로토타입 기반 언어이다!

자바스크립트의 클래스는 프로토타입을 이용해 구현하는 것! 

 

---

 

클래스를 이용한 모듈화 👥

 

class: 하나의 모델이 되는 청사진(blueprint)를 만드는 과정 

 

instance: 만들어진 청사진을 바탕으로 한 객체(object)를 만드는 과정

 

청사진은 클래스(class), "청사진"을 바탕으로 한 객체는 인스턴스(instance)

객체를 어떻게 만들까 ? -> 일반적인 함수 정의하듯 만든다 but 주의할 점 

new 키워드를 써서 새로운 인스턴스를 만든다.

보통 클래스는 대문자, 그리고 일반명사로 만든다.

고로 일반적인 함수는 적절한 동사와 소문자로 시작하게 만들면 클래스와 구분이 쉬워진다 !

// ES6 클래스 관련 새로운 문법 class Car { constructor(brand, name, color) { // 인스턴스가 만들어질 때 실행되는 코드 } }

 

위 코드에서, constructor 함수는 생성자(constructor)함수 -> 인스턴스가 만들어질 때 실행되는 코드이다. 

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

 

let cyberTruck = new Car('tesla', 'cybertruck', 'metalgray');
let 3series = new Car('bmw', '320d', 'black');
let casper = new Car('hyundai', 'casper', 'white');

 

여기서 cyberTruck, 3series, casper는 각각의 인스턴스이며, 
인스턴스들은 Car 라는 클래스의 고유한 속성과, 메소드를 갖는다.

 

class Car {
	constructor(brand, name, color) {
    	this.brand = brand;
        this.name = name;
        this.color = color;
    }
}

 

prototype	모델의 청사진을 만들 때 쓰는 원형 객체(original form)이다.
constructor	인스턴스가 초기화될 때 실행하는 생성자 함수
this	함수가 실행될 때, 해당 scope마다 생성되는 고유한  실행 context (execution context) new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨.

 

 

---

 

객체 지향 프로그래밍 👥

 

OOP: 프로그램 설계 철학 중 하나 ! / 객체로 그룹화된다.

 

객체 지향 프로그래밍의 주요 컨셉

캡슐화 (Encapsulation)

데이터와 기능을 하나의 단위로 묶는 것 

 

은닉(hiding): 구현은 숨기고, 동작은 노출시킴

느슨한 결합에 유리: 언제든 구현을 수정하는 것이 가능하다

코드가 복잡하지 않게 만들고, 재사용성을 높인다.

 

추상화 (Abstraction)

 

내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순화시킨다! // 아이폰을 생각해보자 ! 

 

상속 (Inheritance)

 

부모와 자식 관계를 통해 불필요한 코드를 줄여 재사용성을 높일 수 있다 !

 

다형성 (Polymorphism)

 

동일한 메소드에 대해 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다 ! 

 

---

 

클래스와 프로토타입 👥

 

JavaScript는 프로토타입 기반 언어이다.

프로토타입(Prototype)은 원형 객체를 의미한다.

  

Human	-> .prototype	Human.prototype.eat	-> new Human();      instantiation	john.eat
	<- .constructor		<- .__proto__

 

프로토타입 체인  👥

 

클래스에서 extend를 이용해 부모 클래스를 불러오고, constructor 하위에 super(props)로 부모 클래스의 속성들을 
가져올 수 있다 ! 

** 주의할 점: 부모 클래스에 그 속성이 없으면 조부모? 더 상위 클래스에 가서 속성을 가져온다 ! 

 

class Yg {
    constructor(company, country) {
        this.company = 'YG'
        this.country = 'South Korea'
    }
    introduce() {
        console.log('Yg babe 😛')
    }
}

module.exports = Yg

 

 

const Yg = require('./Yg);

class BigBang extends Yg {
    constructor(company, country, name, person, debut) {
        super(company, country);
        this.name = 'BigBang';
        this.person = 5
        this.debut = 2006;
    }
}

module.exports = BigBang

 

 

 

const BigBang = require('./BigBang');

class GDragon extends BigBang {
    constructor(company, country, name, birth, isMarried) {
        super(company, country);
        this.name = 'GDragon';
        this.birth = 1988
        this.isMarried = 'no'
    }
}

module.exports = GDragon;

 

 

---