01.JavaScript 유용한 모음집

안녕하세요 TriplexLab 입니다.
이번 시간부터 JavaScript에서 유용한 Tip정보를 예시와 함께 알려드리고자 합니다.

오늘은 삼항연산자에 대해서 먼저 이야기를 해보겠습니다.

👉🏻삼항연산자

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

조건 ? true일때 : false일때

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

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

console.log(text);

예시)👇🏻👇🏻

<input class="txts" type="text" value=""/>
<div class="delet" style="display: none;">삭제</div>

<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 함수 실행하고, 비실행한다.
});

input 박스에 글짜 텍스트 존재 여부채크해 핸들링 한다.

const delet = document.querySelector('.delet')
const txt = document.querySelector('.txts')

const textExistence = function(absence) {
    delet.style.display = absence ? "block" : "none";
};

txt.addEventListener('keyup', () => {
    textExistence(txt.value.length); //input 박스에 글짜 텍스트 존재 여부에따라서, 실행하고, 비실행한다.
});