JavaScript 논리 연산자 &&, ||, 화살표 함수, setInterval

1. &&

(A && B) A가 Truthy한 값이면 B가 결과값이 된다.

example1 && example2 = example1이 true인 경우 example2을 반환하고 그렇지 않은 경우 example1을 반환

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1

2. ||

어떤 값이 Falsy하다면 대체로 사용할 값을 지정할 때 사용한다.

example1 || example2 = example1이 true인 경우 example1을 반환하고 그렇지 않은 경우 example2을 반환

function getName(animal) {
  const name = animal && animal.name;
  return name || '이름이 없는 동물입니다.';
}

 

https://html6.tistory.com/424

자바스크립트(JavaScript) 논리 연산자 ( ||, &&, ! ) 설명

3. setInterval, clearInterval

https://aljjabaegi.tistory.com/423

Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법

function startTimer(duration, display) {
    let timer = duration, time, minutes, seconds;
    const interval = setInterval(function () {
        time = parseInt(timer / 3600, 10)
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        time = time < 10 ? "0" + time : time;

        if(minutes > 60) {
            minutes = parseInt(minutes % 60, 10);
        } else if( minutes < 60){
            minutes = "0" + minutes
        } else {
            minutes = minutes
        }
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = time + "시간" + minutes + "분" + seconds +"초";

        if (--timer < 0) {
            timer = duration;
        }
        if (timer === 0) {
            clearInterval(interval);
            display.textContent = "해당 이벤트는 종료되었습니다.";
        }
    }, 1000);
}

window.onload = function () {
    /* 기본값 10(분)입니다. */
    const minutes = 10;

    const fiveMinutes = (60 * minutes) - 1,
        display = document.querySelector('#TimeCount');
    startTimer(fiveMinutes, display);
};
</script>

3-1. 화살표 함수, ES6 의 템플릿 리터럴 (Template Literal)

https://learnjs.vlpt.us/basics/05-function.html#%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98

05. 함수 · GitBook

4.Node.textContent

https://developer.mozilla.org/ko/docs/Web/API/Node/textContent

Node.textContent - Web API | MDN

5. innerHTML vs. innerText vs. textContent

https://hianna.tistory.com/479?category=764998 

[Javascript] div 안의 내용 가져오기, 추가, 변경, 삭제 (text, html)

https://learnjs.vlpt.us/useful/03-short-circuiting.html

03. 단축 평가 논리 계산법 · GitBook