[TIL]2022-11-26 객체 지향 프로그래밍? 클래스(class)? Javascript

MDN class : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class

class - JavaScript | MDN

프로그래밍을 할 때 그냥 절차적으로 프로그래밍을 하는 것이 아니라 서로 밀접하게 연관있는 것들을 객체로 구성해 나가면서 객체끼리 서로 호환 가능하도록 할 수 있는 것을 객체 지향 프로그래밍이라 한다 !

 

중요한 포인트 !

 

자바스크립트 내부 구현사항은 프로토타입을 이용하여 생성자함수를 지원하는것 !

 

개발자 입장에서 객체를 손쉽게 만들어내려면, 생성자함수라는 것을 이용해야함 !

 

대부분의 객체지향 프로그래밍 언어에서는 프로토타입을 사용하는 것이 아니라 클래스를 기반으로 객체지향 프로그래밍을 가능하게 한다 !

 

자바스크립트 내부적으로는 프로토타입을 쓰지만 개발자들은 클래스를 이용하여 더 용이하게 객체지향 프로그래밍을 할 수 있음. 문법적 설탕 !

 

원래는 프로토타입을 베이스로 하지만 es6 이후 최신 자바스크립트는 클래스를 이용하여 객체지향 프로그래밍을 해나갈수있다.

 

프로토타입을 베이스로한 객체지향 프로그래밍 언어는 흔하지 않음. 최근엔 거의 이용하지 않음.

 

자동변속기가 달린 차량이 변속을 하지 않는 것이 아니라, 이용자의 간단한 조작만으로 변속은 차량의 기계적 메커니즘으로 알아서 하게끔 하는 것이 자동변속기의 역할이다. 그러한 것이 '클래스(Class)'이다.

 

클래스란 ?

생성자 함수와 마찬가지로 객체를 생성할 수 있는 템플릿, 청사진, 틀 양식이라고 이해하면 된다.

클래스나 생성자 함수를 이용하여 객체지향 프로그래밍을 할 수 있다.

 

프로그래밍을 할 때 그냥 절차적으로 프로그래밍을 하는 것이 아니라 서로 밀접하게 연관있는 것들을 객체로 구성해 나가면서 객체끼리 서로 호환 가능하도록 할 수 있는 것을 객체 지향 프로그래밍이라 한다 !

 

Javascript에서는 생성자함수, 클래스 사용 가능하지만 최신(modern) 자바스크립트에서는 클래스만을 사용한다!

현업에서는 대부분 생성자 함수를 사용하지 않는다. 타입스크립트에서도 생성자함수를 사용하지 않고 클래스를 사용한다 !

 

클래스(Class)를 통해 만들어진 객체(object)는 인스턴스(Instance)라고 한다 !

 

 

생성자 함수를 클래스(Class)로 바꿔보자🔽

// 객체를 손쉽게 만들 수 있는 템플릿
// 1. 생성자 함수 (오래된 고전적인 방법)
// 2. CLASS를 이용. 최신트랜드⭐

// ▼생성자 함수를 CLASS로 변환해 보자
// function Fruit(name, emoji) {
//   this.name = name;
//   this.emoji = emoji;
//   this.display = () => {
//     console.log(`${this.name}: ${this.emoji}`);
//   };
//   // return this; // 생략가능. 생성자 함수에서는 this가 자동으로 리턴됨 !
// }

// const apple = new Fruit('apple', '🍎');
// const orange = new Fruit('orange', '🍊');

// console.log(apple);
// console.log(orange);
// console.log(apple.name);
// console.log(apple.emoji);
// apple.display();

// 클래스의 클라쓰를 알아보자. CLASS !

class Fruit {
  // 생성자 : new 키워드로 객체를 생성할 때 호출되는 함수.
  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }
  display = () => {
    console.log(`${this.name}: ${this.emoji}`);
  };
}

// apple은 Fruit이라는 Class의 인스턴스이다 !
const apple = new Fruit('apple', '🍎');
// orange는 Fruit이라는 Class의 인스턴스이다 !
const orange = new Fruit('orange', '🍊');

console.log(apple);
console.log(orange);
console.log(apple.name);
console.log(apple.emoji);
apple.display();

// obj는 객체이고, 그 어떤 클래스의 인스턴스도 아니다.
const obj = {name: 'ellie'};