Czym jest computed property w JavaScript?

Computed property (właściwości obliczane) to funkcjonalność w JavaScript, która pozwala na użycie wyrażeń do dynamicznego tworzenia nazw właściwości w obiektach. Ta technika jest szczególnie przydatna, gdy nazwa właściwości jest nieznana podczas pisania skryptu lub gdy chcemy jej wartość obliczyć w trakcie wykonania programu.

Przykład użycia computed property

Załóżmy, że tworzymy aplikację, w której nazwy właściwości obiektu zależą od danych wejściowych użytkownika lub innych dynamicznych wartości. Oto jak możemy wykorzystać computed properties do osiągnięcia tego celu:

Kod JavaScript
// Przykład obiektu z computed property
let propertyName = "color";
let uniqueId = 1;

let vehicle = {
    brand: "Toyota",
    model: "Corolla",
    [propertyName]: "red",
    [`id_${uniqueId}`]: 12345
};

console.log(vehicle);

W powyższym przykładzie, propertyName i `id_${uniqueId}` są computed properties. Oznacza to, że ich nazwy są obliczane dynamicznie w czasie wykonania skryptu. Dzięki temu, można łatwo tworzyć obiekty z nazwami właściwości zależnymi od zmiennych lub wyrażeń.

Wyjaśnienie działania

  • propertyName jest zmienną, która przechowuje nazwę właściwości "color". Właściwość ta zostaje dodana do obiektu vehicle z wartością "red".
  • `id_${uniqueId}` to przykład użycia template stringów (ciągów szablonowych) do stworzenia nazwy właściwości, która zawiera wartość zmiennej uniqueId. Rezultatem jest właściwość o nazwie "id_1" z wartością 12345.

Podsumowanie

Computed properties w JavaScript umożliwiają dynamiczne tworzenie nazw właściwości w obiektach, co zwiększa elastyczność i możliwości języka. Jest to szczególnie przydatne w aplikacjach, gdzie struktura danych może zmieniać się w zależności od kontekstu wykonania lub danych wejściowych użytkownika. Korzystając z tej funkcjonalności, można pisać bardziej dynamiczny i adaptacyjny kod.

 

 

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Scroll to Top