220807(일)
🪴 성장일지
책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록
살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!
🌳 키워드
⭐ JavaScript구조 분해 할당
객체에서 객체 내부의 속성과 할당하는 변수명이 같을 때 아래와 같이 표현할 수 있습니다.
const { body } = document; // 위와 아래는 같습니다. const body = document.body;
마찬가지로 배열은 그 순서를 지키는 선에서 아래와 같은 표현이 가능합니다.
const arr = [1, 2, 3]; const [a, b, c] = arr; //위와 아래는 같습니다. const a = arr[0]; const b = arr[1]; const c = arr[2];
⭐ JavaScript이벤트 버블링
이벤트 버블링이란 이벤트가 발생할 때, 부모 태그에도 동일한 이벤트가 발생하는 현상을 말합니다.<br/> 마치 거품이 위로 상승하는 것과 같아 버블링이라고 표현합니다.
<body> <div id="A"> <div id="B"> <div id="C"></div> </div> </div> </body>
const $A = document.querySelector('#A'); $A.addEventListener('click', (event) => { console.log('C div를 클릭해도 그 부모인 B, A 그리고 body까지 클릭 이벤트가 전달됩니다.'); /* 1️⃣ event.target event.target은 말그대로 이벤트의 타겟으로 이벤트를 발생시킨 태그를 가리킵니다. 여기선 div C를 가리킵니다. */ /* 2️⃣ event.currentTarget event.currentTarget은 이벤트를 발생한 태그가 아닌, 이벤트를 연결한 태그를 가리킵니다. 여기선 div A를 가리킵니다. */ });
JavaScriptparentNode, children
<div class="parent"> <div class="child01"></div> <div class="child02"></div> <div class="child03"></div> </div>
// 자식 태그 -> 여러개이므로 `유사 배열`이 반환됩니다. // 배열처럼 생겼지만, 객체이므로 배열의 내장함수는 사용할 수 없습니다. // 이 때, Array.from(객체)를 통해 배열로 만들어줄 수 있습니다. document.querySelector('.parent').children; // {0: div, 1: div, 2: div} // 부모 태그 document.querySelector('.child01').parentNode; // div parent 태그
JavaScriptevery와 some
배열의 내장함수로 배열의 값들에 대한 평가(boolean)을 반환
// 배열의 모든 값이 9보다 작으면 true, 하나라도 9 이상이면 false arr.every((value) => value < 9); // 배열의 값 하나만 9보다 작으면 true, 모두 9 이상이면 false arr.some((value) => value < 9);
undefined