이전 포스팅에서 클로저의 개념을 살펴보았다. 이번 포스팅에서는 배웠던 개념을 바탕으로 클로저의 예시와 활용법에 대해서 알아보고자 한다. 클로저 예시 1 코드 let f; const g = function () { const a = 23; f = function () { console.log(a * 2); } } g(); f(); 클로저 예시 1 코드 해석 해당 코드를 콘솔창에서 실행했을 경우 '46'이라는 결과값을 얻게 된다. f 함수는 어떻게 g의 'a'라는 변수에 접근할 수 있을까? 'g()'를 실행했을 때 'a'는 23이되고, 'f'는 함수라는 것까지 정의된다. 이후 'f()'가 실행되면서 '46'이 나온다. 이 과정을 자세히 살펴보면 f 함수에 정의된 실행 컨텍스트의 모든 변수가 클로저로 연결(C..
클로저의 개념 클로저란 기능은 배열이나 새기능을 만드는 것처럼 사용자가 명시적으로 사용하지 않는다. 특정 상황에서 자동으로 사용되며 클로저를 사용하고 있다고 이해하면 된다. 클로저를 이해하기 위해 아래 코드를 통해 예시를 살펴보자. secureBooking이라는 함수를 정의하였다. 이 함수는 passengerCount라는 변수를 가지며 이는 외부에서 조작하거나 접근할 수 없다. secureBooking 함수는 함수를 return하는데 상위에서 정의한 passengerCount 변수를 업데이트하는 것이다. const secureBooking = function() { let passengerCount = 0; return function() { passengerCount++; console.log(`${p..
자바스크립트에서 작성하는 대부분의 코드는 동기(synchronous) 코드이다. 동기 코드는 라인 순서대로(line by line) 실행된다. 아래의 코드를 보자. const p = document.querySelector('.p'); // 1번 p.textContent = 'My name is Jonas!'; // 2번 alert('Text set!'); // 3번 p.style.colro = 'red'; // 4번 동기(Synchronous) 코드의 문제점 코드가 '1번'라인에 도달하면 '실행 스레드(Thread of execution)'가 동작하며 코드가 실행된다. '실행 스레드'는 실행 컨텍스트의 일부로 컴퓨터 CPU에서 코드를 실질적으로 실행한다. 이 '실행 스레드'에서 '2번', '3번', '..
https://codesmoothie.tistory.com/4 [JavaScript] 프로미스(Promise) Consume - fulfilled 처리 방법 fetch 함수가 반환하는 Promise를 어떻게 사용(Consume)하는지 방법을 알아보자. 아래는 오픈 API를 사용해 국가(country) 데이터를 가져오는 코드이다. 처음 fetch로 요청했을 때 Promise는 'pending' 상태이다. codesmoothie.tistory.com 이 글은 "프로미스(Promise) - fulfilled 처리 방법"의 포스팅에서 연장되는 글이다. 아래의 코드는 지난번 작성한 코드이다. const getCountryData = function (country) { fetch(`https://restcount..