[JavaScript(12)] 생성자 함수? 객체 리터럴과의 차이

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 생성자함수와 new 연산자를 리뷰해보려고 합니다.

 

OverView

---

JavaScript에서 객체를 만들 때 가장 먼저 배우는 방법은 보통 객체 리터럴입니다.

 

그런데 비슷한 구조의 객체를 여러 개 만들어야 한다면 어떨까요?

 

이럴 때 사용할 수 있는 방법이 바로 생성자 함수와 new 연산자입니다.

 

쉽게 말하면 생성자 함수는 객체를 찍어내는 설계도이고, new는 그 설계도를 이용해서 새 객체를 실제로 만드는 버튼이라고 볼 수 있습니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

 

 

개념 설명

---

 

 

1. 생성자 함수란?

생성자 함수는 비슷한 형태의 객체를 여러 개 만들기 위해 사용하는 함수입니다.

 

일반 함수와 문법적으로 완전히 다른 함수는 아닙니다.

다만 생성자 함수로 사용할 때는 보통 아래 관례를 따릅니다.

 

• 함수 이름의 첫 글자를 대문자로 작성합니다.
• new 연산자와 함께 호출합니다.

 

예를 들어 사용자를 나타내는 객체를 여러 개 만들고 싶다고 해보겠습니다.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

const user = new User("상구");

console.log(user.name); // 상구
console.log(user.isAdmin); // false

 

여기서 User이 생성자 함수입니다.

 

new가 붙으면 JavaScript는 단순히 함수를 실행하는 것이 아니라, 객체를 만드는 특별한 방식으로 함수를 실행합니다.

 

new가 하는 일

new User("상구")가 실행되면 내부적으로는 대략 이런 일이 일어납니다.

• 빈 객체를 새로 만듭니다.
• 그 빈 객체를 this에 연결합니다.
• 생성자 함수의 본문을 실행합니다.
• 특별히 다른 객체를 반환하지 않으면 this를 자동으로 반환합니다.

 

 

마무리

---

 

오늘은 JavaScript의 생성자 함수와 new 연산자에 대해서 정리해보았습니다.

 

생성자 함수는 비슷한 구조의 객체를 여러 개 만들기 위함 함수입니다.

 

class와, prototype과도 연관이 있다고 하네요..

 

공부 화이팅!