async, await

async, await async, await을 사용해서 비동기 프로그래밍을 할 수 있다. async 키워드를 사용해서 함수를 선언하게 되면 함수 내부에서 await 키워드를 사용할 수 있다. await 키워드는 promise로 만든 함수에만 사용할 수 있다. await을 사용하면 다음 코드를 실행하지 않고 promise를 기다린다. 하지만 스레드를 막고 있지는 않아서 함수 외부의 다른 코드는 실행된다. const getPromise = (seconds) => new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('완료'); }, seconds * 1000); }); // async 함수 선언 // async 함수 키워드로 함수를 선언하면 함수 내부에서 ..

2024.01.04

Callback Hell and Promise

Callback 다시 불리다. 정의 되고 나서 바로 실행되는게 아니라 , 특정 작업이 끝난 후 다시 불려지는 함수가 콜백함수다. setTimeout()의 첫 번째 인자가 바로 콜백함수다. function waitAndRun(){ setTimeout(()=>{ console.log('끝'); }, 2000); } console.log(waitAndRun()); // 2초를 기다린 후에 '끝' 문자 출력 waitAndRun() 함수를 실행하게 되면 2초를 기다린 후 '끝'이라는 문자를 출력하게 된다. waitAndRun() 함수는 setTimeout()을 한 번만 실행하고 있다. 그런데 만약 2초 후에 '끝'을 출력하고, 또 2초 후에 '끝'을 출력하고, ... 또 2초 후에 '끝'을 출력하고 싶다면 Pro..

2024.01.04

Async Programming

자바스크립트는 싱글 스레드 프로그램이기 때문에 한번에 단 한개의 작업만 할 수 있다. 이러한 싱글 스레드의 단점을 Async Programming을 이용해 많은 부분 극복할 수 있다. Thread란? CPU를 살 때 '8코어 16스레드' 와 같인 스펙이 적혀있는 것을 볼 수 있다. 8개의 코어가 각각 2개의 스레드를 소유하고 있어서 16개의 스레드를 사용할 수가 있다는 뜻이다. 스레드는 가장 작은 단위의 Working Unit이라고 보면 되는데, 쉽게 말해서 16스레드 라고 하면 동시에 작업할 수 있는 것이 16개라는 뜻이다. 스레드가 몇개 있느냐는 CPU가 동시에 몇개의 작업을 연산할 수 있는가를 의미한다. JavaScript는 Single Threaded다 자바스크립트는 어느 한 순간에 동시에 단 하..

2024.01.04

Closure

Closure 상위 함수 보다 하위 함수가 더 오래 살아있는 경우를 closure라고 한다. A closure is the combination of a function and the lexical environment within wiich that function was declared. 클로저는 어떤 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. function getNumber(){ var number = 5; function innerGetNumber(){ return number; } return innerGetNumber;// 함수를 실행하지 않고 함수 자체를 반환 } const runner = getNumber();// getNumber()를 호출 console.log(runner);..

2024.01.02

Execution Context

Execution Context 실행 컨텍스트는 실행 문맥이라고도 한다. 실행 컨텍스트(Execution Context)는 실행 할 코드에 제공할 환경 정보들을 모아놓은 객체다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 자바스크립트 코드의 실행 흐름과 코드에 대한 정보가 Execution Context로 관리된다. 자바스크립트는 코드를 실행하며 필요한 환경 정보들을 모아 이를 이용해 실행 컨텍스트를 만들고, 이를 콜 스택 (LIFO: Last In, First Out)에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장할 수 있게 된다. ..

2023.12.27

this

this 자바스크립트에서 this는 조금 특별하다. 자바스크립트는 Lexical Scope를 사용하기 때문에 함수의 상위 스코프가 정의 시점에 평가된다. 하지만 this 키워드는 바인딩이 객체가 생성되는 시점에 결정된다. this 키워드 일반 함수 호출할 땐 this가 최상위 객체 (global 또는 window)를 가리킨다. 메서드로 호출할 땐 호출된 객체를 가리킨다. new 키워드를 사용해서 객체를 생성했을 땐 객체를 가리킨다. 일반 함수에서의 this 일반 함수는 함수를 실행했을 때 this 키워드가 global object에 매핑이 된다. global object는 web에서는 window 객체다. const testFunction = function(){ return this; } console..

2023.12.27