[JavaScript] Class와 기본문법

Class

class는 객체를 생성하기 위한 템플릿이다.

class Car {
  // 맴버변수
  speed
  fuel
  door


  // 메서드
  drive() {
    this.speed++
    this.fuel--
  }
}

예시를 들어보자. 나는 방금 Car class를 선언하여 Car설계도(템플릿)를 만들었다.
이 class 안에서 쓰이는 변수를 멤버변수, 함수를 메서드라고 부른다.

instance

const k3 = new Car()  
const sclass = new Car()

new 연산자 사용하여 Car의 인스턴스를 생성할 수 있다.
일일이 k3에 speed, fuel..., sclass에 speed, fuel... 중복적으로 선언해주지 않아도, class에 정의된 멤버변수와 메서드를 사용해 줄 수 있다.

객체 지향 프로그래밍 패러다임은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 하는 객체를 만드는 것이다.
모델이 class가 되고 new 연산자를 사용하여 만들어진 객체는, 객체이자 클레스의 인스턴스가 된다.

서브 클래스

const k3 = new Car()  
const sclass = new Car()

k3.drive()
sclass.drive()

앞에서 k3,와 sclass를 선언해 줬다.
그런데 drive 메서드를 사용해 줄 때, k3와 sclass의 연비가 같은 걸 볼 수 있다.
sclass의 연비를 바꿔주자.
기본 Car의 설계도가 아니라 Benz 회사용 설계도를 사용해 줘야겠다.

// subClass
class Benz extends Car {
  drive() {
    this.speed += 3
    this.fuel--
  }

  엉따() {
    return '엉덩이가 따뜻해요'
  }
}


const sclass = new Benz()

서브클래스는 기존의 클래스의 변수(속성)와 메서드를 그대로 상속받아 쓸 수 있으며, 추가로 새로운 상속과 메서드를 더해줄 수 있다.
Benz의 설계도를 기존 Car 클래스에서 상속받아 만들어 줄 수 있다.

오버 라이딩

drive 메소드를 Benz 클래스에서는 기름 당 더 많은 거리를 갈 수 있게 바꿔주었다.
이렇게 기존 Car에 있었던 drive메서드를 Benz에 다시 정의해 줬을 때는, 상속받은 메서드가 아닌 자체 메소드가 사용되며,
이와 같이 똑같은 함수를 덮어씌우는 행위를 오버라이딩이라고 부른다.

constructor 생성자

class Car {
  speed
  fuel
  door

  constructor(door) {
    this.door = door
  }

  drive() {
    this.speed++
    this.fuel--
  }
  numberOfCarDoors() {
    console.log("차문의 개수는" + this.door + "입니다.")
  }
}

constructor 메서드는 객체의 기본 상태를 설정해 주고, new에 의해 자동적으로 호출되며 객체를 초기화할 수 있다.

let k3 = new Car(4)
k3.numberOfCarDoors()

new Car(10,4)를 호출하면 다음과 같은 일이 일어난다.

1. 새로운 객체가 생성된다.
2. 넘겨받은 인수와 함께 constructor 가 자동으로 실행된다. 이때 4가 this.door에 할당된다.

위 과정을 거친 후에 k3.numberOfCarDoors() 같은 객체 메서드를 호출할 수 있다.
constructor 메서드는 클래스 안에 한 개만 존재할 수 있으며,
클래스에 생성자를 정의하지 않아도, 빈 메서드로 기본 생성자가 생성된다.

오버로딩

class Calculator {
  add(a, b) {
    return a + b
  }

  add(a, b, c) {
    return a + b + c
  }
}

const calculator = new Calculator()

console.log(calculator.add(1, 2)) // NaN
console.log(calculator.add(1, 2, 3)) // 6

오버로딩은 가변적인 매개변수를 받게 할 수 있다.
오버로딩은 사실 자바스크립트에는 없는 개념이다. 자바스크립트는 함수의 매개변수가 자유롭기 때문이다.
자바스크립트에서는 제일 아래에 선언한 함수가 같은 이름의 함수를 덮어씌워버린다.
따라서 위 코드를 실행했을 때, 첫 번째 console.log에서는 NaN이 나온다.

void overload(){
  System.out.println("매개변수 0개");
}

void overload(int i, int j){
  System.out.println("매개변수 "+ i + " 그리고 " + j);
}

void overload(double d){
  System.out.println("매개변수 " + d);
}

하지만 다른 언어에서는 매개변수의 개수 도는 자료형에 따라서 함수를 다르게 선언해 줄 수 있다.

자바스크립트에서 가변적인 매개변수를 받고 싶다면, 분기처리를 해주면 된다.

function callback(a, b) {
  if (b) {
    console.log('문자열', a, b);
  } else if (a) {
    console.log('옵션 객체', a);
  }  else {
    console.log('매개변수 없음');
  }
}
overload('kim', 'sally', callback); // 문자열 kim sally
overload({ name: 'kim', value: 'sally' }, callback); // 옵션 객체 { name: 'kim', value: 'sally' }
overload(callback); // 매개변수 없음