지난 Promise 동작 원리에 이어 Async, Await 키워드의 동작 원리에 대해 알아보자. [JS] Promise 동작 원리 Promise는 무엇인가? MDN에서는 다음과 같이 설명하고 있다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. --- Promise는 프로미스가 생성된 시점에는 알려지 isthislee.com Async / Await는 어떻게 동작하나? 비동기 프로그래밍과 Promise 작업을 쉽게 할 수 있도록 도와주는 async/await 함수는 어떻게 동작할까? 우선 async/await도 결국은 Promise 기반으로 동작한다. 아래 그림을 확인해보자. async 키워드로 함수를 선언하면 Promise를 반환하는 비동기함수가 되는 ..
Promise는 무엇인가? MDN에서는 다음과 같이 설명하고 있다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. --- Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. 즉, Promise는 비동기 작업을 감싸고, 비동기 작업의 결과를 처리하는 코드를 깔끔하게 작성할 수 있도록 도와주는 객체이다. Promise객체는 다음 ..
* 해당 글은 코어자바스크립트 강의를 들으며 정리한 내용입니다. 들어가며 프로토타입과 클래스를 이해하기 위해 위와 같은 그림이 앞으로 자주 나온다. new 연산자를 통해 생성자 함수로 인스턴스를 생성하면, 해당 인스턴스에는 constructor의 'prototype'이라고 하는 프로퍼티의 값이 인스턴스의 [[Prototype]]이라고 하는 프로퍼티로 참조를 전달하게 된다. => constructor.prototype과 instance.[[Prototype]]이 같은 객체를 바라보는 것. [[Prototype]]은 접근 불가능하며 정보를 보여주기만 하므로, 실제 동작상으로는 아래와 같이 instance와 동일시가 된다. 프로토타입에 대해 객체(배열) 리터럴 예시 [1, 2, 3] 위와 같은 배열을 생성할..
* 해당 글은 코어자바스크립트 강의를 들으며 정리한 내용입니다. ThisBinding This는 실행 컨텍스트가 활성화될 때 Binding 된다. 그리고 실행 컨텍스트는 함수가 호출될 때 생성된다. 따라서, ThisBinding은 함수가 호출될 때 결정된다.(동적으로 this가 Binding된다.) 함수가 호출될 때 결정된다. 다음 다섯 가지 방식에 따라 결정된다. 전역공간에서 함수 호출시 메서드 호출시 callback 호출시 생성자 함수 호출시 1. 전역공간에서의 this 전역 객체(host 객체)를 가리킨다. 런타임(host)에 따라 전역 객체의 정보가 달라진다. window(브라우저) / global(nose.js) 2. 함수 호출시 일반 함수 전역 객체를 가리킨다. (자바스크립트 설계 오류라는 의..
모듈화란, 코드의 재사용성과 유지보수성을 높이기 위해 코드를 기능별로 분리하는 것을 말한다. 모듈화를 통해 스코프(scope)를 제한하고, 식별자(변수나 함수 등)의 이름이 충돌하는 문제를 해결할 수 있다. 모듈이란? 모듈은 코드의 일부분을 담고 있는 파일을 의미한다. 각 모듈은 파일 단위로 코드를 구분하며, 파일 내에 선언된 식별자는 해당 모듈(파일) 스코프에서만 유효하다. 모듈 내부에 선언된 식별자는 'export', 'import' 등의 키워드를 통해 다른 모듈에서 사용하거나, 가져와 사용할 수 있다. 모듈과 스코프 모듈은 자체적인 스코프를 가지고 있어서 모듈 내부에 선언된 식별자는 해당 모듈의 스코프 내에서만 유효하다. 이러한 특성 덕분에 모듈 내부에 선언된 식별자는 다른 스코프에 선언된 식별자와..
* 해당 글은 코어자바스크립트 책을 공부하며 정리한 내용입니다. 함수 선언문 vs 함수 표현식 함수 선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것 함수 표현식은 정의한 function을 별도의 변수에 할당하는 것 함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하는 반면, 함수 표현식은 없어도 된다. 함수명을 정의한 함수 표현식을 ‘기명 함수 표현식', 정의하지 않은 것을 ‘익명 함수 표현식'이라고 부르기도 하는데, 일반적으로 함수 표현식은 익명 함수 표현식을 말한다. function a () { } // 함수 선언문. 함수명 a가 곧 변수명. a(); // 실행 OK. var b = function () { } // (익명) 함수 표현식. 변수명 b가 곧 함수명. b(); /..
(실행 컨텍스트와 Scope의 개념에 대한 내용이 부족한 글입니다. 추가 글 작성 예정입니다.) Execute context와 Scope JavasSript는 변수를 부르면 Scope라는 곳에서 찾게 된다. 💡 Execute context(실행 컨텍스트)란? 코드 실행에 필요한 정보들을 담고 있는 객체를 말한다. 실행 컨텍스트는 변수와 함수 등의 정보를 수집하여 구성되며, 스택 자료구조를 이용하여 동작한다. 이를 이해하면 자바스크립트의 변수 스코프, 호이스팅 등의 동작원리를 이해할 수 있으며, 디버깅에도 도움이 된다. 💡 Scope란? 변수(식별자)의 유효범위를 나타내는 용어 - Scope means area, space, or region. - Global scope means global space ..
Promise all & race 위 그림은 동기화(synchronous)와 비동기화(asynchronous)에 관한 내용이다. 동기화는 여러가지 일이 순서대로 진행되는 것이고, 비동기화는 일이 각각 따로 진행되는 것을 말한다.(현재 실행중인 코드의 완료 여부와 상관없이 즉시 다음 코드로 넘어가는 것) 동기적인 코드는 코드가 심플하고, 동작을 파악하기 간편하나 느리다는 단점이 있다. 비동기적으로 다양한 일을 처리한 후에 작업을 생성하기 위해 사용하는 것이 Promise all과 race이다. Promise.all은 비동기적으로 다양한 일을 처리 후 가장 마지막 작업이 처리된 이후에 작업을 수행하도록 하는 방식이다.(다음 작업이 수행될 때 이전에 처리된 모든 결과값을 배열로 받은 상태다.) Promise...
