시작은 가볍게 마무리는 묵직하게

promise를 응용하여 로직을 하나 구현해보고자 한다! 일단 원하는 로직은 다음과 같다. a가 콘솔에 먼저 찍히고 일정 시간 뒤에 b가 찍히는 로직을 만들고 싶은 상황 해당 로직을 구현하려면 다음과 같이 구현하면 된다. const delay = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); },time * 1000); }); } const run = async () => { console.log('a'); try { await delay(3); } catch (err) { console.log('에러 발생'); return; } console.log('b'); } console.log(run()); ..

this란? 함수가 어떻게 호출되는지에 따라 동적으로 결정되는 녀석(?)이다. this의 목적 작성된 코드를 여러 목적으로 재사용하기 위해 존재 this의 특징 전역 및 함수 바디에서 사용 가능하다. class 안에서 사용하는 this는 생성자 함수에서 사용하는 this와 동일하다. 전역에서의 this 브라우저 환경에서 this를 전역에서 사용하면 이 this는 전역 객체인 window객체를 가리킨다. 그래서 전역에서 const, let, var 없이 valueA라는 변수를 사용할 경우 window.valueA와 같다. 일반 함수에서의 this this를 사용하는 일반 함수를 호출하면 this는 전역 객체인 window객체를 가리킨다. 단, 함수 내에서 'use strict'키워드를 사용하면 this는 ..

프로그래밍 언어는 값을 자료형(type)으로 분류한다. 이 자료형에 따라 값을 구분하여 알고리즘을 구현하는 만큼 자료형은 매우 중요한 기초지식이다. 자바스크립트의 경우 이 자료형을 크게 두 가지로 분류한다. 우선 기본 타입이 되는 원시타입(primitive data type)이 있고 참조타입(reference data type)이 있다. 원시타입(primitive data type) 값이 변수에 할당될 때 메모리 상으로 고정된 크기로 저장된다. const a = 4; 예를 들어 위와 같이 변수 a에 값이 할당되었을 때 숫자4는 8바이트만큼의 메모리 공간을 마련하여 직접 숫자 4를 보관한다. 이처럼 고정된 공간에 보관된 원시 타입인 값은 불변 값(immutable value)의 특징을 갖는다. 원시타입인 ..

타 저수준 언어에서는 메모리 관리를 따로 해야 하지만 자바스크립트와 같은 고수준 언어는 메모리 관리를 자동으로 수행해준다. 가비지 컬렉션 객체, 함수 등은 메모리를 차지하는데 더 이상 쓸모 없는 것들은 메모리에서 삭제 처리하는 것을 의미하며 그 주체를 가비지 컬렉터라고 한다. 가비지 컬렉션의 알고리즘 자바스크립트의 가비지 컬렉션은 **도달가능성(reachability)**이라는 개념으로 메모리 관리 수행 도달 가능성이 있는 값이란 접근 및 사용이 가능한 값을 의미한다. 예를 들어 A라는 메모리가 있는데 A를 통해 B라는 메모리에 접근할 수있다는 것은 B는 A에 참조된다는 것을 의미하며 B는 접근 및 사용이 가능하는 것이다. 이러한 것들은 메모리에서 삭제되지 않는다. 근본적으로 도달가능성이 있는 값 1. ..

이벤트 루프란 결론부터 말하자면 호출 스택이 비워질 때마다 콜백 큐에서 호출할 콜백함수가 있는지 반복하여 확인 후 있으면 콜백함수를 호출하여 실행하는 역할을 하는 것이다. 이벤트 루프의 정의를 들었을 때 이해가 안 간다면 아마 호출 스택, 콜백 큐 등을 구동하는 브라우저 환경에 대한 이해가 확실하지 않아 그럴 수 있다. 일단 자바스크립트 엔진을 구동하는 브라우저 환경을 그림으로 나타내면 다음과 같다. 구성요소는 다음과 같다. heap : 메모리 할당이 이루어지는 곳 호출 스택(call stack) : 자바스크립트는 코드가 실행되면 순서대로 실행될 코드들이 쌓여 처리되는 곳 web APIs : 실행시키고자 하는 코드 중에 xmlHttpRequest(), setTimeout(), setInterval() 등..

비동기 2편에서 설명할 async, await은 promise보다 비교적 코드를 보기 좋은 형태로 작성할 수 있으며 비동기의 단점을 해결할 수 있다. 우선 async와 await은 독립적인 기능이 아니라 같이 사용한다. 그럼 다음 코드를 살펴보자! const err = false const PROMISE = (count) => { return new Promise((resolve, reject) => { setTimeout(() => { if(err) reject('에러 발생'); resolve(`실행${count}`); },200) }) } async function install(){ const start1 = await PROMISE(1) const start2 = await PROMISE(2) c..