Articles
JavaScript'e Giriş
JavaScript'te Koşullu İfadeler için En İyi Uygulamalar

JavaScript'te Koşullu İfadeler için En İyi Uygulamalar

Bu makale, JavaScript'teki koşullu ifadeler için en iyi uygulamaları açıklamaktadır.

YouTube Video

JavaScript'te Koşullu İfadeler için En İyi Uygulamalar

if ifadeleri, JavaScript programlarında temel bir kontrol yapısıdır. Ancak, kod daha karmaşık hale geldikçe, if ifadelerinin sayısı artabilir ve bu da kodu okumayı zorlaştırır. Bu kez, JavaScript'te if ifadelerini doğru bir şekilde tasarlamak için en iyi uygulamalara dalış yapacağız, böylece okunabilirlik ve sürdürülebilirlik artacak.

Kodunuzu bayraklar kullanarak basitleştirin.

Birden fazla kriter içeren koşulları, boolean değerleri kullanarak basitleştirin.

Kaçınılması Gereken Örnekler 

1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3    console.log('Proceed to checkout');
4}

Geliştirilmiş Örnekler

Koşulları netleştirmek için bayrakları kullanın.

1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5    console.log('Proceed to checkout');
6}

Koşullu İfadeleri Basit Tutun

Bir koşullu ifade karmaşık hale geldiğinde, kod okunabilirliği azalır, bu yüzden koşulu basit tutmak gereklidir.

Kaçınılması Gereken Örnekler 

1// Bad example
2if (user && user.isLoggedIn &&
3    user.permissions && user.permissions.includes('admin')) {
4    console.log('Welcome, admin!');
5}

Geliştirilmiş Örnekler

Koşulu, belirli anlamlara sahip değişkenlere bölerek amacını netleştirebilirsiniz.

1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6    console.log('Welcome, admin!');
7}

Mantıksal operatörlerin önceliğini netleştirin

JavaScript if ifadelerinde, mantıksal operatörlerin önceliğini yanlış anlamak beklenmeyen davranışlara yol açabilir.

Kaçınılması Gereken Örnekler 

1// Bad example
2if (isAdmin && isActive || isPremium) {
3    // The precedence of `&&` is higher than `||`,
4    // so this expression is interpreted as
5    // ((isAdmin && isActive) || isPremium)
6    console.log("Access granted");
7} else {
8    console.log("Access denied");
9}

Geliştirilmiş Örnekler

Operatörlerin önceliği belirsiz olduğunda, bunu netleştirmek için uygun parantezler kullanabilirsiniz.

1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3    console.log("Access granted");
4} else {
5    console.log("Access denied");
6}

Kısa devre değerlendirmesinden yararlanma

JavaScript, hem && (VE) hem de || (VEYA) operatörleri için kısa devre değerlendirmesini destekler. Kısa devre değerlendirmesi, bir koşulun sonucu değerlendirme sırasında belirlendiğinde, geri kalan kısmın değerlendirilmemesi anlamına gelir.

  • VE (&&): Sol taraf yanlış olarak değerlendirildiğinde, sağ taraf değerlendirilmez ve değeri döndürülür.
  • VEYA (||): Sol taraf doğru olarak değerlendirildiğinde, sağ taraf değerlendirilmez ve değeri döndürülür.

Kaçınılması Gereken Örnekler 

1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3    // ...
4}

Geliştirilmiş Örnekler

Bu kodda, user?.isLoggedIn false olsa bile user?.someComplexFunction() fonksiyonu çağrılır.

Kısa devre değerlendirmesini anlamak, gereksiz hesaplamalardan kaçınmanıza ve verimli kod yazmanıza yardımcı olabilir.

1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3    // ...
4}

else İfadelerinin Kullanımını Minimize Edin

else ifadeleri, kodu takip ederken zihinsel yükü artırabilir. Bunun yerine, erken dönüşler kullanmayı düşünün.

Kaçınılması Gereken Örnekler 

1// Bad Example
2function getUserRole(user) {
3    if (!user) {
4        return 'Guest';
5    } else {
6        return user.role;
7    }
8}

Geliştirilmiş Örnekler

Erken dönüşlerle koşulları netleştirin.

1// Good Example
2function getUserRole(user) {
3    if (!user) return 'Guest';
4    return user.role;
5}

Üçlü Operatörün Doğru Kullanımı

Basit koşullar için üçlü operatör kullanmak kodunuzu kısaltabilir. Ancak, iç içe yapılandırma veya karmaşık mantıktan kaçının.

Kaçınılması Gereken Örnekler 

1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3                    'Welcome, admin!'
4                    : 'Welcome, user!'
5                    : 'Please log in.';

Geliştirilmiş Örnekler

Koşulları bölerek okunabilirliği önceliklendirin.

1// Good Example
2if (!user.isLoggedIn) {
3    message = 'Please log in.';
4} else if (user.isAdmin) {
5    message = 'Welcome, admin!';
6} else {
7    message = 'Welcome, user!';
8}

Varsayılan değerleri ve kısa devre değerlendirmesini kullanma

Dallanmayı azaltmak ve kodu basitleştirmek için varsayılan değerleri ve kısa devre değerlendirmesini kullanın.

Kaçınılması Gereken Örnekler 

1// Bad Example
2let displayName;
3if (user && user.name) {
4    displayName = user.name;
5} else {
6    displayName = 'Guest';
7}

Geliştirilmiş Örnekler

Bu durumda, mantıksal operatörler kullanmak daha özlü hale getirir.

1// Good Example
2displayName = user?.name || 'Guest';

Switch ifadelerini ne zaman kullanacağınızı düzgün bir şekilde ayırt edin.

Birden fazla koşul gerektiğinde, switch ifadeleri niyetleri daha net hale getirebilir.

Kaçınılması Gereken Örnekler 

 1// Bad Example
 2if (status === 'success') {
 3    console.log('Operation was successful.');
 4} else if (status === 'error') {
 5    console.error('There was an error.');
 6} else if (status === 'pending') {
 7    console.log('Operation is still pending.');
 8} else {
 9    console.log('Unknown status.');
10}

Geliştirilmiş Örnekler

Switch ifadelerini kullanmak kodu düzenlemenize yardımcı olabilir.

 1// Good Example
 2switch (status) {
 3    case 'success':
 4        console.log('Operation was successful.');
 5        break;
 6    case 'error':
 7        console.error('There was an error.');
 8        break;
 9    case 'pending':
10        console.log('Operation is still pending.');
11        break;
12    default:
13        console.log('Unknown status.');
14}

Erken çıkış koşulları ile kontrol maddelerini kullanma

Koruyucu ifade, bir işlevden erken çıkmak için if ifadelerini kullanan bir tekniktir.

Kaçınılması Gereken Örnekler 

1// Bad Example
2function processOrder(order) {
3    if (order && order.isValid) {
4        if (order.items && order.items.length > 0) {
5            // Continue processing
6        }
7    }
8}

Geliştirilmiş Örnekler

İç içe yapıyı azaltmak için koruyucu ifadeleri kullanın.

1// Good Example
2function processOrder(order) {
3    if (!order?.isValid) return;
4    if (!order.items?.length) return;
5
6    // Continue processing
7}

Niyetleri netleştirmek için yorumlar yazın.

Karmaşık koşullar veya kritik dallar için, kodun amacını açıklamak adına öz ve net yorumlar ekleyin.

Kaçınılması Gereken Örnekler 

1// Bad Example
2if (stock > 10 && !isRestricted) {
3    console.log('Available for purchase.');
4}

Geliştirilmiş Örnekler

Niyetleri netleştirmek için yorumlar ekleyin.

1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5    console.log('Available for purchase.');
6}

Sonuç

JavaScript'in if ifadelerini etkili bir şekilde kullanmak, kod okunabilirliğini ve sürdürülebilirliğini büyük ölçüde artırabilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

JavaScript'te Koşullu DallanmaJavaScript'te Tekrar İşleme