자바스크립트는 싱글스레드이기 때문에 한번에 하나의 작업만 수행할 수 있고, 이를 해결하기 위해 비동기가 생겨났다.비동기란 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행하도록 하는 방식을 뜻한다.자바스크립트에서 비동기를 처리하기 위해 콜백 함수, Promise, async/await를 쓰는데 각각의 방식이 어떻게 어떤 방식으로 쓰이는지 , 그리고 어떤 문제점이 존재하는지 다뤄보고자 한다 ! 1️⃣ 콜백함수콜백함수란 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 의미한다.콜백함수로 비동기 프로그래밍을 짤 수 있지만, 모든 콜백 함수가 비동기이지는 않다.console.log('작업 시작');setTimeout(() => { console.log('2초 후에..

자바스크립트에서는 변수를 선언할 때 var, let, const 이렇게 세가지 키워드를 이용해 선언할 수 있다. ES5까지 변수를 선언할 수 있는 유일한 방법은 var만 있었는데 ES6에서 var의 문제점에 대응하기 위해서 let과 const가 생겨났다.이 세가지가 선언, 할당, 범위에서 차이가 나는데 헷갈리지 않게 자세하게 정리해보고자 한다 ! 1️⃣ 중복 선언var : 중복 선언이 가능하다var name = "안녕"console.log(name) //안녕var name = "하이"console.log(name) //하이 var은 중복해서 선언이 가능하다. 이 경우에, 마지막에 할당된 값이 변수에 저장된다.변수를 유연하게 사용할 수 있다는 장점이 있지만, 기존에 선언해둔 변수의 존재를 까먹고 값을 재할..

자바스크립트가 비동기 처리가 가능하다는 사실은 당연히 알고 있었지만어떤 원칙으로 어떤 구성으로 돌아가는지 제대로 모르고 있는 것 같아서 정리해보고자 한다 ^__^자바스크립트는 싱글 스레드 언어인데 어떻게 동시에 일을 진행시키는지 알아보자.📚 동기(Synchronous)와 비동기(Asynchronous)1. 동기일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방식이 동기이다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있다. 동기 방식은 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향이 간다. 2. 비동기특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행하도록 하는 방식이 비동기이다. 비동기는 메인 스레드가 작업을 다..

let과 const는 호이스팅 시에 변수는 선언되고 초기화는 되지 않아 ReferenceError가 발생하며, TDZ에 빠지게 된다.TDZ에 빠진다는 것은 알고 있었지만 정확하게 TDZ가 뭔지는 알지 못해서 한번 제대로 알아보고자 한다. TDZ에 대해서 이해하기 위해 변수 선언의 3단계를 먼저 알아보자. 📌 변수 선언의 3단계 자바스크립트에서 변수는 기본적으로 다음 3단계를 거쳐서 생성이 된다. 1) 선언 단계 (Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록한다.-> 이 변수 객체는 스코프가 참조하는 대상이 된다.2) 초기화 단계 (Initialization phase) : 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만든다.-> 이 단계에서 ..

✅ 실행 컨텍스트 ( Execution Context )실행 컨텍스트란, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고 이를 콜 스택에 쌓아 올렸다가 가장 위에 쌓여있는 컨텍스트와 관련된 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 스택스택은 출입구가 하나인 LIFO ( Last in First Out ) 구조이다.스택에 a,b,c,d를 순서대로 저장하면 꺼낼 때 d,c,b,a 순서대로 나온다. 실행 컨텍스트 예시// --------------------------- (1)var a = 1;function outer() { function inner() { console.log(a); // ..