[JavaScript] 클래스

기본 문법

클래스

클래스란 객체 지향 프로그래밍을 정의하는 개념 중 하나로, 똑같은 객체를 여러 번 다시 찍어내기 위한 틀. 즉, 템플릿이다.

 

인스턴스

인스턴스란 객체를 만들기 위한 틀을 의미하는 클래스를 실제로 사용할 수 있는 객체로 만든 것. 즉, 클래스로 구현된 구체적인 실체를 의미한다.

 

간단하게 말해 클래스가 붕어빵 틀이라면, 인스턴스는 붕어빵이라고 할 수 있다.

 

클래스와 인스턴스 생성

클래스를 생성하기 위해서는 class란 키워드를 사용한다. 이때 클래스 내부에 위치한 생성자 함수 constructor()는 클래스로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드로, 클래스 내부에 딱 한 개만 존재할 수 있다.

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

const aUser = new User('John');
aUser.printName(); // John

 

필드

클래스에 정의할 수 있는 프로퍼티로, 클래스 내부에 키 = 값 형식으로 작성할 수 있으며 , 객체.키로 접근할 수 있다.

class User {
	name = 'Kaylee';
    age = 20;
  	}

const aUser = new User();

console.log(aUser.name); // Kaylee
console.log(aUser.age); // 20

 

클래스 표현식

클래스도 함수처럼 표현식으로 작성할 수 있다.

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

const aUser = new User('John');
aUser.printName();

 

private, protected

클래스의 필드는 public, private 두 가지 타입으로 생성할 수 있으며, 기본 값은 public이다. public 타입은 클래스의 내부와 외부 어디서든 접근할 수 있음을 의미한다. private 타입은 클래스 외부에서는 접근할 수 없는 필드로, 프로퍼티 이름 앞에 #을 붙여 작성할 수 있다.

class User {
	name = 'John';
    #age = 20;
    
    printAge() {
    console.log(this.#age);
    }
 }

const aUser = new User();

console.log(aUser.name); // John
console.log(aUser.age); // undefined
aUser.printAge(); // 20

 

static

인스턴스 없이도 사용할 수 있는 프로퍼티나 메서드를 정적 프로퍼티 메서드라고 하며, static 키워드를 붙여 작성할 수 있다.

class User {
	static greeting() {
    console.log('hello');
    }
 }
 
User.greeting(); // hello

 

상속

상속이란 기존의 클래스에 기능을 추가하거나 재정의하는 등, 클래스를 확장하여 기존의 클래스를 기반으로 하는 새로운 클래스를 만들 수 있는 개념을 의미한다.

class SmartPhone {
	type = 'Phone';
    
    greeting() {
    console.log('i am a smart phone');
    }
 }
 
class iPhone extends SmartPhone {
	brand = 'Apple';
    }
    
const aiPhone = new iPhone();

console.log(aiPhone.type); // Phone
console.log(aiPhone.brand); // Apple
aiPhone.greeting(); // i am a smart phone

 

instanceof

좌변에 주어진 대상이 우변에 주어진 클래스의 인스턴스인지에 따라 boolean 값을 반환한다.

class SmartPhone {
 /* ... */
 }
 
const iPhone = new SmartPhone();
console.log(iPhone instanceof SmartPhone); // true

 

메서드 오버라이딩

클래스를 상속받게 되면, 부모 클래스에서 정의된 메서드를 자식 클래스에서도 사용할 수 있다. 이때 매서드를 물려받은 자식 클래스에서 동일한 이름으로 메서드를 재정의 할 수 있는데, 이를 오버라이딩이라고 부른다.

class SmartPhone {
	type = 'Phone';
    
    greeting() {
    console.log('i am a smart phone');
    }
 }
 
class iPhone extends SmartPhone {
	brand = 'Apple';
    
    greeting() {
    console.log('i am a iPhone');
    }
 }
 
const aiPhone = new iPhone();
aiPhone.greeting(); // i am a iPhone

 

생성자 오버라이딩

메서드 오버라이딩과 동일하게, 생성자 역시 오버라이딩 가능하다. 생성자 함수를 오버라이딩 할 때 부모의 생성자 함수를 호출하는 super()를 이용하면 된다. 아래 코드의 출력결과를 보면 부모 클래스 생성자와 오버라이딩 생성자가 모두 실행되는 것을 확인할 수 있다.

class SmartPhone {
	constructor() {
	console.log('i am a smart phone');
    }
 }

class iPhone extends SmartPhone {
	constructor() {
    super();
    console.log('i am a iphone');
    }
 }
 
const aiPhone = new iPhone();

/*
i am a smart phone
i am a iphone
*/