클로저 — 함수가 변수를 기억하는 방식
·
Frontend/Javascript Essentials
“A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저란 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 자바스크립트에서 클로저는 단순히 “함수 안의 함수” 그 이상이다.클로저는 함수가 만들어질 당시의 스코프를 기억하는 메커니즘으로, 자바스크립트의 스코프와 실행 컨텍스트 구조를 이해하는 데 핵심적인 개념이다. 1. 렉시컬 스코프 (Lexical Scope)자바스크립트는 렉시컬 스코프(정적 스코프)를 따른다.즉, “함수가 어디서 호출되었는가”가 아니라 “어디서 정의되었는가”에 따라 상위 스코프가 결정된다.const x = 1;function foo(..
프로토타입 기반 상속
·
Frontend/Javascript Essentials
자바스크립트는 다른 언어(C++, Java 등)의 클래스 기반 상속(class-based inheritance)과 달리,프로토타입 기반 상속(prototype-based inheritance)을 사용한다.이는 객체가 다른 객체를 직접 상속받아 동작하는 방식으로, 자바스크립트의 유연한 객체 지향 특성을 잘 보여준다. 1. 프로토타입 기반 상속이란?모든 객체는 내부적으로 *[[Prototype]](또는 **__proto__)이라는 숨겨진 참조를 가진다.이 참조를 통해 상위 객체(프로토타입 객체)의 속성과 메서드를 공유받는다. 즉, 객체 간 직접적인 상속 관계가 형성되는 것이다. ES6의 class와 extends 문법은 이러한 프로토타입 상속을 문법적으로 단순화한 표현(syntactic sugar)이다. *..
이벤트 루프
·
Frontend/Javascript Essentials
1. 이벤트 루프이벤트 루프(브라우저에 내장되어 있는 기능)는 자바스크립트의 비동기 처리 메커니즘을 관리하는 핵심 엔진으로,실행 컨텍스트가 담긴 콜 스택(Call Stack) 과, 나중에 실행될 (매크로) 태스크 큐(task Queue) 및 마이크로태스크 큐(Microtask Queue) 를 조율하는 역할을 한다. 자바스크립트는 단일 스레드 언어이기 때문에, 한 번에 하나의 작업만 수행할 수 있는데, 실행할 함수가 생기면 콜 스택에 쌓이고, 스택의 맨 위에 있는 함수부터 순차적으로 실행되는 것이다. 이때 비동기 작업(예: setTimeout, fetch)은 바로 실행되지 않고, 백그라운드에서 완료된 후 해당 콜백이 큐(매크로 또는 마이크로 태스크큐)에 등록된다. 이벤트 루프는 콜 스택이 비어 있는지 계속..
103. Binary Tree Zigzag Level Order Traversal
·
Coding Test/LeetCode
난이도: 중간 (Medium)링크: LeetCode 103풀이 날짜: 2025.10.10(다시품)1. 문제 이해 이진 트리의 각 레벨(level)을 좌 → 우, 우 → 좌 순서로 번갈아가며 순회한 결과를 2차원 배열로 반환하는 문제.2. 접근 아이디어 및 자료구조이 문제는 BFS (너비 우선 탐색) 으로 해결할 수 있는데,각 레벨을 queue에 넣고 한 레벨씩 탐색하며,방향을 나타내는 direction 변수를 사용해 순서를 제어하면 된다.direction = 1 → 왼쪽 → 오른쪽direction = -1 → 오른쪽 → 왼쪽한 레벨이 끝날 때마다 direction *= -1로 방향을 반전시키는 것이 포인트.3. 잘못된 접근 (초기 시도)var zigzagLevelOrder = function(root) ..
102. Binary Tree Level Order Traversal
·
Coding Test/LeetCode
난이도: 중간(Medium)링크: LeetCode 102풀이날짜: 2025/10/101. 문제 이해 이 문제는 이진 트리의 각 레벨별 노드 값을 배열 형태로 반환하는 문제로,루트부터 시작해서 같은 깊이에 있는 노드들을 왼쪽에서 오른쪽 순서로 묶어서 리턴해야 한다.2. 접근 방식 및 자료 구조레벨 단위로 탐색하기 위해 BFS(너비 우선 탐색) 을 사용한다.BFS는 큐(Queue)를 활용해 트리를 한 레벨씩 순서대로 순회하기에 적합하므로,큐에 노드를 넣고,같은 레벨의 노드들을 for문으로 순회하면서 group 배열에 담고,자식 노드는 다음 탐색을 위해 다시 큐에 추가하는 구조를 이용한다.3. 시간 및 공간 복잡도시간 복잡도: O(n) → 모든 노드를 한 번씩 방문공간 복잡도: O(n) → 큐에 최대 한 레벨..
실행 컨텍스트
·
Frontend/Javascript Essentials
먼저, 실행 컨텍스트를 바르게 이해하면더보기 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식호이스팅이 발생하는 이유클로저의 동작 방식태스크 큐와 함께 동작하는 이벤트 핸들러비동기 처리의 동작 방식을 이해할 수 있다. 1. 실행 컨텍스트란 ? 자바스크립트의 동작 원리를 담고 있는 핵심 개념으로서, 아래와 같은 특징을 갖는다. 실행 컨텍스트는자바스크립트 코드가 실행될 때, 해당 코드의 평가 및 실행에 필요한 환경 정보를 담는 객체이다.함수 호출 시마다 생성되며, 스코프 체인, 변수 환경, this 값 등을 포함한다.콜 스택에 쌓이며, 가장 위에 있는 컨텍스트만 실행된다. 2. 소스코드의 평가와 실행모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기..