[Javascript] 자바스크립트 class 기초

Class 생성

'use strict'

// 1. Class declarations
class Person() {
	// constructor
    constructor(name, age) {
    	this.name = name;
        this.age = age;
    }
    
    // method
    speak() {
    	console.log(`${this.name}: hello!`);
    }
}

const ellie = new Persion('ellie', 27);
console.log(ellie.name);

 

Getter and Setter

class User {
	constructor(firstName, lastName, age) {
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    
    // 값을 return
    get age() {
    	return this.age;
    }
    
    // 값을 설정
    set age(value) {
    	if (value < 0) {
        	throw Error('age can not be negative');
        }
    	this.age = value;
    }
    
    // 즉 constructor의 this.age = age를 살펴보면 this.age는 getter 호출, = age는 setter 호출
}

// 사용자가 나이를 잘못된 값이 -1로 입력
const user1 = new User('steve', 'Job', -1);

getter와 setter를 쓰는 이유는 사용자가 실수로 parameter 값을 잘못된 값을 넘겨주었을 때, 이 때 발생할 치명적인 결과를 막기 위해서 우리가 따로 설정하는 값이 필요하기 때문이다. 앞선 코드 예시는 사용자가 자신의 나이를 -1로 설정했을떄의 예시지만 엘리 유투버가 든 예는, 커피 자판기 로직을 프로그램으로 만들었을때 커피 주문하는 갯수를 사용자가 실수로 -1을 넘겨준다면 이 때는 치명적인 오류이기 때문에 우리가 getter와 setter로 초기값을 설정해 두는 것이 중요하다. (지금은 잘 이해가 안가지만 쓰다보면 이해가 가겠지 ^^...)

하지만 이렇게 쓴다면 this.age에 age 값을 할당할 때, 바로 값을 할당하는 것이 아니라 setter를 호출하게 된다. setter를 호출할 때, this.age 값을 넣을때 다시 또 setter를 호출하게 된다. 그래서 해당 파일을 사용하게 된다면 'Uncaught RangeError: Maximum call stack size exceeded' 라는 오류가 나타나게 된다. 따라서, 이런 오류를 방지하기 위해서는 getter와 setter에 있는 값을 다음과 같이 변경해서 사용해야 한다.

get age() {
	return this._age;
}

set age(value) {
	this._age = value;
}

 

Public & Private

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

앞에 '#' 해시가 들어가게 된다면 class 내부에서만 접근이 가능한 private 한 변수가 된다.

 

Static

class Article {
	static publisher = 'Dream Coding';
    constructor(articleNumber) {
    	this.articleNumber = articleNumber;
    }
    
    static printPublisher() {
    	console.log(Article.publisher);
    }
}

const article1 = new Article(1);
const article2 = new Article(2);

static은 object마다 할당되는 것이 아니라, class마다 할당되는 것이다. 만약 우리가 static을 사용하지 않았다면, article1.publisher 형태를 출력할 수 있었을 것이다. 하지만, static을 사용했기 때문에 Article.publisher 형태로만 출력이 가능하다. 

즉, object와 상관없이 공통적으로 쓰이게 되는 것이라면 static으로 설정하는 것이 좋다.

 

Inheritance

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 width * this.height;
    }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
	getArea() {
    	return (this.width * this.height) / 2;
    }
}

// 객체 생성
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();

Inheritance를 통해 동일한 것들을 재사용할 수 있다. 또한, 오버라이딩을 통해 재선언을 할 수 있다.

 

JavaScript reference 

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

 

출처: 드림코딩 by 엘리