حلقه While در جاوا اسکریپت چیست؟ – از صفر تا صد + مثال و کد

در برنامه نویسی، از «حلقه‌ها» (Loops) برای انجام عملیات تکراری اجرای بلوکی از کدها استفاده می‌شود. به عنوان مثالی بسیار ساده، اگر کاربر بخواهد پیغامی خاص، ١٠٠ بار نشان داده شود، می‌تواند از حلقه‌ها استفاده کند. حلقه‌ها در جاوا اسکریپت و انواع زبان‌های برنامه نویسی کاربردهای بسیاری دارند. در این میان، «حلقه While» یکی از مهم‌ترین دستورات حلقه به‌حساب می‌آید که برای انجام کارهای مختلفی از آن استفاده می‌شود. در ادامه این مطلب بیشتر به آموزش حلقه While در جاوا اسکریپت پرداخته‌ایم و مثال‌های مختلفی نیز برای درک بهتر این مفهوم در برنامه نویسی جاوا اسکریپت ارائه شده‌اند.

سینتکس حلقه While در جاوا اسکریپت

«سینتکس» (Syntax) حلقه While در زبان جاوا اسکریپت در ادامه آمده است.

عملکرد حلقه While در جاوا اسکریپت چگونه است؟

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

1. حلقه While، «شرایط» (Condition) داخل پرانتز () را ارزیابی می‌کند.
2. اگر شرط به TRUE ارزیابی شود، کدهای داخل حلقه While اجرا خواهند شد.
3. وضعیت یا شرط حلقه دوباره ارزیابی می‌شود.
4. روند ارزیابی و اجرای کدهای داخل حلقه While تا زمانی ادامه پیدا می‌کنند که شرط FALSEشود و دیگر برقرار نباشد.
5. زمانی که شرطFALSE شد، اجرای حلقه متوقف و اجرای برنامه از حلقه خارج خواهد شد.

فلوچارت حلقه While در زبان جاوا اسکریپت

فلوچارت حلقه While در زبان برنامه نویسی جاوا اسکریپت به صورت تصویر زیر است.

مثال هایی از حلقه While در جاوا اسکریپت

در ادامه ۲ مثال از حلقه While در JavaScript ارائه خواهد شد تا درک حلقه While برای کاربر آسان شود.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

مثال ١ حلقه While در جاوا اسکریپت

در مثال زیر اعداد از ۱ تا ۵ با استفاده از حلقه While در خروجی نمایش داده می‌شوند.

خروجی این مثال در ادامه آمده است.

1
2
3
4
5

نحوه کار این برنامه به صورت زیر خواهد بود:

مثال ۲ حلقه While در جاوا اسکریپت

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

خروجی این مثال در ادامه آمده است.

Enter a number: 2
Enter a number: 5
Enter a number: 7
Enter a number: 0
Enter a number: -3
The sum is 14.

هنگامی که کدهای بالا اجرا می‌شوند، از کاربر خواسته خواهد شد تا عددی را وارد کند. در این مثال از parseInt()‎ استفاده شده است زیرا prompt()‎ ورودی را به عنوان «استرینگ» (رشته) از کاربر دریافت خواهد کرد. با این حال، زمانی که رشته‌های عددی از کاربر دریافت می‌شوند، مانند «شی» (Object) رفتار خواهند کرد. برای مثال عبارت '2' + '3' = '23' بیانگر این موضوع است. کار parseInt()‎این است که رشته‌های عددی را به اعداد واقعی تبدیل کند.

در قطعه کد بالا، حلقه While تا زمانی ادامه خواهد یافت که کاربر عددی منفی را وارد کند. در طی تکرارهایی که اتفاق می‌افتند، عددی که کاربر وارد می‌کند به متغیر sum اضافه خواهد شد. همچنین زمانی که کاربر عددی منفی را به عنوان ورودی وارد کند، در نتیجه حلقه خاتمه خواهد یافت و جمع کل اعداد مثبت در خروجی نمایش داده می‌شود.

حلقه do while در جاوا اسکریپت

سینتکس حلقه do While در جاوا اسکریپت به صورت زیر است:

فرایند کار حلقه do While در جاوا اسکریپت به صورت زیر است:

1. بدنه و دستورات حلقه ابتدا اجرا می‌شوند و سپس شرط‌ها مورد ارزیابی قرار خواهد گرفت.
2. اگر شرط به True ارزیابی شود، بدنه حلقه داخل دستور دوباره اجرا خواهد شد.
3. شرایط حلقه باری دیگر مورد ارزیابی قرار خواهد گرفت.
4. اگر شرط به Trueارزیابی شود، بدنه حلقه داخل دستور دوباره اجرا خواهد شد.
5. این فرایند تا زمانی ادامه خواهد یافت که شرط حلقه برابر با False ارزیابی شود که در این صورت، حلقه خاتمه خواهد یافت.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

• نکته: حلقه do While شبیه به حلقه While در جاوا اسکریپت است، اما این دو تفاوت بارزی نیز دارند. تنها تفاوت این دو حلقه در برنامه نویسی جاوا اسکریپت این است که در حلقه do While، بدنه حلقه حداقل یک‌ بار اجرا می‌شود.

فلوچارت حلقه do while در جاوا اسکریپت

فلوچارت حلقه do while در جاوا اسکریپت به صورت تصویر زیر است.

چند مثال از حلقه do while در جاوا اسکریپت

در این بخش نیز تعدادی مثال برای درک و یادگیری بهتر حلقه do while در جاوا اسکریپت ارائه شده است.

مثال ١ حلقه do while در جاوا اسکریپت

مثال نمایش عدد ١ تا ۵ این بار با حلقه do while در جاوا اسکریپت به صورت زیر است.

خروجی این مثال در ادامه ملاحظه می‌شود.

1
2
3
4
5

نحوه کار حلقه do while در جاوا اسکریپت برای مثال فوق به شرح جدول زیر است.

مثال ۲ حلقه do while در جاوا اسکریپت

در این مثال، با استفاده از حلقه do while در جاوا اسکریپت تنها اعداد مثبت با هم جمع خواهند شد. قطعه کد این مثال به صورت زیر است.

خروجی این مثال نیز در ادامه آمده است.

Enter a number: 2
Enter a number: 4
Enter a number: -500
The sum is 6.

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

Enter a number: -80
The sum is 0.

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

حلقه While بی نهایت در جاوا اسکریپت چیست؟

یکی از مباحث مهم پیرامون حلقه While در جاوا اسکریپت، «حلقه While بی‌نهایت» (Infinite While Loop) است که در این بخش از مطلب مورد بررسی قرار خواهد گرفت.

فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در فرادرس

کلیک کنید

اگر شرط حلقه همیشه برابر باTrue ارزیابی شود در نتیجه، حلقه به صورت بی‌نهایت (تا زمانی که حافظه پر شود) اجرا خواهد شد و این مسئله به عنوان حلقه While بی‌نهایت شناخته شده است. در ادامه مثالی برای این مفهوم ارائه شده است.

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

در مثال فوق، شرط همیشه برابر باTrueارزیابی می‌شود. چنین شرط‌هایی موجب اجرای بی‌نهایت باره حلقه While در JavaScript خواهند شد.

حلقه For در جاوا اسکریپت

حلقه For در جاوا اسکریپت از حلقه While پیچیده‌تر است، اما بیشتر مورد استفاده قرار می‌گیرد.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

فلوچارت حلقه For به صورت تصویر زیر است:

سینتکس حلقه For نیز در ادامه آمده است.

مثال زیر برای درک بهتر حلقه For در جاوا اسکریپت ارائه شده است. در این مثال، تابع alert(i) برای متغیر i از 0 تا 3 با استفاده از حلقه For اجرا می‌شود.

تشریح این مثال به صورت زیر است:

در جدول بالا، اجرای مرحله به مرحله حلقه For برای مثال مربوطه شرح داده شده است.

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

Run begin
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ (if condition → run body and run step)
→ ...

در الگوریتم بالا بیان می‌شود که یک بار برنامه باید اجرا شود تا تکرارها را اجرا کند. بعد از هر ارزیابی که صورت می‌گیرد، بخش‌های body و step اجرا خواهند شد. مثال زیر این موضوع را به خوبی نشان می‌دهد.

اعلان متغیر درون خطی در حلقه For

بحث «اعلان متغیر درون خطی» (Inline Variable Declaration) در حلقه For نیز مسئله‌ای مهم است. برای نمونه در مثال زیر شمارنده i به عنوان متغیر درست در داخل حلقه اعلان خواهد شد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

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

نادیده گرفتن اجزای حلقه For در جاوا اسکریپت

هر بخش از حلقه For در جاوا اسکریپت را می‌توان نادیده گرفت. برای مثال، اگر نیاز به انجام هیچ کاری در شروع حلقه وجود نداشته باشد، در نتیجه کاربر می‌تواند بخش begin را نادیده بگیرد.

فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در فرادرس

کلیک کنید

مثال زیر برای درک این موضوع دارای اهمیت است.

همچنین می‌توان بخش  step را نیز به صورت زیر حذف کرد:

با این شرایط، حلقه جدید به نوعی حلقه While در جاوا اسکریپت یعنی while (i < 3)  تبدیل خواهد شد. به صورت کلی هر بخشی از حلقه، قابلیت نادیده گرفته شدن را دارد و می‌توان گفت امکان ساخت حلقه بی‌نهایت با نادیده گرفتن بخش‌های مختلف فراهم است. در ادامه مثالی برای این موضوع ارائه شده است.

• نکته: ۲ علامت نقطه ویرگول ;; حتما باید در شرط حلقه وجود داشته باشد، در غیر این صورت خطای نحوی اتفاق خواهد افتاد.

تفاوت حلقه While با حلقه For در جاوا اسکریپت

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

تصویر زیر برای درک تفاوت حلقه While با حلقه For اهمیت دارد.

مثال زیر برای درک این موضوع آمده است.

نکته مهم این است که حلقه‌های do while و While در جاوا اسکریپت معمولاً زمانی استفاده می‌شوند که تعداد تکرارها نامشخص باشند. مثال زیر این موضوع را نشان می‌دهد.

دستور Break در جاوا اسکریپت

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

برای مثال، در حلقه زیر از کاربر خواسته می‌شود که اعدادی را به عنوان ورودی وارد کند، حال زمانی که کاربر هیچ عددی را وارد نکند، در نتیجه حلقه با استفاده از دستور «Break» متوقف می‌شود. در واقع، Break از اجرای بی‌نهایت باره حلقه جلوگیری می‌کند و برای انواع حلقه، از جمله حلقه While در جاوا اسکریپت کاربرد دارد. در ادامه مثالی در این خصوص ارائه شده است.

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

• نکته: ادغام حلقه‌های بی‌نهایت با دستور Break برای برنامه‌هایی که در آن‌ها شرط‌ها باید در وسط حلقه بررسی شوند، بسیار گزینه مناسبی به‌حساب می‌آید.

دستور Continue در جاوا اسکریپت

یکی دیگر از مباحث مهم پیرامون کار با حلقه‌ها در جاوا اسکریپت، دستور «Continue» است که در این بخش از مطلب مورد بررسی قرار می‌گیرد. در واقع می‌توان گفت دستور Continue در جاوا اسکریپت، نسخه‌ای سبُک‌تر از دستور Break به حساب می‌آید که کل حلقه را متوقف نمی‌کند.

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

در مثال فوق، برای مقادیر زوج i ، دستور Continue اجرای بدنه حلقه را متوقف خواهد کرد و کنترل را به تکرار بعدی For (با عدد بعدی) منتقل می‌کند؛ بنابراین در این مثال، دستور alert فقط برای مقادیر فرد فراخوانی خواهد شد.

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه + گواهینامه در فرادرس

کلیک کنید

• نکته: دستور Continue موجب کاهش ایجاد حلقه‌های تودرتو می‌شود و پیچیدگی را کاهش می‌دهد. برای مثال، حلقه‌ای که مقادیر فرد را نشان می‌دهد می‌تواند به صورت زیر نوشته شود:

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

• نکته: برای ساختارهای نحوی که به صورت «عبارت» (Expressions) نیستند، نمی‌توان از عملگرهای سه‌تایی استفاده کرد و به صورت خاص استفاده از دستورات Break/Continue در آنجا مجاز نیست. مثال زیر برای درک این موضوع ارائه شده است.

اگر مثال فوق به صورت زیر بازنویسی شود، چه اتفاقی خواهد افتاد؟

در اینجا علامت سوال ? (? به جای if ) به عنوان عنصری غیر Expressions دخالت داده شده است و اجرای کدهای بالا با «خطای نحوی» (Syntax Error) مواجه خواهد شد.

برچسب های دستورات Break و Continue

در برخی از موارد لازم است که حلقه‌های تودرتو به صورت هم‌زمان خاتمه یابند.

برای مثال در قطعه کد زیر، کاربر روی i و j حلقه زده و مختصات (i, j) از (0,0) تا (2,2) را درخواست می‌کند.

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

برای مثال، عبارت break <labelName>  در مثال زیر به نوعی برچسب می‌رسد.

در قطعه کد بالا، Break outer به سمت بالا برای برچسبی به نام outer خواهد رسید و از آن حلقه خارج می‌شود. در نتیجه، کنترل برنامه به صورت مستقیم از (*) به alert('Done!') می‌رسد. همچنین امکان انتقال برچسب به خطوط جداگانه نیز وجود دارد که سینتکس زیر این موضوع را نشان می‌دهد.

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

فیلم آموزش مقدماتی نود جی اس Node.js در فرادرس

کلیک کنید

• نکته: برچسب‌ها در کدنویسی جاوا اسکریپت اجازه پرش به هر مکان دلخواهی را نمی‌دهند. برای مثال انجام کار زیر با برچسب غیرممکن است:

دستور Break باید در داخل بلوک کد باشد. از نظر فنی، هر بلوک کد برچسب‌گذاری شده کاری انجام خواهد داد. مثال زیر برای بیان این مفهوم ارائه شده است.

همچنین در ۹۹ درصد موارد، دستور Break در داخل حلقه‌ها استفاده می‌شود.

سؤالات متداول

در ادامه ۴ پرسش و پاسخ متداول از حلقه While در زبان برنامه نویسی جاوا اسکریپت برای درک بهتر آن ارائه شده است.

حلقه While در جاوا اسکریپت چیست‌؟

گزاره یا عبارت While در جاوا اسکریپت حلقه‌ای را ایجاد می‌کند که به وسیله آن گزاره یا عبارتی خاص تا زمان برقرار شدن (True شدن) شرط تعیین شده تکرار و اجرا خواهد شد. در حلقه While جاوا اسکریپت، شرط پیش از اجرای گزاره داخل حلقه ارزیابی می‌شود.

مشکلات استفاده از حلقه While در جاوا اسکریپت چه هستند؟

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

مشکلات رایجی که در هنگام نوشتن حلقه While باید از آن‌ها اجتناب کرد کدامند؟

خطاهای رایج در کد نویسی حلقه‌های While به شرح زیر هستند.

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

چرا از حلقه While برای تکرار عبارت ها استفاده می کنیم؟

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

سخن پایانی

حلقه While در جاوا اسکریپت برای تکرار یک بلوک خاص از کد اصلی به تعداد نامعلوم تا زمانی که شرط برآورده شود موارد استفاده قرار می‌گیرد و از مفاهیم پایه و مقدماتی جاوا اسکریپت به‌حساب می‌آید. در این مطلب آموزشی از مجله فرا درس در رابطه با موضوعاتی مانند حلقه While در Javascript، حلقه do While، حلقه For در جاوا اسکریپت و غیره توضیحاتی کامل همراه با مثال ارائه شد.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

همچنین موضوعاتی مانند خاتمه دادن به حلقه با دستور Break و استفاده از دستور Continue نیز مورد بررسی قرار گرفت و در آخر نیز چند سؤال متداول پیرامون حلقه While در زبان جاوا اسکریپت بیان شد. امید است که این مطلب مورد توجه کاربران عزیز مجله فرادرس قرار گرفته باشد.