01.삼항연산자

삼항연산자

첫번째로 배울 문법은, 삼항 연산자입니다. 이 문법은 ES6 문법은 아닙니다.

조건 ? true일때 : false일때

라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다.

const array = [];
let text = array.length === 0 
  ? '배열이 비어있습니다' 
  : '배열이 비어있지 않습니다.';

console.log(text);

예시)1

<input class="txts" type="text" value=""/>
<div id="app">
<p class="txtline">
  라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다.
</p>

<button class="btn">버튼</button>

const $btn = document.querySelector(".btn");

const elementToggle = function(show = true) {
  element.style.display = show ? "block" : "none";
};

$btn.addEventListener("click", function() {
    this.classList.toggle('active'); //클릭 엘리먼트에 토글 클스를 핸들링한다. 
    this.classList.contains('active') ? elementToggle(false) : elementToggle(true); //위에 토글 클래스 존재 여부에따라서 위에 함수 실행하고, 비실행한다.
});

또는

elementToggle(txt.value.length);  //input 박스에 글짜 텍스트 존재 여부에따라서, 실행하고, 비실행한다.