원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#syntax 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 🖍 Introduction 자바스크립트로 코드 작성을 할 때, 우리는 흔히 다른 작업들에 의존하는 작업들을 처리해야하는 경우가 있다. 이미지를 받아서 압축하고, 필터를 입히고, 저장해야한다고 가정을 해보자. 제일 먼저 해야하는 일은 편집할 이미지를 받는 것이다. getImage 함수로 이를 실행할 수 있다. 이미지가 성공적으로 로트된 후에 이를 resizeimage 함수로 전달할 수 있다. 이미지가 ..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! ES6은 generator functions(제너레이터 함수)를 소개했다. generator functions는 무엇일까? 먼저 기존에 자주 썼었던 함수를 살펴보자. 이 코드에는 확실히 뭔가 특별하지는 않다. 그저 4번 로그를 찍는 평범한 함수일 뿐이다. 이를 호출한다면, 이렇게 나올 것이다. "하지만 왜 당신은 나의 5초의 시간을 이 지루하고 평범한 함수를 보는 것에 낭비하게 만들었나요?"라고 물을 수 있..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 아래의 코드를 보자 : const name = "Lydia" const age = 21 const city = "San Francisco" function getPersonInfo() { const name = "Sarah" const age = 22 return `${name} is ${age} and lives in ${city}` } console.log(getPersonInfo()) 우리는 name, age, city 변수들의..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 만약 당신이 자바스크립트가 익숙하지 않다면, 어떤 변수들이 랜덤하게 'undefined'로 되어서 ReferenceError가 던져지는 이상한 경험을 해본 적이 있을 것이다. 호이스팅은 '변수와 함수들을 파일의 맨 위쪽에 놓은 것'이라고 주로 설명되는데, 그렇게 보일 수 있지만 맞지 않다. 자바스크립트 엔진이 스크립트를 받게 되면, 처음으로 하는 일은 바로 코드 안의 데이터를 위해 메모리를 세팅하는 일이다. 이 때 코드는 실행되지 않..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 자바스크립트는 단일 쓰레드로 구성되어있다 = 한 번에 하나의 일을 수행하는 것! 만약 하나의 일이 30초가 걸린다면? 우리는 30초를 기다려야하는 상황인 것이다 (자바스크립트는 기본적으로 브라우저의 메인 쓰레드에서 돌아가기 때문에 모든 UI가 막히게 된다) 다행히도, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 몇 가지 기능을 제공하는데 바로 'Web API'이다. Web API에는 DOM API, setTimeout, HT..