TIL -23. JavaScript : Class

이지연·2020년 7월 27일

JavaScript는 객체지향 중심에 있는 언어는 아니다.
하지만, 프로그래밍에 있어서 class,객체,객체지향은 항상 중요한 주제이다.

여기서, 객체지향이 프로그래밍이란 무엇인가?

프로그램을 객체들로 구성하고,
객체들 간에 서로 상호작용하도록 작성하는 방법

객체는 또 무엇일까?
“실제로 존재하는 것”, 실체라고 생각하면 쉽다.

우리가 일상생활에서 자주 보는 자동차를 생각해보면, 자동차의 수많은 구조들이 있다. 그 수많은 구조들이 틀을 짜놓고, 비슷한 모양으로 공장처럼 찍어낼 수 있는 것! 그것이 바로 객체라고 생각하면 된다.

객체를 매번 만들어서 사용해도 좋지만, 큰 규모의 객체이거나 비슷한 모양의 객체를 계속 만들어야 한다면 class라는 설계도를 통해 만들면 된다.

let 객체명 = {
	프로퍼티의 이름(key): 프로퍼티의 값(value)
     }

3.생성자(Constructor)

객체(Object)의 설계도인 클래스(class)는 문법이 비슷하다.
생성자 함수
아래와 같이 class로 객체를 생성하는 과정을 인스턴스라 부른다.

const morning = new Car('Morning', 2000000);
class는 새로운 instance를 생성할 때마다 constructor()메서드라고 호출

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

Car는 class이름입니다. 항상 대문자로 시작하고, CamelCase로 작성해야 합니다.
Car class의 instance를 생성할때마다 constructor메서드가 호출됩니다.
constructor()메서드는 name, price 2개의 argument(인자)를 받습니다.
constructor()메서드에 this 키워드를 사용했습니다. class의 실행범위(context)에서 this는 해당 instance를 의미합니다.
constructor()에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했습니다.
이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다.
멤버 변수는 'this' 키워드로 접근합니다.

const morning = new Car('Morning', 20000000);

인스턴스는 Class 이름에 new를 붙여서 생성합니다.
클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨줍니다.
Car클래스의 instance를 morning이라는 변수에 저장했습니다.
다시 한 번! Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요합니다. new키워드는 constructor() 메서드를 호출하고 새로운 instance를 return해줍니다.
'Morning'이라는 String과 2000000이라는 Number를 Car 생성자에 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었습니다.

Everyday STEP BY STEP