티스토리 뷰

JavaScript

[자바스크립트] getter, setter

버미노트 2017. 1. 13. 10:08


JS


getter



getter는 객체의 프로퍼티를 가져오는 함수를 말합니다.



1. 문법

{get prop() { ... } }
{get [expression]() { ... } }


파라미터

prop

프로퍼티를 가져올 함수 이름


expression

ES6에서 추가되었습니다. 계산 되어지는 프로퍼티 이름을 위해 expression이 추가되었습니다. 밑에서 코드로 설명드리겠습니다.



2. 설명

동적으로 계산이 필요한 프로퍼티 값을 가져와야 할 때, getter를 사용한다면 별도의 함수를 만들 필요가 없습니다.


getter를 사용할 때 3가지에 유의해야 합니다.

1. 식별자로 숫자와 문자를 모두 사용할 수 있습니다.

2. 파라미터가 없어야 합니다.

3. 리터럴 객체의 같은 이름의 get이나 동일한 이름의 프로퍼티를 가질 수 없습니다. ({ get x() {}, get x() {} }, { x : ..., get x() {} } 불가능)



3. 예시

getter는 객체를 초기화 할 때 선언 할 수 있습니다.

var log = ['test'];
var obj = {
    get latest () {
        if (log.length == 0) return undefined;
        return log[log.length - 1]
    }
}
console.log(obj.latest); // Will return "test".

getter는 객체 초기화때 선언 할 수 있습니다.getter는 객체 초기화때 선언 할 수 있습니다.


getter는 삭제가 가능합니다.

var log = ['test'];
var obj = {
    get latest () {
        if (log.length == 0) return undefined;
        return log[log.length - 1]
    }
}
console.log(obj.latest);
delete obj.latest;
console.log(obj.latest);

getter는 삭제가 가능합니다.getter는 삭제가 가능합니다.


객체가 이미 존재 할 때, defineProperty 메소드로 getter를 정의할 수 있습니다.

var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

객체가 이미 존재 할 때, defineProperty 메소드로 getter을 정의 할 수 있습니다.객체가 이미 존재 할 때, defineProperty 메소드로 getter을 정의 할 수 있습니다.


동적으로 getter 이름을 정의 할 수 있습니다.

이 방법은 ES6에서 포함된 기능입니다. 아직 여러 브라우저에서 지원되지 않고, 지원하지 않는 환경에서는 syntax error가 발생됩니다.

var expr = "foo";

var obj = {
    get [expr]() { return "bar"; }
};

console.log(obj.foo); // "bar"

동적으로 getter 이름을 정의 할 수 있습니다.동적으로 getter 이름을 정의 할 수 있습니다.



4. getter의 장점

계산 미루기 (Lazy getter)

getter는 프로퍼티에 접근하기 전까지 그 값을 계산하지 않습니다.

getter의 값 계산은 실제 값이 필요할 때 이루어지고, 값이 필요하지 않다면, 계산을 하지 않습니다. 즉 값이 필요하지 않다면 쓸데없는 계산을 하지 않아 cpu를 낭비하지 않게 됩니다.


캐싱 (Smart/Memorized getter)

최적화 방법으로 계산 미루기와 함께 캐싱하는 것이 있습니다.

값은 getter가 호출될 때 처음 계산되며 캐싱됩니다. 이후의 호출은 다시 계산하지 않고 이 캐시값을 반환합니다.


이러한 캐싱은 다음과 같은 경우에 유용합니다.

1. 값의 계산 비용이 큰 경우. (RAM이나 CPU 시간을 많이 소모하거나, worker thread를 생성하거나, 원격 파일을 불러오는 등)

2. 값이 당장 필요하지 않지만 나중에 사용되어야 할 경우(혹은 이용되지 않을 수도 있는 경우)

3. 값이 여러번 이용되지만 변경되지 않아 매번 계산할 필요가 없는 경우



5. getter 사용시 유의사항

getter은 값을 캐싱하고 있기 때문에 아래와 같은 경우, 사용에 유의해야 합니다.

var o = {
  set foo (val) {
    delete this.foo;
    this.foo = val;
  },
  get foo () {
    delete this.foo;
    return this.foo = 'something';
  }
};

o.foo = "test";
console.log(o.foo);

getter은 캐싱되기 때문에 유의해야 합니다.getter은 캐싱되기 때문에 유의해야 합니다.


something이 출력되어야 할 것 같지만. test가 출력되는 것을 확인 할 수 있습니다.



setter



setter는 객체의 프로퍼티를 설정하는 함수를 말합니다.



1. 문법

{set prop(val) { . . . }}
{set [expression](val) { . . . }}


파라미터

prop

프로퍼티를 가져올 함수 이름


expression

ES6에서 추가되었습니다. 계산 되어지는 프로퍼티 이름을 위해 expression이 추가되었습니다. (getter와 방식이 동일 합니다.)



2. 설명

setter는 프로터티 값이 변경되어 질 때마다 함수를 실행하는데 사용됩니다.


setter를 사용할 때 3가지에 유의해야 합니다.

1. 식별자로 숫자와 문자를 모두 사용할 수 있습니다.

2. 한개의 파라미터만 가질 수 있습니다.

3. 리터럴 객체의 같은 이름의 set이나 동일한 이름의 프로퍼티를 가질 수 없습니다. ({ set x() {}, set x() {} }, { x : ..., set x() {} } 불가능)



3. 예시

setter는 객체를 초기화 할 때 선언 할 수 있습니다.

var o = {
    set current (str) {
        this.log[this.log.length] = str;
    },
    log: []
}
o.current = "test";
console.log(o);

setter는 객체 초기화때 선언 할 수 있습니다.setter는 객체 초기화때 선언 할 수 있습니다.


setter는 삭제가 가능합니다.

var o = {
    set current (str) {
        this.log[this.log.length] = str;
    },
    log: []
}
o.current = "test";
delete o.current;
o.current = "test2";

setter는 삭제가 가능합니다.setter는 삭제가 가능합니다.


delete로 setter가 삭제되어 test2가 저장되지 않는 것을 확인 할 수 있습니다.


객체가 이미 존재 할 때, defineProperty 메소드로 setter를 정의 할 수 있습니다.

var o = { a:0 };

Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });

o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) // 5

객체가 이미 존재 할 때, defineProperty 메소드로 setter을 정의 할 수 있습니다.객체가 이미 존재 할 때, defineProperty 메소드로 setter을 정의 할 수 있습니다.


동적으로 setter 이름을 정의 할 수 있습니다.

getter와 동일하게, 이 방법은 ES6에서 포함된 기능입니다. 아직 여러 브라우저에서 지원되지 않고, 지원하지 않는 환경에서는 syntax error가 발생됩니다.

var expr = "foo";

var obj = {
  baz: "bar",
  set [expr](v) { this.baz = v; }
};

console.log(obj.baz); // "bar"
obj.foo = "baz";      // run the setter
console.log(obj.baz); // "baz"

동적으로 setter 이름을 정의 할 수 있습니다.동적으로 setter 이름을 정의 할 수 있습니다.


첫번째 console.log에는 초기값 bar가, 두번째 console.log에는 동적으로 이름되어진 foo로 정의된 baz가 출력되는 것을 확인 할 수 있습니다.



댓글
공지사항
최근에 올라온 글