[JavaScript] 생성자 함수

요 근래 자바스크립트 함수에 대해서 상당히 아주 많은 신경을 쓰고 있는데, 왜냐면 이 놈의 자바스크립트 함수라는게 다른 언어의 함수들과 비교하면 상당히 독특하다보니 별 희한한 케이스가 많다. 그래서 오늘은 생성자 함수 얘기를 한번 꺼내볼까 하는데, 한번 시작해보자. 

이 얘기를 하기 전에 this 에 대한 이야기도 필요할듯하니 그것도 설명하겠다. 

 

1. this

원래 뇌구조 상 프로그래밍이란걸 할 수 없는 대부분의 사람들이 프로그래밍을 할 수 있게 만들어준 개념이 객체지향 프로그래밍이라고 생각하는데, 일단 오늘 이 객체지향 얘기하면 개판나니까 나중에 얘기하고 객체지향 프로그래밍을 배우면 아주 자연스럽게 this라는 개념을 학습한다. this는 본래 object(객체) 내부에서 객체 본인을 지칭하는 자기 참조 변수다. 그러니까 쉽게 이해하기 위해서 코드를 한번 살펴보자.

class Car {

	wheel;
	windows;
	engine;
    
    constructor (wheel, windows, engine) {
    	this.wheel = wheel;
        this.windows = windows;
        this.engine = engine;
    }
}


var myCar = new Car(wheel, windows, engine);

대표적인 object인 클래스를 가져와봤다. 클래스는 constructor (생성자)를 통해 인스턴스를 생성하여 사용하게 되는데, 이 때 this라는 예약어를 사용하게 되는 것이다. 대충 보면 알겠지만, new Car() 하면서 넘겨주는 파라미터들을 지금 생성될 인스턴스가 가지고 있는 변수에다가 넣어주는 느낌이 된다. 

물론 자바스크립트에서는 이 this가 함수를 어떻게 호출하느냐에 따라서 의미가 달라질만큼 상당히 동적으로 관리가 되는데, 상위 스코프에서 지칭하는 this를 고정하고 싶다면 () => {} 이런 형태를 쓰고 있는 Arrow Fn을 갖다가 선언하면 된다. 좀 더 디테일하고 복잡한 이야기는 this만 다루는 게시물에서 이야기 해볼테니 그 때 얘기해보도록하자. 

 

2. 생성자 함수 사용해보기

this가 어떤 역할을 하는지 알아봤다. 

근데 만약에 개념자체가 복잡한 객체를 만들게 된다면 저 클래스 자체가 상당히 비대해지고 그냥 보기만 해도 어려워짐. 그래서 아주 간단하게 Object 뚝딱 만들어주는 애가 있는데 그게 바로 생성자 함수다. 한번 코드를 통해 살펴보자. 

function Car() {
    this.wheel = "wheel";
    this.windows = "windows";
    this.engine = "engine";
	
}

const myCar = new Car(wheel, windows, engine);
console.log(myCar) // {wheel: "wheel", ...}

자바스크립트 함수는 이런 식으로 대문자 시작하는 이름, new를 통한 인스턴스 생성을 해주면 지가 알아서 object를 암묵적으로 만들고 object를 return 한다. 그래서 막 많이 사용하지 않을것 같은데 복잡하고 귀찮은 객체를 만들어야된다 그러면 걍 이렇게 함수를 통해서 뚝딱 만들어내고 치울 수 있다.

 

(함수에 갖다가 new 쓸줄을 누가 알았겠냐고,, 그치만 우리 자바스크립트의 함수는 1급 객체니까 이해해줘야한다. )