게으른 나에게

호이스팅호이스팅(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

function( e ) { }콜백함수에 e를 넣으면 -> 유저가 실제로 누른 이벤트 타겟 요소(이벤트 발생한 곳)e.target; 이벤트리스너 달려 있는 곳e.currentTarget; 이벤트 기본동작 막아주는 것 (클릭 안한 것 처럼 동작)e.preventDefault( ); 상위요소로 이벤트 버블링 막아주는 것e.stopPropagation( );

Scroll은 페이지 로드 완료시 실행해야 정확하다. 태그 끝나기 전에 넣는게 좋다. 현재 페이지 실제 높이document.querySelector('html').scrollHeightdocument.documentElement.scrollHeight 현재 페이지 보이는 부분 높이document.querySelector('html').clientHeight 현재 페이지 스크롤양document.querySelector('html').scrollTopwindow.scrollY

문자 검사 방법 (포함)'문자'.includes('찾을 단어") 문자 검사 방법 (테스트)'문자'.test('찾을 단어')