오늘의 키워드📌

• 클래스(class)

1. 클래스(class)

function user(first, last) {
  this.firstName = first
  this.lastName = last
}

const test = new user("ABC", "abc")

console.log(test)

new 라는 키워드를 통해서 user 함수를 실행했고 이때 실행한 user 함수를 생성자 함수라고 한다. 무언가를 생성한다는 뜻인데 무엇을 생성하는 것일까? 바로 객체 데이터다.

const user = {}는 원래 위의 코드처럼 복잡하게 처리를 해야 되지만 굉장히 손쉽게 중괄호 기호를 통해서 만들어냈다.

이처럼 특정한 기호를 가지고 데이터를 만들어 내는 것을 리터럴 방식이라고 한다. 대표적으로 "" 를 사용하는 문자 데이터도 리터럴 방식이다.

const test = new user("ABC", "abc")

new 라는 키워드를 통해 생성자 함수로 실행한 결과를 반환해서 할당된 변수 test를 인스턴스 라고 부른다.

결국 this.firstName에서 this는 인스터인 test를 가리킨다.

즉, new 라는 키워드를 통해서 실행된 user()는 생성자 함수이고 그 실행 결과가 반환된 test는 인스턴스다. 이때, this.firstName과 this.lastName에서 this는 인스턴스 test를 가리킨다.

1-1. 생성자 함수명 Pascal case

생성자 함수를 살펴보았는데, 일반 함수와 똑같이 function 키워드를 사용하는 것을 알 수 있었다. 때문에 일반 함수와 구분하기 어려워서 첫 글자가 대문자로 시작하는 Pascal Case를 사용한다.

function User(first, last) {
  this.firstName = first
  this.lastName = last
}

const test = new User("ABC", "abc")

console.log(test)

위와 같이 생성자 함수는 일반 함수와 구분을 하기 위해 개발자들이 암묵적으로 첫 글자가 대문자로 시작하는 Pascal Case를 사용한다.

1-2. this

일반(Normal) 함수는 호출 위치에 따라 this를 정의한다.
화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this를 정의한다.

const user = {
  name: "김멋사",
  normal: function () {
    console.log(this.name)
  }
  arrow: () => {
    console.log(this.name)
  }
}

user.normal() // result: 김멋사
user.arrow() // result: undefined

const user = {
    name: "김멋사",
    normal: function () {
        console.log(this.name)
    },
    arrow: () => {
        console.log(this.name)
    }
}

user.normal()
user.arrow()

const Lee = {
    name: "Lee",
    normal: user.normal,
    arrow: user.arrow
}

Lee.normal() // result: Lee
Lee.arrow() // result: undefined

const timer = {
    name: "time",
    timeout: function () {
        setTimeout(() => {
            console.log(this.name)
        }, 1000)
    }
}
timer.timeout() // result: time

const timer = {
    name: "time",
    timeout: function () {
        setTimeout(function () {
            console.log(this.name)
        }, 1000)
    }
}
timer.timeout() // result: undefined

1-3. ES6 Classes

기존 원시적인 작성법

function User(first, last) {
  this.firstName = first
  this.lastName = last
}

User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

const a = new User("aaa", "AAA")
const b = new User("bbb", "BBB")

console.log(a) // result: User {firstName: 'aaa', lastName: 'AAA'}
console.log(b.getFullName()) // result: bbb BBB

ES6 Class

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
  	return `${this.firstName} ${this.lastName}`
  }
}

const a = new User('aaa', "AAA")
const b = new User("bbb", "BBB")

console.log(a) // result: User {firstName: 'aaa', lastName: 'AAA'}
console.log(b.getFullName()) // result: bbb BBB

1-4. extends 상속, 확장

자바스크립트 class에서 extends를 통해 특정한 class를 가지고 와서 상속 혹은 확장할 수 있다.

그때 상속 혹은 확장된 클래스는 super()라는 함수를 통해 내부에서 원하는 위치에 실행할 수 있다.

class Vehicle {
  constructor(name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}
const myVehicle = new Vehicle("운송수단", 2)
console.log(myVehicle)

class Bicycle extends Vehicle {
  constructor(name, wheel) {
    super(name, wheel)
  }
}
const myBicycle = new Bicycle("삼천리", 2)
const childBicycle = new Bicycle("세발", 3)
console.log(myBicycle)
console.log(childBicycle)

class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car("자동차", 4, true)
const childCar = new Car("유아자동차", 4, false)
console.log(myCar)
console.log(childCar)