이벤트 캡처링 (Event Capturing) 이벤트가 부모 요소에서 자식 요소로 전파되는 방식이다.한 요소에서 이벤트가 발생하면, 이벤트는 최상위 부모 요소에서 시작하여 이벤트가 발생한 요소로 전파되는 방식이다. See the Pen 이벤트 캡처링 by 이준구 (@vbtyldjh-the-selector) on CodePen.    이벤트 버블링 (Event Bubbling):이벤트가 자식 요소에서 부모 요소로 전파되는 방식이다.한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. See the Pen 이벤트 버블링 by 이준구 (@vbty..

1️⃣ DOM이란?DOM은 "Document Object Model"의 약어로 HTML 문서를 파싱 하여, 객체 형태의 트리 구조를 말한다.API 종류: `document`, `addEventListener` 등 존재 여기서 왜..? HTML 문서를 객체로 표현했는지? 그 이유는 자바스크립트와의 원활한 상호작용을 위해서다. 자바스크립트는 정적인 웹 애플리케이션을 동적으로 조작하는 역할을 담당하며, 객체 지향 프로그래밍을 지원하는 언어이다. 따라서 자바스크립트와의 상호작용을 위해서는 HTML을 객체 형태로 구성하는 것이 필요하다.    요약: DOM은 HTML 문서의 구조를 객체로 표현해 자바스크립트와 상호작용하여 동적인 웹 페이지를 구성하는 것을 말한다.    2️⃣ BOM이란?BOM은 "Browser ..

모듈(module)이란?애플리케이션 내에서 특정 기능이나 역할을 담당하는 독립적인 코드 단위모듈화 방법: `CommonJS`, `AMD`, `UMD`, `ES6 방식` 모듈화 (Modularization)란전체 애플리케이션을 모듈 단위로 분리하여 각 모듈이 독립적으로 동작할 수 있게 만드는 과정   모듈의 특징 캡슐화:모듈은 특정 기능을 독립적으로 구현할 수 있도록 하여, 해당 모듈 내에서만 사용되는 데이터나 함수들을 외부에서 접근할 수 없도록 캡슐화합니다.재사용성:각 모듈은 하나의 독립적인 기능을 제공하므로, 해당 모듈을 여러 곳에서 재사용할 수 있습니다.유지보수성:코드의 크기가 커질 경우, 기능별로 모듈을 나누어 코드의 관리와 유지보수를 용이하게 할 수 있습니다.의존성 관리:모듈 간의 의존성을 명확하..

클래스란?객체를 생성하기 위한 일종의 틀 또는 설계도로써, 객체의 상태를 나타내는 속성(필드)과 함수를 나타내는 메소드로 구성되어 있다. 이 구조를 기반으로 여러 인스턴스(객체)를 생성할 수 있다.   🖥️  자바스크립트에서 클래스는 함수의 한 종류이며, 아래의 코드를 통해 자세히 확인해 볼 수 있다.class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// 클래스는 함수입니다.alert(typeof User); // function// 정확히는 생성자 메서드와 동일합니다.alert(User === User.prototype.constructor); // true// 클래스 내부에서 정의한 메서드는 Use..

즉시 실행 함수 표현식(IIFE, Immediately Invoked Function Expression) 이란?자바스크립트에서 함수를 정의하자마자 즉시 실행하도록 만든  함수 표현식을 말한다. 일반적인 함수 선언 방식에서는 함수를 선언하고, 나중에 ( )를 호출하여 실행한다.  Ⓒ 기본 구조// 즉시 실행 함수는 일반적으로 익명함수로 작성한다.(function() { console.log("This is an IIFE!");})();    📚 즉시실행 함수 표현식 문법 종류 1️⃣ 괄호 안에서 괄호 문법(function() { console.log('IIFE syntax 1');})(); 2️⃣ Douglas 표기법(function() { console.log('IIFE syntax 2');..

자바스크립트의 객체는 아래와 같이 크게 3개의 객체로 분류할 수 있다.    1️⃣ 네이티브 객체(Native objects or Built-in objects or Global Objects) 정의: 자바스크립트 언어 규약(ECMAScript)으로 정의된 내부 객체종류: String, Number, Boolean, Object, Function, Array, Date, Math 등 존재 주의 사항‼️네이티브 객체를 Global Objects라고 부르기도 하는데 이것은 전역 객체(Global Object)와 다른 의미로 사용되므로 혼동에 주의하여야 한다.   2️⃣ 호스트 객체(Host Object)정의: 실행 환경(브라우저, Node.js)에서 제공하는 객체종류: window 객체: document, ..

클로저(Closure)란?렉시컬 스코프를 기반으로, 외부 함수의 실행 컨텍스트가 종료된 이후에도 해당 외부 함수의 지역 변수에 접근할 수 있는 내부 함수를 말한다.상태 유지, 정보 은닉, 비동기 처리 등의 다양한 경우에 활용된다.함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 활용된다. 🅴 클로저 예시코드function makeAdder(x) { return function (y) { return x + y; };}const add1 = makeAdder(3);console.log(add1(2)); // 5 출력// add1 함수와는 별개의 독립된 렉시컬 환경을 갖기 때문에 카운터 상태가 연동하지 않는다.const add2 = makeAdder(5);console.log(add2(..

스코프란?- 스코프(Scope)란 변수, 함수, 객체가 프로그램의 어느 부분에서 접근할 수 있는지를 결정하는 범위이다. 즉, 식별자에 접근할 수 있는 유효 범위를 뜻한다.- 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉜다.    1. 전역 스코프 (Global Scope)자바스크립트 코드의 최상위 레벨에 해당하는 스코프로 함수 어디에서든 접근이 가능하다.전역 스코프에 선언된 변수 또는 함수를 전역 변수 또는 전역 함수라고 한다. Ⓒ 예시코드// 전역 변수 선언var globalVar = 'I am global'; // 전역 함수 선언function showGlobal() { console.log(globalVar); // 접근 가능}showGlobal();con..

😂 실행 컨텍스트를 공부하면서 가장 혼란스러웠던 점1. ES5를 기준으로 실행 컨텍스트의 동작 방식과 구조가 달라진 부분2. 이에 따라 이번 포스터에서는 ES5 이전의 실행 컨텍스트 구조를 먼저 설명한 뒤, ES5 이후의 실행 컨텍스트 구조를 다룰 예정    실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체이다.자바스크립트의 핵심원리인 `hoisting`, `scope`, `this`, `closure` 등의 동작원리를 담고 있다.실행 컨텍스트는 콜 스택(Call Stack)에서 관리하며, 코드 실행 순서를 보장(LIFO) 실행에 필요한 환경 정보 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티Scope(변수의 유효범위)함수 선언this 컨텍스트(Context)란 실행되는 코..

이터러블(Iterable) 객체란?반복(iteration)할 수 있는 객체종류: 배열, 문자열, Map, Set 자료형특징:Symbol.iterator( ) 메서드를 가지고 있는 객체`for...of` 반복문을 사용 이터레이터(Iterator) 객체란?이터러블 객체의 `Symbol.iterator( )`메서드를 호출하여 반환되는 객체값을 순차적으로 접근할 수 있는 객체`next( )` 메서드를 통해 값을 하나씩 처리 next()의 반환 값으로 value에는 값이 저장되고, done에는 반복이 끝났는지를 뜻하는 논리값이 저장 작업 순서)`for...of`가 시작되자마자 for..of는 `Symbol.iterator( )`메서드를 호출`Symbol.iterator( )`메서드는 이터레이터 객체를 반환반환된 ..