[js] 삼항연산자

목표

: 삼항연산자를 사용해서 class "red" 를 갖고 있는 태그들은 red 라는 텍스트가 찍히게 해보자

 

 

html

<ul>
  <li>aaa</li>
  <li class="red">bbb</li>
  <li>ccc</li>
  <li class="blue">ddd</li>
  <li>eee</li>
  <li>eee</li>
  <li class="red">나나</li>
</ul>

 

css

  .red {color:red;}
  .blue {color:blue;}

 

js

    let li = document.querySelectorAll("li");
    
    li.forEach(function(item){
      // if(item.classList.contains("red")){
      //   item.innerHTML="red"
      // }
      item.classList.contains("red") ? item.innerHTML="red" : console.log("?")
    });

 

삼항연산자를 쓰면,

 

if( 조건문 ) { 조건문 결과 } else { 조건문 외의 결과 }

위 문법이 아래와 같이 바뀐다

 

(조건문) ?  조건문 결과 : 조건문 외의 결과

 

 

item.classList.contains("red") ? item.innerHTML="red" : console.log("?")

 

forEach 안에서 돌고 있는 각각의 li 들은 red 라는 클래스를 갖고 있을 시,

해당 li 태그 안에 "red" 라는 텍스트가 들어가고,

forEach 안에서 돌고 있는 각각의 li 들 중 red 라는 클래스를 갖고 있지 않은 나머지는

console.log("?") 를 찍게 된다

 

결과