접근자 프로퍼티 getter, setter와 은닉

DOYOUNG·2023년 5월 20일
0

javascript

목록 보기
11/17
post-thumbnail

1. 접근자 프로퍼티

기존의 객체에 사용되던 프로퍼티는 데이터 프로퍼티라고 함.
접근자 프로퍼티 : getter , setter 함수라고도 부름.
👉 스스로는 값을 갖지 않으며 다른 프로퍼티의 값을 읽거나 저장할 때 사용함
👉 get , set 을 앞에 붙여서 사용함

const person1 = {
  age: 17,

  get koreanAge () {
    return this.age + 1;
  },

  set koreanAge (krAge) {
    this.age = krAge - 1;
  }
}

함수처럼 지정되었으나 프로퍼티처럼 사용함

클래스에서도 사용 가능함

class YalcoChicken {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  get chainTitle() {
    return `${this.no}${this.name}`;
  }
  set chainNo(chainNo) {
    if (typeof chainNo !== 'number') return;
    if (chainNo <= 0) return;
    this.no = chainNo;
  }
}

const chain1 = new YalcoChicken('판교', 3);
console.log(chain1.chainTitle);

chain1.chainNo = 4;
console.log(chain1);

getter : 반드시 값을 반환해야 함, 특정 프로퍼티를 원하는 방식으로 가공하여 내보냄
setter : 하나의 인자를 받음, 특정 프로퍼티 값이 지정되는 방식을 조작하거나 제한함

은닉

캡술화 encapsulation

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

📌 private 필드를 통한 은닉

class Employee {
  #name = '';
  #age = 0;
  constructor (name, age) {
    this.#name = name;
    this.#age = age;
  }
}

const emp1 = new Employee('김복동', 32);

console.log(emp1.#name); // ⚠️ 오류 발생 (일부 브라우저 제외)
console.log(emp1['#name']); // ⚠️ undefined 반환            
  • 은닉된 프로퍼티는 꺼내서 사용할 수 없음
  • 필드명 앞에 #을 붙임
  • 클래스 바로 안쪽에 정의해야 함 (constructor에만 하면 안 됨)

클래스 내에서는 private 필드에 접근 가능

class Employee {
  #name = '';
  #age = 0;
  constructor (name, age) {
    this.#name = name;
    this.#age = age;
  }
  get name () {
    // [n]: n + 1 번째 글자를 반환
    return this.#name[0] + '모씨';
  }
  get age () {
    return this.#age - (this.#age % 10) + '대';
  }
  set age (age) {
    if (typeof age === 'number' && age > 0) {
      this.#age = age;
    };
  }
  getOlder(years) { this.#age += years; }
}

const emp1 = new Employee('김복동', 22);

console.log(emp1.name, emp1.age); // 김모씨 20대
profile
프론트엔드 개발자 첫걸음

0개의 댓글