[JAY⌨️JS] 자바스크립트 객체지향의 핵심인 Class에 대해 알아보자

 

 

[JAY⌨️JS] 자바스크립트 객체지향의 핵심인 Class에 대해 알아보자

 

 1️⃣ class 란?

• 2016년 ES6 부터 도입된 instance를 생성하는 생성자 함수.
• 객체를 생산하는 붕어빵 틀과 같은 개념으로 흔히 설명하는데, 생산 도면 혹은 청사진이라고도 표현할 수 있다.
• class + 이름 + { constructor ... } 로 구성.
• constructor()는 new 연산자로 호출되는 인스턴스의 기본 상태를 자동으로 설정해주는 생성자 메서드.
  특별한 절차 없이 객체를 초기화 할 수 있다.
• class내부에 있는 Field는 변수와 비슷하게 사용되는데, Constructor와 Method 전체에서 사용되며, 소멸되지 않는다는 특징이 있다.
• 자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것.
  이처럼 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 Sugar Syntactic 설탕 문법이라고 한다.
• 객체지향 프로그래밍에 대한 보완 설명이 필요하다면 우측 게시물 참고. [JAY⌨️JS]객체 지향 프로그래밍

// Robot이라는 Class에 speak() 메소드 생성
class Robot {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`삐리비리. 제 이름은 ${this.name}입니다.`);
    }
}

// 💊 Encapsulation 캡슐화!
// new 키워드로 Robot 템플릿을 가져와서 newBot Object에 data In.
const newBot = new Robot('🤖 JAY');


// newBot instance에 Method 실행 
// = 삐리비리.제 이름은 🤖 JAY입니다.
newBot.speak();

 

예제 코드 class Robot의 구조

 

 

 

 2️⃣ class 상속

• 클래스의 상속은 extends 키워드를 사용.
• 부모 class에게 상속을 받는 자식 class는 서브 클래스(subclass) 혹은 파생 클래스(derived class) 라고 부른다.
• super() 함수는 부모 클래스의 constructor 속성을 상속시키는 특수한 메소드.
• 서브 클래스에는 super([arguments]); 속성이 내장되어 있어서 부모 클래스의 fields 내부에 위치한 프로퍼티가 상속된다.
• super() 함수가 있는 서브 클래스에서 this 값을 사용할 경우 반드시 this 보다 먼저 실행되어야 하며
  서브 클래스가 아닌 클래스에서 사용하면 에러가 발생하니 주의!

// 1. Robot이라는 Class에 speak() 메소드 생성
class Robot {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`삐리비리. 제 이름은 ${this.name}입니다.`);
    }
}

// 2. class 상속
// 클래스의 상속은 extends 명령어를 사용.
// 서브 클래스에 생성자 함수를 사용하고 싶다면 반드시 생성자 함수안에서 super() 함수를 사용.
// extends 명령어 안에 변동 없이 상속만 받는다면 생략 가능
class clone extends Robot {
    constructor([name]) {
        super([name]);
    }
    // 상위 객체의 Method를 재선언해서 정의하는 것을 Overriding이라고 한다.
    speak() {
        super.speak(); // = 부모 Class의 Method 상속!
        console.log(`Super ${this.name} Overriding!`);
    }
}

// extends 명령어로 생성된 subclass 'clone'을 가져와서 캡슐화.
const babyBot = new clone('🤖 BABY')

// babyBot instance에 Method 실행
// = 삐리비리. 제 이름은 🤖 BABY입니다.
// = Super 🤖 BABY Overriding!
babyBot.speak();

예제코드 class 상속의 구조

 

 

 

 3️⃣ 비공개(private) 프로퍼티

• 비공개 프로퍼티는 객체 안의 중요한 정보를 안전하게 보호하여 프로그램이 뜻하지 않게 변경되는 것을 막는 역할.
• Closer패턴을 활용하거나 해시태그(#)기호를 사용할 수 있다.

 

1. Closer를 활용한 Private property

• Private property는 코드 접근에 제한을 한다는 점 이외에 불필요한 메소드가 전체 코드에 영향을 주는 위험을 방지.
• 자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 흉내내는 것이 가능.
• 이와 같이 객체가 어떤 데이터(property)와 메소드를 연관시키는 방식으로 클로저를 사용하는 것을 모듈 패턴이라고 한다.

// 'closer' 를 활용한 Private property
class Robot {
    constructor(name, pw) {
        this.model = name;
        const getPassword = () => pw;
        this.speak = () => console.log(`🤖 제 이름은 ${this.model}입니다. 비밀번호는 ${getPassword()}`);
    }
}

const closerBot = new Robot('🤖 미출시 로봇', '1234');

closerBot.password   // = undefined  // password에 접근 불가능!

Closer를 활용한 Private property 콘솔 노출 화면

 

 

2. # 키워드를 활용한 Private property

• # 키워드를 활용하면 비공개 프로퍼티로 전환된다.
• class내에서만 확인, 변경 가능하고, Instance에서 접근 불가
• 프로퍼티에 접근하려면 getPassword() setPassword() 함수를 이용해야만 한다.
• 출시된지 얼마 되지 않아 브라우저 호환성 고려해야 하는 점 주의!

// '#' 키워드를 활용한 Private property
class Robot {
    // '#password' property를 비공개 처리
    #password
    constructor(name, pw) {
        this.model = name;
        this.#password = pw;
    }
    getPassword() {
        return this.#password
    }
    setPassword(_pw) {
        this.#password = _pw;
    }
    speak() {
        console.log(`🤖 제 이름은 ${this.model}입니다. 비밀번호는 ${this.getPassword()}`);
    }
}

const privateBot = new Robot('🤖 미출시 로봇', '1234');

privateBot.password // = undefined  // password에 접근 불가능!

# 키워드를 활용한 Private property 콘솔 노출 화면

 

 

 

4️⃣ Get, Set Property

• get set 키워드를 사용하면 객체의 프로퍼티에 접근하듯 값을 다룰수 있게 되는데
  값을 가져올 때 사용하는 함수를 getter 값을 설정할 때 사용하는 함수들을 setter 라고 부른다.
• #를 활용한 비공개 프로퍼티에도 접근할 수 있게 되므로 주의!
• 협업 시에는 get, set 안에 어떤 로직이 있는지 파악하는데 어려움이 있을 수 있으니
  주석이나, 가이드 문서를 만들어 충분한 정보를 제공해주는것이 좋다.

function HidePassword(password) {
    return "관리자만 볼 수 있어요! 🚫";
}
class Robot {
    #password;
    constructor(name, pw) {
        this.name = name;
        this.#password = pw;
    }
    get password() {
        return HidePassword(this._password);
    }
    set password(pw) {
        this._password = pw;
    }
    speak() {
        console.log(`🤖 저는 ${this.name}입니다. 비밀번호는 ${HidePassword(this._password)}`);
    }
    viewPassword() {
        const hasOwnPassword = this.#password ? this.#password : '비밀번호가 없습니다.';
        console.log(`🔐 ${hasOwnPassword}`);
    }
}

const testBot1 = new Robot("로봇1", "1234");
const testBot2 = new Robot("로봇2");

testBot1.speak();          // = '🤖 저는 로봇1입니다. 비밀번호는 관리자만 볼 수 있어요! 🚫'
testBot2.speak();          // = '🤖 저는 로봇2입니다. 비밀번호는 관리자만 볼 수 있어요! 🚫'
testBot1.viewPassword();   // = '🔐 1234'
testBot2.viewPassword();   // = '🔐 비밀번호가 없습니다.'

Getter & Setter 콘솔 노출 화면

 

 

 

🙋🏻‍♀️ 요약

• 자바스크립트에서 class는 함수의 한 종류로 객체를 생산하는 붕어빵 틀과 같은 개념으로 흔히 설명하는데, 
  생산도면 혹은 청사진이라고도 표현할 수 있다.
• constructor()는 new 연산자로 호출되는 인스턴스의 기본 상태를 자동으로 설정해주는 생성자 메서드.특별한 절차 없이 객체를 초기화 할 수 있다.
• 클래스의 상속은 extends 키워드를 사용.
• 부모 class에게 상속을 받는 자식 class는 서브 클래스(subclass) 혹은 파생 클래스(derived class) 라고 부른다.
• super() 함수는 부모 클래스의 constructor 속성을 상속시키는 특수한 메소드.
• 비공개 프로퍼티는 객체 안의 중요한 정보를 안전하게 보호하여 프로그램이 뜻하지 않게 변경되는 것을 막는 역할.
  Closer패턴을 활용하거나 해시태그(#)기호를 사용할 수 있다.
• get set 키워드를 사용하면 객체의 프로퍼티에 접근하듯 값을 다룰수 있게 되는데
  값을 가져올 때 사용하는 함수를 getter 값을 설정할 때 사용하는 함수들을 setter 라고 부른다.