javascript에서 class 사용하기

ES6부터 자바스크립트에서도 class 문법이 지원된다.

클래스는 객체를 생성하는 탬플릿으로 재사용할 수 있고, 내부의 변수와 메서드를 추상화할 수 있다.

class 사용하기

// class 표현식
const Data = class {
	constructor(name) {
    	this.name = name;
    }
    get name() {
    	return "이름은 " + this._name + "입니다.";
    }
    set name(name) {
    	if (name.length <= 3) {
        	alert("Too Short");
        } else { 	       	
	    	this._name = name;
        }
    }
}

// class 선언식
class Data {
	constructor(name) {
    	this.name = name;
    }
    get name() {
    	return "이름은 " + this._name + "입니다.";
    }
    set name(name) {
    	if (name.length <= 3) {
        	alert("Too Short");
        } else { 	       	
	    	this._name = name;
        }
    }
}

// 출력되는 값은 같다.
const data = new Data("HI"); // alert("Too Short") 출력
console.log(data.name); // 이름은 undefined입니다.

data.name = "HIHIHI"; 
console.log(data.name); // 이름은 HIHIHI입니다.

• 위와 같은 방법들로 클래스를 사용할 수 있다.

class User {
  constructor(name) {
    // setter를 활성화합니다.
    this.name = name;
  }

  get name() {
    return this.name;
  }

  set name(value) {
    if (value.length < 4) {
      console.log("이름이 너무 짧습니다.");
      return;
    }
    this.name = value;
  }
}

let user = new User("lee"); // undefined

• set 함수는 생성자가 실행될 때 실행될 수 있다. 참조

const Data3 = class Person {
	  constructor(nickName) {
    	Person.nickName = nickName;
    }
    get name() {
    	return "이름은 " + this._name + "입니다.";
    }
    set name(name) {
    	if (name.length <= 3) {
        	alert("Too Short");
        } else { 	       	
	    	this._name = name;
        }
    }
}

const data = new Data3("kim");
console.log(data.name); // 이름은 undefined입니다.

data.name = "1245673";
console.log(data.name); // 이름은 1245673입니다.

console.log(data3.name); // Person

• class는 변수에 할당될 수 있다.
• named class에서 name은 이 클래스의 이름이다.

function makeClass() {
  return class {
    clg() {
      console.log("CLG");
    }
  };
}

const c = makeClass();
const cc = new c();
cc.clg();

• class는 동적으로 생성될 수 있다.

extends 상속

• 클래스는 다른 클래스를 상속받아 사용할 수 있다.

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

class Detail extends Person {
	constructor (name, age) {
    	super(name);
        this.age = age;
    }
}

const data = new Detail("park", 15);

console.log(data.name); // park
console.log(data.age); // 15

• super를 통해서 상속받은 부모 클래스의 생성자 함수를 호출할 수 있다.
• super.메서드 로 생성자뿐만 아니라 부모 클래스의 다른 메서드도 접근할 수 있다.
• 자바스크립트의 클래스는 다중 상속이 불가능하다.
• 다중 상속을 구현하고자 한다면, 믹스인 기능을 사용할 수 있다.

class JsClass {
  #id;
  #password;
    
  #vaildId() {
    // private method
  }
  
  getId() {
    return this.#id;
  }
  setId(id) {
    this.#id = id;
  }
}

• 클래스 내부에서 선언된 변수와 메서드는 기본적으로 public이며 외부에서 접근 가능하다.
• ES2019부터 추가된 기능으로, 변수나 메서드 이름 앞에 #을 붙이면, private 변수나 메서드가 된다.
• 이렇게 encapsulation된 클래스에서 private 변수는 해당 클래스의 scope 내부에서만 사용될 수 있고, 외부에서 private 변수나 메서드에 접근 시 syntax error가 발생한다.

참고 자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes, https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/class

class 식 - JavaScript | MDN

Classes - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields

Private class fields - JavaScript | MDN