디바운스(Debounce)와 스로틀(Throttle)
- 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 방법이다.
- 이벤트 핸들러가 많은 연산을 수행 하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트 발생 시키는 것을 목표로 하는 기술이다.
Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음) 하나의 이벤트만 발생하도록 하는 기술입니다. 즉, 순차적 호출을 하나의 그룹으로 "그룹화"할 수 있습니다.
Throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술입니다. 예를 들어 Throttle 의 설정시간으로 1ms 를 주게되면 해당 이벤트는 1ms 동안 최대 한번만 발생하게 됩니다. 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것.
Debounce와 Throttle 차이점
스로틀은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것입니다.
디바운스는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법입니다.
따라서 5ms가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시됩니다.
<참조>
https://webclub.tistory.com/607
프로퍼티 속성
자바스크립트 객체의 프로퍼티에는 그 프로퍼티가 어떻게 동작하는지 나타내는 세 가지 속성이 있다.
- 쓰기 가능(writable) 속성
프로퍼티 값을 바꿀 수 있는지 나타낸다. - 열거 가능(enumerable) 속성
for/in루프나Object.keys()메서드에서 해당 프로퍼티를 열거할 수 있는지 나타낸다. - 변경 가능(configurable) 속성
프로퍼티를 삭제할 수 있는지, 프로퍼티 속성을 바꿀 수 있는지 나타낸다.
일반적인 할당으로 정의된 프로퍼티는 쓰기, 열거, 변경 모두 가능이다.
접근자 프로퍼티 (getter, setter)
객체의 프로퍼티는 두 종류로 나뉜다.
-
데이터 프로퍼티(data property)
값을 저장하기 위한 프로퍼티. -
접근자 프로퍼티(accessor property)
접근자 프로퍼티의 본질은 함수인데, 값을 획득(get)하고 설정(set)하는 역할을 담당함.
그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다.
getter와 setter
접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있다.
let obj = {
get propName() {
// getter, obj.propName을 실행할 때 실행되는 코드
},
set propName(value) {
// setter, obj.propName = value를 실행할 때 실행되는 코드
}
};getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행되고,
setter 메서드는 obj.propName = value으로 프로퍼티에 값을 할당하려 할 때 실행된다.
<참조>
https://ko.javascript.info/property-accessors#ref-2605
프로토타입 속성
-
prototype속성은 객체가 생성될 때 설정되고, 객체 리터럴로 생성된 객체의 프로토타입은Object.prototype이다. -
new로 생성한 객체의 프로토타입은 생성자 함수의prototype프로퍼티 값이다. -
Object.create()로 생성된 객체의 프로토타입은Object.create()의 첫 번째 인자이다.(null일 수 있음) -
객체의 프로토타입은 객체를
Object.getPrototypeOf()에 전달하여 파악할 수 있다.
Object.getPrototypeOf({}) // Object.prototype
Object.getPrototypeOf([]) // Array.prototype
Object.getPrototypeOf(()=>{}) // Function.prototype- 객체가 다른 객체의 프로토타입인지(또는 프로토타입 체인에 속해 있는지)는
isPrototypeOf()메서드로 파악한다.
let a = {x: 1};
let b = Object.create(a);
a.isPrototypeOf(b) // true: b는 a를 상속한다.
Object.prototype.isPrototypeOf(a) // true: a는 Object.prototype을 상속한다.
Object.prototype.isPrototypeOf(b) // true: b도 Object.prototype을 상속한다.Object.setPrototypeOf()로 객체의 프로토타입을 변경할 수 있다.
let a = {x: 1};
let b = {y: 2};
Object.setPrototypeOf(a, b); // a의 프로토타입을 b로 변경한다.
o.y // 2 : a는 이제 프로퍼티 b를 상속한다.
let c = [1, 2, 3];
Object.setPrototypeOf(c, b); // 배열 c의 프로토타입을 b로 변경한다.
c.join // undefined : 이제 c에는 join() 메서드가 없다. 프로토타입이 b로 대체되었기 때문.- 초기 브라우저 일부에서는 객체의
prototype속성에__proto__라는 이름을 사용했다.
let a = { z: 3 };
let b = {
x: 1,
y: 2,
__proto__: a
};
b.z // 3 : b는 a를 상속한다.