강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy)

What is Object-Oriented Programming?

OOP

• Object-oriented programming(OOP) is a programming paradigm based on the concept of objects. (참고 paradigm : Style of code, 'how' we write and organize code)
• We use objects to model(describe) real-world or abstract feature. (real-world e.g. user or todo list item) (abstract features e.g. HTML component or data structure)
• Object may contain data(properties) and code(methods). By using objects, we pack data and the corresponding behavior into one block (data : 변수들 corresponding behavior : methods)
• In OOP, objects are self-contained pieces/blocks of code
• Objects are building blocks of applications, and interact with one another
• Interactions happen through a public interface (API) : methods that the code outside of the object can access and use to communicate with the object
• OOP was developed with the goal of organizing code, to make it more flexible and easier to maintain (avoid 'spaghetti code")

Classes and Instaces (Traditional OOP)

Class

Like a blueprint from which we can create new objects.

ex)

User{
	user
    password
    email
    
    login(password){
    	// Login logic
     }
     sendMessage(str){
     	// Sending logic
      }
    }

참고) 위의 코드는 단지 개념을 이해하기 위한 예시임 실제 JS내에서 쓰이는 문법과는 조금 다름!
위 class내에서는 user와 관련한 모든 정보가 들어있다.

Instance

A real object that we can use in our code, which was created from a class, and a class itself is not an object. Like a real house created from an abstract blueprint.

ex)

new User('jonas')

{
	user = 'Jonas',
    password = '123sf',
    email = dsfasfasf@gmail.com'
    
      login(password){
    	// Login logic
     }
     sendMessage(str){
     	// Sending logic
      }
 }

Class를 이용하여 우리가 만들고 싶은 만큼 많은 object들을 만들어낼 수 있다.

The 4 fudamental OOP principles

1. Abstraction (추상화)

Abstraction : Ignoring or hiding details that don't matter, allowing us to get an overview perspective of the thing we're implementing, instead of messing with details that don't really matter to our implementaion.

• 인터페이스로 클래스들의 공통적인 특성(변수, 메소드)들을 묶어 표현하는 것

2. Encapsulation (캡슐화)

Encapsulation : Keeping properties and methods private inside the class, so they are not accessible from outside the class. Some methods can be exposed as a public interface(API).

• 실제로 구현 부분을 외부에 드러나지 않도록 하는 것
• 변수와 메소드를 하나로 묶음
• 데이터를 외부에서 직접 접근하지 않고 함수를 통해서만 접근
  ex) public, private, protected
  public : 클래스 외부에서 접근 가능
  private : 클래스 내부에서만 접근 가능 (private key JS에 없음!)
  protected : 상속받은 자식 클래스에서만 접근 가능
  => 중요한 함수들만 public에 둘 것.

3. Inheritance (상속)

Inheritance : Child class extends parent class. Making all properties and methods of a certain class available to a child class, forming a hierarchical relationship between classes. This allows us to reuse common logic and to model real-world relationships.

• 자식 클래스가 부모 클래스의 특성과 기능을 물려받는 것
• 기능의 일부분을 변경하는 경우 자식 클래스에서 상속받아 수정 및 사용함
• 상속은 캡슐화를 유지, 클래스의 재사용이 용이하도록 해 준다.

4. Polymorphism (다형성)

Polymorphism : A child class can overwrite a method it inherited from a parent class. (It's more complex than that, but enough for our purposes.)

• 어떤 변수,메소드가 상황에 따라 다른 결과를 내는 것

• 오버로딩(Overloading) : 하나의 클래스에서 메소드의 이름이 같지만, 파라메터가 다른 것
• 오버라이딩(Overriding) : 부모 클래스의 메소드를 자식 클래스의 용도에 맞게 재정의하여 코드의 재사용성을 높임

OOP in JavaScript

OOP in JavaScript : Prototypes

"Classical OOP" : classes

class ---(instantiation)---> Instance

• Objects(instances) are instantiated from a class, which functions like a blue print.
• instance? 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체
  oop의 관점에서 객체가 메모리에 할당되어 실제 사용될 때 ‘인스턴스’라고 부른다.

OOP in JS : Prototypes

prototype <---(prototypal inheritance / delegation) --- Object
prototype이 가지고있는 methods를 object는 접근할 수 있다.

• Objects are linked to a prototype object.
• Prototypal inheritance : The prototype containes methods(behaivor) that are accesible to all objects linked to that prototype.
• Behavior is delegated to the linked prototype.

Objects delegate their behavior(methods) to the prototype, 반면 classical oop 에서는 methods are actually copied from the class to the object.

ex) Array

const num = [1,2,3];
num.map(v => v * 2);

mdn website)
Array.prototype.keys();
Array.prototype.lastIndexOf;
Array.prototype.map();

Array.prototype is the prototype of all array objects. We create in JS. Therefore, all arrays have access to the map method.

즉 Prototypal inheritance 이기에 가능한 것!