시간 날때마다 MDN-JavaScript reference 자주 확인하고 공부할 것!

class와 object의 차이

class?

• 붕어빵 만드는 기계! (틀)
• blueprint, template 이라고도 불린다.
• declare once ⇒ 이 class에는 이런 데이터가 들어올 수 있어! 라고 정의하고 한번만 선언한다.
• no data in ⇒ class 자체에는 데이터가 들어있지 않다.

object?

• 붕어빵 기계에 들어가는 붕어빵 재료!
  (팥 data를 넣으면 팥붕어빵, 크림 data를 넣으면 크림붕어빵)
• instance of a class ⇒ class를 이용해서 새로운 instance를 생성한 것이 바로 object
• created many times ⇒ 많이 만들 수 있다!
• data in ⇒ class는 정의만 한 것이라, 데이터에 올라가지 않지만 object는 실제 데이터에 올라간다.

class

class 란?

class란, 연관성있는 데이터를 한데 묶어주는 container 같은 아이!
class안에는, 이렇게 name과 age같은 Property(속성) = field 가 들어있고, speak() 이라는 Function(함수) = method 가 들어있다.

class는 이렇게 서로 연관된 fields 와 methods 로 구성되어져 있다.

간혹 method는 없고, fields 로만 구성된 class도 있는데, 이를 data class 라고 부른다.

• ES2015(ES6) 부터 도입되었다.
• 기존에 존재하던 프로토타입을 기반으로, class라는 문법만 새로 추가되었다! ⇒ Syntatic Sugar

Syntatic Sugar?

👉 프로그래밍 언어 차원에서 제공되는 논리적으로 간결하게(=달달하게) 표현하는 것
👉 중복되는 로직을 간결하게 표현하기 위해 나타나게 되었다.
(예를 들어 x = x + 5; 라는 코드는 카카오 99% 버전이고, x += 5; 가 달달한 Syntatic Sugar이다.)

---

Method (메소드)

어떤 객체의 속성으로 접근해서 사용하는 함수를 메소드(method)라고 부른다.

⇒ 함수라는 이름이 있는데, 왜 메소드라고 부르는 걸까?
그 이유는 다른 함수와는 다르게 동작하기 때문!

메소드를 사용하면 : 데이터와, 그 데이터와 관련된 동작을 객체라는 하나의 단위로 묶어서 다룰 수 있다!

---

this

메소드 호출 시에 해당 메소드를 갖고 있는 객체에 접근할 수 있다.

생성자 안에서 this 키워드를 사용하면 새로 만들어질 객체의 속성을 지정해줄 수 있다.

함수 내부의 this 키워드가 실제로 무엇을 가리킬 것인가는, 메소드가 어떻게 정의되는가에 의해 결정되는 것이 아니라 메소드가 어떻게 사용되는가에 의해 결정된다.

이게 뭔말인고 하니...

function introduce() {
  return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}

const person1 = {
  name: '솔미',
  introduce // 재사용된 함수
};

const person2 = {
  name: '코린이',
  introduce // 재사용된 함수
};

person1.introduce(); // 안녕하세요, 제 이름은 솔미입니다.
person2.introduce(); // 안녕하세요, 제 이름은 코린이입니다.

introduce 라는 같은 함수는 person1 과 person2 에서 재사용 했는데도, 결과값을 보면 person1과 2는 다른 이름이 출력된다. 즉, introduce 함수에 사용된 this 는 person1,2 에서 각각 다른 객체를 가르킨 것!

같은 함수임에도 불구하고 어떤 객체의 메소드로 사용되느냐에 따라 메소드 내부의 this가 가리키는 객체가 달라질 수 있다!

다만, 화살표 함수에서는 this 키워드를 전혀 다르게 취급한다.
화살표 함수와 this 이야기는 다음 시간에 계속...

---

class 선언

class Person {
  constructor(name, age) { // constructor
    this.name = name;  // field
    this.age = age;
  }
  speak() { //method
    console.log(`${this.name} hello!`);
  }
} // 먼저, class에 어떤 data가 들어갈 지 정의한 후에

const solmi = new Person("solmi", 26); // 실제 data를 입력
console.log(solmi.name) // solmi 출력
console.log(solmi.age) // 26 출력

new

⇒ 이렇게 객체를 만들 때 new 키워드와 함께 사용하는 함수를 생성자 (Constructor) 라고 부른다!

⇒ 생성자의 이름은 변수와는 다르게 대문자로 시작한다.

constructor

⇒ 생성자의 prototype 속성에 자동 생성되는 객체 속성이다. 이 속성에는 생성자 자신이 저장된다.

이를 통해, 어떤 객체가 어떤 생성자로부터 생성되었는지 알아낼 수 있다.

solmi.constructor === Person // true

---

Getter (획득자) & Setter (설정자)

Javascript에서 getter, setter 를 사용하는 이유는 OOP의 기본 개념 중 하나인 캡슐화(encapsulation) 때문이다.
캡슐화란? 일단 지금까지 이해한 바로는, API는 노출하되, 내부 오브젝트의 성질을 외부에서 직접 관여하지 못하게 감추고, 오직 오브젝트가 제공하는 루트를 통해서만 관여할 수 있게끔 하는 것....이다.

아직은 너무너무너무X99 어려운 개념이라 여기서 이만 말줄임...ㅠㅠ OOP에 대해 더 고민해보고, 그 후에 객채화나 추상화 등등 OOP의 개념들을 좀 정리해봐야겠다.

class User {
  constructor {firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age; //_age 라는 이름을 사용했지만 constructor나 console.log 등에서는 age를 이용할 수 있다. 바로 내부적으로 getter&setter를 이용했기 때문
  }

  set age(value) { // _age 에 저장된 값이 0미만이라면 0을 쓰고, 아니라면 지정된 value를 사용하겠다.
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User("steve", "jobs", -1);
console.log(user1.age); // 0 출력( user1의 age 를 -1로 지정했지만, getter&setter 설정값 때문에 0이 출력됨)

⇒ 솔직히 이게 뭔말인지 @_@ 진짜 넘나 어려운 개념이라 일단 스킵....ㅠ 나중에 OOP 정리하면서 다시 공부해봐야 겠당

---

Public & Private fields

class Experiment {
   publicField = 2;
   #privateField = 0; 
}

const experiment = new Experiment();
console.log(experiment.publicField); // 2 출력
console.log(experiment.privateField); // undefined 출력

publicField : 외부에서 접근 가능
#privateField : 앞에 # 을 붙이면 class 내부 에서만 접근 가능. 외부에서는 수정은 커녕 읽을 수도 없음.

최근에 추가된 기능이라, IE, 사파리 등에서 지원되지 않는다.

---

Static (정적 메소드)

class Article {
  static publisher = "Solmi";
    constructor(articleNember) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1); 
console.log(article1.publisher); // undefined 출력
console.log(Article.publisher); // Solmi 출력

object에 상관없이, class 자체에 연결된 메소드

여러가지 다른 object의 값과는 별개로, 모든 object에 공동으로 적용하고 싶은 field나 method는 static 으로 지정할 수 있다.

TypeScript 에서도 자주 사용된다.

• 들어오는 data에 상관없이 공통적으로 사용되는 값은 static 으로 작성하면 메모리의 사용을 줄일 수 있다.
• 어플리케이션(application)을 위한 유틸리티(utility) 함수를 생성하는데 주로 사용한다.

최근에 추가된 기능이라, IE, 사파리 등에서 지원되지 않는다.

---

* (Generator 메소드)

generator 메소드를 정의하려면, 메소드 이름 앞에 * 기호를 붙여준다.
⇒ iterable 객체를 반환하는 특별한 형태의 메소드이며, Generator 함수와 동일하게 동작한다.

자세한 내용은 Iterable 에 대해 공부할때 더 자세히 정리!!

---

상속(Inheritance)과 다형성(Polymorphism)

한 클래스의 기능을 다른 클래스에서 재사용할 수 있다.

class Parent { // 부모 클래스 or 슈퍼 클래스(superclass)
  // ...
}

class Child extends Parent { // 자식 클래스 or 서브 클래스(subclass)
  // ...
}

⇒ extends 키워드를 통해 Child 클래스가 Parent 클래스를 상속

이를 '부모 클래스-자식 클래스 관계' 혹은 '슈퍼 클래스(superclass)-서브 클래스(subclass) 관계' 라고 부른다!

클래스 상속이 이루어지면, 다음과 같은 일이 가능하다.

• 자식 클래스를 통해 부모 클래스의 정적 메소드와 정적 속성을 사용할 수 있다.
• 부모 클래스의 인스턴스 메소드와 인스턴스 속성을 자식 클래스의 인스턴스에서 사용할 수 있다.

class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {} // 상속!
class Triangle extend Shape { // 다형성!
  draw() {
    super.draw();
    console.log("🔺");
  }
  
  getArea() {
    return (this.width * this.height) / 2;
  }
}

const rectangle = new Rectangle(20, 20, "blue");
rectangle.draw(); // drawing blue color of 호출
rectangle.getArea(); // 400

const triangle = new Triangle(20, 20, "red")
triangle.draw(); // drawing red color of + 🔺 2개가 호출
triangle.getArea(); // 200

super

자식 클래스에 같은 이름의 속성을 정의한 경우 문제가 부모 클래스의 속성은 호출되지 않는다. 이 때 super를 이용해서 부모 클래스와 자식 클래스의 요소를 모두 호출할 수 있다.

• 생성자 내부에서 super를 함수처럼 호출하면, 부모 클래스의 생성자가 호출
• 정적 메소드 내부에서는 super.prop과 같이 써서 부모 클래스의 prop 정적 속성에 접근 가능
• 인스턴스 메소드 내부에서는 super.prop과 같이 써서 부모 클래스의 prop 인스턴스 속성에 접급 가능

위의 예제에서 class Triangle extends Shape { } 안에 draw 메소드에 super.draw(); 로 부모 클래스의 속성을 호출한것이 이에 해당한다.

Override

부모 클래스에 존재하는 필드나 메소드를 자식 클래스에서 재정의하여 사용할 수 있다.

위의 예제에서 class Triangle extend* Shape { } 안에 Triangle만의 넓이 계산법과 🔺를 출력하는것을 재정의해 준것이 다형성-오버라이딩에 해당한다.

---

instanceof

console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true
console.log(triangle instanceof Rectangle); // false

instanceof 왼쪽에 있는 object가 instanceof 오른쪽에 있는 class 의 instance 가 맞는지 checking

1. console.log(triangle instanceof Shape);
   triangle은 Triangle의 instance이고, Triangle은 Shape를 상속받았기 때문에 true!

2. console.log(triangle instanceof Object);
   javascript 에서 만든 모~~든 class는 javascript의 Object를 상속받은 것이다!
   ⇒ VScode에서 command 키를 누른 채로 Object 를 클릭해보면 이미 정의된 Object 를 볼 수 있당!!

---

넘나 어렵군.....