JS - operator void

Operator void, to ciekawostka, którą warto poznać. Zobaczymy jak ona działa na przykładzie klasy Helper z poprzednich lekcji. Do dzieła.

Oto nasza klasa:

class Helper {
    constructor(selector) {
        this.item = document.getElementById(selector);
      }
    
    toUpper(){
        
        let txt = this.item.textContent;
        
        if(this.item.firstChild.nodeType === Node.TEXT_NODE){
            this.item.textContent = txt.toUpperCase();
        }else {
            this.item.firstChild.textContent = txt.toUpperCase();
        }

        return this;
    }

    toBold(){
        let txt = this.item.textContent;
        this.item.innerHTML = "<b>" + txt + "</b>";
        return this;
    }

    incrementFS(unit='px', by=1){

        let computed = getComputedStyle(this.item);
        let fs = computed.getPropertyValue('font-size');

        let fsNumber = parseInt(fs);
        let newSize = `${fsNumber+by}${unit}`;

        this.item.style.fontSize = newSize;

        return this;
    }
}

A to jej zastosowanie:

window.addEventListener("DOMContentLoaded", function(){

    let para = new Helper('para');

    para.toBold()
    .toUpper()
    .incrementFS()
    .incrementFS()
    .incrementFS();

});

Jak widać metody tej klasy zwracają this i można je chainować. Dokonajmy jednak zmiany w HTML:

<p id="para">bla bla bla</p>
<button id="btnIncrement">Increment Fontsize</button>
<button id="btnBold">Bold</button>
<button id="btnUpper">Uppercase</button>

Teraz złapmy nasze przyciski:

window.addEventListener("DOMContentLoaded", function(){

    let para = new Helper('para');

    let btnIncrement = document.getElementById('btnIncrement');
    let btnBold = document.getElementById('btnBold');
    let btnUpper = document.getElementById('btnBold');

});

Dodajmy tym przyciskom zdarzenie onclick:

window.addEventListener("DOMContentLoaded", function(){

    let para = new Helper('para');

    let btnIncrement = document.getElementById('btnIncrement');
    let btnBold = document.getElementById('btnBold');
    let btnUpper = document.getElementById('btnUpper');

    btnIncrement.onclick = () => void para.incrementFS();
    btnBold.onclick = () => void para.toBold();
    btnUpper.onclick = () => void para.toUpper();
   
});

Void sprawa, że nic nie zostanie zwrócone. Inny przykład:

function getYear() {
  return 2020;
};

console.log(getYear());
// Output: 2020

console.log(void getYear());
// Output: undefined

// Useful use case
button.onclick = () => void getYear();

JS – operator void