자바스크립트 8

Temporal Dead Zone 줄여서 TDZ !

우선 호이스팅을 알아보자 쉽게 말하면 스코프 내부 어디에서든 변수'선언'은 최상위에 선언된것처럼 행동하는것이다. 으로 정리 할 수 있고 MDN정의를 정리하면 아래와 같다. 인터프리터가 변수와 함수의 메모리공간을 선언전에 미리 할당하는 것을 의미한다. 즉 선언 전에 미리 할당하는것이다 그렇기 때문에 let과 const도 호이스팅 된다는것이다 :) 그렇다면 var로 선언한 a는 undefined로 동작하는것은 알겠는데 console.log(a); //undefined var a ; let으로 선언한 b는 왜 ReferenceError가 발생하는 것일까? 너두 호이스팅 된다면서! console.log(b); //ReferenceError: b is not defined let b; 이유는 TDZ Tempora..

Frontend/JavaScript 2022.06.03

Element.getBoundingClientRect()

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. domRect = element.getBoundingClientRect(); 출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect Element.getBoundingClientRect() - Web API | MDN Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. developer.mozilla.org 까먹지마~~~~~~

Frontend/JavaScript 2022.05.17

이벤트 버블링, 캡처링

To. 나 이걸 아는 사람이 왜 실수를 하고 그래! From 나 1. 버블링 한 요소에 이벤트가 발생하면 할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작하는것이다. 가장 최상단의 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 거의 모든 이벤트는 버블링 된다. 이벤트가 발생한 가장 안쪽의 요소는 target 이라고 부른다. event.target으로 접근 한다. event.target : 실제 이벤트가 시작된 타깃 요소 , 버블링이 진행되어 변하지 않음. event.currentTarget (this): '현재'요소 현재 실행 중인 핸들러가 할당된 요소를 참조한다 2. 캡처링 하위 요소로 전파되는 단계

Frontend/JavaScript 2022.04.10

e.preventDefault();

어흑ㅠ 바보 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 기본동작을 실행하지 않도록 지정하는 것. https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault Event.preventDefault() - Web API | MDN Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. developer.mozilla.org

Frontend/JavaScript 2022.04.10

.localeCompare() | .sort()

.localeCompare() 기존 문자열과 비교했을때 비교 대상 문자열이 정렬상 전,후,같은순서에 오는지 비교하고 숫자를 리턴한다. 비교대상이 앞에 있으면 -1 , 뒤에있으면 1, 같으면 0을 리턴한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare String.prototype.localeCompare() - JavaScript | MDN The localeCompare() 메서드는 기준 문자열과 비교했을 때 비교 대상 문자열이 정렬상 전에 오는지, 후에 오는지 혹은 같은 순서에 배치되는지를 알려주는 숫자를 리턴합니다. developer.mozilla.org .sort()..

Frontend/JavaScript 2022.03.29