[Javascript] 객체 지향 프로그래밍

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

🐦객체 지향 프로그래밍

---

자바스크립트는 엄밀히 말하면 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성 할 수 있습니다 😎

🦜OOP

---

• 객체지향 프로그래밍의 줄인말로 프로그램 설계 철학이다.
• 모든 것을 객체로 그룹화 한다.
• 4가지 주요 개념을 통해 재사용성을 얻을 수 있다.

🦜클래스와 인스턴스

---

• 클래스는 객체를 생성하기 위한 청사진이다.
• 인스턴스는 클래스의 사례이다.
• 클래스는 객체를 만들기 위한 생성자(constructor)함수를 포함한다

🦜OOP Basic Conepts

---

위에 oop를 설명하면서 언급한 4가지 주요 개념 캡슐화, 상속, 추상화, 다형성에 대해 알아보겠습니다.

• 캡슐화 (Encapsulation)
• 상속 (Inheritance)
• 추상화 (Abstraction)
• 다형성 (Polymorphism)

🦩캡슐화

데이터와 기능을 하나의 단위를 묶는 것이다.
데이터를 함수에 저장한다 하면 class는 캡슐화의 좋은 예시이다.

class Student{
  constructor(name,age,avgScore) { 
    this.name = name;
    this.age = age;
    this.avgScore = avgScore;
  }
  eatLunch () { return console.log(`${this.name}(은)는 점심을 먹는다.`) }
}

const Lee = new Student("Lee",19,85);    //Lee = {name: 'Lee', age: 19, avgScore: 85}
Lee.eatLunch(); // Lee(은)는 점심을 먹는다.

데이터와 class안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법이다

java와 같은 언어에서는 private를 사용하여 데이터 노출을 제한할 수 있다.
이것을 은닉화라 한다
은닉화는 원하는 데이터를 숨길수 있고, 노출할 자료와 숨길 자료를 선택할 수 있다.

캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높입니다.

🦩상속

부모 클래스의 특징을 자식 클래스가 물려받는 것이다.

class Person{
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    eatLunch () { return console.log(`${this.name}(은)는 점심을 먹는다.`) }
}

class Student extends Person{
    constructor(name,age,avgScore) {
        super(name, age);    // super 키워드는 부모 오브젝트의 함수를 호출할 때 사용됩니다.
        this.avgScore = avgScore;
    }
}
const Lee = new Student("Lee",19,85);    //Lee = {name: 'Lee', age: 19, avgScore: 85}
Lee.eatLunch(); // Lee(은)는 점심을 먹는다.

Person class는 데이터의 이름과 나이 속성과 점심먹기 메서드를 보관합니다.
Student class는 Person class와 동일하게 이름과 나이 속성과 점심먹기 메서드를 필요로 하고, 추가적으로 학교 성적 평균에 대한 속성도 필요합니다.

Student class를 extends를 사용하여 Person class의 자식으로 설정한다.
Person에서 중복되는 속성들은 super을 사용하여 부모 오브젝트에서 받게 성절하였고, 메서드는 다른 표시를하지 않고 사용해도 실행에 문제가 없다.

상속 불필요한 코드를 줄여 재사용성을 높입니다.

 

super은 함수 내에서 두 번 이상 사용할 수 없습니다

🦩추상화

https://leewang31.tistory.com/136

[Javascript] 고차 함수의 중요성과 추상화

추상화에 대해 정리한내용이다.
내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념이다.
추상화를 통해 인터페이스가 단축 되면, 기능의 노출이 되지 않기 때문에 예기치 못한 사용상 변화가 일어나지 않게 만들수 있다.

캡슐화의 은닉화와 비슷해보여 구분을 해보려한다.
캡슐화가 데이터의 은닉에 포커스가 맞춰있다면, 추상화는 사용자가 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의 하는 것에 초점이 맞춰져 있다.

추상화는 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화합니다.

🦩다형성

다양한 형태라는 말로, 똑같은 메서드라 하더라도, 다른 방식으로 구현될수 있다는 것이다.

class Person{
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    eatLunch () { return console.log(`${this.name}(은)는 점심을 먹는다.`) }
}

class Student extends Person{
    constructor(name,age,avgScore) {
        super(name, age);    
        this.avgScore = avgScore;
    }
}
class officeWorker extends Person{
    constructor(name,age) {
        super(name, age);    
    }
  eatLunch () { return console.log(`${this.name}(은)는 바빠서 못먹는다.`) }
}
const Lee = new Student("Lee",19,85);    //Lee = {name: 'Lee', age: 19, avgScore: 85}
const Kim= new officeWorker("Kim",25);
Lee.eatLunch(); // Lee(은)는 점심을 먹는다.
Kim.eatLunch(); // Kim(은)는 바빠서 못먹는다.

다음과 같이 회사원 클래스를 만들었다.
회사원 클래스는 학생 클래스와 동일하게 사람 클래스에 상속 받았지만, eatLunch메서드를 재할당 하였다.
그렇기 때문에 학생 클래스의 인스턴스로 하는 변수 Lee가 eatLunch 메서드를 실행했을 때 Lee(은)는 점심을 먹는다.라는 출력이 나왔지만,
회사원 클래스의 인스턴스로 하는 변수 kim이 eatLunch 메서드를 실행했을 때, Kim(은)는 바빠서 못먹는다. 라는 출력이 나온다.

둘은 같은 메서드 eatLunch이지만 다른 방식으로 구현 되기 때문에 다형성의 예시이다.

추가로 부모의 메서드를 오버라이드 할 경우, 부모의 메서드의 규칙을 지켜줘야 한다. 타입과 같은

다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해집니다.

🐦자바스크립트의 객체 지향의 한계

---

🦜은닉화의 한계

---

아까 언급했던 private가 없기 때문에 은닉화의 한계가 나타납니다.
JavaScript에서는 은닉화를 돕기 위해서 일반적으로 클로저 모듈 패턴을 사용합니다.
클래스/인스턴스 형태로 만들 때에는 ES2019부터 #이라는 키워드가 도입되었습니다.
하지만 아직은 사용방법을 모르겠어서 나중에 따로 포스팅 해야할것 같다.

🦜추상화의 한계

---

java와 typeSctipt와 같은 언어에서는 interface를 구현 했습니다. 자바스크립트에는 없습니다.
인터페이스의 이점은, 인터페이스가 일종의 규약처럼 간주되어, 인터페이스를 클래스로 구현하는 사람들이 이에 맞게 작성할 수 있게 돕습니다
또한 이름만 노툴해 사용방법을 알려주기에 유리합니다.

🦦잡담

---

언어를 배우다 조금 어려워 진다 싶으면 (중간고사 끝날무렵) 나오는 객체 지향과 이들의 4가지 특징
시험볼때 달달 외워서 시험을 봤어서 정확한 의미에 대해 공부한적이 없던것 같다.
다형성은 지금까지 다향성인줄 알았으니 말다한것 같다
아무튼 면접 질문으로 잘 나온다는 OOP에 대해 배울수 있어서 좋았다.

코드스테이츠 자료로 이해가 잘 되지 않아 노마드 코더의 영상을 보았는데, typeScript에 대한 언급을 하였다.
전에 코드스테이트 동기분들도 말씀하신걸 들은적 있는데, 나중에 따로 공부해봐야겠다. 끗

🐾참고

---

https://www.youtube.com/watch?v=IeLWSKq0xIQ