[#3] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. Math.random( ) 생각하는 과정

let m = Math.random()

// 1-1 (디폴트)
0 <= m < 1 // 0.1234567

// 1-2 (*9)
0 <= m * 9 < 9 // 1.2345678

// 1-3 (+1)
1 <= m * 9 + 1 < 10 

// 2
Math.floor(m * 9 + 1) // {1, 2, 3, 4, 5, 6, 7, 8, 9}

 

2. 선언할 때, 배열 vs 객체

배열: 단순히 값만 담을 때

객체: 각 값에 키값, 즉 이름이 필요할 때

 

3. event.preventDefault()

원래 내장된 객체의 기능을 제거하고 싶을 때 ( <form> , <a>)

ex) form 객체에서 button 클릭 시, 자동으로 새로고침 되는 경우
-> 기존에 담아놓은 변수들이 비워지게 됨
-> 새로고침 안되게 event.preventDefault() 사용

 

4. 중복값을 제거하는 Set 함수

Set 함수 길이는 length 대신 size사용

// 사용법
const array = [1, 1, 2]
const a = new Set(array) // [1, 2]
a.size // 2

 

5. appendChild vs append

둘다 자식요소로 추가됨
- appendChild: node 객체만 가능, return 값(#text 객체)
- append: 여러개 가능, text 가능, return 값x(undefined)

const $logs = document.querySelector('#logs');
const msg = document.createTextNode(`패배! 정답은 ${answer.join('')}`);
    $logs.appendChild(msg);

$logs.append(`${value}: ${strike}strike ${ball}ball`,document.createElement('br'));

 

appendChild를 보완해서 append가 나왔기때문에 실제로는 append만 쓴다.

 

6. forEach vs for 문

for (let i = 0; i < answer.length; i++) {
    const index = value.indexOf(answer[i]);
    if (index > -1) {
        if (index === i) {
            strike += 1;
        } else {
            ball += 1;
        }
    }
});

answer.forEach((item, idx) => {
    const index = value.indexOf(item);
    if (index > -1) {
        if (index === idx) {
            strike += 1;
        } else {
            ball += 1;
        }
    }
});