عملگرها در جاوااسکریپت

در مقاله قبلی با متغیرها و انواع داده در جاوااسکریپت آشنا شدیم و یاد گرفتیم چگونه اطلاعات مختلف مانند متن، عدد و وضعیت‌های true و false را در متغیرها ذخیره کنیم.

اما ذخیره کردن اطلاعات به‌تنهایی کافی نیست. در یک برنامه واقعی باید بتوانیم روی این اطلاعات محاسبه انجام دهیم، مقادیر را با یکدیگر مقایسه کنیم، شرایط مختلف را بررسی کنیم و چند عبارت منطقی را به هم متصل کنیم.

برای انجام این کار در جاوااسکریپت از Operator یا عملگر استفاده می‌کنیم.

برای مثال:

let price = 100;
let quantity = 3;

let total = price * quantity;

console.log(total);

در این مثال * یک عملگر ضرب است.

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

عملگر چیست؟

Operator یا عملگر یک علامت یا کلمه است که برای انجام یک عملیات روی یک یا چند مقدار استفاده می‌شود.

مثلاً:

10 + 5

در این عبارت:

10 → مقدار
+  → Operator
5  → مقدار

نتیجه:

15

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

انواع عملگرها در جاوااسکریپت

در جاوااسکریپت با گروه‌های مختلفی از عملگرها مواجه خواهیم شد:

• عملگرهای حسابی

• عملگرهای انتساب

• عملگرهای مقایسه‌ای

• عملگرهای منطقی

• عملگرهای افزایش و کاهش

• عملگرهای رشته‌ای

• عملگر شرطی

• عملگرهای مربوط به نوع داده

در این مقاله مهم‌ترین آن‌ها را از ساده‌ترین حالت شروع می‌کنیم.

عملگرهای حسابی در جاوااسکریپت

Arithmetic Operators برای انجام عملیات ریاضی استفاده می‌شوند.

مهم‌ترین عملگرهای حسابی عبارت‌اند از:

+   جمع
-   تفریق
*   ضرب
/   تقسیم
%   باقیمانده
**  توان

عملگر جمع (+)

برای جمع دو عدد از + استفاده می‌کنیم.

let number1 = 10;
let number2 = 5;

let result = number1 + number2;

console.log(result);

خروجی:

15

مثال عملی

فرض کنید قیمت دو محصول را داریم:

let product1 = 200;
let product2 = 300;

let total = product1 + product2;

console.log(total);

خروجی:

500

عملگر تفریق (-)

برای کم کردن یک مقدار از مقدار دیگر از - استفاده می‌کنیم.

let number1 = 10;
let number2 = 5;

let result = number1 - number2;

console.log(result);

خروجی:

5

مثال عملی

let balance = 1000000;
let payment = 250000;

let remaining = balance - payment;

console.log(remaining);

خروجی:

750000

عملگر ضرب (*)

برای ضرب دو مقدار از * استفاده می‌کنیم.

let price = 500;
let quantity = 3;

let total = price * quantity;

console.log(total);

خروجی:

1500

این عملگر در پروژه‌های واقعی کاربرد زیادی دارد.

برای مثال در یک فروشگاه آنلاین می‌توانیم قیمت کل یک محصول را محاسبه کنیم.

عملگر تقسیم (/)

برای تقسیم از / استفاده می‌کنیم.

let total = 100;
let people = 4;

let result = total / people;

console.log(result);

خروجی:

25

عملگر باقیمانده (%)

عملگر % مقدار باقیمانده تقسیم را برمی‌گرداند.

مثلاً:

console.log(10 % 3);

خروجی:

1

چون:

10 ÷ 3 = 3
باقیمانده = 1

مثال دیگر:

console.log(20 % 5);

خروجی:

0

چون 20 به‌صورت کامل بر 5 تقسیم می‌شود.

کاربرد مهم %

یکی از کاربردهای رایج % بررسی زوج یا فرد بودن عدد است.

مثلاً:

let number = 10;

console.log(number % 2);

نتیجه:

0

اگر نتیجه 0 باشد، عدد زوج است.

برای مثال:

let number = 7;

console.log(number % 2);

نتیجه:

1

پس عدد 7 فرد است.

در مقاله مربوط به شرط‌ها از همین مفهوم برای ساخت مثال‌های واقعی استفاده خواهیم کرد.

عملگر توان (**)

برای محاسبه توان می‌توانیم از ** استفاده کنیم.

let result = 2 ** 3;

console.log(result);

خروجی:

8

زیرا:

2 × 2 × 2 = 8

مثال دیگر:

console.log(5 ** 2);

خروجی:

25

ترتیب انجام عملیات

جاوااسکریپت نیز مانند ریاضیات، عملیات را بر اساس ترتیب مشخصی انجام می‌دهد.

مثلاً:

let result = 10 + 5 * 2;

console.log(result);

نتیجه:

20

ابتدا ضرب انجام می‌شود:

5 × 2 = 10

سپس:

10 + 10 = 20

اگر بخواهیم ترتیب را مشخص کنیم، می‌توانیم از پرانتز استفاده کنیم:

let result = (10 + 5) * 2;

console.log(result);

نتیجه:

30

بنابراین پرانتزها می‌توانند ترتیب انجام عملیات را تغییر دهند.

عملگرهای انتساب

عملگرهای انتساب یا Assignment Operators برای قرار دادن مقدار در متغیر استفاده می‌شوند.

ساده‌ترین عملگر انتساب:

=

مثلاً:

let age = 25;

در اینجا مقدار 25 در متغیر age قرار گرفته است.

نکته مهم این است که = به معنی «برابر بودن» در مفهوم ریاضی نیست؛ در اینجا برای انتساب مقدار استفاده می‌شود.

انتساب مجدد

با استفاده از = می‌توانیم مقدار یک متغیر let را تغییر دهیم.

let score = 10;

score = 20;

console.log(score);

خروجی:

20

عملگر +=

فرض کنید داریم:

let score = 10;

score = score + 5;

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

let score = 10;

score += 5;

console.log(score);

خروجی:

15

یعنی:

score += 5;

تقریباً معادل:

score = score + 5;

است.

عملگر -=

برای کم کردن مقدار می‌توانیم از -= استفاده کنیم.

let score = 20;

score -= 5;

console.log(score);

خروجی:

15

معادل:

score = score - 5;

است.

عملگر *=

برای ضرب کردن مقدار فعلی یک متغیر می‌توانیم از *= استفاده کنیم.

let price = 100;

price *= 3;

console.log(price);

خروجی:

300

معادل:

price = price * 3;

است.

عملگر /=

برای تقسیم کردن مقدار یک متغیر می‌توانیم از /= استفاده کنیم.

let number = 100;

number /= 4;

console.log(number);

خروجی:

25

معادل:

number = number / 4;

است.

عملگرهای مقایسه‌ای

یکی از مهم‌ترین گروه‌های عملگرها، Comparison Operators یا عملگرهای مقایسه‌ای هستند.

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

true

یا:

false

برمی‌گردانند.

مهم‌ترین آن‌ها:

>    بزرگ‌تر
<    کوچک‌تر
>=   بزرگ‌تر یا مساوی
<=   کوچک‌تر یا مساوی
===  برابر از نظر مقدار و نوع
!==  نابرابر از نظر مقدار یا نوع

عملگر بزرگ‌تر (>)

مثلاً:

console.log(10 > 5);

خروجی:

true

چون 10 از 5 بزرگ‌تر است.

مثال دیگر:

console.log(3 > 8);

خروجی:

false

عملگر کوچک‌تر (<)

console.log(3 < 8);

خروجی:

true

زیرا 3 از 8 کوچک‌تر است.

بزرگ‌تر یا مساوی (>=)

console.log(10 >= 10);

خروجی:

true

زیرا 10 با 10 برابر است.

همچنین:

console.log(15 >= 10);

نتیجه:

true

کوچک‌تر یا مساوی (<=)

console.log(10 <= 10);

خروجی:

true

همچنین:

console.log(5 <= 10);

نتیجه:

true

عملگر ===

عملگر === برای مقایسه مقدار و نوع داده استفاده می‌شود.

مثلاً:

console.log(10 === 10);

نتیجه:

true

اما:

console.log(10 === "10");

نتیجه:

false

چرا؟

زیرا:

10   → Number
"10" → String

پس نوع داده آن‌ها یکسان نیست.

برای شروع جاوااسکریپت بهتر است هنگام مقایسه دقیق، استفاده از === را یاد بگیرید.

عملگر ==!

عملگر ==! بررسی می‌کند که دو مقدار از نظر مقدار یا نوع داده برابر نباشند.

مثلاً:

console.log(10 !== 5);

خروجی:

true

اما:

console.log(10 !== 10);

خروجی:

false

همچنین:

console.log(10 !== "10");

نتیجه:

true

زیرا نوع داده متفاوت است.

تفاوت == و ===

در جاوااسکریپت دو عملگر == و === وجود دارند.

مثلاً:

console.log(10 == "10");

در بسیاری از موارد نتیجه:

true

خواهد بود.

زیرا == می‌تواند قبل از مقایسه، تبدیل نوع انجام دهد.

اما:

console.log(10 === "10");

نتیجه:

false

است.

برای کدنویسی جاوااسکریپت مدرن، معمولاً === انتخاب مناسب‌تری برای مقایسه دقیق است.

فعلاً لازم نیست تمام جزئیات تبدیل نوع را بدانید. این موضوع در ادامه دوره بیشتر بررسی خواهد شد.

عملگرهای منطقی

عملگرهای منطقی یا Logical Operators زمانی کاربرد دارند که بخواهیم چند شرط یا عبارت را با یکدیگر ترکیب کنیم.

سه عملگر مهم منطقی عبارت‌اند از:

&&   AND
||   OR
!    NOT

عملگر AND (&&)

&& زمانی نتیجه true می‌دهد که هر دو طرف آن true باشند.

مثال:

console.log(true && true);

نتیجه:

true

اما:

console.log(true && false);

نتیجه:

false

مثال کاربردی:

let age = 25;
let hasTicket = true;

console.log(age >= 18 && hasTicket === true);

نتیجه:

true

در این مثال دو شرط باید درست باشند:

age >= 18
AND
hasTicket === true

عملگر OR (||)

|| زمانی نتیجه true می‌دهد که حداقل یکی از دو عبارت true باشد.

مثال:

console.log(true || false);

نتیجه:

true

مثال دیگر:

console.log(false || false);

نتیجه:

false

مثال کاربردی:

let isAdmin = false;
let isManager = true;

console.log(isAdmin || isManager);

نتیجه:

true

زیرا حداقل یکی از دو مقدار true است.

عملگر NOT (!)

عملگر ! نتیجه یک مقدار Boolean را معکوس می‌کند.

مثلاً:

console.log(!true);

نتیجه:

false

و:

console.log(!false);

نتیجه:

true

مثال:

let isLoggedIn = false;

console.log(!isLoggedIn);

نتیجه:

true

عملگر افزایش ++

برای افزایش یک عدد به اندازه یک واحد می‌توانیم از ++ استفاده کنیم.

مثلاً:

let count = 5;

count++;

console.log(count);

خروجی:

6

این عبارت:

count++;

تقریباً معادل:

count = count + 1;

است.

عملگر کاهش --

برای کاهش یک عدد به اندازه یک واحد از -- استفاده می‌کنیم.

let count = 5;

count--;

console.log(count);

خروجی:

4

معادل:

count = count - 1;

است.

عملگر جمع برای String

عملگر + فقط برای جمع اعداد نیست.

می‌توانیم از آن برای اتصال Stringها نیز استفاده کنیم.

مثلاً:

let firstName = "Ali";
let lastName = "Ahmadi";

let fullName = firstName + " " + lastName;

console.log(fullName);

خروجی:

Ali Ahmadi

در اینجا + دو رشته را به هم متصل کرده است.

ترکیب String و Number

باید هنگام استفاده از + با String و Number دقت کنیم.

مثلاً:

console.log("Age: " + 25);

خروجی:

Age: 25

در اینجا جاوااسکریپت عدد را در کنار String قرار داده است.

مثال:

let name = "Ali";
let age = 25;

console.log("Name: " + name);
console.log("Age: " + age);

خروجی:

Name: Ali
Age: 25

در مقالات آینده روش‌های مدرن‌تر و خواناتری برای ساخت Stringها یاد خواهیم گرفت.

عملگر شرطی یا Ternary Operator

جاوااسکریپت یک عملگر شرطی کوتاه به نام Ternary Operator دارد.

ساختار آن:

condition ? valueIfTrue : valueIfFalse

مثال:

let age = 20;

let result = age >= 18 ? "Adult" : "Not Adult";

console.log(result);

خروجی:

Adult

در این مثال اگر شرط:

age >= 18

درست باشد، مقدار اول انتخاب می‌شود.

اگر شرط اشتباه باشد، مقدار دوم انتخاب می‌شود.

در ابتدای مسیر یادگیری لازم نیست زیاد از Ternary استفاده کنید. بعداً در بخش شرط‌ها کاربرد آن را بیشتر بررسی خواهیم کرد.

مثال عملی: محاسبه مبلغ خرید

حالا یک مثال واقعی‌تر ایجاد کنیم.

فرض کنید یک محصول داریم:

let productPrice = 500000;
let quantity = 3;

let totalPrice = productPrice * quantity;

console.log(totalPrice);

خروجی:

1500000

حالا فرض کنید 200 هزار تومان تخفیف داریم:

let productPrice = 500000;
let quantity = 3;

let totalPrice = productPrice * quantity;

totalPrice -= 200000;

console.log(totalPrice);

خروجی:

1300000

در این مثال از چند مفهوم که تاکنون یاد گرفته‌ایم استفاده کردیم:

Variable
Arithmetic Operator
Assignment Operator

مثال عملی: بررسی سن

فرض کنید سن یک کاربر را داریم:

let age = 22;

console.log(age >= 18);

خروجی:

true

در اینجا از یک عملگر مقایسه‌ای استفاده کرده‌ایم.

بعداً می‌توانیم همین مفهوم را با شرط‌ها ترکیب کنیم تا بر اساس سن کاربر تصمیم بگیریم.

مثال عملی: بررسی دسترسی کاربر

فرض کنید کاربر باید هم وارد حساب شده باشد و هم مدیر باشد:

let isLoggedIn = true;
let isAdmin = true;

let canAccess = isLoggedIn && isAdmin;

console.log(canAccess);

خروجی:

true

اگر یکی از آن‌ها false باشد:

let isLoggedIn = true;
let isAdmin = false;

let canAccess = isLoggedIn && isAdmin;

console.log(canAccess);

نتیجه:

false

این نوع منطق در برنامه‌های واقعی بسیار کاربرد دارد.

جدول مهم‌ترین عملگرها

اشتباهات رایج در استفاده از عملگرها

اشتباه گرفتن = و ===

این دو عملگر کاملاً متفاوت هستند.

let age = 20;

در اینجا = برای انتساب استفاده شده است.

اما:

age === 20

برای مقایسه استفاده می‌شود.

اشتباه گرفتن + برای جمع و اتصال متن

مثلاً:

console.log(10 + 20);

نتیجه:

30

اما:

console.log("10" + 20);

نتیجه:

1020

زیرا در اینجا یک String وجود دارد و + برای اتصال استفاده می‌شود.

استفاده اشتباه از && و ||

به خاطر داشته باشید:

&& → همه شرایط باید درست باشند

|| → حداقل یکی از شرایط باید درست باشد

تمرین عملی

تمرین ۱: محاسبات

کد زیر را بنویسید:

let number1 = 20;
let number2 = 5;

سپس نتیجه عملیات زیر را در Console نمایش دهید:

• جمع

• تفریق

• ضرب

• تقسیم

• باقیمانده

تمرین ۲: قیمت محصول

متغیرهای زیر را ایجاد کنید:

let price = 250000;
let quantity = 4;

قیمت کل را محاسبه کنید.

سپس 100000 تومان تخفیف از قیمت کل کم کنید.

تمرین ۳: مقایسه

سن کاربر را در متغیری به نام age قرار دهید.

سپس بررسی کنید:

• آیا سن بیشتر از 18 است؟

• آیا سن دقیقاً 18 است؟

• آیا سن کمتر از 18 است؟

تمرین ۴: Boolean

دو متغیر ایجاد کنید:

let isLoggedIn = true;
let isAdmin = false;

با استفاده از && و || بررسی کنید:

• آیا کاربر هم وارد شده و هم مدیر است؟

• آیا کاربر وارد شده یا مدیر است؟

تمرین ۵: افزایش و کاهش

کد زیر را ایجاد کنید:

let count = 10;

سپس:

1. یک واحد به آن اضافه کنید.

2. یک واحد دیگر اضافه کنید.

3. یک واحد کم کنید.

4. مقدار نهایی را نمایش دهید.

چالش ساده

یک برنامه کوچک برای محاسبه امتیاز ایجاد کنید.

فرض کنید:

let score = 80;

با استفاده از عملگرهای مقایسه‌ای بررسی کنید:

آیا امتیاز بزرگ‌تر یا مساوی 50 است؟
آیا امتیاز برابر 100 است؟
آیا امتیاز کمتر از 50 است؟

فعلاً فقط نتیجه true یا false را در Console نمایش دهید.

در مقاله بعدی یاد می‌گیریم چگونه بر اساس همین نتایج تصمیم بگیریم؛ یعنی وارد دنیای شرط‌ها و کنترل جریان در جاوااسکریپت می‌شویم.

جمع‌بندی

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

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

با عملگرهای حسابی مانند +، -، *، /، % و ** محاسبات انجام دادیم.

با عملگرهای انتساب مانند =، +=، -=، *= و /= کار کردیم.

سپس با عملگرهای مقایسه‌ای مانند ===، ==!، >، <، >= و <= آشنا شدیم.

همچنین یاد گرفتیم که از:

&&
||
!

برای ایجاد منطق بین چند عبارت استفاده می‌شود.

در نهایت با عملگرهای ++، -- و Ternary نیز آشنا شدیم.

اکنون ابزارهای لازم برای انجام محاسبات و مقایسه داده‌ها را در اختیار داریم. در مقاله بعدی از این ابزارها استفاده خواهیم کرد تا برنامه بتواند بر اساس شرایط مختلف تصمیم‌گیری کند.