[Javascript] 클래스 Class

생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동

class YalcoChicken {
  constructor (name, no) { //생성자
    this.name = name;
    this.no = no;
  }
  introduce () { // 💡 메서드 
  // 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면 메소드가 자동으로 `YalcoChicken.prototype`에 저장
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
}

const chain1 = new YalcoChicken('판교', 3);
const chain2 = new YalcoChicken('강남', 17);
const chain3 = new YalcoChicken('제주', 24);

console.log(chain1, chain1.introduce());
console.log(chain2, chain2.introduce());
console.log(chain3, chain3.introduce());

 

- 클래스와 생성자 함수의 차이 

// 차이 1. 클래스는 호이스팅되지 않음 (정확히는 되지만...)
const chain1 = new YalcoChicken('판교', 3);

class YalcoChicken {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  introduce () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
}

// 차이 2. 클래스는 new 없이 사용하면 오류
// (생성자 함수는 오류 없이 undefined 반환)
const chain2 = YalcoChicken('강남', 17); 

//Uncaught ReferenceError: YalcoChicken is not defined at <anonymous>:2:16

 

constructor 메소드

• 인스턴스 생성시 인자를 받아 프로퍼티를 초기화함
• 클래스에 하나만 있을 수 있음 - 초과시 syntax 오류 발생
• 다른 메서드 이름을 쓸 수 없음
• 기본값 사용 가능
• 필요없을 (인자가 없을 때 등) 시 생략 가능
• ⚠️ 값을 반환하지 말 것! 생성자 함수처럼 암묵적으로 this 반환

class Person {
   height = 180; // 인스턴스 변수

   // constructor는 이름을 바꿀 수 없다.
   constructor(name, age) {
      // this는 클래스가 생성할 인스턴스를 가리킨다.
      this.name = name;
      this.age = age;
   }
}

let person1 = new Person('john', 23);
console.log(person1.name); // john
console.log(person1.age); // 23
console.log(person1.height); // 180

 

클래스 메소드

class Calculator {
   add(x, y) {
     return x + y;
   }
   subtract(x, y) {
     return x - y;
   }
 }
 
 let calc = new Calculator();
 calc.add(1,10); // 11

 

- 생성자 함수에 넣은 함수의 차이 ( 프로토타입으로 들어감)

class Dog {
  bark () {
    return '멍멍';
  }
}
const badugi = new Dog();
console.log(badugi, badugi.bark());
// 본사에서 해당 기능을 다운받아서 사용, 인스턴스가 해당 기능을 갖고 있는 건 그 점포에서 그 기술을 미리 숙지해서 해당 점포 자체가 구현

function Dog2 () {
  this.bark = function () {
    return '멍멍';
  }
}
const badugi = new Dog2();
console.log(badugi, badugi.bark());

 

 

field (필드) : constructor 밖에서, this.~ 없이 인스턴스의 프로퍼티 정의

class YalcoChicken {
  no = 0;
  menu = { '후라이드': 10000, '양념치킨': 12000 };

  constructor (name, no) {
    this.name = name;
    if (no) this.no = no;
  }
  introduce () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
  order (name) {
    return `${this.menu[name]}원입니다.`
  }
}

const chain0 = new YalcoChicken('(미정)');
console.log(chain0, chain0.introduce()); //'안녕하세요, 0호 (미정)점입니다!'

const chain1 = new YalcoChicken('판교', 3);
console.log(chain1, chain1.introduce()); //'안녕하세요, 3호 판교점입니다!'

chain1.menu['양념치킨'] = 13000;

console.log(chain0.order('양념치킨'), chain1.order('양념치킨'));

 

정적 필드(field)와 메소드 : 클래스의 인스턴스가 아닌 클래스 이름으로 곧바로 호출되는 메소드

class YalcoChicken {

  // 정적 변수와 메서드
  static brand = '얄코치킨'; //정적 인스턴스
  static contact () { // 정적메소드
    return `${this.brand}입니다. 무엇을 도와드릴까요?`;
  }

  constructor (name, no) { //생성자 인스턴스
    this.name = name;
    this.no = no;
  }
  introduce () { //인스턴스(프로토타입) 메소드
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
}

console.log(YalcoChicken);
console.log(YalcoChicken.contact());

 

인스턴스의 수와 관계없이 메모리 한 곳만 차지인스턴스 없이 클래스 차원에서 호출, ⚠️ 정적 메서드에서는 정적 필드만 사용 가능

접근자 프로포티

• getter, setter 함수라고도 부름
  getter : 객체의 속성(property)값을 반환하는 메소드 , 반드시 값을 반환 해야함, 특정 프로퍼티들을 원하는 방식으로 가공하여 내보낼 때 사용
  setter : 객체의 속성 값을 설정, 변경하는 메소드, 하나의 인자를 받음, 특정 프로퍼티에 값이 저장되는 방식을 조작하거나 제한하는데 사용
• 스스로는 값을 갖지 않음 - 다른 프로퍼티의 값을 읽거나 저장할 때 사용
• 내부 속성에 직접 접근하지 않아 객체의 정보은닉을 가능하게 해줘서 코드의 안정성, 유지보수성을 높일 수 있음
• get, set을 앞에 붙임

const user = {
	name: 'sujung',
    age: 50,
    
    // 객체의 메서드(함수)
    getName() {
    	return user.name;
    },
    setName(value) {
    	user.name = value;
    }
}

console.log(user.getName()); // sujung
user.setName('tistory');

 

 

const user = {
	name: 'sujung',
    age: 50,
    
    // userName() 메서드 왼쪽에 get, set 키워드만 붙이면 알아서 Getter, Setter 로서 동작된다
    get userName() {
    	return user.name;
    },
    set userName(value) {
    	user.name = value;
    }
}

함수처럼 지정되었지만 프로퍼티처럼 사용!

 

Setter 무한루프 : 데이터 프로퍼티 명과 접근자 프로퍼티 명이 같을 경우

 

class YalcoChicken {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  get no () { 
    return this._no + '호점'; 
  }
  set no (no) { 
    this._no = no;
  }
}

const chain1 = new YalcoChicken('판교', 3);

//setter와는 다른 필드명을 사용하여 자기반복호출을 방지
//constructor의 no는 setter를 가리키고 실제 필드명은 _no가 됨

은닉

- 캡슐화

• 객체지향의 주요 요소 중 하나 - 객체 내부의 값을 감추는(은닉) 것
• 인스턴스의 프로퍼티 값을 함부로 열람하거나 수정하지 못하도록
• 자바스크립트의 필드는 기본적으로 public 은닉되지 않음

private 필드를 통한 은닉

class Employee {
  #name = ''; //private 변수
  #num =100;
  #age = 0;
  constructor (name, age) {
    this.#name = name;
    this.#age = age;
  }
  // private 메서드
    #privMethod(){
        console.log(this.#num); // 프라이빗 변수 호출
    }
    
    publicMethod() {
        this.#privMethod(); // 프라이빗 메소드 호출
    }    
}

const emp1 = new Employee('김복동', 32);
console.log(emp1.#name); // ⚠️ 오류 발생 (일부 브라우저 제외)
console.log(emp1['#name']); // ⚠️ undefined 반환
console.log(emp1.publicMethod()); //100

• constructor, 접근자 프로퍼티 또는 기타 함수에서 접근 가능
• 인스턴스에서 바로 접근은 못하도록 은닉, 위 방법들로 제어