• 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

🔜 프로퍼티 접근

자바스크립트에서 클래스나 객체의 프로퍼티에 접근할 때, 키값으로 바로 접근할 수도 있다.

const object = {
  id: 'hello',
  password: 'pass'
};

하지만 password와 같은 비밀번호는 키값을 통해 바로 나타내고 싶지 않을 수 있다. 그러면 어떤 방법으로 숨길 수 있을까?

이럴 때 사용하는게 다른 프로그래밍 언어에서도 많이 쓰이는 Getter 와 Setter 이다.

🧐 Getter/Setter

다른 프로그래밍 언어에서는 Getter와 Setter를 지정할 때 관습적으로 함수의 이름으로 get###, set###을 많이 사용한다.

자바스크립트에서는 앞에 문법을 추가하면 간단하게 위와 같은 기능으로 구현할 수 있다. 물론 다른 프로그램이 언어에서 사용되는 방법도 동일하게 사용할 수 있다!

Getter

Getter는 프로퍼티의 값을 읽는 함수다. 객체 내부의 프로퍼티 키만 조회하며, 블록 스코프를 가진다.

const object = {
  id: 'hello',
  _password: 'pass',
  get password() {
    return this._password;
  }
};

console.log(object.password);	// pass

password의 키값 앞에 _ 를 붙인 이유는 자바스크립트에서 객체 데이터와 함수 이름을 동일하게 할 수 없다는 것과 관습적으로 private 변수를 의미하기 때문이다.

위 구문은 object._password 를 사용해도 동일하게 동작한다.

Setter

프로퍼티를 읽었으니 반대로 프로퍼티를 설정하는 함수도 있다. Getter와 동일한 블록 스코프를 가진다.

const object = {
  id: 'hello',
  _password: 'pass',
  get password() {
    return this._password;
  },
  set password(password) {
  	this._password = password;
  }
};

console.log(object.password);	// pass

object.password = 'newPass';
console.log(object.password);	// newPass

다른 방법

Getter/Setter를 다른 프로그래밍 언어처럼 사용하면 아래와 같다. 함수 이름에 명시적으로 나타내고, setter같은 경우 더 많은 매개변수를 받을 수 있다.

const object = {
  _id: 'hello',
  _password: 'pass',
  getPassword: function() {
    return this._password;
  },
  setPassword: function(id, password) {
    this._id = id;
  	this._password = password;
  }
};

console.log(object.getPassword());	// pass

object.setPassword('newId', 'newPass');
console.log(object.getPassword());	// newPass

🔚 접근제어자

위 예제에서 id와 password 객체 앞에 _ 를 붙여줌으로써 외부에서 접근 불가능한 프로퍼티를 명시했다.

하지만 자바스크립트 문법에서 막는 것은 아니므로, 이 악물고 접근하면 프로퍼티에 얼마든지 접근할 수 있다.

object._id = 'lalablah';
object._password = 'hahaha';

이런 현상을 방지하기 위해 자바스크립트의 슈퍼셋인 타입스트크립트에서는 private, protected와 같은 접근제어자를 제공한다. 자바스크립트에서는 클로저와 같은 방식으로 접근제어를 할 수 있는데 다른 방법도 있다.

ES2019부터 새롭게 도입된 private 접근제어자를 사용하면 된다!

const object = {
  #id: 'hello',
  #password: 'password'
}

위와 같이 키값 앞에 # 을 붙여주면 자바스크립트 런타임에서 private한 것을 인지하고 외부에서 접근 시 에러를 발생시킨다.

다만 protected와 같이 상속받았을 경우 접근할 수 있는 방법은 없다. 완전히 해당 클래스 혹은 객체에서 사용할 때만 권장된다.

& 자바스크립트 참고 강의 링크

생활코딩 JavaScript
getter
setter
private field