2024. 01. 04 Class & Closures

JavaScript 5주차

 

객체지향언어의 가장 큰 장점이라고 생각하는 class !!

더 많은 사용법이 있겠지만 나는 아직 초보자🥲

 

오늘 배운 class에 대해 정리해 보고자 한다.

class는 설계도라고 생각하면 된다고 재차 들어왔다. 역시나 다를까 강의에서도 설계도라고 생각하면 쉽다고 하셨다.

사용성이 자유롭고 재사용성이 좋은 class...??? 

다양한 매서드와 검증 방법인 getter,setter를 차곡 차곡 쌓아 유용하게 이용하는 날이 오면 좋겠다.

 

우선 class의 형태부터 알아보자.

class Car {
  constructor(modelName, modelYear, type, price) {
    this._modelName = modelName;
    this._modelYear = modelYear;
    this._type = type;
    this._price = price;
  }
  makeNoise() {
    console.log(`${this._modelName}: 빵!!💥`);
  }

  bornYear() {
    console.log(`${this._modelName}는 ${this._modelYear}년도 모델입니다.`);
  }
}
class ElectronicCar extends Car { //부모 class 를 상속받는 자식 class
  constructor(modelName, modelYear, price, chargeTime) {
    //부모 class를 받을 프로퍼티를 자식 컴포넌트에서 바꿔 사용 가능, 변함이 없다면 쓰지 않아도 무방
    super(modelName, modelYear, "전기차", price);
    this._chargTime = chargeTime; // getter,setter 사용하는 경우는 꼭 반드시 this._ 언더바 넣어주기
  } //부모 class에게 자식 class 가 사용하는 프로퍼티 말하기

  set chargeTime(value) {
    this._chargTime = value;
  }

  get chargeTime() {
    return this._chargTime;
  }
}

// const car1 = new Car("벤츠", "2024", "전기차", "5억");
// const car2 = new Car("포르쉐", "2022", "가솔린", "2억");
// const car3 = new Car("마티즈", "2021", "휘발유", "1억");
const eleCar1 = new ElectronicCar("테슬라", "2023", "4억", "60m");
eleCar1.makeNoise();
eleCar1.bornYear();
console.log(eleCar1._chargTime);
eleCar1._chargTime = "20m";
console.log(eleCar1._chargTime);

 

중간중간 설명이 쓰여져 있지만 차근차근 다시 한번 곱씹어보기 위해 부연 설명과 함께 차근 차근 풀어보자

 

-class의 기본 코드와 매서드 추가

class Study {
	constructor ( coding1, coding2 ){
    	this.coding1 = coding1
        this.coding2 = coding2
    }
    
    frontEnd () {
    	consloe.log(`${ coding1 }은 어려워요😓`)
    }
}

class에는 constructor라는 생성자가 있고 생성자에는 생성하고자 하는 프로퍼티가 담겨져 있다.

    constructor ( coding1, coding2 )

      생성자⬆️        프로퍼티⬆️

 

this.coding1 = coding1 은 변수라고 부를 수 있다.

 

매서드는 함수 형식으로 작성된다!

---

-class에 getter, setter를 사용할 때 기본 코드

class Study {
	constructor ( coding1, coding2 ){
    	this._coding1 = coding1
        this._coding2 = coding2
    }
    
    set coding1(value) {
   		this._coding1 = value;
    }

    get coding1() {
    	return this._coding1;
    }
}

 

property는 외부에서도 사용 가능해야 하며, 세팅도 할 수 있어야 한다.

하지만 직접적으로 변경하게 되면 내부적인 함수이기 때문에 위험할 수 있고, 검증도 어려워진다.

이 문제점을 해결하기 위해 getter, setter(검증) 를 사용하게 된다.

외부에서 값을 받아 내부에서 검증 가능하게 하며, 상황에 따른 다양한 유효성 검사 방법이 있으므로 잘 찾아보고

유효성 검사를 자주할 수 있는 개발자로 성장해 보자

 

this._coding1에서 underscore의 의미는 private 하다는 의미다.

즉 인스턴스 내부에서 쓰이기 위한 변수로써 분리해 놓았다는 의미로

underscore를 붙여주지 않으면 property의 이름과 충돌을 일으킨다.

---

-자식 class의 기본 코드

class React extends Study {

}

 

자식class가 부모class를 상속 받기 위해 extends 부모class 를 꼭 넣어주자.

---

 

-자식 class가 부모class 로부터 상속받는 프로퍼티에 ' +추가 ' 또는 ' -삭제 '할 때 기본 코드

class React extends Study {
	constructor ( coding1, coding2, coding3 ){
    	super(coding1, coding2, "add")
        this._coding3 = coding3
    }
    component () {
    return this._coding1
    }
}

자식class가 부모class의 property를 ' +추가 ' 또는 ' -삭제 ' 할 수도 있다.

그런 경우 생성자인 constructor를 꼭 가져와서 ( property ) 에 추가 또는 삭제를 할 수 있다.

그리고 부모class 와 공유할 수 있도록 super라는 함수에 부모 ( property ) 를 담고,

추가 또는 삭제를 구분 할 수 있도록 해주자.

 

---

 

class를 인스턴스에서 사용하게 되면 class안에 내장된 매서드를 사용할 수 있다.

class를 전체적인 구조를 쉽게 알아보자.

 

 

그리고 자식 class나 setter와 getter를 사용할 때 추가 하는 방법과 구조를 알아보자

 

Closures

클로저 함수는 외부에서 접근할 수 없도록 숨겨진 값이다. 의도되지 않은 변경에 걱정할 필요가 없다.

const increase = (function () {
  let num = 0;

  //Closures
  return function () {
    return ++num;
  };
})();

코드가 실행되면 즉시실행 함수로 함수가 반환되어 값에 할당된다.

어제 this 문제를 풀면서 만나 몇시간을 고생하게 했던..즉시실행함수.......

 

렉시컬 환경을 기억하는 똑똑한 녀석이다.

MDN: 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 

 

즉시 실행 함수는 불러짐과 동시에 소멸되지만 똑똑한 녀석이기에

중첩함수가 더 오래 유지되는 경우, 중첩 함수는 생명 주기가 종료된 외부 함수의 변수를 여전히 참조할 수 있다.

 

🧹 가비지콜렉터인 데이터 청소부는 참조된 값은 청소하지 않으니 걱정할 필요도 없다!