• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Object] JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터)

목차
  1. getter (= get 키워드)
  2. setter (= set 키워드)
  3. 함수 vs. setter
  4. getter/setter 방식 장점
  5. Object.defineProperty() 메서드
  6. getter/setter 관련 주소

[참고]

  • ECMAScript 5 (2009)는 Getter/Setter 접근자 도입.
  • Getter/Setter 접근자 사용하면 객체접근자 (= 계산된 속성) 정의 가능.
  • Getter・Setter 접근자는 IE9 이상 주요 최신브라우저 모두 지원.
 

getter (= get 키워드)

※ host 속성의 값을 얻기 위해 domain 속성 사용.

 

 

<p id="demo"></p>


<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  open : 2012,

  get domain() {

    return this.host;

  }

};

document.getElementById("demo").innerHTML = hz.domain;

</script>

 

결과보기: Homzzang.com


setter (= set 키워드)

※ host 속성의 값을 설정 위해 domain 속성 사용.

 


<p id="demo"></p>


<script>

var hz = {

  name: "홈짱닷컴",

  host : "",

  open : 2012,

  set domain(value) {

    this.host = value;

  }

};


hz.domain = "Homzzang.com";

document.getElementById("demo").innerHTML = hz.host;

</script>


결과보기: Homzzang.com

 

함수 vs. setter

[함수 방식] - 메서드로 객체 데이터에 접근

 

<p id="demo"></p>


<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  site : function() {

    return this.name + " " + this.host;

  }

};

document.getElementById("demo").innerHTML = hz.site();

</script>

 

결과보기: 홈짱닷컴 Homzzang.com


[getter 방식] - 속성으로 객체 데이터에 접근

※ 더 간단하고 나은 데이터품질 보증.

 

 

<p id="demo"></p>


<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  get site() {

    return this.name + " " + this.host;

  }

};

document.getElementById("demo").innerHTML = hz.site;

</script>

 

결과보기: 홈짱닷컴 Homzzang.com

 

getter/setter 방식 장점

 

1. 더 간단한 구문 제공.

2. 속성과 메소드에 대해 동일한 구문 허용.

3. 더 나은 데이터 품질 보장 가능.

4. 뒤에서  작업수행하는 데 유용.

 


[getter]

※ 값 반환 역할 하므로, return 명령어 필요 O.

 

 

<p id="demo"></p>


<script>

var hz = {

  name: "홈짱닷컴",

  host : "Homzzang.com",

  open : 2012,

  get domain() {

    return this.host.toUpperCase();

  }

};

document.getElementById("demo").innerHTML = hz.domain;

</script>

 

결과보기: HOMZZANG.COM


[setter]

※ 값 설정 역할하므로, return 명령어 필요 X.

 

 

<p id="demo"></p>


<script>

var hz = {

  name: "홈짱닷컴",

  host : "",

  open : 2012,

  set domain(value) {

    this.host = value.toUpperCase();

  }

};

hz.domain = "homzzang.com";

document.getElementById("demo").innerHTML = hz.host;

</script>

 

결과보기: HOMZZANG.COM

 

Object.defineProperty() 메서드


객체의 속성 정의 (= getter/setter 추가 가능) 역할 함.

 


[get/set 차이]

 

get

  • 정의: 속성의 접근자로 사용할 함수. (cf. getter 없으면 undefined임.)
  • 용법: 이 속성에 접근하면, 접근할 때 사용한 객체(상속으로 인해 속성의 주인 객체와 다를 수 있음)를 이 함수의 this로 설정하고, 매개변수 없이 호출한 뒤 그 반환 값을 이 속성의 값으로 취급. 
  • 기본값: undefined


set

  • 정의: 속성의 설정자로 사용할 함수. (cf. setter 없으면 undefined임.)
  • 용법: 이 속성에 값을 할당하면, 할당할 때 사용한 객체를 이 함수의 this로 설정하고, 한 개의 매개변수(할당 중인 값)로 호출.
  • 기본값: undefined

 


PS. MDN Object.defineProperty() 예제 보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty



[구문]

 

Object.defineProperty(object_name, "property_name", { 

  get/set : function () {code to be executed} });

 


[예제]

 

<p id="demo"></p>


<script>

// object 정의

var hz = {counter : 0};

 

// getter 정의

Object.defineProperty(hz, "reset", { // 초기화

  get : function () {this.counter = 0;}

});

Object.defineProperty(hz, "increment", { // 1 증가

  get : function () {this.counter++;}

});

Object.defineProperty(hz, "decrement", { // 1 감소

  get : function () {this.counter--;}

});

 

// setter 정의

Object.defineProperty(hz, "add", { // value 더하기

  set : function (value) {this.counter += value;}

});

Object.defineProperty(hz, "subtract", { // value 빼기

  set : function (value) {this.counter -= value;}

});


hz.reset; // 여기까지 0 (※ getter이므로 값 할당 필요 X)

hz.add = 5; // 여기까지 5 (※ setter이므로 값 할당 필요 O)

hz.subtract = 1; // 여기까지 4 (※ setter이므로 값 할당 필요 O)

hz.increment; // 여기까지 5 (※ getter이므로 값 할당 필요 X)

hz.decrement; // 여기까지 4 (※ getter이므로 값 할당 필요 X)

document.getElementById("demo").innerHTML = hz.counter; // 4

</script>

 

결과보기: 4


getter/setter 관련 주소

 

엘리 님 (JS 6강. Getter vs. Setter)

https://youtu.be/_DLhUBWsRtw

 

MDN getter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get 

 

MDN setter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 디피씨평단14752원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2022-02-03 (목) 13:24 2년전
안녕하세요 질문이 있어 드립니다.

마지막 예제에서

  Object.defineProperty(hz, "decrement", {
    get : function () {this.counter--;}
  }); 이 부분을

  Object.defineProperty(hz, "decrement", {
    set : function () {this.counter--;}
  }); 이렇게 수정을 하면 counter가 -1 되어 저장될거라 생각했는데 결과값은 그게 아니네요ㅠㅠ 혹시 set은 value가 있어야만 정상동작하는지요??

<p id="demo"></p>

<script>
  var hz = {counter : 0};
 
  Object.defineProperty(hz, "reset", {
    get : function () {this.counter = 0;}
  });

  Object.defineProperty(hz, "increment", {
    get : function () {this.counter++;}
  });

  Object.defineProperty(hz, "decrement", {
    set : function () {this.counter--;}
  });

  Object.defineProperty(hz, "add", {
    set : function (value) {this.counter += value;}
  });
  Object.defineProperty(hz, "subtract", {
    set : function (value) {this.counter -= value;}
  });

  hz.reset; //0
  // hz.add = 5; //5
  // hz.subtract = 1;
  hz.increment; //1
  hz.add = 5; //6
  hz.decrement; //5? 근데 6임
  document.getElementById("demo").innerHTML = hz.counter;
</script>
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2022-02-03 (목) 14:10 2년전
set은 값(=독립변수 역할하는 녀석) 지정이 필요합니다.
따라서, 아래처럼 사용해야 합니다.

hz.decrement=1;
https://codepen.io/sinbi/pen/wvPWevd

(자세한 건, 아래 글 1/4 상단 지점 쯤 참고해 보세요.)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

get
속성의 접근자로 사용할 함수입니다. 접근자가 없으면 undefined입니다. 이 속성에 접근하면, 접근할 때 사용한 객체(속성의 주인 객체와 다를 수 있음)를 이 함수의 this로 설정하고, 매개변수 없이 호출한 뒤 그 반환 값을 이 속성의 값으로 취급합니다. 기본 값은 undefined입니다.

set
속성의 설정자로 사용할 함수입니다. 설정자가 없으면 undefined입니다. 이 속성에 값을 할당하면, 할당할 때 사용한 객체를 이 함수의 this로 설정하고, 한 개의 매개변수(할당 중인 값)로 호출합니다. 기본 값은 undefined입니다.
주소
분류 제목
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
Form JS - Forms - 폼양식 유효성 제어
Form JS - Forms API - 폼유효성
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Functions JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…
Functions JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …
Functions JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…
Functions JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)
DOM JS - DOM (= 돔 = 문서객체모델) 정의
DOM JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)
3/67
목록
찾아주셔서 감사합니다. Since 2012