틱택토 part1

이벤트 버블링

이벤트 버블링이 필요한 이유

td안에 span있을 때 span 눌렀을 때도 버블링이 일어나서 span의 부모인 td에도 클릭 이벤트 가도록 한다(단 td에 이벤트 리스너가 등록되어 있어야 한다)

td - > tr - > table - > body 로 이벤트 올라간다
자식부터 부모까지 다 실행된다
event.target은 event가 발생한 직접적인 대상
event.currentTarget(얘는 진짜 이벤트핸들러를 붙힌애)
td에 이벤트를 연결하든 table에 이벤트를 연결하든 event.target은 그대로 td가 된다
td 태그에는 이벤트를 연결하지 않았는데 어떻게 table에서 이벤트가 호출 됬을까??? 이벤트 버블링 !! td태그에서 click 이벤트 발생하면 부모로 버블링 되어서 td -> tr -> table 올라간다.
즉 td태그에서 발생한 click 이벤트가 table 태그까지 전달된다
event.stopPropagation()하면 버블링 막아준다(하지만 지양해야)

이벤트 캡쳐링

잘 쓰이지 않지만
팝업 닫을 때 이벤트 캡쳐링 쓴다(바깥쪽 클릭했을 때 닫히도록)
캡쳐링은 따로 설정해줘야 한다 - > 이벤트리스너에 3번째 인자로 true전달해야함(MDN참고)

배열의 내장함수 every와 some

형식
배열.every(조건함수)
배열.some(조건함수)

1. every는 하나라도 조건을 만족하지 않는요소(조건 함수가 false를 return)를 찾으면 반복을 중단한다
2. some은 하나라도 조건을 만족하면(조건 함수가 true를 return) 반복을 중단한다

퀴즈

퀴즈 다음 배열에서 한 칸이라도 null이 들어 있으면 true를 반환하고, 아니면 false를 출력하는 코드를 작성하세요

const array = [1, "hello", null, undefined, false];

array.some((element) => element === null);

let some = false;
for (let x of array) {
  if (x === null) {
    some = true;
    break;
  }
}

forEach를 사용해도 되지만 하나라도 있으면 멈추고 싶은데 멈출수가 없어서 효율성이 떨어진다

flat

flat()
배열의 차원을 한 단계 낮추는 메서드로 n차원 배열을 n-1차원 배열로 낮춘다
일차원 배열은 flat을 적용해도 그대로 일차원 배열이 된다

2차원 배열 1차원배열로 펼치기

rows.flat() -- 1차원 배열은 every 쓸 수 있다

every와 flat의 활용

무승부 판별

const checkDraw = () => {
  let draw = true;
  const oneDimension = gameBoard.flat();
  for (let cell of oneDimension) {
    if (!cell.textContent) {
      return false;
    }
  }

  return draw;
};

1. 처음에 무승부라고 가정해주었다

• 왜냐 하나라도 빈칸이 있으면 false를 바로 return 하고 종료시킬 것이기 때문이다

2. 2차원 배열을 flat()을 사용하여 1차원 배열으로 만들어준다
3. for문을 돌려준다

every로 for문 대체하기

1. for문을 돌아도 되지만 every 메서드를 사용할 수 있다
2. 모두다 조건을 통과하면 true 하나라도 실패하면 false를 return 한다
   그래서 코드를 개선해보면

const checkDraw = () => {
  const draw = gameBoard.flat().every((cell) => cell.textContent);

  return draw;
};

구조분해할당

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

const object = { a: 1, b: 2 };
const { a, b } = object;
//const a=object.a
//const b=object.b
// = > 변수명과 속성값이 같을 때 사용가능

//a,c,e 속성을 구조분해 할당 문법으로 변수에 할당해 보기
const obj = {
  a: "hello",
  b: {
    c: "hi",
    d: { e: "wow" },
  },
};

const {
  a,
  b: {
    c,
    d: { e },
  },
} = obj;

//const a=obj.a
//const c=obj.b.c
//const e=obj.b.c.e

출처 Let's get it 자바스크립트 프로그래밍