클래스(Class) - JavaScript

JavaScript

클래스(Class) JavaScript

---

Class란

클래스는 객체를 생성하기 위한 템플릿입니다. 또한 클래스는 특별한 함수입니다. 예를 들면 붕어빵 틀과 같이 여러 번 반복된 작업을 해야 하고 팥, 슈크림과 같이 내용을 바꾸어 모양은 같지만 다른 붕어빵을 만들 수도 있습니다. 객체를 정리할 수 있도록 도와주는 역할을 합니다.

Class 선언

•  클래스는  생성자를 통한 인스턴스 생성 및 초기화, 메서드로 구분하여 선언합니다.

class guy{
	//생성자
	constructor(name, age) {
    	//인스턴스 생성 및 초기화
    	this.name = name;
        this.age = age;
    }
    
    greeting() {
    	console.log(`hi I'm ${this.name}`)
    }
}
//인스턴스 생성
const me = new guy('mxx', 20);
//인스턴스의 프로퍼티 참조
console.log(me.age); //20
//메서드 호출
me.greeting(); // hi I'm mxx

Class vs Object

• 위의 설명과 같이 클래스가 틀이라면 오브젝트는 그 틀로 내용물을 넣어 만드는 결과물이라고 할 수 있습니다.
• 아래에 선언된 Person이라는 클래스를 이용해 mxx (20)라는 person을 쉽게 생성할 수 있게 됩니다.
• 또한 Class는 생성자 함수와는 다르게 new 연산자 없이 호출하면 타입 에러가 발생합니다.

class Person{
	constructor(name, age) {
		//인스턴스 프로퍼티
		this.name = name;
		this.age = age;
	}
	// methods
	speak() {
		console.log(`${this.name}: hello!`);
	}
}
// 인스턴스 생성
const mxx = new Person('mxx', 20);
console.log(mxx.name); // mxx
console.log(mxx.age); // 20
mxx.speak(); // mxx: hello!

Getter and Setters

• 클래스로 새로운 객체를 만들 때 조건을 넣어 조건에 부합하지 않으면 부합하지 않을 때 사용할 수 있도록 세팅한 값을 이용하는 문법입니다.
• 사용자가 age를 음수로 선언하더라도 나이가 마이너스일 불상사를 없앱니다.

class User{
	constructor(firstname, lastname, age) {
		this.firstname = firstname;
		this.lastname = lastname;
		this.age = age; // this.age는 getter로 값을 이동, 등호 뒤에 age는 setter를 호출
	}
	get age() {
		return this._age; // 앞에 기호를 넣는 이유는 콜스택이 넘칠수 있기 때문
	}                   // setter에 같은 변수를 사용하면 재귀처럼 자신을 부름
	set age(value) {
		//if (value < 0) {
		//		throw Error("age can not be negative");
		//}
		this._age = value < 0 ? 0 : value;
	}
}

const user1 = new User('Steve', 'Jobs', -1);
console.log(user1.age); // 0

Fields (Public, Private)

• 생성자를(Constructor) 쓰지 않고 Class를 선언할 수 있습니다. 아래 코드와 같이 퍼블릭 필드 값은 새로운 객체를 생성하여도 바로 사용할 수 있지만 프라이빗 필드 값은 사용할 수 없습니다. (클래스 내부에서만 읽고 쓰는 것이 가능합니다.)
• 클래스 필드는 아직 정식 표준으로 채택된 내용은 아니다.

class Experiment {
	publicField = 2;
	#privateField = 0; //#과 함께 변수를 선언하면 읽을 수도 수정할 수도 없는 값이 생성됨
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined

static

• 클래스에 사용되는 고유의 값이나 동일하게 사용되는 메소드를 static으로 정리하여 중복되는 메모리의 사용을 줄일 수 있습니다. (사파리 브라우저에서는 작성일 기준으로 지원되지 않습니다.)

class Article {
static publisher = "MXX-Code"
	constructor(articleNumber) {
		this.articleNumber = articleNumber;
	}

	static printPublisher() {
		console.log(Article.publisher);
	}
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher); // undefined 오브젝트 마다 할당되어지지 않음
console.log(Article.publisher); // MXX-Code 클래스 자체에 붙어있음
Article.printPublisher(); // MXX-Code

상속 & 다양성

• 아래 코드와 함께 직사각형, 삼각형 도형들을 만든다고 예를 들어 설명하자면...

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

class Rectangle extends Shape {}; // extends 이용하면 Shape의 모든 내용 포함됨
class Triangle extends Shape {);

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color of
console.log(rectangle.getArea()); // 400

const triangle = new Triangle(20, 20, 'red');
triangle.draw(); // drawing red color of

• 하나의 클래스를 미리 지정하여 extends로 활용하면 다양한 도형을 만들 때 수고가 덜고 수정이 용이해진다.

// 수정이 용이함
class Shape() {
	draw() {
	        console.log(`drawing ${this.color} color!`); //수정을 원하면 Shape의 코드 하나만 수정하여도 값을 바꿀수 있다.
	}
}
rectangle.draw();  // drawing blue color!
triangle.draw();  // drawing red color!

오버 라이딩

class Triangle extends Shape {
    // 오버라이딩
    draw() {
        super.draw()        // super를 통해 부모 클래스의 내용도 활용함 -> drawing red color of 출력 후 🔺 출력
        console.log(`🔺`); //오버라이딩만 하게 된다면 🔺만 출력
    }
    getArea() {
        return (this.width * this.height) / 2;
    }
};

const triangle = new Triangle(20, 20, 'red');
triangle.draw(); // drawing red color of, 🔺
console.log(triangle.getArea()); // 200

Instance of

instanceof를 통해 A라는 클래스가 B 통해 만들어진 클래스인지 아닌지 True of False로 반환합니다.

console.log(rectangle instanceof Rectangle); // true

 

소소한 팁 - 이외의 toString과 같은 미리 정리된 메서드들도 오버 라이딩이 가능하다는 점이 있습니다.

 

참고 자료 - (MDN-Classes), 엘리 드림 코딩)