객체를 만들 때 차이점

Question

안녕하세요. 자바스크립트를 공부하고 있는 초보자입니다.

객체를 공부하다가 궁금한점이 생겼는데 스스로 해결하지 못해서 질문남깁니다.

객체를 다수 만들 필요성이 있을 때 생성자함수를 사용한다고 하는데, 그 전에 객체를 만드는 함수라고 함수를 하나 만들었더라구요

function makeObject(name, age) {
  return {
    name,
    age,
  };
}
const Mike = makeObject(Mike, 30);

function User(name, age) {
  this.name = name;
  this.age = age;
}
const Jane = new User(Jane, 30);

console.log(Mike);
console.log(Jane);

코드는 위와 같고 출력은 아래와 같습니다

{ name: Mike, age: 30 }
User { name: Jane, age: 30 }

그냥 함수를 써서 객체를 만드는 것과 생성자 함수를 써서 객체를 만드는것의 차이가 무엇일까요?

김하림 · Accepted Answer

[메모리 관점에서의 차이]
`makeObject`를 통해 생성되는 객체는 단순히 함수의 리턴값으로 생성되므로, 메모리상에서 함수 호출이 끝나면 생성된 객체가 더 이상 참조되지 않게 되며, 이후 가비지 컬렉션에 의해 제거될 수 있습니다.

반면에 `User` 함수에서는 new 키워드를 사용하여 객체를 생성합니다. 이 경우, 함수가 호출될 때 `this`에 새로운 객체가 바인딩되며, 객체는 생성자 함수의 프로토타입 객체와 연결되어 상속 구조를 구성합니다. 이 때문에 `User` 함수에서 생성된 객체는 다른 객체에서 참조되거나 전역 객체의 속성으로 할당되는 등의 경우, 메모리상에서 계속 존재하게 됩니다.

[this 바인딩 차이]
만약 `makeObject`에서 `this`를 사용한다면 `this`는 전역 객체를 바라보게 됩니다. 반면에, `User`에서의 `this`는 생성된 객체를 바라보게 됩니다.

[재사용성에서의 차이]
`makeObject` 함수는 단순히 객체를 생성하고 속성을 초기화하는 역할만 수행이 가능합니다. 따라서 생성된 객체는 해당 객체를 생성한 `makeObject` 함수와의 연관성만 가지고 있으며 다른 객체와는 별개의 독립적인 객체로 간주됩니다. 이는 생성된 객체가 공유할 수 있는 속성과 메서드를 제한하고, 객체 간에 코드를 재사용하는 데 제약이 생김을 의미합니다.

반면에 `User` 생성자 함수는 객체 생성 뿐만 아니라, 생성된 객체에 대한 초기화 & 메서드 추가 등 다양한 작업을 수행할 수 있습니다. 또한 생성된 객체는 `User`의 생성자 함수와 연관되어있으므로 `User` 생성자 함수의 프로토타입 객체에 정의된 속성과 메서드를 상속할 수 있습니다. 이는 코드 재사용성 향상에 도움이 되고, 객체들간의 관계를 구성하는 데도 도움이 됩니다.

[현업에서는 어떤지?]
현업에서는 예시에서 사용하는 코드보다는 class를 주로 사용합니다. class를 사용하면 함수와 다르게 사용 용도를 명확하게 구분 지을 수 있고, 익숙한 `extends` 문법을 사용해서 상속을 구현하거나, 가시성(private, public 등)을 명시할 수 있는 등의 장점이 존재합니다.

this 바인딩, 메모리(가비지 컬렉션 포함), prototype, class 문법 등 자바스크립트에 대한 여러가지 기본 개념들을 탐구해 볼 수 있는 좋은 질문인 것 같습니다 :)

이국범 · Answer

실용적인 관점에서 답변드리면 
new 연산자로 만든 객체는 instanceof로 어떤 종류의 객체인지 판별할 수 있습니다
(Jane instanceof User) === true

반면 makeObject 함수로 만든 객체는 어떤 종류의 객체인지 판별이 어렵습니다
방법이 없는 것은 아니고 일일히 key를 순회해가면서 value의 타입을 체크하는 방법도 있지만 그리 추천드리지는 않습니다