본문 바로가기

💻 프론트엔드/📚 JS7

[JS]병렬적으로 비동기 처리하기 비동기를 병렬적으로 수행하는 것에는 크게 3가지 방법이 있습니다. 1. Promise.all 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다. 입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부합니다. const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([.. 2024. 4. 19.

[자바스크립트] 비동기 처리와 이벤트루프 비동기 프로그래밍 vs 동기 프로그래밍 무슨 차이일까? 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식 -> 실행 순서가 보장되지만 실행 중인 태스크가 종료될 때까지 이후 태스크들은 블로킹 됩니다. 비동기 처리 : 현재 실행 중인 태스크가 종료되지 않더라도 다음 태스크를 실행하는 방식 -> 블로킹이 발생하지 않지만 실행 순서는 보장되지 않습니다. 자바스크립트 비동기 코드 예시 function a(){ console.log('a'); } function b(){ setTimeout(a, 300); console.log('b'); } b(); //실행결과 //'b' //'a' 자바스크립트가 비동기 처리를 지원하지 않는다면 a함수가 실행된 후에 b함수가 실행되어야 합니다. 이.. 2023. 12. 27.

[자바스크립트] 클로저 클로저를 이해하기 위한 개념 렉시컬 환경 해당 개념을 모르신다면 실행 컨텍스트 포스팅을 먼저 읽는 것을 추천드립니다! 클로저 외부 함수보다 오래 유지되어 생명 주기가 끝난 외부 함수의 변수를 참조하고 있는 중첩 함수 예제 function coffeeMachine() { let coffeeBeans = 10; const makeCoffee = () => { if (coffeeBeans { console.log(`현재 남아 있는 원두는 ${coffeeBeans}g 입니다.`); }; .. 2023. 12. 27.

[자바스크립트] 실행컨텍스트 📌 실행 컨텍스트(Execution Context) 식별자와 스코프, 코드 실행 순서를 관리하기 위해 구현한 내부 메커니즘 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리합니다. 실행 컨텍스트 스택 실행 컨텍스트는 스택 자료구조로 관리됩니다. 코드가 실행되면 해당 코드의 실행 컨텍스트가 생성되어 스택에 push되고, 실행이 종료되면 pop 됩니다. 렉시컬 환경 식별자와 스코프를 관리하는 자료구조입니다. 환경레코드와 외부 렉시컬 환경에 대한 참조로 구성되어 있습니다. 환경레코드 스코프에 대한 식별자와 바인딩된 값을 관리합니다. 외부 렉시컬 환경에 대한 참조 상위 스코프를 가리킵니다 스코프 체인 = 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드.. 2023. 12. 27.

[자바스크립트] 스코프 📌 스코프(Scope) : 변수에 접근할 수 있는 범위 = (식별자를 찾아내기 위한 규칙) 스코프는 전역 스코프와 지역 스코프로 나눌 수 있습니다. 변수는 선언 위치에 의해 스코프를 갖게 됩니다. 전역 스코프를 갖는 전역 변수는 전역에서 참조 가능하고, 지역 스코프를 갖는 지역 변수는 선언된 지역과 하부 지역에서만 참조할 수 있습니다. 변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다. 스코프 체인 전역 객체와 중첩된 함수의 스코프 레퍼런스를 차례로 저장하고, 스코프가 어떻게 연결 되고 있는지 보여주는 것을 말합니다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리합니다. 렉시컬 환경은 식별.. 2023. 12. 27.

[자바스크립트] This 📌 This 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. 함수 호출 방식 1. 일반 함수 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 5. ES6, 화살표 함수 호출 1. 일반 함수 일반함수 호출 this는 전역 객체인 window를 가리킵니다. -> 객체를 생성하지 않는 일반 함수에서는 this의 사용은 의미가 없습니다 function normal(){ console.log(this); //Window } normal().. 2023. 12. 27.

이전 1 2 다음

티스토리툴바