23_10_01 JS공부정리

https://www.youtube.com/watch?v=oJrk370lH1w&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=66 

[제로초강의] 7-5~

-문자열속에서 규칙을 찾을땐 수량화해서 규칙을 찾으면 나오는 경우가 있음

const scoreTable = {

    scissors : 1,

    rock : 0,

    paper : -1,

}

        const computerScore = scoreTable[computerChoice];

        const myScore = scoreTable[myChoice];

        const diff = myScore - computerScore;

        if (diff === 2 || diff === -1) {

            console.log("승리");

        } else if (diff === 1 || diff === -2) {

            console.log("패배");

        } else if (diff === 0) {

            console.log("무승부");

        } //가위바위보를 수량화하여 승패규칙을 찾은것

- 또는(||)을 사용하는 조건이 있다면 다음과 같이 바꿀 수 있음

            if ([2,-1].includes(diff)) {

                score += 1;

                message = "승리";

                myWin += 1

            } else if ([-2, 1].includes(diff)) {

                score -= 1;

                message = "패배";

                computerWin += 1;

            } else if (diff === 0) {

                message = "무승부";

            }

 

-태그.classList.replace('기존클래스','수정클래스') : 기존클래스를 수정클래스로 바꿈

-태그.classList.add{remove}('클래스') : 클래스를 추가{삭제}

 

*태그.classList.add('hello','hi','bye','hello')

위와 같이 클래스를 한꺼번에 여러개 추가 가능, 하지만 중복된 클래스는 추가되지않음(여기선 'hello')

 

-태그.classList.contains('클래스') : 해당클래스가 포함되어있으면 true, 아니면 false를 반환함

 

-new Date()끼리 연산하면 ms단위로 값을 반환함

 

-배열.reduce((a,c) => {함수}, 0) : 0은 초기값, a는 누적값,  c는 배열의 순차대로 바뀌는  요소를 가리킴

1. 초기값 0이 a로 들어감

2. a와 c가 함수를 통해 실행됨

3. 반환된 값은 다시 a로 들어가 누적값이 됨

4. 그다음 c값이 다시 들어오고 함수가 실행됨

5. 반환값이 다시 a가 되고 배열이 끝날때까지 반복됨

6. 누적값 a가 최종반환값이 됨

 

-[1,2,3,4].reduce((a,c) => (a+c),0)

1.0이 a에 들어가고 c에 배열의 첫요소인 1이 들어감

2.a+c가되어 1이 a에 들어감

3. c에 두번째 요소인 2가 들어감

4.a+c가 되어 3이 a에 들어감

5.배열이 끝날때까지 반복된 후, 최종반환값이 10이 됨.

 

-배열.reduce()를 사용하면 배열을 객체 리터럴로 바꿀 수 있음

reduce메서드로 배열을 객체리터럴로 바꾸기

['철수', '영희', '현영', '한솔'].reduce((a, c, i) => { a[i] = c; return a }, {})

1.처음 a값은 {}, c는 철수, i는 0(배열인덱스)

2.a[0]='철수'가 되고, 객체리터럴 a가 반환됨. a[0]을 한 순간 키는 0이고 값은 '철수'인 프로퍼티가 객체리터럴 a안에 들어간것.

3.두번째, 객체리터럴 a는 {0:'철수'}이고 c는 영희, i는 1

4.a[1]='영희', 객체리터럴 a는 {0:'철수',1:'영희'}가 됨.

5.이런식으로 끝날때까지 반복하면 배열을 객체리터럴로 바꿀 수 있음.  

 

-배열.reduce()를 사용할때 초기값을 넣지않으면 배열[0]이 초기값이 됨

초기값을 생략한 경우. a가 1이되고 c가 2가되어 반복문이 2부터 시작

 

-코드사이에 debugger;를 입력하면 해당페이지 개발자도구에 들어가게되면 코드가 멈춘곳에서의 값들을 상세히 알 수 있음

이런식으로 코드가 중간에 멈춤. 맨 오른쪽의 scope를 누르면 그 시점의 변수들의 값을 알 수 있음.

-구조분해 할당

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

위 두코드는 같은 의미임. 객체안에 속성이 변수명과 같을때 첫번째 코드처럼 사용가능함.

 

배열도 마찬가지로 이런식으로 구조분해할당가능.

중간에 건너뛰고싶으면 two,four를 삭제하고 콤마만 놔두면 됨.

객체리터럴의 구조분해 할당. 2번째줄이 마지막 2줄과 동일.

 

객체리터럴 구조분해할당 문제

정답. 첫째줄이 구조분해할당. 아래 3줄과 동일한 의미

,의 가장끝에있는것만 변수가되므로 a,c,e만 변수로 할당됨. (??? 이번 구조분해할당은 잘 이해가 안됨..)

첫째줄의 구조분해 할당은 obj안의 키값을 그대로 적어오고, 콤마의 위치만 잘 찍어서 해결한 것으로 보임.

 

-5줄 X 4칸  2차원 배열 만드는 코드

<script>

    const array =[];

   

    for (let i=0; i<5; i++){

        const cells = [];

        for(let j=0; j<4; j++){

            cells.push(1);

        }

        array.push(cells);

    }

</script>

5x4 2차원배열

-삼항연산자 : (조건) ? (참일경우반환값) : (거짓일경우반환값)

        turn = (turn === "O" ? "X" : "O"); //첫줄의 코드는 나머지와 동일함

 

        if (turn === 'O'){

            turn = 'X'

        } else if (turn === 'X'){

            turn = 'O'

        }

-이벤트 버블링 현상 

    const { body } = document;

    const $table = document.createElement('table');

    const $result = document.createElement('div');

    const rows = [];

    let turn = 'O';

    const callBack = (event)=>{

        // event.stopPropagation()을 여기다가 적으면 이벤트 버블링이 막힘

        if (event.target.textContent){ //여기서 event.currentTarget (이벤트리스너 붙인 태그를 가르킴) 을 넣으면 table을 target으로 함.

            return

        }

        event.target.textContent = turn;

        //승부확인

        turn = (turn === "O" ? "X" : "O");

    }

    for (let i=0; i<3; i++){

        const $tr = document.createElement('tr');

        const cells = [];

        for (let j=0; j<3; j++){

            const $td = document.createElement('td');

            cells.push($td);

            $tr.append($td)

        }

        rows.push(cells)

        $table.append($tr)

    }

    $table.addEventListener("click", callBack) //table에 이벤트리스너를 달아도 td에 단것처럼 됨.

    body.append($table)

    body.append($result)

-이상한점 

table에 이벤트를 달앗는데 target이 td로 적용되고, td안에 글자가 채워짐.

 

-설명

*HTML에서 이벤트를 발생시키면 모든 부모태그에 이벤트를 발생시킨것이라고 봄.

*예를 들어 여기서는 td에 이벤트를 발생시키면 tr,table,body태그에 모두 이벤트가 발생되는것.

*event.target을 하면 td를 가리키지만, event.currentTarget을 하면 이벤트를 단 태그를 가리키게 됨.

*이벤트 버블링을 막기위해서는 event.stopPropagation()을 쓰면됨.

 

-이벤트 캡처링 현상 : 이벤트를 발생시키면 모든 자식태그에도 이벤트를 발생시킨것으로 보는 현상

*페이지 팝업 바깥쪽을 클릭했을때 팝업이 닫히는 기능을 만들때 이벤트 캡처링을 사용함

*addEventListener(이벤트, 함수, true)로 하면 캡처링이 작동됨. (false가 기본값)

 

-배열에서 td는 자신의 cellIndex를 알고있음

[

 [td,td,td],

 [td,td,td],

 [td,td,td]

]

    const checkWinner = (target) => {

    const rowIndex = target.parentNode.rowIndex; //tr태그의 rowIndex를 뽑아냄(td의 부모태그는 tr태그이므로)

    const cellIndex = target.cellIndex; //td태그의 cellIndex를 뽑아냄(배열내부에서 몇번째인지)

}

-td태그를 target으로 받으면 다음과같이 행번호와 열번호를 뽑을 수 있음

-태그.parentNode : 부모태그를 선택

-태그.children : 자식태그를 유사배열로 반환(뒤에 []를 붙여 몇번째 자식인지 선택할 수 있음)

-유사배열 : 앞에 글자가 붙어있음. 유사배열은 배열의 메서드들(forEach, indexOf같은것들)을 못씀

-Array.from(유사배열) : 배열로 변환해서 반환함.

유사배열은 배열앞에 뭐가 붙어있음

그냥 배열은 그딴거 안붙어있음

Array.from을 이용해 유사배열을 배열로 변환.

 

-2차원배열.flat() : 1차원배열로 반환해줌

2차원 배열인 rows를 rows.flat()을 이용해 1차원배열로 반환

-배열.every((파라미터)=> {조건}) : 배열의 모든 요소를 파라미터에 순차적으로 넣어서 함수를 적용했을때 모두 조건의 기준에 통과하는지 검사.

-배열.some((파라미터)=>{조건}) : 배열의 모든 요소를 파라미터에 순차적으로 넣어서 함수를 적용했을때 하나라도 조건의 기준에 통과하는지 검사.

https://www.codingfactory.net/10866

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

*rows.flat().every((td) => td.textContent) : td에 대해서 모든 td.textContent가 존재하는지 검사. (존재하면 true, 존재하지 않으면 null이 나오므로 false)

*rows.flat().some(() => td.textContent) : td에 대해서 하나라도 td.textContent가 존재하는지 검사.

 

-배열.filter((파라미터)=>{조건}) : 조건에 맞는 값들만 배열로 반환 

const emptyCells = rows.flat().filter((v) => !v.textContent);

//rows.flat()에 대하여 text.Content가 없는 요소들만 뽑아냄