javascript closure3 클로저 활용 예시 (1) 클로저 활용 예시 (1) - 콜백함수가 외부 데이터 참조 콜백함수 내부에서 외부변수를 참조하는 클로저의 두가지 로직을 기록하기 위해🧐 첫 번째는 콜백함수를 내부함수로 선언해서 외부변수를 직접 참조하는 로직이고, 두 번째는 콜백함수를 고차함수로 바꿔서 클로저를 활용하는 로직이다. 1. 콜백함수가 외부변수를 직접 참조 let delivery = ['chicken', 'pizza', 'sushi']; let $ul = document.createElement('ul'); delivery.forEach(el => { // 콜백함수(A) let $li = document.createElement('li'); $li.innerText = el; $li.addEventListener('click', function(.. 2022. 3. 31. setInterval과 addEventListener 🚩clearInterval과 removeEventListener는 종료 대상이 다르다. clearInterval => setInterval 자체를 종료 removeEventListener => 콜백함수를 종료 1. window 메서드 (setInterval) setInterval 자체를 종료한다. clearInterval(intervalID) /* 지역변수 num을 참조하는 내부함수를 외부로 전달했으므로 클로저 */ (function() { let num = 0; let intervalID = null; intervalID = setInterval(function(){ if (++num >= 5) { clearInterval(intervalID); } console.log(num); }, 100); }).. 2022. 3. 31. 클로저 (Closure) 1. 클로저란? 외부함수 A에서 선언한 "지역변수 a를 참조하는 내부함수 B가 외부로 전달"될 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상(참조할 수 있는 현상) 지역변수를 참조하는 내부함수를 외부에 전달하면 클로저! 내부함수에서 외부 변수를 사용하면 클로저! ✅ 내부함수를 외부로 전달하는 방법은 함수를 return 하거나 콜백으로 전달 2. 일반함수의 경우? outer함수의 실행 컨텍스트가 종료되기 전에 이미 inner함수의 실행 컨텍스트가 종료돼 있으므로 이후 별도로 inner함수를 호출할 수 없다. 일반 함수와 마찬가지로 outer의 Lexical Environment가 모두 가비지 컬렉팅 대상에 포함! ( inner가 먼저 종료되므로 outer의 Lexical Envi.. 2022. 3. 30. 이전 1 다음
