[JavaScript] : JS의 꽃 CLASS (2)

지난 게시글에서 클래스에 대한 정의, 인스턴스 생성, 그리고 메서드에 대해서 간략하게 알아보았고 이번 시간에는 인스턴스 내에있는 프로퍼티와 그리고 가장 중요한 특징 중 하나인 상속에 대해서 알아보도록 하자.

✍️ 프로퍼티

📝 프로퍼티 생성

지난 게시글에서 보았듯, 클래스 내에 생성되는 프로퍼티는 클래스 내부에 있는 consturctor에서 정의가 된다.

class Student {
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	static registerStudent(){
		return new Student('Sean', 31);
	}
	display = () => {
		console.log(`${this.name} : ${this.age}`)
	}
    get introduce() {
      return `My name is ${this.name} and I am ${this.age} years old`
    }
	set profile(string){
      [this.name, this.age] = string.split(' is ')
}

constructor 내부를 보면 this 키워드가 사용되어 만들어질 인스턴스에 바인딩되어 프로퍼티를 자동적으로 추가하게 된다.

📝 접근자 프로퍼티

클래스 내부에도 접근자 프로퍼티가 존재하는데 생성된 인스턴스 내부의 프로퍼티 값을 읽거나 저장할 때 사용하는 getter함수와 setter함수로 구성되어 있다.

• getter : 데이터를 읽을 때 (메서드 앞 get)
  => 이름 get 그대로 뭔가를 가지고 온다는 뜻
• setter : 데이터를 저장 할 때 (메서드 앞 set)
  => 이름 set 그대로 뭔가를 설정한다는 뜻

위의 선언된 클래스를 예를 들자면,

const fstStudent = new Student('OH',16);

console.log(fstStduent.introduce) //My name is OH and I am 16 years old

fstStudent.profile = "PARK is 16" // Set으로 프로퍼티 설정

console.log(fstStduent) // {name : PARK, age : 16}

이렇게 getter와 setter함수를 사용해서 프로퍼티에 쉽게 접근 할 수 있다.

📝 필드 정의 제안

JS 클래스 정의 시, 언급되는 단점 중 하나인데 자바에는 private, public, protected와 같은 접근 제한자가 있지만 JS에는 필드에 대한 접근 제한자를 '명확하게' 가지고 있지 않는다.

'명확하게'라는 단어를 사용한 이유는 최근에는 수 많은 요구들로 인해 특정 기능들이 추가되었지만 아직 부족하기는 하다.

• private : 클래스 내부에서만 접근 가능 설정
• public : 클래스,인스턴스 상관 없이 접근 가능

이전까지는 JS 만들어진 프로퍼티는 전부 PUBLIC으로 취급되었지만 2021년 1월 private과 비슷한 기능이 추가되어 다음과 같이 활용 할 수 있다.

class Person {
  #name = '';
  
  constructor (name) {
    this.#name = name;
  }
}

const me = new Persone('Lee');

console.log(me.#name) // 에러 

저렇게 프로퍼티 앞에 #을 붙여주는 것으로 private 설정을 할 수 가 있다.

• static : 클래스 내 static 키워드를 사용하여 인스턴스 생성없이 바로 클래스에 내부로 접근 할 수 있게 도와주는 키워드도 도입되었다.

class MyMath {
  static PI = 22/7;

  static #num = 10;
  static increment() {
    return ++MyMath.#num;
  }
}

console.log(MyMath.PI) // 3.14....
console.log(MyMath.increment()) // 11

JS도 날이 갈수록 개발자들을 많이 생각한다는 것이 눈에 보인다. 최근 JS의 이러한 단점들을 보완하는 타입스크립트가 대세가 되고 있지만..혹시 몰라...이런 모든 기능들을 JS가 보완해서..환골탈태 할지..

✍️ 상속

자 클래스의 메인 특징 중 하나인 상속에 대해서 다룰 차례이다. 여기서는 아주 간단하게 상속이 어떤 식으로 만들어지고 어떤 프로퍼티를 가질 수 있는지까지만 알아볼 것이다.

📝 정의

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의한다.

쉽게 말해 나중에 생성된 클래스 B가 이전의 클래스 A를 참고하여 확장하는 개념으로 B가 A의 자식이 되어 활동하는 것이다.

• 필요성 : 한 줄의 확장 코드 만으로 상위 클래스와 비슷한 클래스를 만들 수 있다. (가독성, 재사용성)

class Tiger {
	constructor(color) {
		this.color = color;
	}
	eat(){
		console.log('먹자!');
	}
	sleep(){
		console.log('자자!');
	}
}

class Dog{
	constructor(color){
		this.color = color;
	}
	eat(){
		console.log('먹자!');
	}
	sleep(){
		console.log(`자자!`);
	}
}
//// 위에 중복된 클래스가...
///  밑에 처럼 깔끔하게~
class Animal {
	constructor(color){
		this.color = color
	}
	eat(){
		console.log('먹자!');
	}
	sleep(){
		console.log('자자!');
	}
}

class Tiger extends Animal {}
class Dog extends Animal {}

만약 확장되는 클래스 내부에 프로퍼티나 메서드를 추가 하고 싶으면 다음과 같이 해주면 된다.

class Cat extends Animal {
	constructor(color, type){
      super(color)
      this.type = type
    }
  
  	walk() {
      console.log("Let's PlayTime")
    }
}

참고로 여기서 사용되는 extends 키워드는 생성자 함수를 받아서 class를 생성할 때 사용 될 수 있다.

• super 키워드 : super는 상위 클래스의 프로퍼티를 그대로 가져올 때 쓴다.
  => 여기서는 constructor를 만들시 상위 속성도 당연히 가져와야 하기 때문에 super를 사용했다.

여기까지가 JS에서 쓰이는 클래스를 간단히 알아본것이다. CS 관련 인스턴스 체인, 프로토타입 상속 과정 등은 직접 읽어보고 코딩을 해가면서 이해해보자.