[JS] 생성자 함수와 일반 함수 차이

1. 생성자 함수

---

인스턴스를 생성하는 함수다.

* 인스턴스는 생성자 함수를 통해 만들어진 객체를 의미함

일반 함수와 형식 차이가 없는 것이 특징적이다.

 

new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.

new 연산자를 호출하지 않으면 일반 함수로 동작한다.

function Square(side) {
	this.side = side;
    this.getArea = function() {
    	return this.side * this.side;
    };
}

const square1 = new Square(3); // 생성자 함수
const square2 = Square(5); // 일반 함수

// 일반 함수의 경우 반환문이 없으므로 암묵적으로 undefined를 반환한다.
console.log(square1); // 인스턴스
console.log(square2); // undefined

 

2. new 연산자

---

일반 함수와 생성자 함수에 특별한 형식 차이는 없다.

다만, new 연산자 여부에 따라 생성자 함수로 동작할 뿐이다.

 

https://404minda.tistory.com/67

https://404minda.tistory.com/68

다시 말해 생성자 함수에서는 [[Construct]]가 호출된다.

단, new 연산자와 함께 호출하는 함수가 non-constructor가 아니어야한다.

 

반대로 new 연산자 없이 생성자 함수를 호출하면 일반 함수로 호출된다.

[[Call]]이 호출되는 것이다.

 

생성자 함수는 일반적으로 첫 문자를 대문자로 기술하여 일반 함수와 구별해야한다.

 

3. 생성자 함수와 일반 함수의 차이

---

// 일반 함수
function plus(a, b) {
  return a + b;
}

let test = new plus();

console.log(test); // {}

일반 함수가 생성자 함수로서 호출된 경우 객체를 반환하지 않았으므로 반환문이 무시된다.

따라서 빈 객체가 반환된다.

 

반대로 new 연산자 없이 생성자 함수로 호출되면 일반 함수로 호출된다.

[[Construct]]가 아닌 [[Call]]이 호출되는 것이다.

// 생성자 함수
function Square(side) {
  this.side = side;
  this.getArea = function() {
    return this.side * this.side;
  };
}

const square = Square(4);
console.log(square); // undefiend

console.log(side);
console.log(getArea());

square.getArea(); // TypeError

이 경우 가장 큰 차이점은 함수 내부의 this가 다른 곳에 바인딩된다는 것이다.

 

예제에서 square은 일반 함수로 호출됐기 때문에 this가 전역 객체 window를 가리킨다.

따라서 side와 getArea 메서드는 전역 객체의 프로퍼티와 메서드가 된다.

함수 호출 방식	this가 가리키는 값
일반 함수로서 호출	전역 객체
메서드로서 호출	메서드를 호출한 객체
생성자 함수로서 호출	생성자 함수가 생성할 인스턴스