(JS) Class

Mirrer·2022년 5월 1일

JavaScript

목록 보기

7/24

클래스(Class)란?

객체를 생성할 수 있는 템플릿

자바스크립트는 프로토타입 베이스언어이다.

우리가 앞서 살펴본 생성자 함수 또한 프로토타입을 통해 객체를 간편하게 생성한다.

es6에서 도입된 클래스는 생성자 함수를 대신해 조금 더 간편하게 객체를 생성하는 문법적 설탕(Syntax Sugar)이다.

자바스크립트에서는 기본적으로 객체를 생성할 때 두가지 방법 중 클래스를 사용해 모던한 프로그래밍을 권장한다.

이렇게 클래스를 통해 객체를 조금 더 간편하게 생성하고 생성된 객체를 인스턴스라고 부른다.

// 생성자 함수
function Fruit1(name) {
  this.name = name;
  this.display = () => {
    console.log(`name: ${this.name}`);
  }  
}
// 클래스
class Fruit2 {
  // 생성자: new 키워드로 객체를 생성할때 호출되는 함수
  constructor(name) {
    this.name = name;
  }
  display() {
    console.log(`name: ${this.name}`);
  }
}

// 생성자 함수
const apple1 = new Fruit1('apple'); 
const orange1 = new Fruit1('orange'); 
// 클래스
// apple2, orange2는 Fruit2 클래스의 인스턴스
const apple2 = new Fruit2('apple')
const orange2 = new Fruit2('orange'); 

// 생성자 함수
console.log(apple1); // Fruit1 { name: 'apple', display: [Function (anonymous)] }
console.log(orange1); // Fruit1 { name: 'orange', display: [Function (anonymous)] }
// 클래스
console.log(apple2); // Fruit2 { name: 'apple' }
console.log(orange2); // Fruit2 { name: 'orange' }

클래스의 사용방법

필드(Field)

필드란 클래스를 구성하는 변수, 메서드를 의미한다.

생성자함수에서 정의된 변수는 초기화 생략 가능하며 인스턴스를 생성하고 바로 변수를 초기화하는 경우에는 명시한다.

class Fruit {
  // 생략 가능
  // name;  
  constructor(name) {
    this.name = name;
  }

  display() {
    console.log(`name: ${this.name}`);
  }
}

class Fruit {
  // 인스턴스 생성 뒤 바로 초기화
  price = 1000;
  constructor(name) {
    this.name = name;
  }

  display() {
    console.log(`name: ${this.name}`);
  }
}

접근 제어자

내부에서 필요한 데이터를 외부에서 수정할 수 없게 접근을 제어하는 것을 접근 제어자라고 한다.

자바스크립트에서 클래스의 기본 접근 제어자는 public이며 **private** 접근 제어자를 사용하려면 변수, 메서드앞에 #를 붙힌다.

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

  #display() {
    console.log(`name: ${this.#name}`);
  }
}

const apple = new Fruit('apple');
console.log(apple); // Fruit {}

접근자 프로퍼티 (Accessor Property)

특정 일을 처리하는 행동(method)은 아닌데 프로퍼티의 일부분을 이용해 동작을 제어하는 함수를 접근자 프로퍼티라 한다.

접근자 프로퍼티는 클래스의 변수처럼 보이지만 실제로는 함수를 의미하며 고정된 값이 아닌 호출하는 시점에 데이터를 생성한다.

접근자 프로퍼티의 종류로는 getter와 setter가 있다.

getter : 클래스 함수 앞에 get키워드 사용하며 getter 함수는 호출할 때 데이터에 접근

class Student {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;    
  }

  get fullName() {
    return `${this.lastName} ${this.firstName}`;
  }
}

const student = new Student('수지', '김');
student.firstName = '안나';
console.log(student.firstName); // 안나

// fullName 함수를 호출할 때 연관된 데이터에 접근
// 그래서 이후에 데이터를 변경하면 적용 O
console.log(student.fullName); // 김 안나

setter : 클래스 함수 앞에 set키워드 사용하며 setter 함수는 데이터에 접근할 때 호출

class Student {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.lastName} ${this.firstName}`;
  }

  set fullName(value) {
    console.log('set', value);
  }
}

const student = new Student('수지', '김');

// fullName 함수에 데이터를 할당할 때 연관된 데이터에 접근
student.fullName = '이환'; // set 이환

상속 (Extends)

상속은 extends키워드를 사용하여 클래스의 속성, 행동을 다른 클래스에게 복사하여 코드의 중복을 제거하는 클래스의 문법이다.

상속 이외의 자신만의 추가적인 속성, 행동 정의 가능하다.

// 클래스들의 공통된 속성, 행동을 상속해 코드의 중복 제거
class Animal {
  constructor(color) {
    this.color = color;
  }
  eat() {
    console.log('먹자!');
  }
  sleep() {
    console.log('잔다');
  }
}

class Tiger extends Animal {}
class Dog extends Animal {
  play() {
    console.log('놀자아~~');
  }
}

const tiger = new Tiger('노랑이');
const dog = new Dog('갈색이');

console.log(tiger.color); // 노랑이
console.log(dog.color); // 갈색이
console.log(tiger.sleep()); // 잔다
console.log(dog.play()); // 놀자아~~

super : 상속받은 부모 클래스에 접근하는 키워드

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

class Dog extends Animal {
  constructor(color, name) {
    super(color);
    this.name = name;
  }
  play() {
    console.log('놀자아~~');
  }
}

const dog = new Dog('갈색이', '바둑이');

console.log(dog.color); // 갈색이
console.log(dog.name); // 바둑이

오버라이딩 (Overrinding) : 상속받은 부모의 메서드를 변경

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

class Dog extends Animal {
  constructor(color, name) {
    super(color);
    this.name = name;
  }
  play() {
    console.log('놀자아~~');
  }
  eat() {
    super.eat();
    console.log('사료 먹자!!');
  }  
}
const animal = new Animal('초록이');
const dog = new Dog('갈색이', '바둑이');


console.log(dog.eat());
// 먹자!
 // 사료 먹자!!