JavaScript

선행지식 자바스크립트의 실행 컨텍스트를 설명하기 앞서 자바스크립트의 몇가지 특성을 함께 이해하고 있으면 실행 컨텍스트에 대해서 비교적 쉽게 이해할 수 있는데요. 1. 자바스크립트의 특성 우선 자바스크립트는 '싱글 스레드' 언어이며 '동기적'으로 실행되는 언어 입니다. 이게 무슨 의미이냐면 싱글 스레드(single Thread): 하나의 프로세스에서 오직 하나의 스레드로만 실행한다 동기(Synchronous): 순차적/직렬적으로 작업을 수행한다. (참고) 프로세스(Process) :프로그램이 메모리 상에서 실행될 때 작업의 단위 스레드(Thread) :프로세스가 할당 받은 자원을 이용하는 실행의 단위 쉽게 말하자면 자바스크립트는 한 번에 하나의 일만 순차적으로 수행할 수 언어를 말합니다. 이를 설명한 이유..

오늘은 지난 호이스팅에 이어 자바스크립트의 스코프에 대해서 알아보려고 합니다. 스코프(Scope) 1. 스코프(scope)란? 자바스크립트 스코프는 변수가 어디에서 접근 가능한지를 결정하는 개념입니다. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 만약 이름이 같은 변수 x가 중복 선언되었다고 합시다. 전역에서 변수 x를 참조할 때, 그리고 함수 foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조해야할까요? 또 자바스크립트는 어떻게 변수를 식별하는 걸까요? 스코프는 참조 대상 식별자(변수, 함수, 클래스 이름)를 찾아..

기본적인 문법에 대해서 알고나니, 자연스럽게 원리가 궁금해져서 이것저것을 찾다 클로저(Closure)에 대해서 알게되었고, 또 자바스크립트에서 중요한 개념 중 하나라고 알고는 있어서 클로저에 대해서도 이것저것 영상을 찾아보고 했는데 클로저라는 개념을 제대로 이해하기 위해서는 선행되어야 하는 개념들이 있다는 걸 알게 되었습니다. 그래서 오늘부터 기본 개념인 호이스팅 부터, 스코프(Scope), 클로저(Closure), 실행컨텍스(Execution Context). 자바스크립트 이벤트 루프(Event loop)와 콜 스택(call stack) 등에 대해서 차례로 공부하고 정리해보고자 합니다. 호이스팅(Hoisting) 먼저 자바스크립트에서 호이스팅이란? 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스..

오늘은 프로미스 사용 시 유용한 함수 몇가지에 대해 알아보려고 합니다. - Promise.all(), Promise.allSettled(), Promise.any() 등으로 소개하려고 합니다. function getName(){ return new Promise((resolve, reject)=>{ setTimeout(() => { resolve('철수'); // reject(new Error('에러 : 이름이 없어요')); }, 1000); }); } function getTodo(){ return new Promise((resolve, reject)=>{ setTimeout(() => { resolve('밥먹기') // reject(new Error('에러 : 할일이 없어요')) }, 2000); }..

async/await ES8에서 도입된 패턴으로, 프로미스를 더 간결하게 사용할 수 있게 해줍니다. async 키워드를 쓰면 Promise 오브젝트가 절로 생성됩니다. 말그대로입니다. new Promise() 어쩌구 하실 필요가 없습니다. 근데 이 키워드는 function 선언 앞에만 붙일 수 있습니다. async function 어려운연산 (){ 1 + 1 } 그럼 이 함수 자체가 Promise가 되어버립니다. 그래서 이 함수를 실행할 때 뒤에 then을 붙일 수 있습니다. Promise니까요. (함수를 실행하면 그 자리에 Promise 인스턴스 (new Promise() 로 만든 오브젝트)가 남습니다. ) async function 더하기(){ 1 + 1 } 더하기().then(function(){ ..

프로미스 (Promise) 란? ES6에서 도입된 패턴으로, 비동기 작업을 더 효율적으로 다룰 수 있게 해줍니다. 프로미스는 비동기 작업의 성공, 실패, 진행 상태를 다루는 객체입니다. .then()과 .catch() 메서드를 사용하여 비동기 작업을 연결하고 오류 처리를 할 수 있습니다 Promise 생김새 맛보기 var 프로미스 = new Promise(); 프로미스.then(function(){ }).catch(function(){ }); 이것이 끝입니다. new Promise() 문법으로 프로미스라는 변수 오브젝트를 하나 생성하시면 Promise 제작 끝입니다. 그럼 이제 프로미스라는 변수에다가 then()을 붙여서 실행가능합니다. 프로미스 안의 코드가 실행이 완료가 되었을 때 then() 함수 내..

동기/비동기 처리 동기적(Synchronous) 처리 코드는 기본적으로 작성한 순서대로 위에서부터 아래로 순차적으로 실행됩니다. 즉, 한번에 코드 한줄씩 차례차례 실행된다는 소리입니다. 요청을 하면 결과가 주어질 때까지 다른 요청이 처리되지 않으며, 해당 요청 결과가 처리된 후 다음 순서에 맞춰 진행됩니다. 자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데 거기서 코드를 한줄한줄 차례로 실행합니다. 예를 들어, 아래와 같은 코드가 있다면 어떤 순서대로 출력될까요? console.log(1); console.log(2); console.log(3); 예상하신 대로 1,2,3이 차례대로 출력됩니다. 왜냐면 자바스크립트는 한번에 코드 한줄씩 차례차례 실행하니까요. 이걸 전문용어로 동..

Destructuring 문법 Destructuring 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식입니다. 이를 통해 데이터를 쉽게 추출하고 변수에 할당할 수 있습니다. Array 안에 있는 데이터를 변수에 담는 방법 [2,3,4] 라는 array가 있고 여기안에 있는 3개의 데이터들을 전부 밖으로 꺼내서 변수에 담고 싶으면 어떻게 합니까. var array = [2,3,4]; var a = array[0]; var b = array[1]; 저희는 보통 이런식으로 하곤 합니다. 근데 Destructuring 문법을 통해 더 쉽게할 수 있는 방법이 있습니다. var [a,b,c] = [2,3,4]; [2,3,4]라는 자료랑 비슷한 모양으로 변수를 선언해..