[JS] EventLoop

타이머 함수들과 process.nextTick() 의 이벤트 루프를 살펴보자! 위 그림을 보면, 바깥의 원이 전체적으로 Event Loop를 의미하고, 원에 걸쳐있는 블록들은 각각의 이벤트 루프 단계를 의미하며, 원안의 블록들은 Microtask Queue (우선 처리되는 작은 작업들) 를 의미한다. process.nextTick()Node.js 전용 함수이다. 가장 우선순위가 높은 Microtask 이다. 현재 실행 중인 콜스택이 끝난 직후 바로 실행된다.process.nextTick(() => console.log('nextTick')); -> Promise 보다도 먼저 실행된다. Promise .then(), .catch() 등으로 등록한 비동기 작업들이다.Microtask Queue에 쌓인다...

• format_list_bulleted Dev/Javascript
• · 2025. 5. 22.
• textsms

[JS] Promise

❓ 전통적인 js 비동기 프로그래밍의 역사1) Callback2) Promise3) Generator4) Async / Await Promise 란?비동기 작업의 성공/실패 결과를 다루기 위한 객체이다. promise는 callback pattern의 단점을 극복하기 위해 출현하였다. callback pattern 은 콜백 지옥, 가독성 저하, 에러 처리 어려움 등의 문제가 있었다.callback pattern 과 다르게 promise는 안전하며, 유지보수 쉬운 코드작성이 가능하다. promise는 다음 3가지 상태를 가진다. pending: 아직 완료되지 않음fulfilled: 성공적으로 완료됨 (resolve)rejected: 실패함 (reject)pending → fulfilled or reje..

• format_list_bulleted Dev/Javascript
• · 2025. 5. 21.
• textsms

[JS] 비동기 프로그래밍

❓pending아직 결과를 반환하지 않은 상태라고 볼 수 있다. 아직 '비동기' 작업이 진행중이고 성공할지 실패할지 모르는 단계이다. 만약 어떤 x 에 A라는 코드가 작업된 결과값을 받는다고 할 때 x에 아직 결과 값이 반환되지 않았다고 하더라도 pending 상태인지 알 수 있다면 x 의 존재는 의미가 있는 것이라고 볼 수 있다는 것이다. 동기 vs 비동기보통 다른 언어들은 비동기 프로그래밍을 실행할 때 thread를 이용한다. (멀티 스레드 환경- 실행 컨텍스트 스택이 여러개 라는 뜻)하지만 js 는 싱글 스레드 환경이다. (콜 스택이 한개 뿐이다)동기 (Synchronous)한번에 하나의 함수만 실행된다. (나머지는 blocking 된다)싱글 프로세스 내의 싱글 스레드이다. 비동기 (Asynchr..

• format_list_bulleted Dev/Javascript
• · 2025. 5. 20.
• textsms

[JS] 배열 (Array)

배열이란?배열은 순서가 있는 데이터 집합이다.배열의 각 요소(element, 프로퍼티 리터럴)는 인덱스(프로퍼티 키)로 접근한다.length 프로퍼티를 가지며, 배열 길이보다 큰 index 접근은 undefined이다.자바스크립트 배열은 비균질적(nonhomogeneous)이며, 다른 배열/객체(함수)등 어떤 타입도 가능하다.촘촘한(dense, 고정 위치/크기) 배열이 아니다.희소 배열(sparse array) 자료 구조이다.배열(Array) 메소드에는 순수 함수와 비 순수함수 모두를 포함하고 있다. 배열 만들기const a = Array(3); // ⇔ new Array(3) ⇔ [,,,]const ar2 = Array(5).fill(1); // 길이 5인 배열을 1로 채우기Array.of(litera..

• format_list_bulleted Dev/Javascript
• · 2025. 4. 15.
• textsms

[JS] this관련 예제 파헤치기

globalThis.name = 'Global Name';const obj = { name: 'Obj Name', printName() { console.log(this.name); },};const printName = obj.printName;// obj = null;printName();// 정답: 'Global Name'이 출력된다 this!!우선적으로 알아야 할것은 this는 렉시컬 스코프처럼 동작하지 않는다!!!this는 렉시컬 스코프와 다르게 함수가 어디서 호출되었는지에 따라 결정된다. 함수 호출방식에 따른 this실행되는 함수의 종류브라우저node함수 선언문function(){}FunctionDeclaration에 로 등록bind 한 객체bind하지 않았다면 전역([[global..

• format_list_bulleted Dev/Javascript
• · 2025. 4. 11.
• textsms

[JS] 객체와 프로퍼티

객체와 프로퍼티에 관련된 예제 모음집 Array 예제in 을 사용하여 index 값 출력하기const arr = [100, 200, 300, 400, 500, 600, 700];for (let i in arr) { console.log(i);}in을 사용하여 property 값 출력하기for (let i in arr) { console.log(i, arr[i]);} of를 사용하여 property 값 출력하기for (let i of arr) { console.log(i);} Object 예제in을 사용하여 key값 출력하기const obj = { name: "Kim", addr: "Yongsan", level: 1, role: 9, receive: false };for (let i in obj) {..

• format_list_bulleted Dev/Javascript
• · 2025. 4. 10.
• textsms