آشنایی با نحوهٔ استفاده از حلقه در جاوااسکریپت

Loop (حلقه) به دستوری گفته می‌شود که یک تکه کد را به دفعات متعدد تکرار می‌کند که در این پست قصد داریم با کاربرد آن در زبان جاوا‌اسکریپت آشنا شویم.

دستور for برای ساخت یک حلقه از سه اکسپرشن جداگانه استفاده می‌کند که عبارتند از دستور شروع (مقدار اولیهٔ یک متغیر که معمولاً یک Counter است.)، شرط (یک اکسپرشن true یا false که در هر مرحله از تکرار لوپ می‌بایست وضعیت آن بررسی شود.) و اکسپرشن نهایی (دستوری که در هر مرحله از لوپ اجرا می‌شود.) با آنکه استفاده از هر سه بخش بالا برای دستور for اجباری نیست، اما در اکثر موارد این سه مورد را در کنار همدیگر خواهیم دید. مثال زیر، یک نمونهٔ ساده از حلقهٔ for است که هر سه اکسپرشن فوق‌الذکر را دارا است:

for (var x = 1; x < 10; x++) {
	console.log(x);
};

در کد بالا، ابتدا کلیدواژهٔ for نوشته شده سپس در داخل پرانتز آن ابتدا یک متغیر به نام x تعریف شده که دارای مقدار اولیهٔ 1 است و در ادامه شرط لوپ آورده شده که در اینجا x < 10 است و بیان می‌کند مادامی که متغیر x دارای مقداری کوچک‌تر از 10 است، دستورات داخل این حلقه اجرا شوند. سپس اپراتور ++ قرار دارد که پس از هر بار بررسی شرطِ x < 10 یک واحد به مقدار x می‌افزاید. داخل علائم {} نیز اکسپرشن نهایی قرار دارد که کدهای اصلی لوپ را تشکیل می‌دهند که بسته به شرط در نظر گرفته‌شده، چند بار اجرا خواهند شد و لازم به یادآوری است که عبارات داخل پرانتز باید با علامت ; از یکدیگر جدا شوند. تصویر زیر، نتیجهٔ اجرای کد بالا در کنسول جاوااسکریپت مرورگر کروم را نشان می‌دهد:

حال اگر بخواهیم به صورت مرحله به مرحله، طرز کار for را بررسی کنیم، گام‌ها به ترتیب اولویت از اول به آخر عبارتند از:

1. متغیری به نام x و با مقدار اولیهٔ 1 ساخته‌ایم.
2. سپس بررسی انجام می‌شود که آیا مقدار x از 10 کوچک‌تر است یا خیر که اگر نتیجه مثبت بود، مقدار x به کمک اپراتور ++ یک واحد افزایش پیدا می‌کند سپس دستورات داخل لوپ اجرا می‌شوند.
3. باری دیگر بررسی می‌شود که آیا x کوچک‌تر از 10 است یا خیر که اگر شرط برقرار بود، دستورات داخل لوپ مجدد اجرا می‌شوند.
4. پروسهٔ بررسی شرط تا زمانی ادامه می‌یابد که x کوچک‌تر از ۱۰ باشد و در غیر این صورت مفسر جاوااسکریپت به طور کلی از داخل لوپ خارج می‌شود.

اگر دقت کنیم، متوجه خواهیم شد که این اعداد تا شمارهٔ 9 چاپ شده‌اند و خود شمارهٔ 10 در خروجی نمایش داده نمی‌شود و دلیل این موضوع آن است که در شرط این حلقه گفته‌ایم که مقدار متغیر x باید کوچک‌تر از 10 باشد و بدین ترتیب خودِ 10 در آن جای نخواهد گرفت (اگر بخواهیم اعداد 1 تا 10 را در خروجی ببینیم، می‌توانیم به جای شرط x < 10 از اپراتور کوچک‌تر یا مساوی => استفاده کنیم که در نهایت شرط لوپ ما برابر با x <= 10 خواهد بود.)

یکی از کاربردهای حلقه‌ها، دستیابی به اِلِمان‌های آرایه‌ها است به طوری که با استفاده از حلقهٔ for می‌توانیم تمامی اعضای یک آرایه را به صورت یک لیست مشاهده کنیم:

var areaCode = ["021", "026", "061", "083", "031"];
for (x = 0; x <= areaCode.length - 1; x++) {
	console.log("Your city’s area code is: "+ areaCode[x] + '\n');
};

در مثال بالا، آرایه‌ای به نام areaCode وجود دارد که دارای 5 عضو است و از آنجایی که برای استفاده از for به یک متغیر شمارنده نیاز داریم و تمامی اعضای آرایه نیز همواره به ترتیب پشت سر هم قرار می‌گیرند، باید راهی برای ادغام این دو موضوع پیدا کنیم که در همین راستا تابع length به ما تعداد اعضای آرایه را نمایش می‌دهد. به عبارتی، از آنجایی که برای شرط for باید یک متغیر شمارنده داشته باشیم، تعداد اعضای آرایه می‌تواند منطقی‌ترین گزینه باشد چرا که لوپ ما دقیقاً به همان تعداد اعضای آرایه تکرار می‌شود و می‌تواند در هر بار تکرار یکی از اعضا را چاپ کند تا در نهایت لیستی از همهٔ اعضاء داشته باشیم. \

در عین حال، مسألهٔ دیگری که وجود دارد تفاوت بین تعداد اعضاء و شمارهٔ ایندکس اعضاء است که اولی همچون اعداد طبیعی از 1 شروع می‌شود اما اندیس آرایه در زبان جاوااسکریپت از 0 شروع می‌گردد و برای آنکه اختلاف میان این دو را برطرف کنیم، یک واحد از تعداد اعضای آرایه کم می‌کنیم بدین صورت که دستور areaCode.length - 1 را به عنوان شرط حلقه در نظر می‌گیریم تا به همان شمارهٔ ایندکس اعضاء دست پیدا کنیم و بدین ترتیب شرط دستور لوپ ساخته می‌شود به طوری که به عنوان خروجی داریم:

همان‌طور که مشاهده می‌شود، داخل دستور ()console.log از [areaCode[x استفاده کرده‌ایم به آن دلیل که مقدار متغیر x در ابتدا از صفر شروع می‌شود و تا شمارهٔ اندیس آخرین عضو یکی‌یکی افزایش پیدا می‌کند تا در نهایت از لوپ خارج شویم که به همین دلیل، در هر مرحله از اجرای حلقه، مقدار متغیر x دقیقاً با شمارهٔ اندیس یکی از اعضای آرایه برابر است و بالتبع می‌توانیم در هر بار چرخش حلقه، دقیقاً همان عضوی از آرایه که دارای شمارهٔ اندیس مشابه است را نمایش دهیم که در نهایت خروجی ما به صورت فوق خواهد بود.