삼항연산자
A ? B : C
A의 조건이 True면 B // False 일땐 C를 실행하는것임
삼항연산자로 flat long shadow를 만든 예는 이거 :
https://aosceno.tistory.com/528
삼항연산자로 Flat Long Shadow 만들기 (HTML/CSS/vanilla JS)
원본 소스 https://www.youtube.com/watch?v=xrmdn1t5moA HTML 1 2 3 4 5 6 7 8 9 10 11 12 삼항연산자 HELLO WORLD Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11..
aosceno.tistory.com
즉
const a = true; 일때
if(a){
console.log('참이에용');
}else{
console.log('틀렸어용');
}
이 구문을 그냥
a ? console.log('참이에용') : console.log('틀렸어용');
이렇게 줄일 수 있다 이거임
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>if 문 줄여보기</title>
</head>
<body>
<h1 id="myDiv">10</h1>
<button id="btn">숫자를 줄여보자</button>
<script>
const myDiv = document.getElementById('myDiv');
const btn = document.getElementById('btn');
let val = Number(myDiv.innerText);
btn.addEventListener('click',decrease);
function decrease(){
const result = val - 1;
val = result < 0 ? 0 : result;
// if(result < 0){
// val = 0;
// return;}
// val = result;
myDiv.innerText = val;
}//decrease
</script>
</body>
</html>
|
cs |
if(result < 0){
val = 0;
return;}
val = result;
이걸
val = result < 0 ? 0 : result;
걍 이 한줄로 줄인거임
ㅅㄱ
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| reduce는 왜 필요할까? (feat: rest parameters) (0) | 2021.08.17 |
|---|---|
| [vanilla JS] html 파일 jQuery없이 include 하는 법 (0) | 2021.08.03 |
| JS 자바스크립트로 CSS transform - translateX, translateY, translateZ 값 가져오기 (0) | 2021.06.23 |
| 삼항연산자로 Flat Long Shadow 만들기 (HTML/CSS/vanilla JS) (0) | 2021.06.01 |
| 웹/모바일 터치슬라이더 만들기 (vanilla Java Script/vanilla JS) (0) | 2021.05.17 |