JavaScript void operatörü kendisine verilen ifadeyi çalıştırır ve ifadenin sonucu ne olursa olsun undefined değerini geri dönderir.
Mesela
console.log(void(5*5));
// Konsolo
// undefined
// yazdırır
Örnekte gördüğünüz gibi önce 5*5 çalıştırıldı ve sonrasında void operatörü geriye undefined değerini döndü.
Sözdizimi
void operatöri iki şekilde kullanılır.
void ifade
void(ifade)
Her iki kullanım da aynı anlama gelir. Fakat bazı durumlarda parantezin önceliği sonucu değiştirebilir.
void 2 === "2"; // (void 2) === '2', false dönderir
void (2 === "2"); // void (2 === '2'), undefined dönderir
JavaScript void Nedir?
void operatörü kendisine verilen ifade / fonksiyon çalıştıktan sonra geriye undefined değerini döndermek için kullanılır. Yani bu operatör çalıştırıldığında geriye dönecek değer undefineddir.
Örnek Kullanımlar
const output = void 1;
console.log(output);
// Konsola
// undefined
// yazdırır
void console.log('ifade çalıştırıldı');
// Konsola
// ifade çalıştırıldı
// Yazdırır
void function iife() {
console.log('iife çalıştırıldı');
}();
// Konsola
// iife çalıştırıldı
// yazdırır
void function test() {
console.log('test fonksiyonu çalıştırıldı');
};
try {
test();
} catch (e) {
console.log('test fonksiyonu tanımlı değil');
// Konsolo
// test fonksiyonu tanımlı değil
// yazdırır
}
İlk örnekte void 1 ifadesinin sonucu output değişkenine atandı ve konsola yazdırıldı. Bu sonuç undefined dir.
İkinci ve üçüncü örnekte fonksiyonlar void olarak tanımlandılar, fakat dönüş değerleri kullanılmadığı için sadece fonksiyon içerikleri konsola yazdırıldı ama dönüş değerleri ki bu undefined şeklindedir hiç kullanılmadı.
Son örnekte ise tyr-catch bloğu içerisinde void ile tanımlanmış bir fonksiyon çalıştırıldı. void ile çalışan bir fonksiyon ne yaparsa yapsın sonuçta geriye undefined dönderdiği için bir hata oluştuğu varsayılır ve catch bloğu çalışacaktır.
Url Tanımlarken void(0) Kullanmak
void(0) geriye undefined değeri dönderir. Bu değeri bir url içerisinde kullandığımızda, artık o a etiketine tıklandığında herhangi bir yere yönlendirme yapılmaz.
<a href="javascript:void(0)">tıkla</>
Bu şekilde tanımlanmış bir link, normal bir link gibi çalışır, ekranda görüntüsü de normal bir link gibidir. Tek farklı, linke tıklandığında herhangi bir işlem yapılmaz. Çünkü void(0) ifadesi geriye undefined değeri dönderir. Buda işlem yapılmasını engeller.
Fakat istenirse, linke tıklandığında bir javascript ifadesi veya fonksiyonu çalıştırılabilir. Bu durumda eğer void ile tanımlanırsa, yine link sadece javascript kodunu çalıştırır ve bir yönlendirme yapmaz.
<a href="javascript:void(document.body.style.backgroundColor='green');">
Zemini yeşil yapmak için tıklayın.
</a>
Yukarıdaki kodu çalıştırdığınızda body etiketinin zemin rengi yeşile dönüştürülür. Sonrasında bu işlem void içerisinde yapıldığı için, link çalışmayacaktır.
Arrow Fonksiyonlar İle Kullanımı
Arrow ( ok ) fonksiyonlar tek satır çalıştırıldığında return çalıştırılmış gibi davranır.
const test = () => birSeylerYap();
Şeklindeki bir tanımlama aslında şu şekilde çalışır.
const test = () => return birSeylerYap();
Buradaki return ifadesi gizlidir ve eğer bu şekilde biz return eklersek hata alırız. Burada söylemek istediğimiz, arrow fonksiyonlar ile tek satırlık bir işlem yapıldığında return kullanılmış gibi geriye bir değer döner.
Eğer biz bu tip bir kullanımda geriye değer döndermek istemiyorsak, bir beklenmeyen yan etki (side effect) oluşmaması için void operatörünü kullanabiliriz.
const test = () => void birSeylerYap();
Böylece işlem sonucunda geriye undefined değeri dönecektir.
Sonuç
Farklı durumlar için farklı ihtiyaçlar ve farklı çözümler bulunmakta. Bunlardan bir tanesi de çıktı olarak bir değerin olmasının istenmediği durumlarda void operatrünün kullanmasıdır. void geriye undefined değeri dönderir.
Eklemek istedikleriniz mi var? Yorumlarda bizimle paylaşabilirsiniz.