Hesaplanmış Özellikler

Coddy'nin JavaScript Journey'sinin Nesne Yönelimli Programlama bölümünün bir parçası — ders 44 / 56.

Hesaplanmış özellikler (computed properties), sadece saklanan veriyi döndürmek yerine bir değeri hesaplayan ve döndüren getter'lardır. Normal özellikler gibi görünürler ancak değerlerini anında hesaplarlar.

Örneğe bir göz atalım. Normal bir özelliğe sahip bir nesnemiz var:

const circle = {
  radius: 5
};

Şimdi bir getter kullanarak hesaplanmış bir özellik ekliyoruz:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

Hesaplanmış özelliğe şu şekilde erişiriz:

console.log(circle.diameter); // Çıktı: 10

Yarıçapı güncellersek, çap da otomatik olarak güncellenir:

circle.radius = 10;
console.log(circle.diameter); // Çıktı: 20

Hesaplanmış özellikler (computed properties), bir özelliğin değeri diğer özelliklere bağlı olduğunda veya hesaplama gerektirdiğinde kullanışlıdır.

Görev

Size width ve height özelliklerine sahip bir Rectangle sınıfı verildi. Göreviniz area ve perimeter için hesaplanmış özellikler (computed properties) eklemektir.

Hesaplanmış özellik <strong>area</strong> - width × height değerini döndürür
Hesaplanmış özellik <strong>perimeter</strong> - 2 × (width + height) değerini döndürür

Kopya kağıdı

Hesaplanmış özellikler (computed properties), yalnızca saklanan verileri döndürmek yerine bir değeri hesaplayan ve döndüren alıcılardır (getters). Değerlerini anında hesaplarlar.

get anahtar kelimesini kullanarak bir hesaplanmış özellik tanımlayın:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

Hesaplanmış özelliklere normal özellikler gibi (parantez olmadan) erişin:

console.log(circle.diameter); // Çıktı: 10

Hesaplanmış özellikler, bağımlı oldukları özellikler değiştiğinde otomatik olarak güncellenir:

circle.radius = 10;
console.log(circle.diameter); // Çıktı: 20

Kendin dene

import { Rectangle } from './rectangle.js';

// Test kodu - değiştirmeyin
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // "Area: 50" çıktısını vermeli
console.log(`Perimeter: ${rect.perimeter}`); // "Perimeter: 30" çıktısını vermeli