본문 바로가기

FrontEnd/JavaScript44

[ JavaScript ] forEach는 비동기 함수(async)를 기다려주지 않는다. ( feat. Array.prototype) 보호되어 있는 글 입니다. 2023. 10. 29.
[ JavaScript ] closest() 구문 closest(selector) (selector 는 css선택자 문자열) 반환값 selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null. 사용 특정 클래스를 가진 부모 요소를 찾고 싶을 때 이벤트 위임(Delegating Events)을 해야할 때 //수정 , 삭제 버튼 ,체크박스 눌렀을 때 containerEl.addEventListener('click', async e => { const todoEl = e.target.closest('li'); const todoElText = todoEl.querySelector('.list--text'); const todoId = e.target.closest('li').id; if (e.targe.. 2023. 10. 29.
[ JavaScript ] 이벤트 위임 Event Delegation 이벤트 위임 Event Delegation 이란? 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법 DOM event에 적용할 수 있는 유용한 패턴 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다 => 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 할당해서 여러 요소 한꺼번에 다룬다 event.target : 이벤트가 발생한 가장 안쪽 요소 => 실제 어디서 이벤트가 발생했는지 알 수 있다 event.currentTarget ( = this ) : 이벤트를 핸들링하는 현재 요소(핸들러가 실제 할당된 요소) event.eventPhase : 현재 이벤트 흐름 단계(캡처링-1,타깃-2,버블링-3) 추가, 삭제가 용이해서 HTML 구조가 유연해진다 캡처링과 버블링을 활용 캡처링 .. 2023. 10. 29.
[ JavaScript ] Set이 왜 더 빠를까?(feat. 해시테이블, 시간복잡도) Set 이 왜 더 빠른가? Set 은 해시테이블 자료구조를 갖고 있다고 한다. 2023.10.29 - [Computer Science] - [ 자료구조 ] 해시테이블 Hash Table 해시테이블 자료 구조란? Key,Value System 사용하여 데이터를 저장하는 자료구조이다. 키(Key), 해시함수(Hash function), 해시(hash), 값(value), 저장소(bucket)로 이루어져 있다. 장점 단점 - 검색 속도가 빠르다 - 삽입, 삭제 작업이 O(1)이다. - 순서가 있는 배열에 어울리지 않는다. - 공간 복잡도가 높다. - 해시 함수의 의존도가 높다. - 해시 충돌이 발생할 수 있다. 데이터 관리 메서드 & 시간 복잡도 Set Array 값이 있는지 확인하기 set.has() => .. 2023. 10. 29.
[ JavaScript ] 자바스크립트에서 private 변수 만들기 (feat. 클래스) 보호되어 있는 글 입니다. 2023. 10. 27.
[ JavaScript ] JSDoc : Providing Type Hints in JS via JSDoc JSDoc 이란? 자바스크립트 API 문서 생성기이다. 자바스크립트 소스코드에 JSDoc 형식의 주석을 추가하면 API를 설명하는 HTML 문서를 생성할 수 있다. JSDoc 주석은 /\*\* ... \*/\ 사이에 기술한다. (일반적인 /\* ... \*/\ 는 무시된다.) 파일 맨 위에 //@ts-check 추가해준다. //@ts-check Types @type type can be primitive, declared in a TS declaration, declared in a JSDoc @typedef // @ts-check /** @type {string} */ const string; /** @type {number} */ const number; /** @type {boolean} */ co.. 2023. 10. 27.