본문 바로가기

반응형

책/코어자바스크립트

(5)
05. 클로저와 debounce, 커링 debounce 짧은 시간 안에 동일한 이벤트가 많이 발생했을 때, 최적화를 위해서 처음이나 마지막 한 번만 처리하는 것. var debounce = function (eventName, func, wait){ var timeoutId = null; return function (event){ var self = this; // console.log(this); clearTimeout(timeoutId); timeoutId = setTimeout(func.bind(self,event), wait); }; }; var moveHandler = function (e) { console.log('처리'); }; var wheelHandler = function (e) { console.log('처리2'); }..
Async/ await 예제 4-17) 비동기 작업의 동기적 표현 - Promise + Async/await var addCoffee = function (name) { // 최초의 addCoffee 함수는 resolve(name)과 함께 Promise를 반환한다. return new Promise(function (resolve) { setTimeout(function () { resolve(name); }, 500); }) }; var coffeeMaker = async function () { var coffeeList = ''; var _addCoffee = async function (name) { coffeeList += (coffeeList ? ',' : '') + await addCoffee(name); }; a..
콜백함수에서의 this 예제 4-8) 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법(1) - 전통적인 방식 var obj1 = { name: 'obj1', func: function () { var self = this; return function () { console.log(self.name); }; } }; var callback = obj1.func(); setTimeout(callback, 1000); // 1초 뒤 'obj1' 객체 출력 예제 4-8의 func 함수 재활용 ... var obj2 = { name: 'obj2', func: obj1.func }; var callback2 = obj2.func(); setTimeout(callback2, 1500); // 1.5초 후 'obj2' 객체 출력 v..
[코어자바스크립트] 03. 종잡을 수 없는 this JavaScript에서 this가 동작하는 방식(규칙?) 함수로서 호출됐을 때에는 this에 전역 객체가 바인딩 되고, 메서드로서 호출됐을 때에는 this에 호출 주체에 대한 정보가 담긴다. setTimeout처럼 this를 정의하지 않는 함수라면 전역 객체를 바인딩하고, 77p. addEventListener가 메서드로서 호출되므로 그 앞에 있는 #a 요소를 this에 바인딩 한다. 이것이 가능한 이유는 addEventListener 메서드는 콜백함수를 호출할 때 자신의 this를 상속하도록 정의돼있기 때문. 함수와 메서드의 차이는? 함수와 메서드의 차이는 독립성 그 자체로 독립적인 기능을 수행하면 함수 자신을 호출한 대상 객체에 관한 동작을 수행하면 메서드 (참고) 어떤 함수를 객체의 프로퍼티에 할당..
[코어자바스크립트] 01. 불변 객체, 넌 누구냐? 기본형, 참조형 자바스크립트의 데이터 타입에는 크게 두 가지, 기본형 데이터 타입(Primitive type), 참조형 데이터 타입(Reference type)이 있다. 불변값 JavaScript에서 모든 기본형 데이터 타입은 불변값이다. 한 번 만든 값은 바꿀 수 없고, 변경은 새로 만드는 동작을 통해서만 이뤄지는 것 을 불변값이라고 하는데 다음 예시를 살펴보자. 이 코드는 아래 표와 같이 저장된다. var myString = 'abc'; 주소 ... 1002 1003 1004 1005 ... 데이터 이름: myString 값: @5004 주소 ... 5002 5003 5004 5005 ... 데이터 'abc' 이렇게 'def'를 기존 string에 추가한다면 어떻게 될까? var myString = ..

반응형