Objektide süntaks ja struktuur

🧾 Konspekt Objektid ja meetodid

Konspekt Objektid ja meetodid

JavaScripti objektid on andmestruktuurid, mis võimaldavad salvestada seotud andmeid võtme–väärtuse paaridena.
Võti on alati string, ja väärtus võib olla ükskõik mis andmetüüp (nt arv, sõne, massiiv, funktsioon, objekt).

Objekte kasutatakse selleks, et korraldada ja hallata keerulisemaid andmeid ühes kohas.

🔹 Objektide loomine

Objekt luuakse loogeliste sulgudega {}:

let auto = {
    mark: "Toyota",
    mudel: "Corolla",
    aasta: 2022
};

Omadustele pääseb ligi punktisüntaksiga:

console.log(auto.mark);

🔹 Meetodid objektides

Objektid võivad sisaldada meetodeid – funktsioone, mis töötavad sama objekti andmetega.
Meetodi sees kasutatakse sõna this, mis viitab objektile endale:

let auto = {
    mark: "Toyota",
    mudel: "Corolla",
    taisnimi() {
        return this.mark + " " + this.mudel;
    }
};

🔹 Objektide massiiv

Objektide massiiv on massiiv, mis sisaldab mitu objekti:

let autod = [
    { mark: "Toyota", mudel: "Corolla", aasta: 2007 },
    { mark: "Honda", mudel: "Civic", aasta: 2012 },
    { mark: "Tesla", mudel: "Model 3", aasta: 2019 }
];

Selliste massiividega saab kasutada meetodeid nagu forEach, find, filter, sort jms,
et kuvada, otsida, filtreerida ja sorteerida andmeid.

🔹 Näide: Auto objektid ja nende kuvamine

Autod kuvatakse veebilehel tsükli abil:

autod.forEach((auto) => {
    tulemus += `
        <p>
            <b>Mark:</b> ${auto.mark}<br>
            <b>Mudel:</b> ${auto.mudel}<br>
            <b>Aasta:</b> ${auto.aasta}
        </p>
    `;
});

let vastus2 = document.getElementById("vastus2");
vastus2.innerHTML = tulemus;

🔹 Näide: Raamat ja Raamatukogu objektid

Objekt võib sisaldada teisi objekte ja meetodeid, mis töötavad nende andmetega.
Näiteks raamat ja raamatukogu:

var raamat = {
    pealkiri: "Tõe ja õiguse I osa",
    autor: "A. H. Tammsaare",
    aasta: 1926,

    kirjeldus: function() {
        return "Raamat: " + this.pealkiri + ", autor: " + this.autor + ", aasta: " + this.aasta;
    },

    muudaAasta: function(uusAasta) {
        this.aasta = uusAasta;
    }
};

var raamatukogu = {
    raamatud: [
        { pealkiri: "Tõe ja õiguse I osa", autor: "A. H. Tammsaare", aasta: 1926 },
        { pealkiri: "Kevade", autor: "O. Luts", aasta: 1912 },
        { pealkiri: "Rehepapp", autor: "A. Kivirähk", aasta: 2000 }
    ],

    koguArv() {
        return this.raamatud.length;
    },

    peale2000() {
        return this.raamatud.filter(r => r.aasta > 2000).length;
    }
};

🧠 Tulemused lehel

Raamat: Tõe ja õiguse I osa, autor: A. H. Tammsaare, aasta: 1930
Raamatukogus kokku raamatuid: 4
Pärast 2000. aastat ilmunud raamatuid: 1

Autode ja Raamatute ül pildi

Identities in JavaScript

Sometimes I stop thinking about my journey on mastering certain technologies and I’m greatly able to notice specific concepts that once learned, “clicked” something in my brain that made me gain a sense of greater awareness around it. Many years ago I’ve understood the concept of identity and it helped me so much that I’m sure that if you’re not still aware of it, it’ll help you a lot too.

In JavaScript when you’re comparing two non-primitive values such as literal objects, arrays, functions, and so on, you’re actually comparing their objects’ identities. Therefore if I write:

const a = {};
const b = {};

console.log(a === b);

this will print false exactly because equality checks on non-primitive values compare identities and not the content of those objects.

More or less similar things happen in other languages as I’ve mentioned earlier.
Where JS has these equality checks, in Python there is the `is` keyword, in C you have pointer comparisons, Rust, instead, takes a different approach at this forcing the dev to derive the PartialEq trait (thanks Fede 😁).

The stability of an identity

Returning to React, a characteristic that I love about it is that it’s “just” a rendering library built on top of JavaScript, and stability is indeed a key concept to understanding React hooks.

Something that’s stable, it’s something that doesn’t change.
But why on earth in React do identities change?
You’ve got to consider that whenever we define a function component, for React to be able to show that component, it needs to call that function. But if React keeps calling and calling our functions, how can these functions keep some sort of value between the various calls?

Imagine something like this:

const MyFun = () => {
  let state = "what's your ";

  return <button onClick={() => (state += "name")}>Change state</button>;
};

and imagine now that React calls this component for the first time. The user clicks the button, and then React calls it again because some parent re-rendered (this might be one of the many reasons).
At this point, the “state” variable’s value will again be re-initialized at its original value of course.