حلقه‌ها | آموزش جاوااسکریپت به زبان ساده

درود دوستان! توی این قسمت‌ها می‌خوایم با یکی دیگه از ویژگی‌های پرکاربرد هر زبان آشنا بشیم: حلقه یا Loop.
 

حلقه چیه؟ 🤔

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

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

alert(1);
alert(2);
alert(3);
alert(4);
alert(5);
alert(6);
alert(7);
alert(8);
alert(9);
alert(10);

همونطور که می‌بینیم، به ازای هر عدد داریم تابع alert رو خودمون تکرار می‌کنیم. حالا اگه بخوایم اعداد ۱ تا ۱۰۰ رو نمایش بدیم چطور؟ 🤯 خب توی همین شرایط بود که حلقه‌ها اختراع شدن.

با استفاده از حلقه‌ها، به جای اینکه خودمون به صورت دستی ۱۰۰ تا alert بنویسیم، فقط یک alert بنویسیم و جاوااسکریپت ۱۰۰ بار اون رو تکرار می‌کنه 👌

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

توی این قسمت‌ها موارد زیر رو یاد می‌گیریم:

• چند نوع حلقه داریم؟
• حلقه while
• شرط شروع و پایان حلقه
• کلمه‌کلیدی break
• کلمه‌کلیدی continue
• حلقه do...while
• حلقه for

چند نوع حلقه داریم؟

جاوااسکریپت مثل اکثر زبان‌های دیگه از سه حلقه while و do...while و for پشتیبانی می‌کنه. علاوه بر اینها، چند حلقه اختصاصی مثل for...of و for...in توی جاوااسکریپت داریم که بعداً با اونها آشنا می‌شیم.

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

حلقه while

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

while (condition) {
  // code
}

توی این کد، دستوراتی که می‌خوایم جاوااسکریپت اون رو تکرار کنه رو توی بدنه حلقه که فضای بین براکت‌ها { } هست می‌نویسیم. اما اینکه دستورات ما چقدر تکرار بشن بستگی به condition داره.

قسمت condition، شرط حلقه هست و اونجا باید مشخص کنیم که حلقه چند بار باید تکرار انجام بده. اگه condition یک مقدار truthy باشه حلقه به اجرای دستورات می‌پردازه.

بیاین مثال alert ها رو با این حلقه بنویسیم. البته برای راحتی کار از console.log استفاده کردیم:

let counter = 1;

while (counter <= 100) {
  console.log(counter);

  counter++;
}

اگه دکمه ► رو بزنیم و کنسول مرورگر رو باز کنیم، می‌بینیم که اعداد ۱ تا ۱۰۰ برای ما چاپ شدن.

توی این کد چه اتفاق‌هایی افتاد؟

۱. ابتدا توی خط اول یک متغیر تعریف کردیم به اسم counter یا شمارنده. شمارنده رو از شماره 1 شروع کردیم.

۲. توی قسمت شرطِ حلقه، گفتیم که شرط تکرار شدن حلقه این باشه که مقدار شمارنده کوچیک‌تر یا مساوی 100 باشه. پس تا زمانی که مقدار counter کوچیک‌تر یا مساوی 100 باشه، counter <= 100 یک عبارت truthy هست و دستوراتی که توی بدنه نوشتیم برای ما اجرا میشه. تا اینجا حلقه بی‌نهایت بار تکرار میشه. مگر اینکه کاری کنیم که مقدار counter بزرگتر از 100 بشه تا قسمت شرط دیگه truthy نباشه و حلقه متوقف بشه. این کار رو توی خط ۶ انجام دادیم.

۳. توی قسمت بدنه برای نمایش دادن مقدار شمارنده به کاربر از console.log استفاده کردیم. توی خط بعد با عملگر ++ یک واحد به مقدار شمارنده counter اضافه کردیم. با این کار، هر بار که حلقه تکرار انجام میده، یک واحد به مقدار شمارنده اضافه میشه. پس:

همونطور که می‌بینیم، توی تکرار شماره 100، مقدار counter میشه 101. اینجاست که شرط حلقه یعنی counter <= 100 دیگه برقرار نیست و نهایتاً حلقه متوقف میشه. این بود جزییات همه کارهایی که انجام شد ¯/_(ツ)_\¯

شرط شروع و پایان حلقه‌ها

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

حلقه چطوری شروع میشه؟ 🤔

کد زیر رو در نظر بگیرید:

while (condition) {

}

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

حلقه چطوری متوقف میشه؟ 🤔

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

حلقه while زیر رو در نظر بگیرید:

let counter = 1;

while (counter <= 100) {
  console.log(counter);
}

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

while (true) {
 // Infinite loop
}

کلمه‌کلیدی break

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

while (true) {
  const number = prompt('Enter 1');

  if (number == 1) {
    <<break>>;
  }
}

این کد ظاهراً یک حلقه بی‌نهایت هست. چون قسمت شرط یعنی true یک مقدار همیشه truthy هست. با اجرا شدن این کد یک کادر درخواست ورودی باز میشه. توی این ورودی اگه هر عددی غیر از 1 وارد بشه، حلقه فعال هست و دائم تکرار انجام می‌گیره. اما با وارد شدن عدد 1، کد به خط ۵ می‌رسه و کلمه‌کلیدی break باعث میشه حلقه متوقف بشه.

کلمه‌کلیدی continue

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

let counter = 0;

while (counter <= 100) {
  counter++;

  if (counter % 2 === 1) {
    <<continue>>;
  }

  console.log(counter);
}

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

این کد همون کد شمارنده ابتدای پست هست. فقط یک شرط if توی خط ۶ به اون اضافه شده. این شرط بررسی می‌کنه که آیا باقیمانده‌ی تقسیم counter بر 2، عدد 1 هست یا خیر. اگه باقیمانده 1 باشه یعنی توی این تکرار، مقدار شمارنده یک عدد فرد هست، بنابراین شرط if برقرار میشه و کد به قسمت continue می‌رسه، کار این تکرار به پایان می‌رسه و در نتیجه کدهای بعدی اجرا نمیشن و حلقه بلافاصله تکرار بعدی رو شروع می‌کنه.

البته این کد رو می‌تونستیم به روش‌های دیگه و بدون continue هم بنویسیم:

let counter = 1;

while (counter <= 100) {
  if (counter % 2 === 0) {
    console.log(counter);
  }

  counter++;
}

یا:

let counter = 2;

while (counter <= 100) {
  console.log(counter);

  counter += 2;
}

حلقه do...while

این حلقه ساختاری به صورت زیر داره:

do {
  // code
} while (condition);

بدنه‌ی این حلقه که توی اون کدهای دلخواهمون رو برای تکرار شدن می‌نویسیم، فضای بین براکت‌ها {} هست که از do شروع میشه تا while. قسمت condition شرطی هست که بعد از هر تکرار بررسی میشه.

حلقه while و do...while چه تفاوت‌هایی دارن؟ 🤔

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

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

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

do {
  alert("Hi");
} while (false);

برای دیدن خروجی دکمه ► رو بزنین. همونطور که می‌بینیم با اینکه توی قسمت شرط یک مقدار falsy نوشتیم، حلقه (یک بار) اجرا شد.

کلمه‌های کلیدی break و continue برای این حلقه هم کاربرد مشابهی دارن.

خب دوستان تونستیم با کاربرد حلقه‌ها آشنا بشیم و دیدیم که چطوری می‌تونیم از نوشتن کدهای تکراری جلوگیری کنیم. توی این قسمت با کلمه‌های کلیدی break و continue آشنا شدیم. ما این کلمه‌های کلیدی رو توی بقیه حلقه‌ها هم داریم. توی قسمت بعدی با پرکاربردترین حلقه یعنی for آشنا می‌شیم. روزتون خوش 😉🙌