📌조건문

문(Statement)	식(Expression)
실행 가능한 동작을 수행하고 값을 반환하지 않는다.	값을 평가하고 반환한다.

문은 값을 뱉지 않지만 식은값을 내뱉는다🤤

📌논리연산자

단락 평가
OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 단락 평가라고 한다.

단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있다.

단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 사용한다.

---

|| - 첫 번째 true를 찾는다.
&& - 첫 번째 false를 찾는다.

1. 식을 평가하기 위해 alert(1)이 먼저 실행이 된다.
2. alert 메서드는 값을 반환하지 않는다. ➡️ undefined가 반환된다.
3. 첫 번째 식이 false이기 때문에 두 번째 식으로 넘어간다.
4. 2는 truthy한 값이기 때문에 값이 반환된다.
5. alert 창에 2가 출력된다.
결과: 1,2가 차례대로 출력된다.
∴ alert 메서드는 값을 반환하지 않는다. 즉, undefined를 반환

1. 식을 평가하기 위해alert(1)이 먼저 실행이 된다.
2. undefined가 반환된다.
3. alert 창에 undefined가 출력된다.

함수를 값으로 인식하기 때문에 true
하지만 함수의 리턴 값이 0이면 false

📌switch문

자료형이 중요함!!

let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}

3을 입력하더라도 입력 받은 값은 문자열이기 때문에
디폴트 값이 출력된다.

📌nullish 병합 연산자 '??'

위에서 배운 || 와 결과가 동일하다

'??'와 '||'의 차이

||는 첫 번째 truthy 값을 반환한다
??는 첫 번째 정의된(defined) 값을 반환한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

⚠️ 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다

⭐ 정리
T ||: 먼저 나오는 truthy를 찾는다, 아니면 끝을 반환한다
F && : 먼저 나오는 falsy를 찾는다, 아니면 끝을 반환한다
정 ??: 먼저 나오는 정의한 값을 찾는다, 아니면 끝을 반환한다

📌loop

while

성능 진단 : 순환 vs. 역순환
⭐역방향이 성능상에 더 좋다!!⭐

---

📌야무쌤 강의 - DOM API 문서 객체(들)에 접근하는 방법

// -------------------------------------------------------------
// DOM API
// - 문서 객체(Document Objects)를 선택하는 방법
// - 요소노드(ELEMENT_NODE) vs 노드리스트(NodeList) | HTMLCollection(유물)
// -------------------------------------------------------------

// tagName 으로 선택하는 방법
// 문서에서 tagName 값이 [    ]인 요소들을 찾아라.
// 태그이름이 피규어인 요소들을 가려와라
var figures = document.getElementsByTagName("figure");
console.log(figures); // HTMLCollection 집합객체

// id 속성 값으로 선택하는 방법
var boy = document.getElementById("boy");
boy.style.transform = 'perspective(800px) rotateY(56deg)';

var boy = '야망 ~';
// console.log(boy);

/* 
// class 속성 값으로 선택하는 방법
var paragraphs = document.getElementsByTagName('p');
var kbds = paragraphs.getElementsByTagName('kbd');
=
=
==> paragraphs는 복수형이기 때문에 getElementsByTagName 형태로 사용할 수 없다.
    paragraphs.item(0).getElementsByTagName('kbd')하면 접근 가능

console.log(kbds);
 */

var paragraphs = document.getElementsByTagName('p');
var kbds = paragraphs.item(0).getElementsByTagName('kbd');
kbds.item(0).style.color = 'blueviolet'; // or kbds[0]
// class 속성 값으로 선택하는 방법
var clouds = document.getElementsByClassName('cloud');
var kbd = document.getElementsByClassName('info')[0].getElementsByTagName('kbd')[0];

// CSS 선택자(selector)로 선택하는 방법 (중요)
var boy = document.querySelector('boy');// 단수 ELEMENT_NODE
var clouds = document.querySelectorAll('.cloud');// 복수 NodeList [] 인덱스 값을 사용해서 하나의 값을 찾을 수 있음