이번에는 자바스크립트의 Class키워드와 Super키워드에 대해서 알아보겠습니다.

Class

class 키워드는 문자 그대로 class를 생성할때 사용합니다.
바로 예제를 보시죠

class laptop{
	constructor(name){
    this.name = name;
    }
  
  	printName(){
    	console.log(this.name);
    }
}

이와같이 클래스와 생성자를 생성하고 그 안에 printName이라는 메소드를 추가해주었습니다.
이제 이 클래스를 상속받아 인스턴스를 생성할수 있습니다.

중요한것 한가지가 있습니다! 클래스는 함수 와 다르게 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 점입니다. 호이스팅은 간단하게 설명하면 함수안에 있는 선언들을 함수의 유효 범위의 최상단에 선언하는 것을 뜻합니다.
이게 무슨소리야? 바로 코드 보시죠

catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/

mdn에 있는 예시를 가져왔습니다.
느낌이 오시나요? 코드를 보면 함수의 실행이 함수의 선언보다 먼저 있음에도 정상적을 작동하는 것을 볼수있습니다. 이렇게 함수가 작동하도록 해주는것이 호이스팅 입니다.

그럼 돌아와서 클래스는 호이스팅이 되지 않는다고 했습니다.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

위의 코드처럼 클래스를 선언하지 않았는데 인스턴스를 생성하게되면 레퍼런스 에러가 발생합니다.

클래

Super

Super키워드에 대해서 알아보겠습니다.
Super키워드는 객체의 부모 클래스가 가지고 있는 함수를 호출할때 사용합니다.

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

위의 코드를 보면 super.speak()코드를 통해 Lion클래스가 cat클래스의 speak()를 실행하는 모습을 확인할수 있습니다.

Javascript에 class키워드가 추가되면서 javascript를 통해 OOP 개발에 더 유용한 도구가 생겼습니다. 하지만 class키워드가 생겼다고 javascript가 클래스 기반 언어로 바뀐것이 아닌, 객체를 생성하고 상속을 다루는데 더 편리한 문법이 추가된것이라는 사실을 기억하시기 바랍니다.