문(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
자료형이 중요함!!
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을 입력하더라도 입력 받은 값은 문자열이기 때문에
디폴트 값이 출력된다.
위에서 배운 ||
와 결과가 동일하다
||
는 첫 번째 truthy 값을 반환한다
??
는 첫 번째 정의된(defined) 값을 반환한다.
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0
⚠️ 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||
보다 ??가 적합하다
⭐ 정리
T ||
: 먼저 나오는 truthy를 찾는다, 아니면 끝을 반환한다
F &&
: 먼저 나오는 falsy를 찾는다, 아니면 끝을 반환한다
정 ??
: 먼저 나오는 정의한 값을 찾는다, 아니면 끝을 반환한다
성능 진단 : 순환 vs. 역순환
⭐역방향이 성능상에 더 좋다!!⭐
// -------------------------------------------------------------
// 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 [] 인덱스 값을 사용해서 하나의 값을 찾을 수 있음