بیانیه "switch"

بیانیه switch می‌تواند جایگزین چندین بررسی if شود.

این یک روش توصیفی‌تر برای مقایسه یک مقدار با چندین حالت مختلف ارائه می‌دهد.

سینتکس

بیانیه switch شامل یک یا چند بلوک case و یک بلوک default اختیاری است.

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

مقدار x برای برابری سخت (strict equality) با مقدار اولین case (یعنی value1) بررسی می‌شود، سپس با دومین (value2) و به همین ترتیب.

اگر برابری پیدا شود، switch شروع به اجرای کد از case مربوطه می‌کند تا نزدیک‌ترین break (یا تا پایان switch).

اگر هیچ case مطابقت نداشته باشد، کد default اجرا می‌شود (اگر وجود داشته باشد).

یک مثال

مثالی از switch (کد اجرایی هایلایت شده است):

در اینجا switch شروع به مقایسه a از اولین حالت که 3 است می‌کند. تطابق ناموفق است.

سپس 4. این یک تطابق است، بنابراین اجرا از case 4 آغاز می‌شود تا نزدیک‌ترین break.

اگر break وجود نداشته باشد، اجرا با case بعدی بدون هیچ چک دیگری ادامه می‌یابد.

مثالی بدون break:

در مثال بالا ما سه alert متوالی را خواهیم دید:

❕هر بیانیه‌ای می‌تواند آرگومان switch/case باشد.

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

برای مثال:

در اینجا +a برابر با 1 است که با b + 1 در case مقایسه می‌شود و کد مربوطه اجرا می‌شود.

گروه‌بندی "case"

چندین حالت case که کد مشترکی دارند می‌توانند گروه‌بندی شوند.

برای مثال، اگر بخواهیم همان کد برای case 3 و case 5 اجرا شود:

اکنون هم 3 و هم 5 همان پیام را نشان می‌دهند.

توانایی "گروه‌بندی" حالات نتیجه جانبی نحوه کار switch/case بدون break است. در اینجا اجرای case 3 از خط (*) شروع می‌شود و از case 5 عبور می‌کند، زیرا break وجود ندارد.

نوع اهمیت دارد

بگذارید تأکید کنیم که بررسی برابری همیشه سخت است. مقادیر باید از همان نوع باشند تا مطابقت داشته باشند.

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

1. برای 0 و 1، اولین alert اجرا می‌شود.

2. برای 2، alert دوم اجرا می‌شود.

3. اما برای 3، نتیجه prompt یک رشته "3" است که به عدد 3 به طور سخت === برابر نیست. بنابراین ما یک کد مرده در case 3 داریم! گزینه default اجرا خواهد شد.

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

در جاوا اسکریپت چهار عملگر منطقی وجود دارد: || (یا)، && (و)، ! (نفی). در اینجا به بررسی سه مورد اول می‌پردازیم و عملگر ?? (تجمیع نال) در مقاله بعدی بررسی خواهد شد.

اگرچه این عملگرها "منطقی" نامیده می‌شوند، اما می‌توانند به مقادیر از هر نوعی اعمال شوند و نتیجه آن‌ها نیز می‌تواند از هر نوعی باشد.

بیایید جزئیات را بررسی کنیم.

▎|| (یا)

عملگر "یا" با دو علامت عمودی نمایش داده می‌شود:

در برنامه‌نویسی کلاسیک، عملگر منطقی OR معمولاً برای کار با مقادیر بولی طراحی شده است. اگر هر یک از آرگومان‌ها درست (true) باشد، نتیجه درست (true) خواهد بود و در غیر این صورت، نادرست (false) خواهد بود.

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

چهار ترکیب منطقی ممکن وجود دارد:

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

اگر یک عملوند بولی نباشد، برای ارزیابی به بولی تبدیل می‌شود.

برای مثال، عدد 1 به عنوان درست (true) و عدد 0 به عنوان نادرست (false) در نظر گرفته می‌شود:

بیشتر اوقات، OR || در یک دستور if برای آزمایش اینکه آیا هر یک از شرایط داده شده درست است استفاده می‌شود.

به عنوان مثال:

ما می‌توانیم شرایط بیشتری را نیز اضافه کنیم:

عملگر "یا" || اولین مقدار درست را پیدا می‌کند.

منطق توصیف شده در بالا تا حدی کلاسیک است. حالا بیایید ویژگی‌های "اضافی" جاوا اسکریپت را بررسی کنیم.

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

با توجه به چندین مقدار OR شده:

عملگر OR || کارهای زیر را انجام می‌دهد:

1. عملوندها را از چپ به راست ارزیابی می‌کند.

2. برای هر عملوند، آن را به بولی تبدیل می‌کند. اگر نتیجه درست باشد، متوقف شده و مقدار اصلی آن عملوند را برمی‌گرداند.

3. اگر همه عملوندها ارزیابی شدند (یعنی همه نادرست بودند)، آخرین عملوند را برمی‌گرداند.

به عبارت دیگر، زنجیره‌ای از OR || اولین مقدار درست یا آخرین مقدار را اگر هیچ مقدار درستی پیدا نشود، برمی‌گرداند.

برای مثال:

این منجر به برخی استفاده‌های جالب در مقایسه با یک OR صرفاً کلاسیک و مخصوص بولی می‌شود.

1. دریافت اولین مقدار درست از یک لیست از متغیرها یا عبارات.

برای مثال، ما متغیرهای firstName، lastName و nickName داریم که همه اختیاری هستند (یعنی ممکن است undefined یا دارای مقادیر نادرست باشند).

بیایید از OR || استفاده کنیم تا یکی از آن‌ها که دارای داده است را انتخاب کنیم و آن را نمایش دهیم (یا "Anonymous" اگر هیچ‌کدام تنظیم نشده باشند):

اگر همه متغیرها نادرست بودند، "Anonymous" نمایش داده می‌شود.

2. ارزیابی کوتاه‌مدت.

یکی دیگر از ویژگی‌های عملگر OR || ارزیابی کوتاه‌مدت است.

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

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

در مثال زیر، فقط پیام دوم چاپ می‌شود:

در خط اول، عملگر OR || بلافاصله پس از دیدن true ارزیابی را متوقف می‌کند، بنابراین alert اجرا نمی‌شود.

گاهی اوقات افراد از این ویژگی برای اجرای دستورات تنها در صورتی که شرط در سمت چپ نادرست باشد استفاده می‌کنند.

▎&& (و)

عملگر AND با دو علامت نمایش داده می‌شود:

در برنامه‌نویسی کلاسیک، AND زمانی درست است که هر دو عملوند درست باشند و در غیر این صورت نادرست است:

مثالی با if:

همانند OR، هر مقداری به عنوان عملوند AND مجاز است:

عملگر AND && اولین مقدار را پیدا می‌کند.

با توجه به چندین مقدار AND شده:

عملگر AND && کارهای زیر را انجام می‌دهد:

1. عملوندها را از چپ به راست ارزیابی می‌کند.

2. برای هر عملوند، آن را به بولی تبدیل می‌کند. اگر نتیجه نادرست باشد، متوقف شده و مقدار اصلی آن عملوند را برمی‌گرداند.

3. اگر همه عملوندها ارزیابی شدند (یعنی همه درست بودند)، آخرین عملوند را برمی‌گرداند.

به عبارت دیگر، AND اولین مقدار نادرست یا آخرین مقدار را اگر هیچ مقدار نادرستی پیدا نشود، برمی‌گرداند.

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

مثال‌ها:

ما همچنین می‌توانیم چندین مقدار را به صورت پی‌درپی پاس دهیم. ببینید چگونه اولین مقدار نادرست برمی‌گردد:

وقتی همه مقادیر درست باشند، آخرین مقدار برگردانده می‌شود:

▎اولویت عملگرهای منطقی

اولویت عملگر AND && از OR || بالاتر است.

بنابراین کد a && b c && a به طور اساسی مشابه با این است که فرض کنیم عبارات AND در پرانتز قرار دارند: (a && b) (c && d).

⚠️ از جایگزینی if با || یا & خودداری کنید

گاهی اوقات، افراد از عملگر AND && به عنوان یک "روش کوتاه‌تر برای نوشتن if" استفاده می‌کنند.

برای مثال:

عملی که در سمت راست && وجود دارد فقط در صورتی اجرا می‌شود که ارزیابی به آن برسد. یعنی، تنها اگر (x > 0) درست باشد.

بنابراین، ما اساساً یک معادل برای:

داریم.

اگرچه نسخه‌ای که با && نوشته شده کوتاه‌تر به نظر می‌رسد، استفاده از if واضح‌تر است و معمولاً کمی خواناتر است. بنابراین توصیه می‌شود که از هر ساختار برای هدف خود استفاده کنید: از if برای موارد شرطی و از && برای عملگر AND استفاده کنید.

▎! NOT

عملگر NOT منطقی با علامت تعجب ! نمایش داده می‌شود.

سینتکس آن بسیار ساده است:

این عملگر یک آرگومان را می‌پذیرد و کارهای زیر را انجام می‌دهد:

1. عملوند را به نوع بولی تبدیل می‌کند: true/false.

2. مقدار معکوس را برمی‌گرداند.

برای مثال:

یک دو بار NOT !! گاهی برای تبدیل یک مقدار به نوع بولی استفاده می‌شود:

یعنی، اولین NOT مقدار را به بولی تبدیل کرده و معکوس آن را برمی‌گرداند و دومین NOT دوباره آن را معکوس می‌کند. در نهایت، ما یک تبدیل ساده از مقدار به بولی داریم.

یک روش کمی طولانی‌تر برای انجام همین کار، استفاده از تابع داخلی Boolean است:

اولویت عملگر NOT ! بالاترین اولویت را در بین تمام عملگرهای منطقی دارد، بنابراین همیشه اول از همه اجرا می‌شود، قبل از && یا ||.

از فردا مقالات html و css ارسال میشه ❤️

https://www.w3schools.com/tags/att_lang.asp#:~:text=The%20lang%20attribute%20specifies%20the,for%20French%20and%20so%20on.

#HTML

▎توابع

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

به عنوان مثال، نیاز داریم که یک پیام زیبا را هنگام ورود کاربر، خروج کاربر و شاید در جاهای دیگر نمایش دهیم.

توابع اصلی‌ترین "اجزای سازنده" برنامه هستند. آن‌ها اجازه می‌دهند که کد بدون تکرار چندین بار فراخوانی شود.

ما قبلاً نمونه‌هایی از توابع داخلی مانند alert(message)، prompt(message, default) و confirm(question) را دیده‌ایم. اما می‌توانیم توابع خودمان را نیز ایجاد کنیم.

▎اعلام تابع

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

این به شکل زیر است:

کلیدواژه function ابتدا می‌آید، سپس نام تابع، سپس لیستی از پارامترها درون پرانتز (با کاما جدا شده، خالی در مثال بالا، که بعداً نمونه‌هایی خواهیم دید) و در نهایت کد تابع، که به آن "بدنه تابع" نیز گفته می‌شود، درون آکولادها قرار دارد.

تابع جدید ما می‌تواند با نام خود فراخوانی شود: showMessage().

به عنوان مثال:

فراخوانی showMessage() کد تابع را اجرا می‌کند. در اینجا ما پیام را دو بار مشاهده خواهیم کرد.

این مثال به وضوح یکی از اهداف اصلی توابع را نشان می‌دهد: جلوگیری از تکرار کد.

اگر هر زمان نیاز به تغییر پیام یا نحوه نمایش آن داشته باشیم، کافی است کد را در یک مکان تغییر دهیم: تابعی که آن را نمایش می‌دهد.

▎متغیرهای محلی

یک متغیر که درون یک تابع اعلام شده باشد فقط درون همان تابع قابل مشاهده است.

به عنوان مثال:

▎متغیرهای خارجی

یک تابع می‌تواند به یک متغیر خارجی نیز دسترسی داشته باشد، به عنوان مثال:

تابع به طور کامل به متغیر خارجی دسترسی دارد. همچنین می‌تواند آن را تغییر دهد.

به عنوان مثال:

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

اگر یک متغیر با همان نام درون تابع اعلام شود، متغیر خارجی سایه‌دار خواهد شد. به عنوان مثال، در کد زیر تابع از userName محلی استفاده می‌کند و متغیر خارجی نادیده گرفته می‌شود:

▎❕متغیرهای جهانی

متغیرهایی که خارج از هر تابع اعلام شده‌اند، مانند userName خارجی در کد بالا، به عنوان متغیرهای جهانی شناخته می‌شوند.

متغیرهای جهانی از هر تابع قابل مشاهده هستند (مگر اینکه توسط متغیرهای محلی سایه‌دار شوند).

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

▎پارامترها

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

در مثال زیر، تابع دارای دو پارامتر: from و text است.

زمانی که تابع در خطوط (*) و (**) فراخوانی می‌شود، مقادیر داده شده به متغیرهای محلی from و text کپی می‌شوند. سپس تابع از آن‌ها استفاده می‌کند.

در اینجا یک مثال دیگر: ما یک متغیر from داریم و آن را به تابع منتقل می‌کنیم. لطفاً توجه داشته باشید: تابع from را تغییر می‌دهد، اما تغییرات در خارج دیده نمی‌شود، زیرا یک تابع همیشه یک کپی از مقدار را دریافت می‌کند:

وقتی که یک مقدار به عنوان پارامتر تابع منتقل می‌شود، همچنین به آن آرگومان گفته می‌شود.

به عبارت دیگر، برای شفاف کردن این اصطلاحات:

• پارامتر: متغیری است که درون پرانتزها در اعلام تابع ذکر شده است (این یک اصطلاح مربوط به زمان اعلام است).

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

ما توابع را با ذکر پارامترهایشان اعلام می‌کنیم و سپس آن‌ها را با ارسال آرگومان‌ها فراخوانی می‌کنیم.

در مثال بالا، می‌توان گفت: "تابع showMessage با دو پارامتر اعلام شده است، سپس با دو آرگومان: from و "Hello" فراخوانی شده است".

▎مقادیر پیش‌فرض

اگر یک تابع فراخوانی شود اما آرگومانی ارائه نشود، آنگاه مقدار مربوطه undefined خواهد شد.

به عنوان مثال، تابع فوق‌الذکر showMessage(from, text) می‌تواند با یک آرگومان فراخوانی شود:

این یک خطا نیست. چنین فراخوانی "*Ann*: undefined" را نمایش خواهد داد. از آنجایی که مقدار برای text منتقل نشده است، این مقدار undefined می‌شود.

ما می‌توانیم مقدار "پیش‌فرض" (برای استفاده در صورت حذف) را برای یک پارامتر در اعلام تابع مشخص کنیم، با استفاده از =:

اکنون اگر پارامتر text منتقل نشود، مقدار "no text given" را دریافت خواهد کرد.

مقدار پیش‌فرض همچنین اگر پارامتر وجود داشته باشد اما برابر با undefined باشد نیز وارد عمل می‌شود.

▎ارزیابی پارامترهای پیش‌فرض

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

در مثال بالا، anotherFunction() در صورتی که پارامتر text ارائه شده باشد، اصلاً فراخوانی نمی‌شود. از طرف دیگر، هر بار که text ناپدید باشد، به طور مستقل فراخوانی می‌شود.

▎پارامترهای پیش‌فرض در کدهای قدیمی جاوااسکریپت

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

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

به عنوان مثال، بررسی صریح برای undefined:

...یا استفاده از اپراتور ||:

▎پارامترهای پیش‌فرض جایگزین

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

ما می‌توانیم بررسی کنیم که آیا پارامتر در حین اجرای تابع ارسال شده است یا نه، با مقایسه آن با undefined:

...یا می‌توانیم از اپراتور || استفاده کنیم:

موتورهای مدرن جاوااسکریپت از اپراتور هم‌ارز nullish ?? پشتیبانی می‌کنند، که بهتر است زمانی که بیشتر مقادیر نادرست مانند 0 باید به عنوان "عادی" در نظر گرفته شوند.

▎بازگشت یک مقدار

یک تابع می‌تواند یک مقدار را به کد فراخوانی بازگرداند.

ساده‌ترین مثال می‌تواند تابعی باشد که دو مقدار را جمع می‌کند:

دستوری به نام return می‌تواند در هر جایی از تابع قرار گیرد. زمانی که اجرای کد به آن برسد، تابع متوقف می‌شود و مقدار به کد فراخوانی بازگردانده می‌شود (که در مثال بالا به result اختصاص داده شده است).

ممکن است چندین بار از return در یک تابع استفاده شود. به عنوان مثال:

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

به عنوان مثال:

در کد بالا، اگر checkAge(age) مقدار false را برگرداند، آنگاه showMovie به نمایش پیام ادامه نخواهد داد.

▎❕یک تابع با بازگشت خالی یا بدون آن مقدار undefined را برمی‌گرداند

اگر یک تابع مقداری را بازنگرداند، مانند این است که undefined را برگرداند:

یک بازگشت خالی نیز همانند return undefined است:

⚠️ هرگز بین return و مقدار یک خط جدید اضافه نکنید

برای یک عبارت طولانی در return، ممکن است وسوسه شوید که آن را در یک خط جداگانه قرار دهید، مانند این:

این کار نمی‌کند، زیرا جاوااسکریپت بعد از return یک نقطه ویرگول فرض می‌کند. این همانند این عمل خواهد کرد:

بنابراین، عملاً به یک بازگشت خالی تبدیل می‌شود.

اگر بخواهیم عبارت بازگشتی در چندین خط پیچیده باشد، باید آن را در همان خط با return شروع کنیم. یا حداقل پرانتز باز را در آنجا قرار دهیم:

و این به همان شکلی که انتظار داریم کار خواهد کرد.

▎نام‌گذاری یک تابع

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

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

به عنوان مثال، توابعی که با "show" شروع می‌شوند معمولاً چیزی را نمایش می‌دهند.

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

• "get…" – مقداری را برمی‌گرداند،

• "calc…" – چیزی را محاسبه می‌کند،

• "create…" – چیزی را ایجاد می‌کند،

• "check…" – چیزی را بررسی کرده و یک مقدار بولی برمی‌گرداند و غیره.

نمونه‌هایی از چنین نام‌هایی:

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

▎❕یک تابع – یک عمل

یک تابع باید دقیقاً همان کاری را انجام دهد که نامش نشان می‌دهد، نه بیشتر.

دو عمل مستقل معمولاً سزاوار دو تابع هستند، حتی اگر معمولاً با هم فراخوانی شوند (در این حالت می‌توانیم یک تابع سوم بسازیم که آن دو را فراخوانی کند).

چند مثال از نقض این قانون:

• getAge – اگر پیامی با سن نمایش دهد بد است (باید فقط سن را بگیرد).

• createForm – اگر سند را تغییر دهد و فرمی به آن اضافه کند بد است (باید فقط آن را ایجاد کرده و برگرداند).

• checkPermission – اگر پیام دسترسی مجاز/ممنوع را نمایش دهد بد است (باید فقط بررسی انجام دهد و نتیجه را برگرداند).

▎نام‌گذاری توابع

این مثال‌ها معانی رایج پیشوندها را فرض می‌کنند. شما و تیم‌تان آزاد هستید تا بر معانی دیگری توافق کنید، اما معمولاً تفاوت چندانی ندارند. در هر صورت، باید درک دقیقی از معنای هر پیشوند داشته باشید و بدانید که یک تابع با پیشوند مشخص چه کارهایی می‌تواند و چه کارهایی نمی‌تواند انجام دهد. تمام توابع با پیشوند یکسان باید از قوانین پیروی کنند و تیم باید این دانش را به اشتراک بگذارد.

▎❕نام‌های فوق‌العاده کوتاه برای توابع

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

به عنوان مثال، فریم‌ورک jQuery یک تابع با نام $ تعریف می‌کند. کتابخانه Lodash نیز تابع اصلی خود را با نام _ دارد.

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

▎تابع = نظرات

توابع باید کوتاه باشند و دقیقاً یک کار انجام دهند. اگر آن کار بزرگ است، شاید ارزشش را داشته باشد که تابع را به چند تابع کوچکتر تقسیم کنیم. گاهی اوقات پیروی از این قاعده ممکن است آسان نباشد، اما قطعاً چیز خوبی است.

یک تابع جداگانه نه تنها آزمایش و اشکال‌زدایی آن آسان‌تر است، بلکه وجود آن خود یک نظر عالی است!

برای مثال، دو تابع showPrimes(n) زیر را مقایسه کنید. هر کدام اعداد اول تا n را نمایش می‌دهند.

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

نسخه دوم از یک تابع اضافی به نام isPrime(n) برای بررسی اول بودن استفاده می‌کند:

نسخه دوم آسان‌تر قابل درک است، درست است؟ به جای قطعه کد، نام عمل (isPrime) را مشاهده می‌کنیم. گاهی اوقات مردم به چنین کدی به عنوان خودتوصیف اشاره می‌کنند.

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

▎خلاصه

اعلام یک تابع به این شکل است:

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

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

یک تابع می‌تواند یک مقدار را بازگرداند. اگر این کار را نکند، نتیجه‌اش undefined خواهد بود.

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

همیشه درک یک تابع که پارامترها را دریافت می‌کند، با آن‌ها کار می‌کند و یک نتیجه بازمی‌گرداند، آسان‌تر از یک تابع است که هیچ پارامتری دریافت نمی‌کند اما متغیرهای خارجی را به عنوان اثر جانبی تغییر می‌دهد.

▎نام‌گذاری توابع:

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


• یک تابع یک عمل است، بنابراین نام‌های توابع معمولاً فعلی هستند.

• پیشوندهای توابع معروفی مانند create…، show…، get…، check… و غیره وجود دارد. از آن‌ها برای اشاره به اینکه یک تابع چه کاری انجام می‌دهد استفاده کنید.

توابع بلوک‌های اصلی اسکریپت‌ها هستند. اکنون اصول اولیه را پوشش داده‌ایم، بنابراین واقعاً می‌توانیم شروع به ایجاد و استفاده از آن‌ها کنیم. اما این فقط آغاز راه است. ما بارها به آن‌ها بازخواهیم گشت و به ویژگی‌های پیشرفته‌تر آن‌ها خواهیم پرداخت.

▎توابع ناشناس و تفاوت‌های بین اعلام تابع و بیان تابع

در اینجا، توابع به‌طور مستقیم در داخل فراخوانی ask(...) اعلام شده‌اند. این توابع نام ندارند و به همین دلیل به آن‌ها توابع ناشناس (Anonymous Functions) گفته می‌شود. چنین توابعی از خارج از ask قابل دسترسی نیستند (زیرا به متغیرها اختصاص داده نشده‌اند)، اما این دقیقاً همان چیزی است که ما در اینجا می‌خواهیم.

این نوع کد به‌طور طبیعی در اسکریپت‌های ما ظاهر می‌شود و با روحیه جاوااسکریپت سازگار است.

❕یک تابع یک مقدار است که نمایانگر یک "عمل" است

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

یک تابع می‌تواند به‌عنوان یک عمل درک شود.

ما می‌توانیم آن را بین متغیرها منتقل کنیم و هر زمان که بخواهیم اجرا کنیم.

▎تفاوت بین اعلام تابع و بیان تابع

بیایید تفاوت‌های کلیدی بین اعلام تابع (Function Declarations) و بیان تابع (Function Expressions) را فرموله کنیم.

اول، نحوه تشخیص آن‌ها در کد:

• اعلام تابع: تابعی که به‌عنوان یک بیانیه جداگانه در جریان اصلی کد تعریف شده است:

function sayHi() {
  console.log("Hello!");
}

• بیان تابع: تابعی که در داخل یک عبارت یا ساختار نحوی دیگر ایجاد می‌شود. در اینجا، تابع در سمت راست عبارت انتساب (=) ایجاد می‌شود:

let sum = function(a, b) {
  return a + b;
};

تفاوت ظریف‌تر: زمانی که تابع توسط موتور جاوااسکریپت ایجاد می‌شود.

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

زمانی که جریان اجرا به سمت راست عبارت انتساب let sum = function... می‌رسد، تابع ایجاد شده و از آن زمان می‌توان از آن استفاده کرد (به آن اختصاص داد، فراخوانی کرد و غیره).

اعلام توابع متفاوت هستند.

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

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

این به دلیل الگوریتم‌های داخلی است. وقتی جاوااسکریپت آماده اجرای اسکریپت می‌شود، ابتدا به دنبال اعلام‌های تابع جهانی در آن می‌گردد و توابع را ایجاد می‌کند. می‌توانیم این مرحله را به‌عنوان یک "مرحله اولیه" در نظر بگیریم.

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

به‌عنوان مثال، این کار می‌کند:

sayHi(); // Hello!
function sayHi() {
  console.log("Hello!");
}

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

…اگر این یک بیان تابع بود، پس این کار نمی‌کرد:

بیان‌های تابع زمانی ایجاد می‌شوند که اجرا به آن‌ها برسد. این فقط در خط (*) اتفاق می‌افتد. خیلی دیر است.

▎ویژگی خاص دیگر اعلام توابع

ویژگی خاص دیگر اعلام توابع، دامنه بلوکی آن‌هاست.

در حالت سخت (Strict Mode)، وقتی یک اعلام تابع درون یک بلوک کد قرار دارد، در تمام نقاط داخل آن بلوک قابل مشاهده است. اما نه خارج از آن.

برای مثال، فرض کنید که ما نیاز داریم تا تابع welcome() را بر اساس متغیر age که در زمان اجرا دریافت می‌کنیم، اعلام کنیم. سپس قصد داریم از آن بعداً استفاده کنیم.

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

if (age > 18) {
  function welcome() {
    console.log("Welcome!");
  }
}
welcome(); // Error: welcome is not defined

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

▎راه‌حل

چه کار کنیم تا welcome خارج از if قابل مشاهده باشد؟

روش صحیح این است که از بیان تابع استفاده کرده و welcome را به متغیری که خارج از if اعلام شده و دارای دید مناسب است اختصاص دهیم.

این کد به‌درستی کار می‌کند:

let welcome;

if (age > 18) {
  welcome = function() {
    console.log("Welcome!");
  };
}

welcome(); // Welcome!

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

let welcome = age > 18 ? function() { console.log("Welcome!"); } : null;

▎❕چه زمانی باید از اعلام تابع و چه زمانی از بیان تابع استفاده کنیم؟

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

این همچنین برای خوانایی بهتر است، زیرا پیدا کردن function f(…) {…} در کد آسان‌تر از let f = function(…) {…}; است. اعلام توابع بیشتر "جلب توجه" می‌کنند.

…اما اگر به هر دلیلی اعلام تابع مناسب ما نباشد، یا نیاز به یک اعلام شرطی داشته باشیم (که در مثال قبلی دیدیم)، پس باید از بیان تابع استفاده کنیم.

▎خلاصه

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

اگر تابع به‌عنوان یک بیانیه جداگانه در جریان اصلی کد اعلام شود، به آن "اعلام تابع" گفته می‌شود.

اگر تابع به‌عنوان بخشی از یک عبارت ایجاد شود، به آن "بیان تابع" گفته می‌شود.

▎اعلام توابع و بیان توابع در جاوااسکریپت

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

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

در اکثر موارد، زمانی که نیاز به اعلام یک تابع داریم، استفاده از اعلام تابع ترجیح داده می‌شود، زیرا این توابع قبل از خود اعلام قابل مشاهده هستند. این ویژگی به ما انعطاف‌پذیری بیشتری در سازماندهی کد می‌دهد و معمولاً خوانایی بیشتری دارد.

بنابراین، ما باید از بیان تابع تنها زمانی استفاده کنیم که اعلام تابع برای وظیفه مورد نظر مناسب نباشد. در این فصل چند مثال از این موضوع را دیده‌ایم و در آینده نیز بیشتر خواهیم دید.