مقدمه ای بر عملگرها در جاوا اسکریپت – قسمت اول
در فصل دوم دوره آموزش جاوا اسکریپت برای مبتدی ها، راجع به متغیر (Variable) و ثابت (Constant) صحبت کردم. در جاوا اسکریپت انواع مختلفی از عملگر (Operator)ها وجود دارد که برای انجام عملیات مختلف حسابی و منطقی بر روی متغیرها و ثابت ها یعنی عملوند (Operand)ها استفاده می شوند. به کمک عملگرها می توانیم متغیرها و ثابت ها را با هم ترکیب کرده و Expression ها را ایجاد کنیم. Expression در حقیقت یک عبارت محاسباتی است که مقداری را تولید می کند مثلا x+y یک Expression است. به کمک Expression ها می توانیم اقدام به پیاده سازی منطق و الگوریتم های مختلف در برنامه مان کنیم.
انواع عملگرها در جاوا اسکریپت کدامند؟
عملگرها در جاوا اسکریپت عبارتند از: حسابی، تخصیص یا انتساب، مقایسه ای، منطقی، و بیتی.
عملگرهای حسابی (Arithmetic)
از عملگرهای حسابی همانطور که از نامشان پیداست برای انجام عملیات مختلف ریاضی استفاده می کنیم. گفته شد که عملگرها بر روی متغیرها و ثابت ها عمل می کنند. ابتدا دو متغیر به نام های x و y را به عنوان عملوند تعریف کرده و مقدار دهی اولیه می کنیم:
12let x = 10; let y = 3;
حالا با تمامی عملگرهای ساده حسابی شامل: جمع +، تفریق –، ضرب *، تقسیم /، باقیمانده تقسیم %، و توان ** بر روی عملوندهای x و y عملیات حسابی انجام داده و از نتیجه عملیات لاگ بگیرید و نتیجه را مثل زیر در کنسول مرورگر ببینید:
عملگرهای ساده حسابی که در بالا مشاهده کردید به حداقل دو عملوند نیاز دارند ولی دو تا عملگر حسابی دیگه هم وجود دارن که قدری پیچیده ترن.
عملگر حسابی افزاینده (++) و کاهنده (–)
این عملگرها فقط به یک عملوند احتیاج دارند و بسته به اینکه قبل یا بعد از عملوند خود قرار بگیرند، نتیجه متفاوتی رو تولید خواهند کرد. نحوه کارکرد دو عملگر افزاینده (Increment) و کاهنده (Decrement) مشابه هم است با این تفاوت که عملگر افزاینده مقدار عملوندش را یک واحد افزایش و عملگر کاهنده مقدار عملوندش را یک واحد کاهش می دهد. برای اینکه نحوه کارکرد این دو عملگر را در مثال های زیر بهتر متوجه شوید ابتدا قبل از هر گونه عملیات یک لاگ از متغیر x بگیرید تا مقدارش را ببینید:
1console.log(x);
می بینیم که مقدار متغیر x برابر با همان مقدار اولیه اش یعنی 10 می باشد. حالا عملگر افزاینده را قبل از متغیر x قرار دهید و از آن لاگ بگیرید:
1console.log(++x);
باید عدد 11 را در خروجی ببینید چونکه در این حالت ابتدا مقدار عملوند x یک واحد افزایش پیدا کرده و سپس نتیجه آن در کنسول نمایش داده خواهد شد. حالا خط بالا را به حالت کامنت در آورید و این بار عملگر افزاینده را بعد از عملوند x قرار دهید و دوباره از آن لاگ بگیرید:
1console.log(x++);
باید عدد 10 را در کنسول ببینید. شاید بپرسید پس یک واحد افزایش کجا رفت؟ کافیه یک بار دیگه از متغیر x لاگ بگیرید. خواهید دید که عدد 11 در کنسول نمایش داده خواهد شد. این نشان می دهد که وقتی عملگر فوق بعد از عملوند قرار می گیرد ابتدا مقدارش در خروجی نمایش داده می شود و بعد از آن مقدارش یک واحد افزایش پیدا می کند به همین خاطر است که در اولین لاگ عدد 10 را در خروجی دیدیم نه مقدار افزایش یافته آن را.
پیشنهاد می کنم برای عملگر کاهنده خودتان کدهای بالا را به جای ++ با — تکرار کنید و نتیجه را مشاهده کنید.
نکته: عملگر افزاینده/کاهنده اگر قبل از عملوندی قرار بگیرند ابتدا مقدار آن را یک واحد افزایش/کاهش داده و سپس حاصل آن Expression مورد استفاده قرار می گیرد. اما اگر بعد از عملوندی قرار بگیرند ابتدا مقدار آن Expression مورد استفاده قرار می گیرد و سپس مقدارش یک واحد افزایش/کاهش می یابد.
عملگرهای تخصیص یا انتساب (Assignment)
ازین عملگرها برای مقدار دهی استفاده می شود:
1let x = 10;
در مثال بالا عملگر = مقدار 10 را به متغیر x اختصاص می دهد یا به عبارتی آن را با عدد 10 مقدار دهی می کند. عملگرهای افزاینده ++ و کاهنده — نیز به نوعی عملگر = را در دل خود دارند. به عنوان مثال به جای ++x می توانین بنویسیم 1 + x = x
اما اگر بخواهیم به جای یک واحد افزایش، مثلا 5 واحد را به متغیری بیافزاییم آنگاه چه باید بکنیم؟! ابتدایی ترین راه حلی که به ذهن می رسد عبارتست از: 5 + x = x اما راه حل ساده و خلاصه دیگه استفاده از عملگر تخصیص =+ هستش. مثل زیر:
12x += 5; console.log(x); //15
حالا اگه بخواهیم مقدار متغیر x را در 3 ضرب کنیم چه؟! می توانیم بنویسیم 3 * x = x ولی باز هم راه حل ساده و خلاصه تری هست مثل زیر:
12x *= 3; console.log(x); //30
این موضوع راجع به تمام عملگرهای ساده حسابی صادق هستش:
نکته: تمام عملگرهای ساده حسابی را می توانیم در ترکیب با عملگر تخصیص = به کار ببریم. در این صورت عملگرهای تخصیص جدید عبارت خواهند بود از: =+ ، =- ، =* ، =/ ، =% و =**
عملگرهای مقایسه ای (Comparison)
از عملگرهای مقایسه ای برای مقایسه دو Expression مختلف با یکدیگر استفاده می شود. مقدار حاصل از ارزیابی Expression-ایکه در آن عملگر مقایسه ای به کار رفته باشد یک مقدار Boolean یعنی true یا false خواهد بود. عملگرهای مقایسه ای به سه نوع Relational (رابطه ای)، Equality (برابری)، و Ternary (سه بخشی) تقسیم می شوند.
مثال:
12let x = 1; console.log(x > 0);
با اجرای کد مثال بالا مقدار true در خروجی کنسول ثبت خواهد شد. چونکه مقدار ذخیره شده در متغیر x از عدد صفر بزرگتر است. مابقی عملگرهای مقایسه ای رابطه ای را در مثال زیر مشاهده می کنید:
123console.log(x >= 1); //true console.log(x < 1); //false console.log(x <= 0); //false
بنابراین:
نکته: عملگرهای مقایسه ای نوع Relational عبارتند از: کوچک تر > ، بزرگتر < ، کوچک تر مساوی => و بزرگتر مساوی =<
از عملگرهای مقایسه ای نوع Equality نیز برای بررسی برابر بودن یا نبودن مقدار دو Expression مختلف با یکدیگر استفاده می شود. مثال:
12console.log(x === 1); // true console.log(x !== 1); // false
اما علاوه بر دو عملگر Equality بالا دو نوع عملگر Equality دیگر هم هست که عبارتند از == و =! .
تفاوت عملگرهای === و ==! با عملگرهای == و =! چیست؟
اولا خوبه بدونیم که به عملگرهای === و ==! اصطلاحا عملگرهای Strict Equality و به عملگرهای == و =! اصطلاحا عملگرهای Lose Equality گفته می شود. تفاوت این دو نوع عملگر با هم آنست که در عملگرهای نوع Strict Equality هم برابری مقدار طرفین رابطه با هم مقایسه می شود و هم یکی بودن نوع داده ای آن ها. یعنی اینکه در عملگر === نتیجه مقایسه وقتی true خواهد بود که هم مقدار طرفین رابطه با هم برابر باشد و هم نوع داده ای آن ها مثل هم باشد یعنی مثلا نوع داده ای هر دو طرف عدد باشد یا هر دو طرف رشته باشد. به عنوان مثال نتیجه مقایسه توسط هر دو نوع عملگرها در مثال زیر برابر با true خواهد بود:
12345//Strict Equality console.log(1 === 1); //true //Lose Equality console.log(1 == 1); //true
اما نتیجه مقایسه های زیر توسط دو نوع مختلف عملگرها متفاوت خواهد بود:
12345//Strict Equality console.log('1' === 1); //false //Lose Equality console.log('1' == 1); //true
در مثال 1 === ‘1’ چونکه نوع داده ای طرفین رابطه یکی نیست و سمت چپ رابطه از نوع رشته و سمت راست رابطه از نوع عدد است بنابراین نتیجه مقایسه هم false خواهد بود. اما در مثال 1 == ‘1’ چرا نتیجه مقایسه true می شود؟ علت این سوال به نحوه عملکرد عملگرهای مقایسه ای نوع Lose Equality بر می گردد.
نکته: وقتی برای مقایسه مقدار دو Expression از عملگرهای مقایسه ای نوع Lose Equality استفاده کنیم ابتدا نوع داده ای طرفین رابطه با هم مقایسه می شود اگر نوع داده ای آن ها با هم متفاوت بود ابتدا مقدار سمت راست رابطه به مقداری با نوع داده ای سمت چپ رابطه تبدیل می شود و سپس مقدار طرفین با هم مقایسه می شود.
مثال زیر را در نظر بگیرید:
1console.log('1' == 1);
در مثال بالا چون نوع داده ای طرفین رابطه با هم یکی نیست، ابتدا مقدار سمت راست رابطه به مقداری از نوع رشته تبدیل می شود سپس مقدارشان با هم مقایسه می شود و چون بعد از تبدیل، مقدار هر دو طرف رابطه عبارتست از ‘1’ بنابراین نتیجه مقایسه true می شود. یک مثال دیگر را هم در نظر بگیرید:
1console.log(true == 1);
نتیجه مقایسه بالا هم true خواهد بود. چون نوع داده ای طرفین رابطه یکی نیست بنابراین ابتدا مقدار سمت راست رابطه به مقداری با نوع داده ای Boolean تبدیل می شود سپس مقایسه انجام می شود و چون مقدار هر دو طرف عبارتست از true بنابراین نتیجه مقایسه هم true می شود.
عملگر Ternary
عملگر Ternary یکی از محبوب ترین عملگرها در زبان جاوا اسکریپت است.
نکته: به عملگر Ternary یا سه بخشی اصطلاحا عملگر Conditional یا شرطی هم می گویند.
فرض کنید که می خواهیم قاعده زیر را در یک برنامه پیاده سازی کنیم:
مثال: اگر امتیاز یک مشتری بیش از 100 باشد آن را جزو مشتریان طلایی (Gold) و در غیر اینصورت وی را جزو مشتریان نقره ای (Silver) طبقه بندی می کنیم.
ابتدا یک متغیر به نام مثلا points تعریف می کنیم تا بتوانیم مقدار امتیازاتی که یک مشتری دارد را نگهداری کنیم سپس آن را با یک مقدار پیش فرض اولیه مقدار دهی می کنیم:
1let points = 110;
همچنین به یک متغیر دیگر هم احتیاج داریم تا بتوانیم بعد از تعیین نوع مشتری آن را ذخیره کنیم در این مثال آن را type نامگذاری می کنیم. برای پیاده سازی قاعده دسته بندی مشتری نیز می توانیم خیلی ساده از عملگر Ternary به صورت زیر استفاده کنیم:
1let type = points > 100 ? 'Gold' : 'Silver';
ابتدا عبارت 100 < points ارزیابی می شود، نتیجه ارزیابی یک مقدار Boolean خواهد بود، سپس بر اساس آن تعیین می شود که مقدار Gold یا مقدار Silver به عنوان نوع مشتری در متغیر type ذخیره شود. اگر مقدار آن عبارت true بود، رشته Gold در متغیر type قرار داده می شود و اگر مقدارش false بود، رشته Silver در متغیر type ذخیره می گردد.
حالا از متغیر type یک لاگ بگیرید:
1console.log(type);
خواهید دید که رشته Gold در خروجی کنسول ثبت خواهد شد. حالا کافیست مقدار متغیر points را به عدد 90 تغییر دهید و یکبار دیگر از متغیر type لاگ بگیرید خواهید دید که این بار رشته Silver به خروجی خواهد رفت. بنابراین نگارش دستور (Syntax) عملگر سه بخشی یا Ternary به صورت زیر است:
;عبارت محاسباتی 2 : عبارت محاسباتی 1 ? (عبارت شرطی) = متغیر
نحوه عملکرد عملگر شرطی سه بخشی به این صورت است که اگر عبارت شرطی دارای ارزش true باشد، آنگاه مقدار حاص از عبارت محاسباتی 1 ارزیابی شده و در متغیر سمت چپ دستور تخصیص قرار داده می شود، و اگر عبارت شرطی دارای ارزش false باشد مقدار عبارت محاسباتی 2 ارزیابی شده و در متغیر سمت چپ دستور تخصیص قرار می گیرد.
در مقاله بعدی فصل سوم دوره آموزش جاوا اسکریپت برای مبتدی ها، به ادامه مبحث عملگرها خواهم پرداخت: