[JS] 자바스크립트의 Object, Constructor (객체, 생성자)

Object-oriented Programming in JavaScript: Made Super Simple | Mosh의 강의를 정리한 내용입니다.

Object Oriented Programming 이 뭔지 알아봤으니 JavaScript로 Object를 만들어볼 차례이다.

📎 Object literal

Object literal 방식은 오브젝트를 정의하는 가장 심플한 방법이다.

const circle = {
	radius : 1,
  	location : {
    	x: 1,
      	y : 1
    },
  	draw : function (){ // method
    	console.log('draw');
    }
};

• key, value로 이루어진 값
• radius와 location은 property, draw는 method
  ✔️ radius와 다르게 draw는 property라 하지 않고 method 라 함 그 이유는 프로퍼티의 경우 값을 가지고 있어야할 때 사용되고 function이나 method는 로직을 사용해야 할 때 쓰이기 때문
• 속성은 dot notation으로 접근가능하다. (ex. circle.radius)

📎 Factories and Constructor

객체를 만들기 위한 방법으로 크게 Factory 함수를 이용하는 방법과 Constructor 함수를 이용하는 방법이 있다. 두 방법 모두 중요하기 때문에 상황에 맞게 쓸 줄 알아야한다.

const circle = {
	radius : 1,
  	location : {
    	x: 1,
      	y : 1
    },
  	draw : function (){ // method
    	console.log('draw');
    }
};
// 같은 애를 만들기 위해서 복사
const circle = {
	radius : 1,
  	location : {
    	x: 1,
      	y : 1
    },
  	draw : function (){ // method
    	console.log('draw');
    }
};

위에서 만든 circle 객체를 하나 더 만들고 싶을 땐 어떻게 해야할까 ? 일단 객체를 복사했다. 하지만 이 경우 하나 이상의 메소드가 있는 경우 문제가 발생할 수 있다.

• 만약 메소드에 버그가 있는 경우라면 여러 곳에서 각각의 객체 메소드를 수정 해야한다. 이 경우 두 메소드를 수정해야 하겠지..! 하지만 만약 객체가 10개 이상의 메소드가 있다면 버그가 발생한 경우 더욱 수정하기 힘들 것이다.

사실 객체 리터럴 방식은 적어도 하나의 메소드를 가진 객체를 만드는데 좋은 방법은 아니다.

⚒ 하나 이상의 메소드를 가진 객체를 만들기 위한 솔루션 : Factories and Constructor

🏭 Factory Function

createCircle 함수를 만들고 객체를 return 해주었다. 인자로 radius를 받을 수 있음

function createCircle(radius){
  return {
      radius, // es6에서 KEY와 value가 같으면 하나로 적어줘도 된다. 
      draw : function(){
      	console.log('draw')
      }
  };
}
// 객체 만들기  
const circle = createCircle(1);

🏭 Constructor Function

function Circle(radius){
 this.radius = radius;
  this.draw = function(){
  	console.log('draw');
  }
  // return this; 자동으로 this 객체가 리턴 되기 떄문에 쓰지 않아도됨
}
// 객체 만들기  
const another = new Circle(1);

• 생성자 함수는 무조건 대문자로 시작해야함
• property를 지정하기 위해서 this operator를 사용함
• this는 이 코드를 실행시키고 있는 객체를 가리키는 역할을 함
• 메모리에 빈 객체를 가지고 있고 this를 해당 빈 객체를 가리키게 한 후 dot notation을 사용해서 객체에 여러 property들을 정한다.
• new operator를 이용하여 새로운 circle을 만든다.

  🌈 new opeator가 하는 일

  1. new는 먼저 빈 객체를 만든다.
  2. this가 해당 객체를 가리키게 한다. 디폴트로 this는 전역 객체를 가리키고 있다.
     • 브라우저에서 전역 객체는 window이기 때문에 new를 사용하지 않으면 this는 window를 가리키고 있음
  3. 그 후 함수(Circle)에서 해당 객체를 반환하게 한다.