[JavaScript] 함수 생성자와 클래스의 차이

함수 생성자(Constructor Functions)란?

함수 생성자는 여러 프로그래밍 언어에서는 '클래스'와 동의어다. 어떤 경우 사람들은 참조 타입(Reference Types), 클래스(Classes), 데이터 타입, 아니면 간단하게 생성자라고 부른다. 클래스에 아직 익숙하지 않다면, 어떤 속성(properties)과 행동(functions)을 정의하도록 해주고, 그 속성과 행동을 통해 여러 객체가 생성될 수 있도록 해주는 생성자라고 이해하면 된다. 클래스는 객체로서 집을 짓기 위한 청사진이라는 비유를 많이 한다. 여러 집이 단 하나의 청사진으로부터 시작하는 것처럼, 여러 객체도 단 하나의 클래스로부터 생성될 수 있다.

function Person(name, position) {
    this.name = name,
    this.position = position
}

함수 이름은 의무는 아니지만 대문자로 시작하는 것이 naming convention으로 자리잡았다. 또, 보통 함수는 괄호와 함께 호출하고 생성자 함수는 new 연산자를 사용한다.

const hannah = new Person('Hannah Yoo', programmer)
const jisoo = new Person('Jisoo Han', 'student')

여기서 우리는 Person이라는 객체를 두 개 생성하고 있다.

new 키워드와 함께 생성자 함수가 호출될 때, this는 생성되고 있는 바로 그 객체를 참조한다.

Methods

메소드는 생성자 함수 안에서 속성에 함수를 할당하면서 정의된다.

function Person(name) {
    this.name = name;
    this.hi = function () {console.log(`Hi, My name is ${this.name}`)}
}
const hannah = new Person('Hannah Yoo');
hannah.hi(); // Hi, My name is Hannah Yoo

여기서 hi 속성은 할당된 함수이다. Person 객체가 호출될 때 this 키워드는 새로 생성된 Person 객체에 응답할 것이다.

 

이런 방식으로 메소드가 정의된다 해도 이런 접근법은 약간 귀찮다. Person 인스턴스가 생성될 때마다 그 객체의 hi 프로퍼티에 새로운 함수가 정의되고, 할당된다. 만일 우리가 5개의 Person 객체를 생성한다치면, 각자 모두가 같은 일을 하는 자신만의 hi 메소드를 가지게 되는 것이다. 더 효율적인 방법은 hi 속성을 단 한 번만 정의하는 것이다. 그리고 각 Person 객체는 같은 함수를 참조하면 된다. 이를 위해서는 함수의 prototype을 써볼 수 있다.

function Person(name) {
    this.name = name;
}

Person.prototype.hi = function () {
    console.log('hi my name is' + this.name)
}
const hannah = new Person('Hannah Yoo')
const jisoo = new Person('Jisoo Han')

hannah.hi();
jisoo.hi();

자바스크립트의 모든 함수는 'prototype'이라고 하는 속성이 있는데,이는 거의 빈 객체를 포함한다 말할 수 있다. Person 인스턴스가 생성될 때마다 이 객체는 Person.prototype에 선언된 어떤 속성이든, 메소드든 상속받게 된다.

위 예시를 아래처럼 적을 수도 있다.

function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,
    hi() {
        console.log('hi my name is' + this.name)
    }
}

여러 번 Person.prototype에 새로운 메서드를 추가하는 것보다 그냥 Person.prototype 객체를 재정의하는 게 낫다. 앞서 prototype이 거의 빈 객체라고 언급했는데, 정확하게 말하자면, prototype은 constructor라는 속성을 가지고 있고, 이는 생성자 함수를 가리킨다. 우리가 완전히 새로운 객체로 prototype을 덮어씌운다면, 이 constructor 속성도 reset해야 한다.

왜 Prototype에 써야 하는 걸까?

prototype 위의 그 어떤 것이든 모든 해당 생성자 인스턴스 객체 사이에 공유되기 때문에, 우리는 prototype에 선언된 메소드랄지 생성자 객체 위에 저장된 속성만을 보곤 한다. 메소드는 공유된 행동양식으로 각 객체는 자신만의 유일한 메소드가 없다. 하지만, 각 객체는 자신만의 속성을 가져야 할 때도 있는 법이다. prototype이 아니라 객체 자체에 정의된 속성은 "own properties"라고 불린다.

ES6 classes

ES6 덕분에 우리는 위 생성자 함수를 class 문법으로 쓸 수 있게 되었다.

class Person {
    constructor(name) {
    this.name = name;
    }
    hi() {
        console.log('..')
    }
}

여기서 hi() 는 Person.prototype에 저장된다.

Property Lookups

만일 우리가 객체와 생성자의 prototype에 같은 이름의 속성을 선언하면 어떤 일이 벌어질까?

function Person(name) {
    this.name = name;
    this.walk = function () {
        console.log('moon walking')
    }
}

Person.prototype.walk = function () {
    console.log('normal walking')
};

const mj = new Person('Michael Jackson');
mj.walk();

이 예제에서는, walk 이라는 메소드가 Person 인스턴스와 Person.prototype에 각각 선언되었다. 콘솔에는 뭐라고 찍힐까?

JavaScript는 우선 객체 자신의 "own property"부터 찾으려 한다. 만일 own property가 존재한다면, 해당 속성이 사용된다. 그렇지 않으면, 해당 객체를 만든 함수의 prototype을 찾아보려 할 것이다.

따라서 위 예제에서는 mj 객체 자체에서 walk 가 발견되고, 콘솔에는 'moon walking'이 찍힐 것이다. 만일 Person 객체가 아래처럼 생겼다면, 객체 자체에 walk 메서드가 발견되지 않으니, 자바스크립트는 walk 메서드가 발견되는 Person.prototype을 찾게 되고, 'normal walking'이 콘솔에 찍힐 것이다.

function Person(name) {
    this.name = name;
}

상속

만일 클래스 기반의 언어를 공부한 사람이라면, 상속이 어떻게 작동하는지 궁금할 것이다. Animal이라는 생성자가 있다고 해보자.

function Animal() {}
Animal.prototype.eat = function () {
    console.log('eating')
};

이번에는 Cat 생성자가 있다고 해보자.

function Cat() {
    Cat.prototype.meow = function () {
        console.log('meowing');
    }
};

Cat은 동물의 한 종류이니, Animal로부터 확장된 Cat을 갖고자 한다. 상속을 하기 위한 한 가지 방법은 아래와 같다.

function Animal() {}
Animal.prototype.eat = function () {
    console.log('eating')
}
function Cat(){}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function () {
    console.log('meowing');
}

예전에 클래스 기반의 언어를 사용한 적이 있다면, 분명 이 대목에서 이게 대체 뭔가 하고 생각할 것이다. 굉장히 투박해보이지 않나. 감사하게도 ES6/ES2015의 클래스가 이 과정을 훨씬 깔끔하게 만들어주었다.

class Animal {
    eat() {
        console.log('eating')
    }
}

class Cat extend Animal () {
    meow() {
        console.log('meowing')
    }
}

Native Constructor Functions & Their Shorthand (literal) Conterparts

자바스크립트는 Stirng, Number, Boolean, Array, Function, Object, RegExp, Date를 포함해서 생성자처럼 사용 가능한 여러 빌트인 함수를 가지고 있다.

const str = new String('some string');
// OR
const str = 'some string'; // literal syntax

const age = new Number(25);
// OR
const age = 25; // literal syntax

const person = new Object();
// OR
const person = {}; // literal syntax

const x = new Boolean(false);
const x = false; // literal syntax

const add = new Function('a', 'b', 'return a+b');
const add = function (a, b) {
    return a + b;
}; // literal syntax

네이티브 생성자를 통해 numbers, strings, objects, booleans, functions를 생성한다고 해도 언제나 리터럴 신택스가 더 간단하고 직관적이다.

Extending Native Constructors

네이티브 생성자 함수도 확장될 수 있다. 커스텀 String 메서드를 만든 후에, 미래에 브라우저가 그 메서드를 약간 다르게 implement했기 때문에 코드가 예상한 대로 작동하지 않으니 그다지 추천되는 방법은 아니다. 그럼에도 불구하고, prototype를 이해하기 위해서 배워볼 만한 가치는 있다.

String.prototype.dasherize = function () {
    return this.replace(/\s/g, '-');
}
'hello world'.dasherize(); // hello-world

클래스란?

클래스는 객체를 생성하는 일종의 템플릿이다. 클래스는 데이터를 압축한다. 자바스크립트의 클래스는 prototype에 기반하지만, ES5의 클래스 같은 시맨틱과 공유되지 않는 문법과 시맨틱을 가진다.

 

클래스를 정의하기[선언하기]

함수 표현식과 함수 선언식을 선언하는 것처럼 클래스는 사실 '특별한 함수'로, 클래스 신택스는 클래스 표현식과 클래스 선언식 두 컴포넌트를 가진다.

클래스 선언식 Class declarations

클래스를 정의하는 한 가지 방법은 클래스 선언식이다. 클래스를 정의하기 위해서는 클래스의 이름과 함께 class 키워드를 사용한다. 아래의 예시에서는 Rectangle이 된다.

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

함수 선언식(function declarations)과 클래스 선언식(class declaration) 사이의 중요한 차이점은 함수 선언식이 호이스팅되고, 클래스 선언식은 그렇지 못한다는 점이다. 우선 클래스를 선언한 뒤 그 후에 접근해야 한다. 그렇지 않으면 아래 같은 코드를 ReferenceError를 출력할 것이다.

const p = new Rectangle(); // Reference Error
class Rectangle {}

클래스 표현식 Class expression

클래스를 정의하는 또 다른 방법이다. 클래스 표현식은 이름 붙여지거나, 익명으로 만들어질 수도 있다. named 클래스 표현식에 붙여진 이름은 클래스 바디에 지역적이다. (클래스의 name 속성을 통해 검색될 수는 있다. 인스턴스의 name 속성에 의해서는 불가능하다)

// unnamed
let Rectangle = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
console.log(Rectangle.name); // Rectangle

// named
let Rectangle = class Rectangle2 {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};
console.log(Rectangle.name); // Rectangle2

클래스 표현식도 마찬가지로 호이스팅 규칙에 적용받는다. 우선 선언한 뒤에 접근해야 한다.

Class body and method definitions

클래스 바디는 {} 로 감싸진 부분을 말한다. 이 부분은 메소드와 constructor 같은 클래스 멤버를 정의하는 부분이다.

strict mode

클래스 바디는 엄격 모드 안에서 실행된다.

Constructor

constructor 메서드는 class 키워드로 생성된 객체의 생성과 초기화를 위한 특별한 메서드이다. 하나의 클래스 안에는 constructor라는 이름을 가진 특별한 메서드는 오직 하나만 올 수 있다. 하나 이상의 constructor 메서드가 온다면 SyntaxError를 출력할 것이다.

Prototype methods

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // getter
    get area() {
        return this.calcArea();
    }
    // method
    calcArea() {
        return this.height * this.width;
    }
}

const square = new Rectangle(10, 10);
console.log(square.area); // 100

Generator methods

class Polygon {
    constructor(...sides) {
        this.sides = sides;
    }
    // method
    getSides() {
        for(const side of this.sides) {
            yield side;
        }
    }
}

const pentagon = new Polygon(1, 2, 3, 4, 5);
console.log([...pentagon.getSides()]); // [1, 2, 3, 4, 5]

Static methods and properties

static 키워드는 클래스의 static method와 static property를 정의한다. Static 멤버는 이 클래스를 인스턴스화(instantiating)하지 않고 호출된며, 클래스 인스턴스를 통해 호출하는 것이 불가능하다. Static methods는 종종 애플리케이션을 위한 유틸리티 함수를 생성하기 위해 쓰이며, Static properties는 캐시나 fixed-configuration, 또는 인스턴스 전체에 복사될 필요가 없는 다른 데이터를 위해 유용하게 쓰인다.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static displayName = 'Point';
    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
    return Math.hypot(dx, dy)
    }
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance; // undefined
p2.displayName; // undefined
p2.distance; // undefined

console.log(Point.displayName); // 'Point'
console.log(Point.distance(p1, p2)); // 7.0710678118654755

프로토타입과 static methods로 this 를 바인딩하기

가령 변수에 메서드를 할당하고 이를 부르는 것처럼, static 또는 프로토타입 메서드를 this 를 위한 value 없이 호출했을 때, this 값은 메서드 내에서 undefined 일 것이다. 'use strict' 구문이 없어도 같은 반응이 나온다. class 바디는 항상 엄격 모드 내에서 실행되기 때문이다.

class Animal {
    speak() {
        return this;
    }
    static eat() {
        return this;
    }
}

let obj = new Animal();
obj.speak(); // the Animal object
let speak = obj.speak; 
speak(); // undefined

Animal.eat(); // class Animal
let eat = Animal.eat;
eat(); // undefined

 

Reference

davidtang.io/javascript-constructor-functions-and-classes/

JavaScript Constructor Functions and Classes

javascript.info/classes

Classes