2023-05-20 TIL

• JavaScript

✨ Class

 

클래스는 ❗️ 붕어빵 틀 ❗️  클래스를 통해 만들어진 객체들은 인스턴스 ( Instance ) 라고 부르며, 틀로 찍어낸 결과물, 붕어빵인것이다.

 

객체 지향 프로그래밍에서 필수로 필요로 하는것이며, 객체들 간에 역할을 주어 일을 하게끔 하는것

 

스타크래프트의 SCV 같은 존재인것이다. 내가 오더를 내리지 않는이상 맡은 업무를 반복적으로 진행을 하고있는것이다.

 

그럼 아래 코드를 통해 어떻게 클래스를 구성하는지 알아보자\

 

// 과일 클래스를 만들어보자

class Fruit {
	// 생성자 : new 로 객체(인스턴스)를 생성할때 생성되는 변수
	constructor(valueOne, valueTwo){
    	this.name = valueOne;
        this.emoji = valueTwo;
        }
    
    display = () => {
    	console.log(`${this.name} : ${this.emoji}`);
        };
    }
    
// 클래스를 구성하는 요소 👉 Property ( 요소 ) 
// name, emoji, display()

 

위 클래스를 보고 객체 2개, lemon 과 apple 을 생성했다 가정해보자.

그럼 각각 인스턴스에서는 클래스의 프로퍼티인 name, emoji, display() 를 갖고있을것이다.

 

🔸 Static

 

이 static은 클래스로 인해 생성된 객체, 인스턴스 래벨의 변수가 아닌 클래스 래벨의 변수이다. 아래 코드를 보고 이해해보자

 

class Fruit {
	static maxQuantity = 10;
    
    constructor(valueOne, valueTwo){
    	this.name = valueOne;
        this.emoji = valueTwo;
        }
    
	display = function(){
    	console.log(`${this.name}: ${this.emoji}`);
	}
}

 

내가 매번 객체를 생성해줄때마다 각 과일마다 최고 개수를 정해줄수도 있다. 하지만 정해진 틀 내에서 이미 정해진 값을 부여하고 싶은 상황이라면, 이런식으로 static을 통해 모든 과일의 개수가 10개가 넘지 않게도 설정해줄수있는것이다.

 

🔸 Field ( private, public, Protected )

 

 

Java에서는 클래스 내부의 변수를 외부에서 접근하지 못하도록 private 필드로 설정할수 있고 혹은 상속된 자식클래스에서만 접근할수있는 protected 필드도 존재를 한다. 

 

JS 에서는 public은 아무것도 안적어주면 기본으로 제공되는 필드이며, 혹 외부에서 접근을 못하게 캡슐화 를 하고싶다면 !!

 

❗️ 변수명 앞에 # 을 붙여주면 된다.

 

🔸 Setter , Getter

 

이 세터와 게터의 목적은 클래스 내부에 저장된 데이터들을 private으로 설정해 외부에서는 접근하지 못하게 하는 행위, 캡슐화가 된 데이터들을 다시 수정하고 얻어오기 위해 존재하는 것이다.

 

물론 캡슐화된 데이터들을 수정하고 할당하는 행위는 보안적으로 좋지 못하지만, 필요한 상황에선 사용할수밖에 없다.

 

사용방법은 아래와 같다

 

class Human{
	#name;
    	#age;
    	#bloodType;
    
    constructor(valueName,valueAge,valueBloodType){
    	this.#name = valueName;
        this.#age = valueAge;
        this.#bloodType = valueBloodType;
        }
        
    // set, 캡슐화 된 데이터에 접근하여 재할당이 필요할때
    set setName(willChangeName){
    	this.#name = willChangeName;
    }
    set setAge(willChangeAge){
    	this.#age = willChangeAge;
    }
    set setBloodType(willChangeBloodType){
    	this.#bloodType = willChangeBloodType;
    }
    
    // get, 캡슐화 된 데이터에 접근하여 값을 얻어내야할때
    get getName(){
    	return this.#name;
    }
    get getAge(){
    	return this.#age;
    }
    get getBloodType(){
    	return this.#bloodType;
    }
}

 

Human 클래스가 존재하고 받아오는 값으로는 이름과 나이, 혈액형이 있다. #(변수명) 으로 인해 private 설정이 되어 캡슐화 된 데이터들을 접근하기위해 set 과 get 이 설정된 것을 확인할수가 있다.