TIL 1 (2021.10.05)

클래스와 인스턴스라는 용어를 이해할 수 있다.

- new 키워드의 사용법을 이해할 수 있다. - 클래스를 선언한 뒤, 변수에 사용할 때, new class명을 넣으면 인스턴스가 만들어집니다.

 

class 키워드의 사용법을 이해할 수 있다.

-새로운 클래스를 선언할 때 사용합니다.

 

현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.

- 아래 코드를 예시로 들어서 기본적인 차가 가져야할 기능들을 만들어줍니다.  car 클래스를 이용해서 Truck 클래스를 만들어주고, porter라는 인스턴스가 만들어지면 Car와 Truck의 기능들을 다 가진다.

 

class Car { // Car라는 클래스를 만들기 위해서 class를 입력한다.
    constructor(brand, name, color) { // 사용할 데이터를 입력한다.
        this.brand = brand; // 데이터를 선언하고 할당한다.
        this.name = name
        this.color = color }
    refuel() { // 메소드를 입력한다.
        console.log(this.name + '이 기름을 넣습니다.')
    }
    drive() {
        console.log(this.name + '이 운전을 시작합니다.')
    }
}

class Truck extends Car { // 새로운 class를 선언할 때, extends를 통해서 다른 class의 데이터, 기능을 상속받을 수 있다.
    constructor(brand, name, color, height, gear) { // 사용할 데이처를 입력한다.
    super(brand, name, color); // 부모 class와 동일하게 사용할 데이터를 super()안에 넣는다.
        this.height = height;
        this.gear = gear;
    }
}

let porter = new Truck('volvo', 'volvo5', 'green', '3.5m', '5')

console.log(Truck.__proto__) //'__proto__' 를 통해서 트럭이 car라는 클래스로부터 상속 받은 것을
                             // 확인 할 수 있다.


console.log(porter.drive())
volvo5이 운전을 시작합니다.
// 포터는 트럭의 인스턴스이지만, 트럭이 car에서 상속받은 메소드가 자동적으로 입력되기 때문에,
우리는 포터의 drive 메소드를 이용 할 수 있다.

 

---

객체 지향 프로그래밍 특징을 이해할 수 있다.

 

캡슐화

- 데이터(속성)와 기능(메소드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것입니다. 캡슐화라는 개념에는 "은닉화"의 특징도 포함하고 있는데, 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것입니다. 따라서, 디테일한 구현이나 데이터는 숨기고, 객체 외부에서 필요한 동작(메소드)만 노출시켜야 합니다. 은닉화의 특징을 살려서 코드를 작성하면 객체 내 메소드의 구현만 수정하고, 노출된 메소드를 사용하는 코드 흐름은 바뀌지 않도록 만들 수 있습니다.

 

상속 

- 상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것입니다. 부모/자식으로 이야기하기도 하지만, 보다 그 특징을 자세하게 설명하는 용어는 "기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다"로 표현하는 것이 적합합니다.

 

추상화

- 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념입니다. 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있습니다.

 

다형성 

- 클래스에 의해서 만들어지는 인스턴스들이 동일한 기능에 대해서 각기 특징을 가지는 것. 다형성으로 인해 동일한 메소드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 다른 결과값이 나오는 것.

---

JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.

객체지향 프로그래밍의 장점은 1. 재사용성을 높일 수 있다. 2. 코드를 단순하게 구현할 수 있다. 하지만 처리속도가 절차지향보다 느리며, 설계에 오랜 시간이 필요하다는 단점이 있습니다.

 

Prototype이 무엇인지 이해할 수 있다.

- mdn에서는 Object.prototype을 아래와 같이 설명하고 있습니다. 

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

객체뿐만 아니라 자바스크립트에서 사용되는 것들에는 기본적으로 내제되어 있는 기능들이 있습니다. 우리가 지정하지 않은 메소드를 이용할 수 있는 이유가, 프로토타입 객체에 메소드가 담겨 있기 때문입니다. 

 

부모 class가 만들어지게 되면 부모의 prototype.constructor에 class에 대한 정보가 담기게 됩니다.

자녀 인스턴스가 만들어지면 이 자녀는 __proto__에 부모 prototype 주소가 담기게 됩니다.

이후 constructor까지도 같은 주소가 담기게 됩니다.

class Car { // Car라는 클래스를 만들기 위해서 class를 입력한다.
    constructor(brand, name, color) {
        this.brand = brand;
        this.name = name
        this.color = color }
    refuel() {
        console.log(this.name + '이 기름을 넣습니다.')
    }
    drive() {
        console.log(this.name + '이 운전을 시작합니다.')
    }
}

let avante = new Car('hyundai', 'avante', 'black')

Car.prototype.constructor === Car
true

avante.__proto__ === Car.prototype
true


avante.__proto__.constructor === Car.prototype.constructor
true

 

객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.

 

상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.

 

클래스 상속의 원리를 이해할 수 있다.

 

Prototype chain을 이해하고 설명할 수 있다. (__proto__)

- 자식에게 메소드를 실행시킬 경우, 자식이 갖고 있지 않다면, 부모에게서 해당 메소드를 찾고, 부모에게 없으면 더 위의 부모에게 메소드를 찾음으로 실행 할 수 있습니다. 위의 Car와 Truck의 기능 살펴보기!

 

---

mdn 에서 화살표 함수에 대해서 찾아보면, 

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

 

- this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.

- new.target키워드가 없습니다.

- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.

- 생성자(Constructor)로 사용할 수 없습니다.

- yield를 화살표 함수 내부에서 사용할 수 없습니다.

 

그리고 스코프에 대해서 알아볼 때, 화살표 함수는 함수 스코프가 아닌, 블록스코프로 취급을 받는 것을 알았습니다.

간편하게 이용 할 수는 있지만, 이러한 사항들을 익히고 코드를 구현할 때, 에러를 사전에 방지할 수 있습니다.