JavaScript map is not a function Hatası Nasıl Çözülür?

JavaScript map is not a function hatası, map() metodunun üzerinde çağrıldığı değerin kodun varsaydığı gibi bir dizi olmadığını veya o değerde kullanılabilir bir map metodu bulunmadığını gösterir. Çözüm için veriyi rastgele bir dönüşümden geçirmek yerine önce map() çağrısının hangi değişken üzerinde yapıldığını, bu değişkenin kaynağını ve gerçek veri yapısını doğrulamak gerekir.

Teşhise şu sırayla başlayabilirsin: map() hangi değişken üzerinde çağrılıyor, bu değer nereden geliyor, gelen yanıtın yapısı nasıl görünüyor ve Array.isArray() bu değer için ne döndürüyor? Bu sorular, hatanın dizi yerine nesne, metin, null veya undefined üzerinde işlem yapılmasından kaynaklanıp kaynaklanmadığını ortaya çıkarır.

JavaScript map is not a function hatası ne anlama gelir?

map(), bir dizinin her elemanı üzerinde işlem yaparak yeni bir dizi oluşturmak için kullanılır. Örneğin ["a", "b"].map(...) geçerli bir kullanımdır. Ancak değişkenin içeriği tek bir nesne, metin, sayı, null veya henüz atanmamış bir değer ise aynı çağrı hata verebilir.

Örneğin aşağıdaki kodda sorun, map() sözdiziminde değil, users değişkeninin gerçek değerindedir:

const users = {
  name: "Ada"
};

const names = users.map(user => user.name);

Burada users bir dizi değil, tek bir nesnedir. Benzer şekilde bir API yanıtı doğrudan dizi yerine { data: [...] } veya { results: [...] } biçiminde geliyorsa, tüm yanıt üzerinde değil, içindeki doğru dizi alanı üzerinde map() çağrılmalıdır. Bu ayrım, yanıtın yapısını görmeden tahmin edilmemelidir.

İlk incelemede şu bilgileri yazdırabilirsin:

• console.log(value) ile gerçek içeriği,
• typeof value ile temel türü,
• Array.isArray(value) ile dizi olup olmadığını,
• API kullanıyorsan yanıtın hangi alanında dizi bulunduğunu.

Bu kontrollerden sonra dizi olmadığı anlaşılıyorsa iki seçenek vardır: Verinin kaynağındaki hatayı düzeltmek veya gerçekten beklenen dizi alanına erişmek. Sadece hatayı susturmak için her değeri Array.from() ile dönüştürmek, yanlış veri şemasını gizleyebilir.

Array.isArray() ile değişkenin gerçekten dizi olduğunu doğrula

typeof operatörü dizi değerleri için "object" döndürür. Bu nedenle yalnızca typeof value === "object" kontrolü, değerin dizi olduğunu kanıtlamaz. Ayrıca null değeri de JavaScript’te typeof sonucunda "object" olarak görünür.

Doğru kontrol için Array.isArray(value) kullanılmalıdır. Aşağıdaki örnekte önce değer inceleniyor, ardından yalnızca gerçekten dizi olduğu doğrulanırsa map() çağrılıyor:

const value = ["JavaScript", "Array"];

// 1. Değeri teşhis et
console.log(typeof value);          // "object"
console.log(value === null);        // false
console.log(Array.isArray(value));  // true

// 2. Doğrulamadan sonra dönüştür
if (value === null) {
  console.log("Değer null.");
} else if (value === undefined) {
  console.log("Değer henüz tanımlanmamış.");
} else if (!Array.isArray(value)) {
  console.log("Değer bir dizi değil.");
} else {
  const result = value.map(item => item.toLowerCase());
  console.log(result);
}

Beklenen çıktı şöyledir:

object
false
true
["javascript", "array"]

null ile undefined aynı değildir: null, bilinçli olarak boş bırakılmış bir değeri; undefined ise çoğunlukla hiç atanmamış veya bulunamayan bir değeri ifade eder. Her ikisinde de map() çağırmadan önce kontrol yapılmalıdır.

İsteğe bağlı zincirleme, örneğin value?.map(...), yalnızca null veya undefined durumlarında çağrıyı atlar; nesne ya da metin gibi dizi olmayan diğer değerleri doğrulamaz. Bu yüzden beklenen veri mutlaka dizi olmalıysa önce Array.isArray() kullanmak daha güvenlidir. JavaScript pratiğini daha sistemli sürdürmek isteyenler, Berk Akademi’nin online yazılım eğitimi yaklaşımını inceleyebilir.

Nesne ve API yanıtında doğru dizi alanına eriş

map() hatasının yaygın nedenlerinden biri, dizinin doğrudan değişkende değil, bir nesnenin içindeki özellikte bulunmasıdır. Örneğin API yanıtı doğrudan [...] şeklindeyse payload.map() kullanılabilir. Ancak yanıt { data: [...] } biçimindeyse doğru erişim payload.data.map() olmalıdır.

response.json() sonrasında elde edilen üst düzey değeri dizi varsaymak yerine önce gerçek yapıyı incele:

const payload = await response.json();

console.log(payload);
console.log({
  payloadIsArray: Array.isArray(payload),
  dataIsArray: Array.isArray(payload?.data),
  itemsIsArray: Array.isArray(payload?.data?.items)
});

Bu kontrol, beklenen özellik yolunu belirlemene yardımcı olur. payload bir dizi değilse doğrudan payload.map() çağırmak hataya yol açar. Dizi payload.data içindeyse bu alanı kullanmalısın. Daha iç içe bir yapı varsa payload.data.items gibi doğru yolu bulman gerekir.

Yanlış özellik adı da aynı sorunu oluşturabilir. Örneğin gerçek alan data iken payload.results.map() yazmak, undefined üzerinde işlem yapmaya çalışır. Bu nedenle JSON yanıt şemasını tahmin etmek yerine console.log() ile gerçek yanıtı incele; ardından payload ve payload.data gibi olası kaynakları ayrı ayrı Array.isArray() ile doğrula.

Hata üreten kodu doğrulamalı çözüme dönüştür

Aşağıdaki örnekte payload bir nesnedir. Dizi ise nesnenin data özelliğinin içindedir. Bu nedenle doğrudan payload.map() çağrısı hata üretir:

const payload = {
  data: [
    { name: "Ayşe" },
    { name: "Mehmet" }
  ]
};

const names = payload.map(item => item.name);

Önce yanıtın kendisinin dizi olup olmadığını, değilse data alanının dizi olup olmadığını kontrol ederek güvenli bir seçim yapabilirsin:

const payload = {
  data: [
    { name: "Ayşe" },
    { name: "Mehmet" }
  ]
};

const items = Array.isArray(payload)
  ? payload
  : Array.isArray(payload?.data)
    ? payload.data
    : [];

const names = items.map(item => item.name);

console.log(names);

Beklenen çıktı ["Ayşe", "Mehmet"] olur. Her iki olası kaynak da dizi değilse items değeri güvenli biçimde boş diziye dönüşür ve map() çağrısı yeni bir tip hatası oluşturmaz. Bu örneği kendi hızında tekrar ederek JavaScript pratiğini artırmak istersen asenkron video eğitimleri içindeki uygulamalı içeriklerden yararlanabilirsin.

Array.from yerine önce kaynağı doğrula: Uygulanabilir teşhis listesi

Array.from(), uygun bir iterable veya dizi benzeri değeri gerçek diziye dönüştürür. Ancak yanlış nesne özelliğine erişme, API yanıt şemasını yanlış anlama ya da beklenmeyen veri gelmesi gibi sorunları kendiliğinden çözmez. Bu nedenle dönüşüm yapmadan önce verinin kaynağını ve yapısını doğrulamak gerekir.

1. Hata anında map() çağrılan değişkeni yazdır. console.log(items) ile değeri incele. Böylece değişkenin dizi yerine nesne, metin, null veya undefined olup olmadığı anlaşılır. Beklenen teşhis, hatanın hangi veri üzerinde oluştuğunu netleştirmektir.
2. Veri kaynağının gerçekten beklenen yanıtı döndürdüğünü incele. API isteği başarısız olmuş, boş yanıt dönmüş veya hata mesajı içeren farklı bir gövde göndermiş olabilir. Bu adım, sorunun map() kullanımından mı yoksa veri kaynağından mı kaynaklandığını eler.
3. Üst düzey yapının dizi mi, nesne mi olduğunu kontrol et. Array.isArray(response) sonucu false ise doğrudan response.map() çağrılmamalıdır. Beklenen sonuç, dizinin yanıtın kendisinde mi yoksa başka bir özellik içinde mi bulunduğunu anlamaktır.
4. Doğru özellik yoluna eriş. Yanıt { data: [...] } biçimindeyse kullanılacak değer response.data olur; response.map() değil. Bu kontrol, yanlış yanıt şeması varsayımını eler.
5. Son değeri Array.isArray() ile doğrula. Özellik yoluna eriştikten sonra da kontrolü tekrarla. Son değer dizi değilse map() çağırmak yerine veri biçimi düzeltilmeli veya hata kontrollü biçimde ele alınmalıdır.
6. Yalnızca iş kuralı izin veriyorsa [] varsayılanını kullan. Örneğin const items = Array.isArray(response?.data) ? response.data : []; yaklaşımı, beklenmeyen veride uygulamanın boş diziyle devam etmesini sağlayabilir. Ancak hatalı API yanıtını sessizce gizleyebileceği için bu varsayılan, her durumda otomatik çözüm olarak kullanılmamalıdır.

Sık Sorulan Sorular

typeof bir değişkenin dizi olduğunu neden kesin olarak göstermez?

JavaScript’te diziler için typeof value sonucu "object" döner. Bu nedenle dizi kontrolünde Array.isArray(value) kullanılmalıdır.

API yanıtı data alanı içindeyse map() nasıl doğru şekilde kullanılır?

Önce response.data değerinin dizi olduğu doğrulanır. Ardından response.data.map(item => ...) kullanılabilir. Yanıt yapısı değişebiliyorsa Array.isArray(response?.data) ile kontrol yapılmalıdır.

null veya undefined değerlerde map is not a function hatası nasıl önlenir?

map() çağırmadan önce değerin dizi olup olmadığı kontrol edilmelidir. İş kuralı uygunsa Array.isArray(value) ? value : [] yaklaşımı kullanılabilir; aksi durumda eksik veri açıkça raporlanmalıdır.

Array.from() ile JavaScript map is not a function hatası her zaman çözülür mü?

Hayır. Array.from() yalnızca uygun iterable veya dizi benzeri değerleri dönüştürür. Yanlış özelliğe erişimi, hatalı API şemasını veya null ve undefined değerleri otomatik olarak düzeltmez.

Bu teşhis sırasını izlediğinde hata mesajına geçici bir yama yapmak yerine, verinin uygulamaya hangi noktada ve hangi biçimde geldiğini güvenilir biçimde bulabilirsin.