삼항연산자 (ternary operator)는 간단한 if문을 더 간단하게 줄일 수있다.

arancia_ 2021. 6. 25. 16:22

삼항연산자

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씩 줄어들게 해보자. 근데 0보다 작아지면 안됨.

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>
Colored by Color Scripter



cs

if(result < 0){
     val = 0;
     return;}
val = result;

이걸

val = result < 0 ? 0 : result;

걍 이 한줄로 줄인거임
ㅅㄱ