220807(일)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드

⭐ `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`이벤트 버블링

이벤트 버블링이란 이벤트가 발생할 때, 부모 태그에도 동일한 이벤트가 발생하는 현상을 말합니다.
마치 거품이 위로 상승하는 것과 같아 버블링이라고 표현합니다.

<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를 가리킵니다.
 */
});

`JavaScript`parentNode, 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 태그

`JavaScript`every와 some

배열의 내장함수로 배열의 값들에 대한 평가(boolean)을 반환

// 배열의 모든 값이 9보다 작으면 true, 하나라도 9 이상이면 false
arr.every((value) => value < 9);

// 배열의 값 하나만 9보다 작으면 true, 모두 9 이상이면 false
arr.some((value) => value < 9);

🪴 성장일지
- 🌳 키워드

🪴 성장일지

🌳 키워드

⭐ JavaScript구조 분해 할당

⭐ JavaScript이벤트 버블링

JavaScriptparentNode, children

JavaScriptevery와 some

⭐ `JavaScript`구조 분해 할당

⭐ `JavaScript`이벤트 버블링

`JavaScript`parentNode, children

`JavaScript`every와 some