8,9챕터 강좌 정리

Adrian·2022년 5월 16일

▶️ classList

	태그.classList.contains('클래스');

해당 객체를 통해 태그에 붙은 클래스를 조작할 수 있다. contain 메서드는 클래스를 조회하는 메서드이다.

  태그.classList.add('클래스'); // 추가
  태그.classList.replace('기존클래스', '수정클래스'); // 수정
  태그.classList.remove('클래스'); // 제거

해당 메서드들을 사용하면 클래스 명으로 조작이 가능하다.

▶️ new Date()

	new Date();

	new Date(2021, 2, 31);
// Wed Mar 31 2021 00:00:00 GMT+0900 (대한민국 표준시)
	new Date(2021, 2, 31, 18, 30, 5);
// Wed Mar 31 2021 18:30:05 GMT+0900 (대한민국 표준시)

현재 시각을 알고 싶다면 다음과 같이 실행한다. 현재 시각을 직접 지정하고 싶을때는 인수로 연,월, 일, 시, 분, 초를 넣는다.

▶️ 배열.reduce()

  배열.reduce((누적값, 현잿값) => {
    return 새로운누적값;
  }, 초깃값);

  ----

  [1, 2, 3, 4, 5].reduce((a, c) => {
    return a + c;
  }, 0);
  // 15 

  ----

  [1, 2, 3, 4, 5].reduce((a, c) => { 
    a[c] = c * 10; 
    return a; 
  }, {});
  // {1: 10, 2: 20, 3: 30, 4: 40, 5: 50}

reduce는 배열의 값들을 하나의 새로운 값으로 합치는 메서드로, 다음과 같이 구성한다. (일종의 반복문과 같은 역할)

숫자 연산만 하는 것이 아니라 누적값을 활용해서 다양한 작업을 할 수 있다.

▶️ 이차원 배열

  [
    [null, 'X', null],
    ['O', null, 'X'],
    [null, 'O', 'X'],
  ]

배열 안에 배열이 있을 때 이차원 배열이라고 한다. 배열이 몇 번 중첩됐느냐에 따라 몇 차원 배열인지 정해진다.

▶️ 구조분해 할당(디스트럭쳐링)

  const { body } = document;
  const body = document.body;

객체 내부의 속성과 할당하는 변수명이 같을때 다음처럼 줄여쓸 수 있다.

  const obj = { a: 1, b: 2 };
  const { a, b } = obj; // 다음 두 줄을 이렇게 한 줄로 표현 가능
  const a = obj.a;
  const b = obj.b;

여러 속성을 한 번에 변수에 할당할 수도 있다.

  const array = [1, 2, 5];
  const [one, two, five] = array; // 다음 세 줄을 이렇게 한 줄로 표현 가능
  const one = array[0];
  const two = array[1];
  const five = array[2];

배열또한 이렇게 줄여 쓸 수 있다.

▶️ 이벤트 버블링

 	event.currentTarget

이벤트가 발생할 때 부모 태그에도 동일한 이벤트가 발생하는 현상을 말한다. 예를 들어 우리가 표를 구성할 때 td의 부모 태그는 tr이고, tr의 부모태그는 table이다.

이때 td태그에 이벤트를 실행하면 부모태그인 tr,table에도 동일한 이벤트가 발생한다.

이를 방지하기 위해 타겟을 지정할 때 event.taget대신 e.currentTarget을 사용하는 습관을 들이자.

▶️ parentNode와 children

  <table>
    <tr>
      <td id="td00"></td>
      <td id="td01">X</td>
      <td id="td02"></td>
    </tr>
  </table>
  <script>
    document.querySelector('tr').parentNode; // table 태그
	document.querySelector('tr').children; // { 0: td, 1: td, 2: td }
  </script>

현재 태그의 부모 태그를 찾고 싶을 떄는 parentNode를 사용, 자식 태그를 찾으려면 children 속성을 사용한다. 자식 태그는 여러 개일 수 있으므로, children 속성은 배열 모양의 객채가 된다.

▶️ rowIndex, cellIndex

  const rowIndex = $tr.rowIndex;
  const cellIndex = $td.cellIndex;

tr태그는 몇번째 줄인지 알려주는 rowIndex 속성이 존재하고, td태그는 몇번째 칸인지를 알려주는 cellIndex 속성이 존재한다.

▶️ 유사 배열 객체와 Array.from

	Array.from($tr.children).indexOf($td);

children속성같은 배열 모양의 객체를 유사 배열 객체라고 한다. 이는 배열이 아니므로 배열 메서드를 사용할 수 없다. 배열 메서드를 사용하고 싶다면 Array.from 메서드로 유사 배열 객체를 배열로 바꾼다.

	Array.from('123'); // ['1', '2', '3']

문자열도 Array.from 메서드를 사용해 배열로 바꿀 수 있다.

▶️ every와 some

  배열.every(조건함수);
  배열.some(조건함수);

해당배열에서 모든 값이 조건에 해당하는지 판단하려면 every메서드, 하나라도 조건에 해당하는지 판단하려면 some 메서드를사용한다.

▶️ flat

  const array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
  array.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
  const array2 = [1, 2, 3, [[4, 5, 6], [7, 8, 9]]];
  array2.flat(); // [1, 2, 3, [4, 5, 6], [7, 8, 9]]