코딩독학) JavaScript 생성자 함수와 클래스 함수 (ES6)

JavaScript 생성자 함수와 클래스 함수 (ES6)

 

 

생성자 함수를 사용하는 목적은 여러 매개변수를 이용한 객체 함수를 생성해서 재사용 하는 것이다.

 

 

초심자 레벨에서 겨우 함수 선언식과 함수 표현식 그리고 arrow function에 익숙해지고 있을 때 쯤 두둥!! 갑자기 생성자 함수와 클래스 함수가 등장을 했다. 생성자 함수와 클래스 함수는 EcmaScript 6버전에서 새로 등장한 문법이며, IE에서는 지원이 안 된다고 한다.

 

생성자 함수(Constructor Function)

 

생성자 함수란 객체(Object)를 이용한 함수 묶음이라고 생각할 수 있다. 함수 선언식처럼 함수를 선언하지만 일반 함수와 구분하기 위해 함수명을 대문자로 시작한다. 그리고 그 함수를 다시 불러올 때는 new를 붙여서 새로운 ‘인스턴스’를 생성한다.

이 때, 생성자 함수 안에서 정의된 함수는 return문을 작성하지 않아도 결과값을 도출해낸다.

 

예제를 보면, User 라는 생성자 함수를 만들어서 Sophia, David의 경우로 재사용하고 있는 것을 볼 수 있다. 이렇게 생성자 함수는 한 번만 선언하고 인스턴스는 여러 개를 새로 생성할 수 있다.

 

function User(name, age, occupation) {
    this.name = name
    this.age = age
    this.occupation = occupation
    this.sayHello = function() {
        console.log(`Hello, ${this.name}. Good Day!`)
    }
    this.cheerUp = function() {
    console.log(`${this.name}, you are a wonderful ${this.occupation}!`)
    }
}

const Sophia = new User("Sophia", "15", "student")
const David = new User("David", "31", "programmer")

console.log(Sophia.occupation)
Sophia.sayHello()
console.log(David.age)
David.cheerUp()

 

 

클래스 함수(Class Function)

 

클래스 함수는 생성자 함수와 비슷하지만 생성자 함수를 더 고도화시켜 정교한 생성자 함수를 만들기 위해 도입됐다.

생성자 함수와 비슷하지만 약간 다른 점은 매개변수를 constructor 쪽으로 받는다는 점, getter와 setter를 설정할 수 있다는 점이 대표적이다.

 

- getter와 setter

 

자바스크립트의 장점이자 단점이 너무 유연하다는 것인데, 장점은 차치고 단점인 이유는 숫자로 값이 들어와야 할 곳에 문자열이 들어와서 에러가 난다거나 하는 경우들이 있기 때문이다. 그래서 등장한 것이 TypeScript이기도 하다.

getter와 setter를 사용하면 이러한 문제점들을 방지할 수 있다. get 영역 쪽으로 값을 받고, set 영역 쪽에 받는 값의 조건을 설정해주면 된다.

 

예제를 보면, 사람의 나이는 음수가 될 수 없으므로 set 영역에 ‘0보다 작은 값을 age에 받았을 경우 0을 도출하라’ 라고 조건을 설정해준 것을 확인할 수 있다. 그래서 콘솔창에 Patrick의 나이는 0으로 표시된다.

 

class User {
  constructor(name, age, occupation) {
    this.name = name
    this.age = age
    this.occupation = occupation
  }
  get age() {
    return this._age //get과 set에 받는 변수 이름은 콜스택 과포화를 방지하기 위해 통상적으로 
                   //_ ('under-bar')를 붙여 변수를 만든다.
  }
  set age(value) {
    this._age = value < 0 ? 0 : value
  }
  sayHello() {
    console.log(`Hello, ${this.name}. Good Day!`)
  }
  cheerUp() {
    console.log(`${this.name}, you are a wonderful ${this.occupation}!`)
  }
}

const Sophia = new User("Sophia", 15, "student")
const David = new User("David", 31, "programmer")
const Patrick = new User("Patrick", -10, "teacher")

console.log(Sophia.occupation)
Sophia.sayHello()
console.log(David.age)
David.cheerUp()
console.log(Patrick.age)

 

 

 

 

이 글은 드림코딩 by 엘리 님의 유튜브 영상을 공부한 내용으로 작성되었습니다.

https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6