이 포스트는 자바스크립트의 객체지향을 공부하면서 적은 노트 입니다. 발전하는 개발자가 될 수 있도록 설명이 잘못되었다거나 조금 더 보충설명이 필요하시다고 생각되시면 댓글 남겨 주세요. 언제든지 환영입니다 😄

캡슐화는 위 이미지의 캡슐과 같이 클래스 내에서 데이터와 해당 데이터에 대해 작동하는 메서드를 번들로 묶어 데이터를 보호하는 것을 의미합니다.즉, 클래스 외부에서 클래스 내에 있는 멤버 변수에 접근 할 수 없습니다. 마치 내 가방은 오직 나만 손댈 수 있고 다른 사람이 손 댈 수 없는 거나 마찬가지 라는 메커니즘을 안고 있습니다.

캡슐화 구현

클래스 타입 기반의 객체 지향 언어(자바)는

1 . private 이라는 키워드를 클래스 내부 에서만 쓸 수 있는 아주 private한 클래스 멤버라고 명시적으로 나타낼 수 있습니다.
2 . getter와 setter를 이용하는 방법

프로토 타입 기반의 자바스크립트에서는 ES2019(ES10)이 나오기 전까진 private라는 키워드가 제공되지 않습니다. 하지만 getter/setter,Closures를 사용하여 은닉성을 가지는 로직을 구현할 수 있었습니다.ES2019 (ES10) 이 되어서야 Private 필드가 제공되어졌고 browser compatibility는 Node.js 12, Chrome 74, and Babel 입니다.

1. getter/setter

getter와 setter를 이용하여 특정 프로퍼티의 접근을 바로 접근 하지 않고 우회적으로 getter과 setter를 이용하여 접근 합니다. 완벽한 캡슐화는 아니지만 프로그램의 안전성 높아지는 방법입니다.

class User {
  constructor(lastName, email) {
    this.email = email //여기서의 this는 constructor function으로 생성할 수 있는 해당 객체를 의미한다.
    this.lastName = lastName
  }

  get email() {
    return `Email Address is  ${this._email}`
  }

  set email(address) {
    if (!address.includes('@')) {
      throw new Error(`invalid email: ${address}email should have a @`)
    }
    this._email = address
  }
}

const user2 = new User('user1@gmail.com', 'sue')
console.log((user2.email = 'user2gmail.com')) //바로 접근가능 && 수정 가능

console.log(user2)

setter,getter는 외부로부터 원하지 않는 조건을 가진 데이터가 들어올 때 외부에게 원하지 않는 이유와 함께 다시 외부로 돌려 보낼 수 있는 역할을 하게 됩니다.

User 클래스를 new라는 키워드를 이용해 객체를 생성하였고 user2라는 참조 변수에 할당되었습니다. 만약 getter 와 setter를 쓰지 않으면, user.email에 바로 직접 접근이 가능하여 실제 이메일 형식이 아닌 999-999-9999 와 같은 다른 형식의 값들을 넣을 수 도 있습니다.

이런 상황을 방지하고자 set email(address) 에서 외부의 데이터 address를 파라미터로 받고 만약 address에 @가 포함되어있지 않다면 error를 @가 포함되어 있지 않다라는 이유와 함께 외부에 다시 던져 사용자 or 다른 디벨로퍼들이 알 수 있게 해줍니다.

여기서 setter와 getter는 사용자 또는 다른 디벨로퍼의 관점에선 여전히 객체의 속성에 대한 접근(access)는 가능합니다. user2.email = "aaagmail.com" 하지만 setter 내의 로직에 의해 조건이 맞지 않다면 수정은 불가능 합니다. 이런 방법으로 프로그램에 의도된 로직과 맞는 데이터 들로만 캡슐화할 수 있습니다.

2. Closures

클로저를 사용하면 더 완벽하게 멤버변수를 private하게 외부에서 접근하지 못하게 할 수 있습니다.

클로저란 MDN에 의하면,

In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
발췌 : MDN Closures

inner function에서 outer function 스코프에 접근가능한 것을 closure라고 정의 하고 있습니다. 이런 구조는 function 안에 function이 정의 된 구조입니다. 바깥스코프에 접근 가능 한 클로저랑 캡슐화는 어떤 관계가 있을까요? 캡슐화의 가장 의미있는 목적인 외부에서 클래스 내에 있는 멤버 변수에 접근 할 수 없는 것을 달성하는데 클로저를 사용합니다. 클로저의 구조인 함수안의 함수를 생성합니다.

constructor function

function User(email, lastName) {
  this.lastName = lastName //public memeber
  let _email = email //private member

  this.getEmail = function () {
    return _email
  }
  this.setEmail = function () {
    _email = email
  }
}

const user1 = new User('a@gmail.com', 'sue')
console.log(user1.lastName) //sue public member variable
console.log(user1.getEmail()) //a@gmail.com  public member function
console.log(user1._email) // undefined

user1.setEmail('b@gmail.com')
console.log(user1.getEmail()) // b@gmail.com

여기서 public 메서드인 getName(),setName()가 클로저 역할을 하게됩니다. getEmail(),setEmail() 에서 _email 을 parameter로 보내지 않았음에도, 바깥 함수의 스코프에 있는 _email이란 변수에 접근할 수 있습니다. 자바스크립트 엔진은 식별자 해결을 위해 단계적으로 외부스코프를 참조하는데 _email변수를 외부스코프에서 참조한 것입니다. 그래서 public 멤버 함수, 위의 코드 베이스에선 getEmail()과 setEmail()이 클로저가 되면서 private의 변수인 _email을 참조하게됩니다.

getEmail()과 setEmail() 함수는 this객체의 프로퍼티로 선언하였으므로, 외부에서 new 키워드로 생성한 객체로 접근이 가능합니다. 그래서 public접근이 가능한 것이고, 반면 _email 변수를 객체에 프로퍼티로 직접 접근하려 할 때는, console.log(user.email) undefined 를 리턴하며 외부에서 직접 접근 할 수가 없습니다. 이렇게 클로저를 사용하여 외부의 접근을 차단하여 멤버 변수의 은닉성을 보장할 수 있습니다.

ES06 에서 Class를 사용한 버전입니다.

class User {
  constructor(email, lastName) {
    let _email = email
    this.lastName = lastName
  }

  set email(email) {
    if (!email.includes('@')) {
      throw new Error(`invalid email: ${email}email should have a @`)
    }
    this._email = email
  }
}

const user1 = new User('a@gmail.com', 'sue')
console.log(user1.lastName) //sue public member variable
console.log(user1.email) //a@gmail.com  public member function
console.log(user1._email) // undefined

console.log((user1.email = 'b@gmail.com'))
console.log(user1.email) // b@gmail.com

3. private fields

해쉬(#)를 추가해 private class 필드를 선언합니다.

class User {
  #lastName = ''
  #firstChar = ''

  constructor(lastName, email) {
    this.#lastName = lastName
    this.email = email
  }

  returnFirstChar() {
    return (this.#firstChar = this.#lastName.charAt(0))
  }

  get nickName() {
    return this.returnFirstChar()
  }
}

const user = new User('sue', 'user@gmail.com') //인자를 넣지 않으면 undefined 로 리턴한다.
console.log(user.email) //user@gmail.com <--public
console.log(user.#lastName) //❌ SyntaxError: Private field '#lastName' must be declared in an enclosing class
console.log(user.nickName) //s
console.log((user.#lastName = 'kelly')) //❌  SyntaxError

생성자 (constructor)에서 매개변수로 lastName 을 받아 private 속성으로 지정함으로써 외부에서 user.#lastName 으로 직접 접근하면 에러를 내보입니다. #private 는 위에서 소개한 방법들 보다 좀 더 명시적이며 멤버 변수에 대한 완벽한 은닉을 실행할 수 있는 방법입니다. private 사용법에 대해 좀 더 알고싶다면 MDN Private class fields를 참고 하세요.

참고자료

[도서 - 송형주/고현준, 인사이드 자바스크립트, 한빛 미디어 ]
MDN Closures
How to create private members in a JavaScript Class
data-flair.training Java
mycho님의 Javascript의 OOP 블로그

OOP Encapsulation in JavaScript

캡슐화 구현

1. getter/setter

2. Closures

3. private fields

Hi, I'm Hyunsu 👋