본문 바로가기

FrontEnd83

[ JavaScript ] 이터러블 iterable (feat. 유사배열 array-like) 이터러블 iterable 이란? [Symbol.iterator]() 메서드를 가진 객체이다. for ...of 문으로 순회할 수 있다, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 등이 있다 //배열에서 이터러블 표식을 없애버리면 어떻게 될까? let arr = [1,2,3] for(const a of arr) console.log (a) // 정상작동 1,2,3 arr[Symbol.iterator] = null; // 이렇게 하면 순회가 되지 않는다 for(const a of arr) console.log (a) // Uncaught TypeError:.. 2023. 10. 29.
[ JavaScript ] 즉시 실행 함수(IIFE) (feat. 익명함수) 즉시 함수 호출 표현식 Immediately Invoked Function Expressions 1. 익명함수 + 즉시실행 (function(){})(); (function(){}()) // function 으로 시작하는 문은 함수 선언으러 간주, //이 함수를 ()로 묶으면 함수식이 된다. //이렇게 하면 다음 () 로 함수를 실행할 수 있다. 익명함수란？ IIFE 로 사용되어 일부 코드를 캡슐화 => 변수가 전역 범위로 누출되지 않는다 한 번 사용되고 다른 곳에서는 사용할 필요 없는 콜백으로 사용 2. window.onload html 문서의 모든 내용을 읽고, 이미지 소스까지 다운로드가 끝났을 때 실행하라는 의미 순수한 자바스크립트 함수여서 jQuery 함수보다 먼저 호출 window.onload .. 2023. 10. 29.
[ JavaScript ] this 보호되어 있는 글 입니다. 2023. 10. 29.
[ 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.

티스토리툴바