17-4. Object 오브젝트(ES5 기준) / getter와 setter, get 속성, set 속성

get 속성

• getter

  • OOP 용어
    즉, 객체지향을 지원하는 프로그래밍 언어에서 사용할 수 있습니다.

• var result = obj.book; 코드를 만나면 (book 프로퍼티네임에 value를 설정안하고 get설정)

    var obj = {};
    Object.defineProperty(obj, "book", {
        get: function () {
            return "JS책";
        }
    })
    // 아래 book 프로퍼티로 값을 구하려는데 위에 value 코드가 없다.
    // 프로퍼티 값을 부를 때 value 속성이 없으면 get을 호출한다.
    // 이것이 바로 getter이다.
    var result = obj.book;
    console.log(result); // JS책
  

  • obj.book의 get 함수가 호출되며
  • get 함수에서 “JS책”을 반환
  • 반환된 “JS책”을 result 변수에 할당

  ---

  • 위 book 프로퍼티로 값을 구하려는데 위에 value 코드가 없다.
  • 프로퍼티 값을 부를 때 value 속성이 없으면 get을 호출한다.
  • 이것이 바로 getter이다.

• obj.book.get() 처럼 함수로 호출하면 에러 발생

set 속성

• setter

  • OOP 용어

• obj.book = “JS책”; 코드를 만나면 (book 프로퍼티네임에 value를 설정안하고 set과 get설정)

    var obj = {}, data = {};
    Object.defineProperty(obj, "book", {
        set: function (param) { 
            data.title = param;
        },
        get: function () { 
            return data.title;
        }
    })
    obj.book = "JS책";
    console.log(obj.book); // JS책
  

  • obj.book의 set 함수를 호출하면서
  • “JS책”을 파라미터 값으로 넘겨줌
  • data의 title 프로퍼티에 “JS책”을 설정

• obj.book; 코드를 만나면

  • obj.book의 get 함수가 호출되며
  • get 함수에서 data.title 값을 반환
  • setter에서 설정한 “JS책”이 반환됨

위 스타일은 ES5 스타일입니다.
ES6에 위의 방법보다 조금 더 코딩이 편하고 확장성 있는 형태가 나왔습니다.
따라서 ES5 환경에서 개발하시려면 위의 형태를 쓰시지만,
ES6 환경이라면 ES6의 getter와 setter를 사용하시는 것이 더 효율적입니다.