반응형

JavaScript 18

[JS] 비동기(Asynchronous)와 콜백 함수(Callback Function)

JavaScript는 싱글 스레드(Single Thread) 기반의 언어로, 한 번에 하나의 작업만 실행할 수 있다. 그러나 비동기(Asynchronous) 처리를 통해 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 실행하면서도 동시에 다른 작업을 수행할 수 있다. 이를 통해 UI가 멈추지 않고 부드럽게 동작하도록 한다.   1. 비동기(Asynchronous)란?비동기 처리는 코드가 순차적으로 실행되지 않고, 특정 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식이다. 대표적인 비동기 작업: • setTimeout, setInterval (타이머 함수) • fetch, XMLHttpRequest (네트워크 요청) • Promise, async/await (비동기 프로그래밍 방식)..

[JS] Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more

원문 Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & moreWeb developers or Front end engineers, as that’s what we like to be called, nowadays do everything right from acting as a source of…medium.com JavaScript의 내부 작동 방식, 특히 함수 실행, 호출 스택, 이벤트 루프, 비동기 처리 등에 대해 깊이 있는 내용을 정리하였습니다. 이 글을 통해 JavaScript가 어떻게 작동하는지를 이해하고, 개발자의 입장에서 효율적인 코드를 작성하는 데 도움이 되고자 합니다.   1. JavaScri..

[JS] 함수 호출 스택(Call Stack) 완벽 정리

함수 호출 스택(Call Stack) 은 JavaScript 엔진이 함수 실행을 관리하는 구조로, LIFO(Last In, First Out, 후입선출) 방식으로 작동한다.   1. 호출 스택(Call Stack)이란? • 자바스크립트가 함수 실행을 관리하는 메커니즘이다. • LIFO (Last In, First Out) 원칙에 따라 마지막으로 호출된 함수가 가장 먼저 종료된다. • 싱글 스레드(Single Thread) 환경에서 실행되므로, 한 번에 하나의 함수만 실행 가능하다.'   2. 호출 스택의 동작 원리1️⃣ 함수가 호출되면 스택의 맨 위에 추가(Push)2️⃣ 함수 실행이 끝나면 스택에서 제거(Pop)3️⃣ 스택이 비어 있을 때까지 반복 📌 예제 1: 기본적인 호출 스택function fi..

[JS] undefined vs null 차이점 완벽 정리

undefined와 null은 둘 다 값이 없음을 나타내는 JavaScript의 원시 타입(Primitive Type) 이지만, 의미와 사용 방식에 차이가 있다.   1. undefined란?✅ “변수가 선언되었지만 값이 할당되지 않은 상태” 📌 특징 1. 변수를 선언했지만 값을 할당하지 않으면 기본적으로 undefined가 된다. 2. 함수가 값을 반환하지 않으면 기본적으로 undefined가 반환된다. 3. 객체의 속성을 참조할 때 해당 속성이 존재하지 않으면 undefined가 반환된다. 4. 배열의 인덱스에 값이 없으면 undefined가 된다. 📌 예제let a; console.log(a); // undefined (변수 선언만 하고 값 할당 안 함)function test() {}conso..

[JS] arguments 객체란 무엇인가? + rest parameter

arguments 객체는 함수 내에서 사용 가능한 배열과 유사한(유사 배열) 객체로, 함수가 호출될 때 전달된 모든 인수(매개변수 포함)를 포함합니다. ✅ 단, arguments 객체는 화살표 함수(arrow function)에서는 사용할 수 없습니다.   📌 특징  1. 배열이 아니라 유사 배열 객체(Array-like Object) • length 속성을 가지지만, 배열의 메서드(map, forEach, reduce 등)를 직접 사용할 수 없음. • 필요하면 Array.from(arguments) 또는 [...] 스프레드 문법을 사용해 배열로 변환. 2. 함수의 모든 인자를 포함 • 함수에 정의된 매개변수보다 더 많은 인자를 전달해도 arguments 객체에 모두 저장됨. 3. 인덱스를 통해 개별 ..

[JS] TDZ(Temporal Dead Zone, 일시적 사각지대)란?

TDZ(Temporal Dead Zone, 일시적 사각지대)는 JavaScript에서 let과 const 변수가 선언되었지만 초기화되기 전에 접근할 수 없는 구간을 의미한다. 즉, 변수가 호이스팅되긴 하지만, 선언된 위치 이전에 접근하면 ReferenceError가 발생하는 구간이다. 호이스팅이란 무엇인가 [JS] 호이스팅(Hoisting)이란?호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 미리 할당되는 동작을 의미한다. 즉, 코드가 실행되기 전에 변수와 함수의 선언이 자동으로 코드의 최상단으로 끌jyhan0625.tistory.com   1. TDZ의 개념아래 코드를 보자.console.log(x); // ❌ ReferenceError: Cannot a..

[JS] 호이스팅(Hoisting)이란?

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 미리 할당되는 동작을 의미한다. 즉, 코드가 실행되기 전에 변수와 함수의 선언이 자동으로 코드의 최상단으로 끌어올려지는 것처럼 동작한다.   1. 변수 호이스팅 (var, let, const 차이점) (1) var 키워드console.log(x); // undefinedvar x = 10;console.log(x); // 10 설명:  • var x = 10;이 실제로 실행되기 전에 var x; 선언이 호이스팅되어 undefined로 초기화된다. • 따라서 console.log(x);를 실행할 때 undefined가 출력된다. 실제로 동작하는 방식:var x; // (1) 선언이 먼저 올라감 (호이스팅됨)co..

[JS] JavaScript의 동적 타입(Dynamic Typing) 완전 정리

1. 동적 타입(Dynamic Typing)이란?동적 타입(dynamic typing) 이란, 변수를 선언할 때 자료형을 명시하지 않고 실행 중(runtime)에 자료형이 결정되는 방식을 의미한다.즉, JavaScript에서는 변수를 선언할 때 자료형(type)을 지정하지 않으며, 변수에 저장된 값에 따라 자동으로 타입이 변한다.let x = 10; // x는 number 타입x = "Hello"; // x는 string 타입으로 변경됨x = true; // x는 boolean 타입으로 변경됨 위 코드처럼, 변수 x는 저장되는 값에 따라 자동으로 자료형이 변한다. 이런 특징을 동적 타이핑(Dynamic Typing) 이라고 한다.   2. JavaScript의 주요 데이터 타입JavaScript는..

반응형