게으른 나에게

“이벤트 전파 방식은 이벤트가 발생한 요소에서부터 시작하여 부모 요소로 전파되는 과정을 이해하는 데 중요”  이벤트 버블링이벤트가 발생한 요소에서 시작 → 상위 부모 요소로 전파되는 방식가장 깊은 요소에서 시작하여 부모 요소를 거슬러 올라가며 각 요소에 할당된 이벤트 핸들러가 실행 특징FORM DIV P 요소를 클릭하면 다음 순서로 이벤트 핸들러가 실행 요소의 핸들러 실행부모 요소의 핸들러 실행최상위 요소의 핸들러 실행이러한 이벤트 전파 방식은 대부분의 이벤트에 적용이를 통해 상위 요소에서도 하위 요소에서 발생한 이벤트를 감지하고 처리 가능    이벤트 캡처링이벤트가 최상위 부모 요소에서 → 시작하여 이벤트가 발생한 요소까지 전파되는 방식이벤트가 상위 요소에서 하위 요소로 내려가며 각 요소..

this 용법함수의 호출 방식과 정의된 위치에 따라 참조하는 객체가 달라짐자신이 속한 객체를 가리키는 변수 사용 사례전역 범위에서의 this전역 컨텍스트에서 this는 전역 객체를 가리킴브라우저 환경에서는 window 객체가 이에 해당console.log(this === window); 일반 함수에서의 this함수 내부에서의 this는 호출 방식에 따라 달라짐비엄격 모드에서는 전역 객체엄격 모드에서는 undefinedfunction showThis() { console.log(this);}showThis(); // 비엄격 모드: window 객체, 엄격 모드: undefined 객체의 메서드에서의 this해당 메서드 내부의 this는 그 메서드가 속한 객체를 가리킴const obj = { value:..

클로저(Closure)클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합함수가 생성될 당시의 외부 변수를 기억하고, 그 함수가 실행될 때에도 해당 변수에 접근할 수 있는 기능‼️ 클로저 = 함수 + 렉시컬 스코프 원리자바스크립트에서는 함수가 생성될 때, 해당 함수는 자신이 선언된 위치의 렉시컬 환경을 기억이를 통해 내부 함수는 외부 함수의 변수에 접근 가능외부 함수의 실행이 종료된 이후에도 내부 함수가 해당 변수에 접근 가능특징상태 유지클로저를 사용하면 함수가 생성될 때의 환경을 기억하여, 호출될 때마다 이전 상태를 유지상태를 유지해야 하는 다양한 상황에서 유용하게 활용 됨정보 은닉클로저를 통해 외부에서 직접 접근할 수 없는 변수를 만들 수 있음데이터의 캡슐화와 은..

호이스팅호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언문이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 의미 var 키워드선언 단계가 호이스팅되어 스코프의 최상단으로 이동초기화는 호이스팅되지 않음, 선언 전에 해당 변수에 접근하면 undefined 값을 반환console.log(a); // 출력: undefinedvar a = 5;console.log(a); // 출력: 5→ 코드 내부적 해석var a;console.log(a); // 출력: undefineda = 5;console.log(a); // 출력: 5 let 및 const 키워드호이스팅되지만, 초기화 전에 해당 변수에 접근하면 ReferenceError가 발생이는 “Temporal Dead..

함수 표현식과 선언문의 차이 1. 문법함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재// 함수 선언문function sum(a, b) { return a + b;}함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성// 함수 표현식let sum = function(a, b) { return a + b;}; 2. 자바스크립트 엔진이 언제 함수를 생성하는지함수 표현식: 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성 -> 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용 가능함수 선언문: 함수 선언문이 정의되기 전에도 호출 가능 -> 스크립트 어디에 있느냐에 상관없이 어디에서든 사용 가능 3. 스코프함수 선언문: 코드 블록 내에 위치하면..

문자형 - 출력할 때 주로 사용String(value) 숫자형 - 수학 관련 연산 시Number(value)값형 변환 후undefinedNaNnull0true / false1 / 0string0 불린형 - 논리 연산 시Boolean(value)값형 변환 후0, null, undefined, NaN, ""false그 외의 값true  예외숫자형undefined -> NaN불린형"0", " " -> true

변화하지 않는 변수 선언const myBirthday = '01.12.32'; 대문자 상수기억하기 힘든 값 변수에 할당해 별칭으로 사용하는 것대문자 명명밑줄 명명const COLOR_RED = "#F00";// 별칭 사용let color = COLOR_REDalert(color); // #F00 장점기억하기 쉬움오타 낼 확률 적음유의미코드 가독성 증가 일반적인 방식으로 상수를 명명 vs 대문자를 사용해 명명'상수’는 변수의 값이 절대 변하지 않음을 의미코드가 실행되기 전에 이미 그 값을 알고 있는 상수런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수=> 대문자 상수, ‘하드 코딩한’ 값의 별칭 바람직한 변수명간결명확 변수 명명 시 참고하기 좋은 규칙남이 읽을 수 있는 이름 사용줄임말이..

HTML 전부 다 읽고 실행할 JS 코드$(document).ready(function(){ 실행할 코드 })document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })

sort array.sort는 문자정렬  sort로 숫자 정렬 하는 법(오름차순)1. a, b 는 array안의 자료.2. return 오른쪽 양수, a -> 오른쪽3. return 오른쪽 음수, b -> 오른쪽 (내림차순) filterarray 자료 원하는 것만 가져옴filter( ) 결과는 변수에 저장해서 써야함  sort vs filter.sort( )는 원본 변형됨.filter( )는 원본 변형되지 않음 map자료 전부 변형

Array 자료형[자료1, 자료2, 자료3 ... ] 자료 저장자료 출력자료 추가자료수정 sort : 자료간 정렬 (가나다 순) slice : 자르기 (1번부터 3번 전까지) Object 자료형{이름1: 자료1, 이름2: 자료2..}{key: value} 자료 저장자료 출력자료 수정 안에 아무거나 넣을 수 있음object, array 넣기도 가능값 출력  Array / Object 차이점Array : 순서대로 저장Object: key, value로 저장, 순서 X