클로저 (Closure)클로저 (Closure) : 함수가 자신이 선언된 환경(스코프)에서 정의된 변수를 기억하는 현상내부 함수가 외부 함수의 변수에 접근 가능자바스크립트는 함수가 실행된 후에도 스코프(변수)를 유지할 필요가 있는 경우가 많음 > 특정 상태를 유지하면서도 외부에서 변경하지 못하도록 보호function outer() { let count = 0; // 외부 함수의 변수 return function inner() { count++; console.log(count); };}const counter = outer();counter(); // 1counter(); // 2counter(); // 3`inner()` 함수가 `outer()` 의 `count..

고차 함수(HOF, Higher-Order Function)고차 함수고차 함수 (HOF, Higher-Order Function) : 함수를 인자로 받거나, 함수를 반환하는 함수함수 조합 (composition) 으로 코드 재사용성이 높아짐자바스크립트에서는 함수를 일급 객체(First-Class Citizen)로 취급 > 함수를 변수에 저장하거나, 함수의 인자로 전달 가능함수를 인자로 받는 고차 함수function repeat(n, action) { for (let i = 0; i `repeat()` 는 `console.log` 함수를 인자로 받아 반복 실행반복 로직을 쉽게 재사용함수를 반환하는 고차 함수function multiplier(factor) { return function(numb..

순수 함수 (Pure Function)순수 함수function add(a, b) { return a + b;}console.log(add(2, 3)); // 5console.log(add(2, 3)); // 5 (항상 같은 결과 반환)순수 함수(Pure Function) : 같은 입력에 대해 항상 같은 결과를 반환하는 함수부수효과(Side Effect) 가 없음 (외부 상태를 변경하지 않음)코드가 예측 가능하고, 테스트가 쉬움비순수 함수let total = 0;function addToTotal(value) { total += value; return total;}console.log(addToTotal(5)); // 5console.log(addToTotal(5)); // 10 (결과가..

자바스크립트 엔진 [JavaScript] 자바스크립트 엔진의 실행 컨텍스트자바스크립트 엔진자바스크립트 엔진 : 자바스크립트 코드를 바이트코드로 변환하고 실행하는 프로그램브라우저 및 Node.js 에서 동작대표적인 엔진: V8 (Chrome, Node.js), SpiderMonkey (Firefox), JavaScriptCjackinquantico.tistory.com 호이스팅 (Hoisting)호이스팅(Hoisting) : 자바스크립트 엔진이 변수 및 함수 선언을 코드 실행 전에 메모리에 먼저 할당하는 과정코드가 실행되기 전에 변수 및 함수가 메모리에 끌어올려진 것처럼 동작하는 현상으로 변수와 함수의 선언이 코드 최상단으로 이동한 것처럼 보임자바스크립트는 인터프리터 + JIT(Just-In-Time) 컴..

자바스크립트 엔진 [JavaScript] 자바스크립트 엔진의 실행 컨텍스트자바스크립트 엔진자바스크립트 엔진 : 자바스크립트 코드를 바이트코드로 변환하고 실행하는 프로그램브라우저 및 Node.js 에서 동작대표적인 엔진: V8 (Chrome, Node.js), SpiderMonkey (Firefox), JavaScriptCjackinquantico.tistory.com 자바 스크립트 엔진 동작 과정자바스크립트 엔진 실행 과정 : 파싱 > 컴파일 > 실행파싱 : 자바스크립트 코드 > AST (Abstract Syntax Tree, 추상 구문 트리) 변환문법 오류 검출, 실행 위해 내부 구조 생성인터프리터 & JIT (Just-In-Time) 컴파일러 : 자바스크립트 엔진은 인터프리터 + JIT 컴파일러를 사..

자바스크립트 엔진자바스크립트 엔진 : 자바스크립트 코드를 바이트코드로 변환하고 실행하는 프로그램브라우저 및 Node.js 에서 동작대표적인 엔진: V8 (Chrome, Node.js), SpiderMonkey (Firefox), JavaScriptCore (Safari), Chakra (Edge-구버전)초기 웹사이트는 정적인 HTML & CSS로만 구성 → 사용자와의 동적 상호작용이 부족 → 자바스크립트가 등장하며, 웹페이지에서 동적인 요소를 제어할 필요성 → 자바스크립트 엔진이 자바스크립트 코드를 해석하고 실행하는 역할 수행브라우저에서 웹페이지 동작 (클릭 이벤트, 애니메이션, AJAX 요청 등), Node.js에서 서버 사이드 자바스크립트 실행 (파일 시스템 접근, HTTP 서버 실행 등), Rea..

Promise [JavaScript] 비동기와 Promise비동기 (Asynchronous)비동기 (Asynchronous) : 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 먼저 수행함네트워크 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업에 적합. PromisePromise : 비동기jackinquantico.tistory.com  async / await 키워드`async` 키워드 : 함수를 비동기 함수로 만듦`async` 함수는 항상 Promise를 반환일반 값을 반환해도 자동으로 `Promise.resolve(값)` 로 감싸짐`await` 키워드 : Promise 가 완료될 때까지 기다림`await` 키워드는 항상 `async` 함수 내부에서만 사용할 수 있음`await` 에서 에러가 ..

비동기 (Asynchronous)비동기 (Asynchronous) : 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 먼저 수행함네트워크 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업에 적합. PromisePromise : 비동기 작업이 완료되었을 때 결과를 반환하는 객체로 콜백 지옥 없이 비동기 코드를 관리할 수 있음3가지 상태 : `pending` (대기), `fulfilled` (성공 : `resolve` 호출), `rejected` (실패 : `reject` 호출)`.then()` (성공), `.catch()` (실패), `.finally()` (항상 실행) 를 활용해 가독성 높일 수 있음let myPromise = new Promise((resolve, reject) => { se..

동기 (Synchronous) vs 비동기 (Asynchronous)동기 (Synchronous)동기 (Synchronous) : 이전 작업이 끝나야 다음 작업을 수행하는 방식으로 한 줄씩 순서대로 실행코드가 작성된 순서대로 실행되므로 처리 시간이 오래 걸리면 프로그램이 멈출 수 있음단순한 계산이나 UI 업데이트에 적합예제: 일반적인 함수 호출, `console.log()`, `for` 반복문 등function task1() { console.log("작업 1 수행 중...");}function task2() { console.log("작업 2 수행 중...");}task1();task2();// 출력 결과// 작업 1 수행 중...// 작업 2 수행 중...비동기 (Asynchronous)비..

클래스 문법 [JavaScript] ES6 의 class 문법 기본 개념`class` 문법`class` 문법 : ES6에서 도입되어 기존 Prototype 기반 객체지향 프로그래밍을 더욱 직관적으로 사용할 수 있음내부적으로 prototype 을 기반으로 동작생성자 함수 방식과 다르게 `class` 내부에jackinquantico.tistory.com  클래스 상속 (`extends`)클래스 상속 : 기존 클래스를 확장하여 새로운 클래스 생성 가능`extends` 키워드 : 부모 클래스의 기능을 자식 클래스에서 상속 가능상속받은 메서드는 그대로 사용 가능, 필요시 오버라이딩 가능class Animal { constructor(name) { this.name = name; } s..