예약어(Reserved Word)는 프로그래밍 언어에서 특별한 목적을 위해 미리 예약해둔 단어를 의미한다.이 단어들은 언어의 문법(Syntax) 구조를 형성하고 특정 기능을 수행하기 위해 사용된다.때문에 개발자가 변수명이나 함수명 등으로 사용할 수 없다.const class = "something"; // ❌ class는 예약어const if = "test"; // ❌ if는 예약어const const = 5; // ❌ const는 예약어같은 방식이다. 예약어는 그 자체로 목적을 가진 단어이기 때문에 변수로 설정할 수 없다. 간단히 말하자면 이게 변수인지 예약어인지 판단을 못하게 되는 것이다. 예를 들어, JavaScript에서 'class'는 클래스를 정의하는 데 사용..

Q1. loader는 IntersectionObserver의 대상이 되기도 하거든. 그런데 width 를 0으로 해도 작동할까? height도 0이야. 그럼 뭘 기준으로 교차를 확인 하지?🤔 width: 0, height: 0 요소와 IntersectionObserver아주 좋은 질문이다. IntersectionObserver는 **관찰 대상 요소의 경계 상자(Bounding Box)**가 루트(Root)의 경계 상자(및 rootMargin으로 조정된 영역)와 **교차(intersect)**하는지를 기반으로 작동한다.⚙️ IntersectionObserver의 작동 기준: Bounding BoxBounding Box: 요소가 화면에 렌더링될 때 차지하는 사각형 영역을 의미한다. 이 크기는 요소의 wid..

Intersection Observer는 간단하게 말하면 관측 대상 요소가 관측된 경우에 웹페이지가 특정 행동을 하도록 만드는 것이다.그때문에 사용자가 보는 화면 뷰포트가 가장 중요한 개념이다.그중에서 무한 스크롤은 유튜브 같이 다양한 컨텐츠가 거의 무한이 있는 경우에 유용하게 사용되고 있다. 그 중 관측 대상 요소가 언제, 어떻게 '관측'됐다고 간주될지를 정밀하게 제어하는 데 사용되는 옵션이 있다.바로 rootmargin과 threshold이다. IntersectionObserver를 생성할 때는 두 번째 인자로 options 객체를 전달할 수 있다.이 객체에는 root, rootMargin, threshold 세 가지 속성이 포함될 수 있다.const options = { root: document..

모든 개별 사례에서 this가 어떤 객체를 참조하는지 일일이 암기하는 것은 비효율적이고 거의 불가능에 가깝다.대신, this 값이 어떻게 결정되는지에 대한 핵심 규칙들을 이해하는 것이 훨씬 중요하고 효과적이다.핵심 원칙: 일반 함수의 this 값은 함수가 **어떻게 호출되었는지(call-site)**에 따라 동적으로 결정된다.📌 this 결정 규칙 (암기 대신 이해해야 할 것)다음은 this 바인딩을 결정하는 주요 규칙들이다. 이 규칙들의 우선순위도 존재한다 (new > 명시적 > 암시적 > 기본).🥇 new 바인딩 (new Binding):함수가 new 키워드와 함께 **생성자(Constructor)**로 호출될 때 적용된다.this는 새로 생성된 객체 인스턴스를 참조한다.예시: const inst..

const set = (id, od) => {}와 같은 **화살표 함수(Arrow Function)**는 일반 함수(Regular Function) 형태로 문법적으로 변환할 수 있다.📌 일반 함수 형태로 변환원래의 화살표 함수 : const set = (id, od) => {}일반 함수 표현식(Function Expression) : const set = function(id, od) {}함수 선언문(Function Declaration) 형태 : function set(id, od) {} 이 경우 호이스팅(Hoisting) 동작이 달라진다.참고: 함수 선언문은 코드가 실행되기 전에 호이스팅되어 스코프 최상단으로 끌어올려지지만, const로 선언된 변수에 할당된 함수 표현식은 변수 선언 자체는 호이스팅..

📌 Set 생성자의 동작 방식자바스크립트의 Set 생성자(new Set())는 다음과 같이 동작한다.인수 없음: new Set()처럼 인수를 전달하지 않으면 빈(Empty) Set 객체가 생성된다.하나의 이터러블 인수: new Set(iterable)처럼 하나의 이터러블(Iterable) 객체(예: 배열 Array, 문자열 String, 다른 Set 등)를 인수로 전달하면, 해당 이터러블의 요소들을 순회하면서 고유한 값들만 추출하여 새로운 Set 객체를 생성한다.⚠️ 여러 개의 인수 또는 이터러블이 아닌 인수: Set 생성자는 오직 첫 번째 인수만 확인한다.만약 첫 번째 인수가 이터러블이면, 그 이터러블의 요소들로 Set을 만든다. 두 번째 이후의 인수들은 모두 무시된다.만약 첫 번째 인수가 이터러블이..

자바스크립트는 클래스(class) 기반 언어가 아닌 프로토타입(prototype) 기반 언어이다.객체지향 프로그래밍을 할 때 클래스에서 객체를 찍어내는 방식(Java, C++, Python 등)이 아니라, 기존 객체(프로토타입)를 복사하고 수정해서 새로운 객체를 만드는 방식을 사용한다. 프로토 타입(Prototype)이란?자바스크립트에서 객체는 다른 객체의 값을 상속 받을 수 있으며, 그 기반이 되는 객체를 '프로토타입'이라고 한다.프로토타입은 말 그대로 원본, 원형, 시제품의 의미이며 새로운 객체의 거푸집(몰드, 형틀) 역할을 한다.상속?원본이 되는 객체(프로토타입)의 속성과 메서드과 메서드를 '참조'한다는 의미다. 원본 데이터는 그대로 존재하고 메모리 주소를 참조하는 방식에 가깝다.즉 원본 데이터를 ..

자바스크립트에서 생성자 함수는 new 키워드와 함께 호출되어 객체를 생성하고 초기화하는 특별한 함수이다.일반 함수와 달리, 생성자 함수는 객체 생성을 목적으로 하며, this 키워드를 사용하여 새로 생성될 객체의 속성과 메서드를 정의한다. 즉 방을 꾸미려고 할 때  미리 어떤 위치에는 의자가 놓이고, 어떤 위치에는 책상이 높이고, 어떤 위치에는 침대가 놓이고 하는 것들을 미리 정해두는 것이다.function FurnitureLayout(chair, table, bed) { this.chair = chair; // 의자 this.table = table; // 테이블 this.bed = bed; // 침대 };여기서 new 키워드로 생성자 함수를 호출하고 매개변수를 할당하는 것은 해당 매개변..

IIFE(Immediately Invoked Function Expression)는 '즉시 실행 함수 표현식'이라는 뜻으로, 자바스크립트에서 함수를 정의하자마자 즉시 실행하는 패턴을 의미한다. IIFE의 기본 구조IIFE는 다음과 같은 기본적인 구조를 가진다.(function() { // 함수 내용})();익명 함수를 괄호 ()로 감싼다.함수 뒤에 또 다른 괄호 ()를 붙여 함수를 즉시 호출한다.IIFE의 사용 이유 및 개념스코프 제한:IIFE 내부에서 선언된 변수와 함수는 IIFE 내부 스코프에서만 접근할 수 있다.이를 통해 전역 스코프의 오염을 방지하고, 변수명 충돌을 막을 수 있다.즉시 실행:함수를 정의하자마자 즉시 실행하므로, 초기화 코드나 한 번만 실행하면 되는 코드를 작성하는 데 유용하다.모..

변수/함수 유형호이스팅초기화특징var 변수일어남undefined함수 스코프, 선언 전 사용 시 undefinedlet 변수일어남초기화 안됨 (TDZ)블록 스코프, 선언 전 사용 시 ReferenceErrorconst 변수일어남초기화 안됨 (TDZ)블록 스코프, 선언 전 사용 시 ReferenceError, 재할당 불가함수 선언식 (Function Declaration)일어남함수 전체 로드선언 전 호출 가능함수 표현식 (Function Expression, var)일어남undefined선언 전 호출 시 TypeError 발생 가능함수 표현식 (Function Expression, let, const)변수 호이스팅 규칙을 따름초기화 안됨 (TDZ)선언 전 호출 시 ReferenceError 발생  일반적으로..