[코드스테이츠 44기 프론트엔드 블로깅] 클래스와 인스턴스에 대해

어제부터 섹션2가 시작되고 많이 허둥댔다. 내가 전공자가 맞나 ? 싶을정도로 어려운 개념이었던 거같다. 그래서 더 노력해야겠다는 생각이 들었다. 오늘은 클래스와 인스턴스에 대해 배웠다. 다행히 예전에 자바를 공부한 적이 있어서 클래스와 인스턴스에 대한 개념들은 머릿속에 잘 들어왔던 거같다. 예전 자바스크립트를 독학할 때 따로 책을 사서 차근차근 공부한 것이 아니라 공식문서를 찾아보고 유튜브를 통해 실전에 사용시 모르는 부분만 공부를 했어서 개념에 대한 이해가 조금은 부족했었다. (배열을 생성할 때 바로 let arr = [] 라고 선언하는 것과 new 키워드를 사용하여 선언하는 것이 같은 것인지 오늘 알게되었다. ㅎㅎ ! ) 
서론 끝!  지금부터 클래스와 인스턴스에 대해 공부한 부분을 정리해보겠다 ! 

객체 지향 ? 

객체 지향 프로그래밍은 데이터와 기능을 한곳에 묶어 처리한다. 속성과 메서드가 하나의 객체 속에 포함된다.

이를 우리는 클래스라 부른다.  -> 객체내에 존재하는 메서드를 호출하기 위해선 객체.메서드() 를 통해 호출할 수 있다. 

 

그래서 클래스를 왜 사용할까 ? 

똑같은 기능을 하는 코드를 여러번 만들 필요 없이 재사용가능하도록 하기 위해서이다. 

 

클로저 모듈 패턴

자바에서도 디자인패턴이 있듯 자바스크립트에서도 디자인패턴이 존재하는데 그 중 클로저모듈패턴 은 중요하니 기억해두는 것이 좋다 

클로저모듈패턴 예시 

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2
// 재사용하기 좋다 !

 

클래스와 인스턴스 

클래스 :  객체를 만들기 위한 틀 

인스턴스 : 틀을 바탕으로 만들어진 객체 

이해하기 쉽게 설명하자면 공장에서 색깔이 다른 자동차를 생산한다고 할 때 기본이 되는 자동차 틀을 먼저 만들게 되는데 이를 클래스라 부르고 이 틀에 맞춰 색깔이 다르게 만들어진 차를 인스턴스라고 부른다. 

ES5로 작성한 클래스 

function Car(name, brand, color) {
	//인스턴스 생성 시 실행되는 코드 
}

ES6에서 작성한 클래스 

class Car {
	constructor(name ,brand, color){
     //인스턴스 생성 시 실행되는 코드 
     }
 }

ES5로 작성한 클래스는 function 키워드를 사용해 클래스를 생성하고 ES6로 작성한 클래스는 class 키워드를 사용해 클래스를 생성해줍니다. 또한 차이점으로 ES6에서는 constructor 라는 생성자 함수를 정의했다. 

 

여기서 counstructor란 ? 

생성자 함수로 인스턴스가 만들어질 때 실행되는 코드로 리턴값을 만들지 않는다. 

 

인스턴스를 생성하기 위해선 ?

new 키워드를 통해 클래스의 인스턴스를 만들 수 있다.  생성자 함수가 실행되고 인스턴스가 할당된다. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다. 

let avante = new Car('avante', 'hyundai', 'black');

---

객체지향 프로그래밍에서 빠지지 않는 this 라는 키워드는 인스턴스 객체를 의미한다.  파라미터로 넘어온 정보들을 인스턴스 생성 시 지정해주는 역할이다. 

class Car {
	constructor(name) {
    	this.name = name;  //인스턴스 생성 시 인스턴스에 해당 파라미터로 넘어온 이름을 부여하겠다는 뜻 
    }
}

this : 함수가 실행될 때 해당 스코프마다 생성되는 고유한 실행 컨텍스트 , new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this의 값이 됨. 

 

우리가 무심코 자주 사용한 배열 또한 Array의 인스턴스이다. new Array( , , ) 와 같은 방식으로 배열을 만들 수 있다. 

배열을 공부할 때 참조했던 공식문서들을 살펴보면 Array.prototype.메서드명 같이 되어있어서 저게 뭘까 ? 하는 생각이 있었는데 prototype 즉 모든 메서드들이 클래스의 원형객체에 정의되어 있기 때문이었다. 

 

이렇게 오늘 클래스와 인스턴스에 대해 공부해보았다. 

오늘도 열공 !