JavaScript | Getter, Setter (엑세스함수)

Ryan·2020년 8월 18일
0

JavaScript

목록 보기
7/18
post-thumbnail

프로퍼티는 둘로 나뉜다. (데이터 프로퍼티, 접근자 프로퍼티)
데이터 프로퍼티는 우리가 알고 있는 객체에 값을 저장하고 있는 그 프로퍼티다.
접근자 프로퍼티는 객체 지향 프로그래밍에서 객체가 가진 프로퍼티 값을 객체 바깥에서 읽거나 쓸 수 있도록 제공하는 메서드를 말합니다. 객체의 프로퍼티를 객체 바깥에서 직접 조작하는 행위는 데이터의 유지 보수성을 해치는 주요한 원인이 되기도 한다.

1. 엑세스 함수를 쓰는 이유

1) 캡슐화를 해야하는 이유

  • 한 오브젝트의 내부속성을 외부에서 알지 못하게 하고,
    접근이 불가능하게 하여 객체지향의 목적인 정보은닉객체의 무결성 보장을 위함 + validation을 하기 위해서

2) 쓰지 말아야 하는 이유

  • 엑세스 함수를 남발하는것은 오히려 무결성을 헤칠 수 있다는 의견인데,
    무결성을 엄밀히 지키려면 생성 이후에는 객체 내부의 데이터를 조작할 수 있는 단하나의 방법은 공개된 메소드를 통한 조작으로만 가능해야하지 엑서스 함수로 조작이 되서는 안된다.
  • 윈시데이터를 접근할때는 원본데이터를 복사해서 반환하지만, 오브젝트필드를 getter로 접근할때는 레퍼런스 값을 반환하기 때문에 필드 객체에 접근하면서 이를 조작할 수도 있다.
  • 이러한 접근은 데미테르 법칙을 애초에 위반하는 방법이기도 하지만, 이 법칙을 강제적으로 사용하지 못하도록 엑서스 함수를 선언하지 않으면 된다는 의견이 있다.

2. Getter

: getter는 객체의 특정 프로퍼티 값을 가져오도록 하기 위한 함수이다.

let user = {
  name: "John",
  surname: "Smith"
};
  • 먼저 데이터 프로퍼티 name과 surname이 있는 객체 user를 만들었다.
  • 이 객체에 fullName 이라는 프로퍼티를 추가해 fullName이 'John Smith'가 되도록 해본다.
let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

console.log(user.fullName); // output: John Smith
  • 접근자 프로퍼티를 사용하면 함수처럼 호출 하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 평범하게 user.fullName을 사용해 프로퍼티 값을 얻을 수 있다.
user.fullName = "Test"; // Error (프로퍼티에 getter 메서드만 있어서 에러가 발생합니다.)
  • getter는 메서드만 가지고 있기 때문에 =을 사용해 값을 변수에 할당하려고 하면 에러가 발생한다.
  • 해당 프로퍼티를 복사해서 반환하기 때문에 무결성을 지켜줄 수 있는 방법이 된다

3. Setter

: setter는 객체의 특정 프로퍼티 값을 설정하기 위한 함수이다.

let user = {
  name: "John",
  surname: "Smith",
  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper
  • 이렇게 getter와 setter 메서드를 구현하면 객체엔 fullName이라는 '가상’의 프로퍼티가 생긴다.
    가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는다.
profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글