Falsy, Mantıksal OR, AND , Nullish Birleşme Operatörü, Optional Chaining

Boolean() fonksiyonu, içine verilen değeri boolean türüne dönüştürür. Ancak JavaScript’te bazı değerler “falsy” olarak kabul edilir ve 0 da bu değerlerden biridir. Falsy değerler şunlardır:

false
0
“”(boş string), ”
null
undefined
NaN (Not a Number)

Falsy değerler, mantıksal ifadelerde false olarak değerlendirilir. Örneğin:

if (0) {
  // Bu kod çalışmaz.
}

if ("") {
  // Bu kod da çalışmaz.
}

if (NaN) {
  // Bu kod da çalışmaz.
}

if (0) {

// Bu kod çalışmaz.

}

if ("") {

// Bu kod da çalışmaz.

}

if (NaN) {

// Bu kod da çalışmaz.

}

const num = 0;

if (num) {
  // Bu kod çalışmaz.
} else {
  // Bu kod çalışır.
}

const num = 0;

if (num) {

// Bu kod çalışmaz.

} else {

// Bu kod çalışır.

}

Bu örnekte, num değişkeninin değeri 0’dır. 0, falsy bir değerdir. Bu nedenle, if bloğu çalışmaz ve else bloğu çalışır.

Bu değerlerden herhangi biri Boolean() fonksiyonu içine verildiğinde false dönecektir. Dolayısıyla, Boolean(0) ifadesi 0 değeri falsy olduğu için false dönecektir.

Örnek:

console.log(Boolean(0));  // false
console.log(Boolean('')); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

console.log(Boolean(0)); // false

console.log(Boolean('')); // false

console.log(Boolean(null)); // false

console.log(Boolean(undefined)); // false

console.log(Boolean(NaN)); // false

Bu durum, bir if koşulunda veya bir değerin truthy veya falsy olup olmadığını kontrol etmek amacıyla sıklıkla kullanılır.

NaN JavaScript’te “Not a Number”ın kısaltmasıdır. Bu değer, matematiksel bir işlem sonucunda sayı olmayan bir değeri temsil eder. NaN, sayısal bir operasyonun başarısız olduğu veya tanımsız bir sonuç ürettiği durumlar için kullanılır.

Örneğin, 0 / 0 veya ‘abc’ * 2 gibi işlemler sonucunda NaN elde edilir. NaN ‘ın ilginç bir özelliği, kendisiyle yapılan her türlü aritmetik işlemin de NaN üreteceğidir.

console.log(0 / 0);   // NaN
console.log('abc' * 2);  // NaN
console.log(Math.sqrt(-1));  // NaN

console.log(0 / 0); // NaN

console.log('abc' * 2); // NaN

console.log(Math.sqrt(-1)); // NaN

Bu tür durumlarda, JavaScript NaN‘yi sayısal bir değer olmayan bir durumu temsil etmek için kullanır. Ancak, NaN her zaman falsy olarak değerlendirilir. Bu nedenle, Boolean(NaN) ifadesi false döner, çünkü NaN falsy bir değerdir.

== Operatörü:
- Tip dönüşümü yaparak karşılaştırma yapar. İki operandın tipi farklıysa, JavaScript bir tür dönüşümü gerçekleştirerek karşılaştırma yapmaya çalışır.
- Örneğin, 1 == '1' ifadesi true döner, çünkü JavaScript otomatik olarak string’i sayıya çevirir ve eşit olduklarını kabul eder.
=== Operatörü:
- Tip dönüşümü yapmadan sadece değer ve tip kontrolü yapar. Eğer iki operandın tipi farklıysa, === operatörü false döner.
- Örneğin, 1 === '1' ifadesi false döner, çünkü değerler eşit olsa da tipler farklıdır.

console.log(1 == '1');   // true, tip dönüşümü yapar
console.log(1 === '1');  // false, tipler de farklı
console.log(true == 1);  // true, tip dönüşümü yapar
console.log(true === 1); // false, tipler de farklı

console.log(1 == '1'); // true, tip dönüşümü yapar

console.log(1 === '1'); // false, tipler de farklı

console.log(true == 1); // true, tip dönüşümü yapar

console.log(true === 1); // false, tipler de farklı

Genel olarak, === operatörü kullanımı, beklenmedik tip dönüşümlerini önlemek ve daha güvenli karşılaştırmalar yapmak için önerilir.

/ MAntıksal || operatörü
// || İlk true değeri gelene kadar devam, bulursa onu döndürür. Tüm operandlar falsy ise son operand işleme alınır.

console.log(3 || 'A'); //3

console.log('b' || 3 || 'A'); //b

console.log('' || null || 0); //0

// İlk operand truthy
console.log(true || false); // true

// İkinci operand truthy
console.log(false || 10); // 10

// Her iki operand da falsy ise son operand döner
console.log(0 || ''); // ''

// Farklı veri tipleri
console.log('a' || 0 || true); // 'a'

// Varsayılan değer atamak
const age = 18 || 21; // age değişkeni 18'e eşitlenir, 18 falsy olmadığı için 21 değerine bakılmaz.

// MAntıksal &&

// Eğer her iki operand da truthy ise: Operatör truthy bir değer döndürür. Bu durumda, genellikle ikinci operandın değeri döndürülür.
// Eğer herhangi bir operand falsy ise: Operatör falsy bir değer döndürür. Bu durumda, genellikle ilk falsy operandın değeri döndürülür.

console.log('*********** && ***************');

// Her iki operand da truthy. İkinci operand
console.log(true && 5); // 5

console.log('a' && true && 5); // 5

// İlk operand falsy. ilk fasly değer
console.log(false && 10); // false

// İkinci operand falsy ilk falsy değer
console.log(10 && ''); // ''

// İkinci operand falsy ilk falsy değer
console.log(10 && '' && null); // ''

// Her iki operand da falsy ilk falsy değer
console.log(0 && undefined); // 0

console.log(NaN && null && 0); // NaN

// Farklı veri tipleri
const num1 = 5;
const str1 = 'Hello';
const bool1 = true;

// Son truly değer
const result1 = num1 && str1 && bool1;
console.log(result1); //true

// Kısa devre değerlendirmesi
const num2 = 0;
const str2 = '';
const bool2 = true;
// ilk falsy değer
const result2 = num2 && str2 && bool2;

console.log(result2); // 0

const isAdult = age >= 18;
const hasDrivingLicense = true;
const canRentCar = isAdult && hasDrivingLicense;

console.log(canRentCar); // true

// Farklı veri tipleri
const num3 = 3;
const str3 = 'World';
const bool3 = false;
const nullValue = null;

const result3 = num3 && str3 && bool3 && nullValue;

console.log(result3); // null

const num4 = 0;
const str4 = '';
const bool4 = false;

console.log(num4 && str4 && bool4); // 0

const num5 = 5;
const str5 = null;
const bool5 = undefined;

console.log(num5 && str5 && bool5); // null

const num6 = 10;
const str6 = 'World';
const bool6 = 0;

console.log(num6 && str6 && bool6); // 0

const num7 = NaN;
const str7 = 'JavaScript';
const bool7 = true;

console.log(num7 && str7 && bool7); // NaN

const num8 = '';
const str8 = 0;
const bool8 = [];

console.log(num8 && str8 && bool8); // ''

100

101

102

103

104

105

106

107

108

109

110

111

112

113

/ MAntıksal || operatörü

// || İlk true değeri gelene kadar devam, bulursa onu döndürür. Tüm operandlar falsy ise son operand işleme alınır.

console.log(3 || 'A'); //3

console.log('b' || 3 || 'A'); //b

console.log('' || null || 0); //0

// İlk operand truthy

console.log(true || false); // true

// İkinci operand truthy

console.log(false || 10); // 10

// Her iki operand da falsy ise son operand döner

console.log(0 || ''); // ''

// Farklı veri tipleri

console.log('a' || 0 || true); // 'a'

// Varsayılan değer atamak

const age = 18 || 21; // age değişkeni 18'e eşitlenir, 18 falsy olmadığı için 21 değerine bakılmaz.

// MAntıksal &&

// Eğer her iki operand da truthy ise: Operatör truthy bir değer döndürür. Bu durumda, genellikle ikinci operandın değeri döndürülür.

// Eğer herhangi bir operand falsy ise: Operatör falsy bir değer döndürür. Bu durumda, genellikle ilk falsy operandın değeri döndürülür.

console.log('*********** && ***************');

// Her iki operand da truthy. İkinci operand

console.log(true && 5); // 5

console.log('a' && true && 5); // 5

// İlk operand falsy. ilk fasly değer

console.log(false && 10); // false

// İkinci operand falsy ilk falsy değer

console.log(10 && ''); // ''

// İkinci operand falsy ilk falsy değer

console.log(10 && '' && null); // ''

// Her iki operand da falsy ilk falsy değer

console.log(0 && undefined); // 0

console.log(NaN && null && 0); // NaN

// Farklı veri tipleri

const num1 = 5;

const str1 = 'Hello';

const bool1 = true;

// Son truly değer

const result1 = num1 && str1 && bool1;

console.log(result1); //true

// Kısa devre değerlendirmesi

const num2 = 0;

const str2 = '';

const bool2 = true;

// ilk falsy değer

const result2 = num2 && str2 && bool2;

console.log(result2); // 0

const isAdult = age >= 18;

const hasDrivingLicense = true;

const canRentCar = isAdult && hasDrivingLicense;

console.log(canRentCar); // true

// Farklı veri tipleri

const num3 = 3;

const str3 = 'World';

const bool3 = false;

const nullValue = null;

const result3 = num3 && str3 && bool3 && nullValue;

console.log(result3); // null

const num4 = 0;

const str4 = '';

const bool4 = false;

console.log(num4 && str4 && bool4); // 0

const num5 = 5;

const str5 = null;

const bool5 = undefined;

console.log(num5 && str5 && bool5); // null

const num6 = 10;

const str6 = 'World';

const bool6 = 0;

console.log(num6 && str6 && bool6); // 0

const num7 = NaN;

const str7 = 'JavaScript';

const bool7 = true;

console.log(num7 && str7 && bool7); // NaN

const num8 = '';

const str8 = 0;

const bool8 = [];

console.log(num8 && str8 && bool8); // ''

//Nullish birleşme operatörü (??), iki operandı değerlendirir ve ilk operand null veya undefined ise ikinci operandı, değilse ilk operandı döndürür.
// 1. Değişken Tanımlanmamış
const name1 = null;
const defaultName1 = 'John Doe';

const fullName1 = name1 ?? defaultName1;
console.log(fullName1); // John Doe

// 2. Değişken Boş Değer

const name2 = '';
const defaultName2 = 'Jane Doe';

const fullName2 = name2 ?? defaultName2;
console.log(fullName2); // ''

// 3. Değişken Tanımlanmış ve Değerli

const name3 = 'Alice';
const defaultName3 = 'Bob';

const fullName3 = name3 ?? defaultName3;

console.log(fullName3); // 'Alice'

// Real Word Examples
function getUserInfo(user) {
  const name = user?.name ?? 'Bilinmeyen Kullanıcı';
  const email = user?.email ?? 'bilinmeyen@eposta.com';

  return { name, email };
}

const user1 = { name: 'John Doe', email: 'johndoe@example.com' };
const user2 = {};

const userInfo1 = getUserInfo(user1);
const userInfo2 = getUserInfo(user2);

console.log(userInfo1); // { name: 'John Doe', email: 'johndoe@example.com' }
console.log(userInfo2); // { name: 'Bilinmeyen Kullanıcı', email: 'bilinmeyen@eposta.com' }

//Nullish birleşme operatörü (??), iki operandı değerlendirir ve ilk operand null veya undefined ise ikinci operandı, değilse ilk operandı döndürür.

// 1. Değişken Tanımlanmamış

const name1 = null;

const defaultName1 = 'John Doe';

const fullName1 = name1 ?? defaultName1;

console.log(fullName1); // John Doe

// 2. Değişken Boş Değer

const name2 = '';

const defaultName2 = 'Jane Doe';

const fullName2 = name2 ?? defaultName2;

console.log(fullName2); // ''

// 3. Değişken Tanımlanmış ve Değerli

const name3 = 'Alice';

const defaultName3 = 'Bob';

const fullName3 = name3 ?? defaultName3;

console.log(fullName3); // 'Alice'

// Real Word Examples

function getUserInfo(user) {

const name = user?.name ?? 'Bilinmeyen Kullanıcı';

const email = user?.email ?? 'bilinmeyen@eposta.com';

return { name, email };

}

const user1 = { name: 'John Doe', email: 'johndoe@example.com' };

const user2 = {};

const userInfo1 = getUserInfo(user1);

const userInfo2 = getUserInfo(user2);

console.log(userInfo1); // { name: 'John Doe', email: 'johndoe@example.com' }

console.log(userInfo2); // { name: 'Bilinmeyen Kullanıcı', email: 'bilinmeyen@eposta.com' }

const inputElement = document.getElementById('my-input');

const value = inputElement?.value ?? '';

console.log(value); // 'Girilen değer' veya ''

const inputElement = document.getElementById('my-input');

const value = inputElement?.value ?? '';

console.log(value); // 'Girilen değer' veya ''

const user = {
  name: 'Alice',
  age: undefined,
};

const age = user?.age ?? 20;

console.log(age); // 20

const user = {

name: 'Alice',

age: undefined,

};

const age = user?.age ?? 20;

console.log(age); // 20

const user = {
  profile: {
    picture: 'https://example.com/profile.jpg',
  },
};

const profilePictureUrl = user?.profile?.picture ?? 'https://example.com/default.jpg';

console.log(profilePictureUrl); // 'https://example.com/profile.jpg'

const user = {

profile: {

picture: 'https://example.com/profile.jpg',

};

const profilePictureUrl = user?.profile?.picture ?? 'https://example.com/default.jpg';

console.log(profilePictureUrl); // 'https://example.com/profile.jpg'

const product = {
  price: {
    amount: 100,
    currency: 'USD',
  },
};

const price = product?.price?.amount ?? 'Fiyat Bilinmiyor';

console.log(price); // 100

const product = {

price: {

amount: 100,

currency: 'USD',

};

const price = product?.price?.amount ?? 'Fiyat Bilinmiyor';

console.log(price); // 100

const items = ['Elma', 'Armut', 'Muz'];

const firstItem = items?.[0] ?? 'Liste Boş';

console.log(firstItem); // 'Elma'

const items = ['Elma', 'Armut', 'Muz'];

const firstItem = items?.[0] ?? 'Liste Boş';

console.log(firstItem); // 'Elma'

Optional Chaining Nedir?

Optional chaining, JavaScript ve TypeScript gibi dillerde kullanılan yeni bir özelliktir. Bu özellik, isteğe bağlı (optional) değerlere güvenli bir şekilde erişmenizi sağlar. İsteğe bağlı değerler, null veya undefined olabilen değerlerdir.

Optional chaining, bir nokta (.) operatörü ile soru işareti (?) kombinasyonundan oluşur. Bu sembolün kullanımı, bir sonraki operandın yok olma ihtimalinden kaynaklanan olası hataları önler.

Nasıl Çalışır:

Optional chaining, bir zincir halinde birden fazla isteğe bağlı değere erişmek için kullanılabilir. Zincirdeki herhangi bir noktada null veya undefined değeriyle karşılaşıldığında, zincirleme durdurulur ve null veya undefined değeri döndürülür. Bu sayede hata oluşumu önlenir.

const user = {
  name: 'John Doe',
  address: {
    street: 'Main Street',
    number: 123,
  },
};

// Güvensiz erişim: (hata alabilir)
const street = user.address.street; // user.address null ise hata verebilir

// Optional chaining ile güvenli erişim:
const street = user?.address?.street; // user.address null ise, street undefined olacaktır

console.log(street); // Main Street

const user = {

name: 'John Doe',

address: {

street: 'Main Street',

number: 123,

};

// Güvensiz erişim: (hata alabilir)

const street = user.address.street; // user.address null ise hata verebilir

// Optional chaining ile güvenli erişim:

const street = user?.address?.street; // user.address null ise, street undefined olacaktır

console.log(street); // Main Street

&& ve || Operatörü – Örnekli

&& ve || operatörleri, JavaScript’te oldukça yaygın olarak koşullu ifadelerde kullanılır ve gerçek hayatta birçok pratik kullanım alanı vardır. İşte bu operatörlerin gerçek hayatta kullanımına birkaç örnek:

1. Koşullu Görüntüleme (&& ile)

Bir bileşenin yalnızca belirli bir durum sağlandığında görüntülenmesi gerektiğinde && operatörü kullanılır. Örneğin, bir kullanıcı oturum açtığında ona özel bir mesaj göstermek isteyebilirsiniz.

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn && <p>Welcome back, user!</p>}
  </div>
);

const isLoggedIn = true;

return (

<div>

{isLoggedIn && <p>Welcome back, user!</p>}

</div>

);

Bu durumda, isLoggedIn true ise mesaj görüntülenir; false ise <p> öğesi hiç render edilmez.

2. Varsayılan Değer Atama (|| ile)

Kullanıcıdan alınan bir veri eksikse veya undefined ise varsayılan bir değeri kullanmak isteyebilirsiniz. || operatörü burada oldukça yararlıdır.

const userInput = "";
const displayName = userInput || "Anonymous";
console.log(displayName); // "Anonymous"

const userInput = "";

const displayName = userInput || "Anonymous";

console.log(displayName); // "Anonymous"

userInput boş veya undefined olduğu için displayName “Anonymous” olur.

3. Bir İşlemin Durumuna Göre Farklı İşlem Yapmak

Örneğin, bir oyun uygulamasında kazanan bir kullanıcıya tebrik mesajı göstermek isteyebilirsiniz. winner varsa tebrik mesajı, yoksa bir katılım mesajı gösterilebilir.

const winner = "Player 1";
return (
  <div>
    {winner && <p>{winner} won!</p>}
    {!winner && <p>Better luck next time!</p>}
  </div>
);

const winner = "Player 1";

return (

<div>

{winner && <p>{winner} won!</p>}

{!winner && <p>Better luck next time!</p>}

</div>

);

4. Koşullu Fonksiyon Çalıştırma (&& ile)

Bazı durumlarda bir fonksiyonu yalnızca belirli bir durum sağlandığında çalıştırmak isteyebilirsiniz.

const isAdmin = true;
isAdmin && performAdminTask(); // Yalnızca isAdmin true ise çalışır.

1 2	const isAdmin = true; isAdmin && performAdminTask(); // Yalnızca isAdmin true ise çalışır.

5. Farklı Durumlara Göre Farklı Sonuç Döndürme

Kullanıcının rolüne göre bir mesaj göstermek isterseniz, || ve && operatörlerini bir arada kullanabilirsiniz.

const role = "guest";
const message = (role === "admin" && "Admin Panel") || (role === "user" && "User Dashboard") || "Welcome Guest";
console.log(message); // "Welcome Guest"

const role = "guest";

const message = (role === "admin" && "Admin Panel") || (role === "user" && "User Dashboard") || "Welcome Guest";

console.log(message); // "Welcome Guest"

Bu tür koşullu işlemler, kullanıcı arayüzlerini daha dinamik ve kullanıcı dostu hale getirmek için çok kullanışlıdır.

|| operatörünün gerçek hayatta sıkça kullanıldığı başka örnekler de var. İşte bazı yaygın kullanım alanları:

1. Varsayılan Değer Atama

Kullanıcının bir veri girişi yapmadığı durumlarda || operatörü, varsayılan bir değeri atamak için kullanılır. Bu, form girişlerinde veya bir API’den veri çekildiğinde eksik verileri tamamlamak için oldukça faydalıdır.

const userName = userInput || "Anonymous";
console.log(userName); // Eğer `userInput` boşsa, "Anonymous" gösterilir.

1 2	const userName = userInput \|\| "Anonymous"; console.log(userName); // Eğer `userInput` boşsa, "Anonymous" gösterilir.

2. API veya Veri Kaynağından Gelen Eksik Değerleri Düzeltme

API’den dönen veriler eksik veya null olabilir. || operatörü ile eksik verileri varsayılanlarla değiştirebilirsiniz.

const apiData = { title: null, description: "A sample description" };
const title = apiData.title || "Default Title";
console.log(title); // "Default Title", çünkü apiData.title `null`.

const apiData = { title: null, description: "A sample description" };

const title = apiData.title || "Default Title";

console.log(title); // "Default Title", çünkü apiData.title `null`.

3. Alternatif URL veya Kaynak Belirleme

Bir URL veya dosya yolu eksikse veya geçersizse varsayılan bir URL veya dosya yolu göstermek için || kullanılabilir.

const imageUrl = user.profilePicture || "https://example.com/default-avatar.png";
console.log(imageUrl); // Kullanıcının profil resmi yoksa varsayılan resim gösterilir.

1 2	const imageUrl = user.profilePicture \|\| "https://example.com/default-avatar.png"; console.log(imageUrl); // Kullanıcının profil resmi yoksa varsayılan resim gösterilir.

4. Farklı Bağlantı veya Geçiş Durumları

Bir uygulamada bir sayfanın yönlendirilmesi sırasında bazı kullanıcıların oturum açmamış olması durumunda, varsayılan bir giriş sayfasına yönlendirmek için || kullanılabilir.

const redirectPage = isLoggedIn || "/login";
window.location.href = redirectPage; // Eğer `isLoggedIn` değilse `/login` sayfasına yönlendirir.

1 2	const redirectPage = isLoggedIn \|\| "/login"; window.location.href = redirectPage; // Eğer `isLoggedIn` değilse `/login` sayfasına yönlendirir.

5. Birden Fazla Değerin Doğruluğunu Kontrol Etme

Birden çok değerden herhangi biri geçerli olduğunda işlem yapmanız gerektiğinde || ile kısa devre yapabilirsiniz.

const color = userColor || defaultColor || "blue";
console.log(color); // `userColor` ve `defaultColor` boşsa "blue" döner.

1 2	const color = userColor \|\| defaultColor \|\| "blue"; console.log(color); // `userColor` ve `defaultColor` boşsa "blue" döner.

Bu örneklerde || operatörü, bir değer yoksa veya geçersizse hemen diğer değeri döndürerek, kodun daha kısa ve okunabilir olmasını sağlar.

Falsy, Mantıksal OR, AND , Nullish Birleşme Operatörü, Optional Chaining

false

0

“”(boş string), ”

null

undefined

NaN (Not a Number)

Optional Chaining Nedir?

&& ve || Operatörü – Örnekli

Bunu beğen:

İlgili

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et

Falsy, Mantıksal OR, AND , Nullish Birleşme Operatörü, Optional Chaining

false

0

“”(boş string), ”

null

undefined

NaN (Not a Number)

Optional Chaining Nedir?

&& ve || Operatörü – Örnekli

Bunu paylaş:

Bunu beğen:

İlgili

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et