اتصال کوتاه (Short Circuiting) با عملگرهای منطقی AND (&&) و OR (||) در جاوااسکریپت

عملگر Logical AND یا &&

ابتدا با خاصیت این عملگر آشنا بشیم. شاید اون رو بیشتر توی if ها دیدیم:

if (x && y && z) { ...

اما خاصیتی داره که شاید کمتر با اون آشنایی داشته باشیم. عملگر && وقتی بین دو یا چند عبارت قرار بگیره، دنبال اولین عبارت falsy می‌گرده. اگه بتونه یک عبارت falsy رو پیدا کنه، اون رو میده به خروجی و اگه هیچ کدوم از عبارت‌ها falsy نباشن، مقدار آخرین عبارت رو به خروجی میده.

برای مثال کد زیر رو در نظر بگیرید:

12 && &quothello&quot && null && undefined;

الان حاصل این عبارت null در نظر گرفته میشه. چون اولین عبارت falsy برابر با null هست. نکته‌ای که باید در نظر داشته باشیم اینه که وقتی اولین عبارت falsy پیدا شد، بقیه عبارت‌ها محاسبه و پردازش نمیشن. بنابراین توی کد زیر، قسمت alert('Hello') اجرا نمیشه:

const x = 12 && null && alert('Hello');

alert(x); // null

حالا کد زیر رو در نظر بگیرید:

var x = 12 && true && &quothello&quot

الان مقدار متغیر x برابر با hello هست. چون هیچ مقدار falsy توی این عبارت‌ها وجود نداره و بنابراین مقدار آخرین عبارت نسبت داده میشه به x.

شاید توی برنامه چنین کدی داشته باشیم:

if (! isLoggedIn()) {
  redirect('/login');
}

این رو می‌تونیم به این صورت بنویسیم:

!isLoggedIn() && redirect('/login');

مثال های بیشتر برای عملگر منطقی AND یا &&

مثال 1:

console.log('---- AND ----');

console.log(0 && 'Hossein'); // 0
console.log(7 && 'Hossein'); // Hossein

console.log(undefined  && 0 && ' ' && 'Hossein' && 23 && null); // undefined  

مثال 2:

const restaurant = { 
    nameRestaurant: 'Classico Italiano', 

    orderPizza: function (mainIngradient, ...otherIngradients) {
        console.log(mainIngradient);
        console.log(otherIngradients);
    }
};  


if (restaurant.orderPizza) {
    restaurant.orderPizza('Mushrooms', 'spinach');
}

restaurant.orderPizza && restaurant.orderPizza('Mushrooms', 'spinach');

عملگر Logical AND assignment

این عملگر به شکل =&& هست و مثل عملگرهای قبلی برای نسبت دادن مقدار به یک متغیر استفاده میشه. اگه چنین کدی داریم توی برنامه:

let x = &quotTruthy value"

if (x) {
  x = 12;
}

می‌تونیم اون رو به این صورت بنویسیم:

let x = &quotTruthy value"

 x &&= 12;

alert(x); // 12

این کد فقط زمانی مقدار 12 رو به x نسبت میده که x یک مقدار truthy باشه. به طور کلی، عملیات نسبت‌دادنِ مقدار، فقط زمانی صورت می‌گیره که عبارت سمت چپ یک عبارت truthy باشه. این کد رو می‌تونیم به این صورت هم بنویسیم:

let x = &quotTruthy value"

x && (x = 12);

alert(x); // 12

عملگر Logical OR یا ||

این عملگر، اگه بین دو یا چند عبارت قرار بگیره، دنبال اولین عبارتی می‌گرده که truthy هست. برای مثال کد زیر رو در نظر بگیرید:

12 || &quothello&quot || null || undefined;

اولین عبارت truthy توی این کد 12 هست. بنابراین خروجی کل این عبارت برابر با 12 هست.

نکته‌ای که باید در نظر داشته باشیم اینه که با پیدا شدن اولین عبارت truthy، بقیه عبارت‌ها محاسبه و پردازش نمیشن. پس اگه چنین کدی داشته باشیم:

var x = 12 || &quothello&quot || alert() || undefinedFunction();

اولین عبارت 12 هست، پس بقیه عبارت‌ها نادیده گرفته میشن و اجرا نخواهند شد.

از این ویژگی می‌تونیم برای مقدار پیشفرض دادن به متغیرها استفاده کنیم:

const counter = oldCounter() || 0;

function oldCounter() {
  return localStorage.getItem('counter');
}

قبل از معرفی شدن ویژگی پارامترهای پیشفرض توابع، چنین کدی برای مقدار پیشفرض دادن به ورودی‌های توابع رایج بود:

function z(a, b) {
   a = a || 30;
   b = b || 10;

  return a + b;
}

z(5);       // a=5  , b=10
z('', 4)    // a=30 , b=4
z(0, 4)     // a=30 , b=4

توی خط ۲ و ۳ این کد گفتیم که اگه ورودی‌های a و b مقدار falsy داشتن، به اونها مقدار پیشفرض 30 و 10 بده.

مثال های بیشتر برای عملگر منطقی OR یا ||

مثال 1:

console.log('---- OR ----'); 

console.log(3 || 'Hossein'); // 3 
console.log(' ' || 'Hossein'); // Hossein 
console.log(true || 'Hossein'); // true 
console.log(undefined || null); // null

console.log(undefined  || 0 || ' ' || 'Hossein' || 23 || null); // Hossein

مثال 2:

const restaurant = {
nameRestaurant: 'Classico Italiano',
};

restaurant.numGuests = 20;
const gues1 = restaurant.numGuests ? restaurant.numGuests : 10;
console.log(gues1);

const gues2 = restaurant.numGuests || 10;
console.log(gues2);

عملگر Logical OR assignment

این عملگر به صورت =|| هست و برای نسبت دادن یک مقدار به یک متغیر استفاده میشه. اگه چنین کدی داریم توی برنامه:

let x = false;

if (!x) {
  x = 12;
}

می‌تونیم اون رو به این شکل بنویسیم:

let x = false;

x ||= 12;

alert(x); // 12

کد بالا تنها زمانی مقدار 12 رو به x نسبت میده که x یک مقدار falsy باشه. به بیان کلی‌تر، عملیات نسبت دادن به عبارت سمت چپ، فقط زمانی صورت می‌گیره که عبارت سمت چپ یک مقدار falsy باشه.

این یک عملگر جدید توی جاوااسکریپت هست. مشابه این کد برای ورژن‌های قدیمی جاوااسکریپت کد زیر هست:

let x = false;

x || (x = 12);

alert(x);

خب دوستان دیدیم که چه طوری با نوشتن شرط‌های کوتاه می‌تونیم کدهایی خلاصه‌تر و بعضی اوقات خواناتر و تمیزتری داشته باشیم. امیدوارم از این پست استفاده کرده باشید. روزتون خوش ?

Resources:

babeljs.io

developer.mozilla.org

developer.mozilla.org

developer.mozilla.org

developer.mozilla.org