new 연산자와 생성자 함수

김진권·2022년 6월 5일
0

javascript

목록 보기
13/13
post-thumbnail

근 4개월만에 다시 개발 공부를 해본다.

며칠 전 유튜브를 보다가 Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning 라는 재밌어 보이는 프로젝트를 발견했다.

self-driving

출처 : Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning

영상을 틀었다. 강의하시는 분은 10분 뒤에 자바스크립트의 Class를 이용하여 코드를 만들기 시작했고 곧 이론적 부족함을 느꼈다.
위의 프로젝트를 만들기 위해 필요한 자바스크립트 기본 지식을 정리하고자 한다.


생성자 함수

생성자 함수는 객체라는 붕어빵을 찍어내는 붕어빵 틀이라고 볼 수 있다.

붕어빵 틀을 이용하여 붕어빵을 계속 찍어낼 수 있고 그때 그때 알맞게 팥이나 크림 등 다양한 재료를 넣어서 모양은 같으나 맛은 조금 다른 붕어빵들을 만들 수 있다.

생성자 함수 예시

function Car(name) {
  this.name = name;
  this.canFly = false;
}

let car = new Car("SM5");

alert(car.name); // SM5
alert(car.canFly); // false

✅ 생성자 함수의 원칙

  • 생성자 함수 이름의 첫 글자는 대문자로 시작해야 한다.
  • new 연산자를 붙여 실행한다.

✅ new Car(...)을 실행시켰을 때 작동되는 알고리즘

  • 빈 객체를 만들어 this에 할당한다.
  • 함수 본문을 실행하고 this에 새로운 프로퍼티를 추가해 this를 수정한다.
  • this를 반환한다.
function Car(name) {
  // this = {};  (빈 객체가 암시적으로 만들어진다.)

  // 새로운 프로퍼티를 this에 추가한다.
  this.name = name;
  this.canFly = false;

  // return this;  (this가 암시적으로 반환된다.)
}

✅ 생성자 함수와 return문

생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

그런데 만약 return 문이 있다면 어떤 일이 벌어질까?

  • 객체를 return한다면 this대신 객체가 반환된다.
  • 원시형을 return한다면 return문이 무시된다.
  • return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다.
function Animal() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환
}

alert( new Animal().name );  // 고릴라
function Animal() {

  this.name = "원숭이";

  return; // <-- this를 반환
}

alert( new Animal().name );  // 원숭이

✅ 생성자 내 메서드

  • 생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.
    (메서드를 더해주는 것도 가능.)

아래 예시에서 new Car(name)는 프로퍼티 name과 메서드 hitTheBrake를 가진 객체를 만들어준다.

function Car(name) {
  this.name = name;

  this.hitTheBrake = function() {
    alert( "stop..!" );
  };
}

let SM5 = new User("SM5");

SM5.hitTheBrake(); // stop..!

/*
SM5 = {
   name: "SM5",
   hitTheBrake: function() { ... }
}
*/

이상 생성자 함수가 무엇인지에 대해 간단히 정리 해봤다. 더 자세한 내용은 아래 참조 링크를 통해 배울 수 있다.


출처 : new 연산자와 생성자 함수
Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning

profile
start!

0개의 댓글