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

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

اینجاست که حلقه‌ها (Loops) در جاوااسکریپت وارد عمل می‌شوند. حلقه به ما اجازه می‌دهد یک بخش از کد را چندین بار و بر اساس یک شرط مشخص اجرا کنیم.

در این مقاله با مهم‌ترین انواع حلقه در جاوااسکریپت یعنی for، while و do...while آشنا می‌شویم و سپس نحوه استفاده از break و continue، حلقه‌های تو در تو و چند مثال عملی را بررسی می‌کنیم.

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

Loop یا حلقه ساختاری در برنامه است که باعث می‌شود یک بخش از کد چندین بار اجرا شود.

به‌عنوان مثال، اگر بخواهیم اعداد ۱ تا ۵ را نمایش دهیم، می‌توانیم این کار را بدون حلقه انجام دهیم:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

اما این روش برای ۱۰۰ یا ۱۰۰۰ عدد اصلاً مناسب نیست.

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

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

خروجی:

1
2
3
4
5

بنابراین یکی از مهم‌ترین کاربردهای حلقه‌ها، کاهش کدهای تکراری است.

حلقه چگونه کار می‌کند؟

تقریباً تمام حلقه‌ها یک مفهوم مشابه دارند:

Start
  ↓
Condition
  ↓
true?
 /   \
Yes   No
 ↓     ↓
Code   End
 ↓
Update
 ↓
Condition

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

این فرآیند تا زمانی ادامه پیدا می‌کند که شرط دیگر صحیح نباشد.

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

یکی از پرکاربردترین حلقه‌ها در جاوااسکریپت، حلقه for است.

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

for (initialization; condition; update) {
    // code
}

حلقه for معمولاً سه قسمت اصلی دارد:

1. Initialization: مقدار اولیه

2. Condition: شرط ادامه حلقه

3. Update: تغییر مقدار

مثال:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

در این مثال:

let i = 1;

مقدار اولیه i برابر ۱ است.

سپس:

i <= 5

بررسی می‌شود.

در پایان هر بار اجرای حلقه:

i++

مقدار i یک واحد افزایش پیدا می‌کند.

بررسی مرحله‌به‌مرحله حلقه for

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

for (let i = 1; i <= 3; i++) {
    console.log(i);
}

مراحل اجرا:

مرحله اول

i = 1
1 <= 3 → true

بنابراین:

console.log(1);

اجرا می‌شود.

سپس:

i++;

و مقدار i برابر ۲ می‌شود.

مرحله دوم

i = 2
2 <= 3 → true

عدد ۲ نمایش داده می‌شود.

سپس i برابر ۳ می‌شود.

مرحله سوم

i = 3
3 <= 3 → true

عدد ۳ نمایش داده می‌شود.

سپس i برابر ۴ می‌شود.

مرحله چهارم

i = 4
4 <= 3 → false

شرط نادرست است، بنابراین حلقه پایان پیدا می‌کند.

مثال ساده: نمایش اعداد

برای نمایش اعداد ۱ تا ۱۰:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

برای نمایش اعداد ۰ تا ۱۰:

for (let i = 0; i <= 10; i++) {
    console.log(i);
}

شمارش معکوس با for

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

for (let i = 10; i >= 1; i--) {
    console.log(i);
}

خروجی:

10
9
8
7
6
5
4
3
2
1

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

افزایش دو واحدی

می‌توانیم مشخص کنیم که مقدار متغیر در هر بار چند واحد تغییر کند.

مثلاً برای نمایش اعداد زوج:

for (let i = 2; i <= 10; i += 2) {
    console.log(i);
}

خروجی:

2
4
6
8
10

یا برای نمایش اعداد فرد:

for (let i = 1; i <= 10; i += 2) {
    console.log(i);
}

خروجی:

1
3
5
7
9

محاسبه مجموع اعداد با for

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

مثلاً مجموع اعداد ۱ تا ۵:

let sum = 0;

for (let i = 1; i <= 5; i++) {
    sum = sum + i;
}

console.log(sum);

خروجی:

15

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

let sum = 0;

for (let i = 1; i <= 5; i++) {
    sum += i;
}

console.log(sum);

ساخت جدول ضرب

یکی از تمرین‌های مناسب برای یادگیری حلقه‌ها، ساخت جدول ضرب است.

مثلاً جدول ضرب عدد ۵:

for (let i = 1; i <= 10; i++) {
    console.log("5 x " + i + " = " + (5 * i));
}

خروجی:

5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

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

نوع دیگری از حلقه‌های مهم جاوااسکریپت، while است.

ساختار کلی:

while (condition) {
    // code
}

در while تا زمانی که شرط true باشد، کد داخل حلقه اجرا می‌شود.

مثال:

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

خروجی:

1
2
3
4
5

در اینجا ابتدا i را خارج از حلقه مقداردهی کردیم.

سپس شرط را نوشتیم:

i <= 5

و در داخل حلقه مقدار آن را افزایش دادیم:

i++;

چرا باید مقدار متغیر را تغییر دهیم؟

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

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

let i = 1;

while (i <= 5) {
    console.log(i);
}

مشکل چیست؟

مقدار i همیشه برابر ۱ باقی می‌ماند.

در نتیجه شرط:

i <= 5

همیشه true خواهد بود.

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

به چنین وضعیتی Infinite Loop یا حلقه بی‌نهایت گفته می‌شود.

نسخه صحیح:

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

حلقه do...while

نوع سوم، حلقه do...while است.

ساختار آن:

do {
    // code
} while (condition);

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

مثال:

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 5);

خروجی:

1
2
3
4
5

تفاوت while و do...while

به این مثال توجه کنید:

let i = 10;

while (i < 5) {
    console.log(i);
}

هیچ خروجی‌ای نداریم، چون شرط از ابتدا false است.

اما:

let i = 10;

do {
    console.log(i);
} while (i < 5);

خروجی:

10

چون do...while ابتدا کد را اجرا می‌کند و سپس شرط را بررسی می‌کند.

مقایسه for، while و do...while

برای مثال اگر بدانیم می‌خواهیم دقیقاً ۱۰ بار کاری را انجام دهیم، for معمولاً انتخاب طبیعی‌تری است:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

اما وقتی تعداد تکرار از قبل مشخص نیست، while می‌تواند مناسب‌تر باشد:

while (condition) {
    // code
}

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

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

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

مثال:

for (let i = 1; i <= 10; i++) {

    if (i === 6) {
        break;
    }

    console.log(i);
}

خروجی:

1
2
3
4
5

وقتی i به ۶ می‌رسد، break اجرا شده و حلقه کاملاً متوقف می‌شود.

کاربرد عملی break

فرض کنید می‌خواهیم اعداد را بررسی کنیم و وقتی به عدد ۷ رسیدیم، عملیات متوقف شود:

for (let i = 1; i <= 20; i++) {

    console.log(i);

    if (i === 7) {
        break;
    }
}

در اینجا بعد از رسیدن به ۷، حلقه پایان پیدا می‌کند.

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

دستور continue با break متفاوت است.

break کل حلقه را متوقف می‌کند.

اما continue فقط اجرای همان تکرار را رد می‌کند و حلقه به تکرار بعدی می‌رود.

مثال:

for (let i = 1; i <= 5; i++) {

    if (i === 3) {
        continue;
    }

    console.log(i);
}

خروجی:

1
2
4
5

عدد ۳ نمایش داده نمی‌شود، اما حلقه ادامه پیدا می‌کند.

تفاوت break و continue

به‌صورت ساده:

break
→ Stop Loop

continue
→ Skip Current Iteration
→ Continue Loop

مثال break:

for (let i = 1; i <= 5; i++) {

    if (i === 3) {
        break;
    }

    console.log(i);
}

خروجی:

1
2

مثال continue:

for (let i = 1; i <= 5; i++) {

    if (i === 3) {
        continue;
    }

    console.log(i);
}

خروجی:

1
2
4
5

حلقه‌های تو در تو یا Nested Loops

گاهی لازم است یک حلقه را داخل حلقه دیگری قرار دهیم. به این ساختار Nested Loop گفته می‌شود.

مثال:

for (let i = 1; i <= 3; i++) {

    for (let j = 1; j <= 3; j++) {
        console.log(i, j);
    }
}

در این حالت، برای هر بار اجرای حلقه بیرونی، حلقه داخلی چند بار اجرا می‌شود.

مثلاً برای i = 1:

1 1
1 2
1 3

سپس برای i = 2:

2 1
2 2
2 3

و برای i = 3:

3 1
3 2
3 3

حلقه‌های تو در تو بعداً در مباحثی مانند آرایه‌ها، جدول‌ها و داده‌های چندبعدی کاربرد زیادی دارند.

یک مثال کاربردی با شرط و حلقه

فرض کنید می‌خواهیم اعداد ۱ تا ۲۰ را بررسی کنیم و فقط اعداد زوج را نمایش دهیم:

for (let i = 1; i <= 20; i++) {

    if (i % 2 === 0) {
        console.log(i);
    }
}

خروجی:

2
4
6
8
10
12
14
16
18
20

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

• حلقه for

• شرط if

• عملگر %

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

این نشان می‌دهد که مفاهیم جاوااسکریپت به یکدیگر وابسته هستند و با ترکیب آن‌ها می‌توان برنامه‌های کاربردی‌تری ایجاد کرد.

مثال: محاسبه تعداد اعداد زوج

می‌توانیم تعداد اعداد زوج بین ۱ تا ۱۰۰ را نیز محاسبه کنیم:

let count = 0;

for (let i = 1; i <= 100; i++) {

    if (i % 2 === 0) {
        count++;
    }
}

console.log(count);

خروجی:

50

متغیر count تعداد اعداد موردنظر را نگهداری می‌کند.

مثال: پیدا کردن اولین عدد بزرگ‌تر از ۵۰

می‌توانیم از break برای متوقف کردن حلقه پس از پیدا کردن نتیجه موردنظر استفاده کنیم:

for (let i = 1; i <= 100; i++) {

    if (i > 50) {
        console.log("Found:", i);
        break;
    }
}

خروجی:

Found: 51

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

اشتباهات رایج در استفاده از حلقه‌ها

۱. ایجاد حلقه بی‌نهایت

کد زیر مشکل دارد:

let i = 1;

while (i <= 10) {
    console.log(i);
}

چون i هیچ‌وقت تغییر نمی‌کند.

نسخه صحیح:

let i = 1;

while (i <= 10) {
    console.log(i);
    i++;
}

۲. استفاده از شرط اشتباه

مثلاً:

for (let i = 1; i >= 10; i++) {
    console.log(i);
}

این حلقه از ابتدا اجرا نمی‌شود، چون:

1 >= 10

برابر false است.

۳. اشتباه در محدوده

این دو حلقه رفتار متفاوتی دارند:

for (let i = 1; i < 5; i++) {
    console.log(i);
}

خروجی:

1
2
3
4

اما:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

خروجی:

1
2
3
4
5

بنابراین باید به تفاوت < و <= توجه کنیم.

۴. تغییر اشتباه متغیر

مثلاً:

for (let i = 1; i <= 10; i--) {
    console.log(i);
}

این حلقه می‌تواند به وضعیت نامناسبی برسد، چون مقدار i به‌جای افزایش، کاهش پیدا می‌کند.

۵. پیچیده کردن بیش از حد حلقه

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

مثلاً ابتدا این ساختار را کاملاً یاد بگیرید:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

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

نکات مهم برای نوشتن حلقه‌های بهتر

برای نوشتن حلقه‌های قابل فهم:

• از نام‌های مناسب برای متغیرها استفاده کنید.

• شرط پایان حلقه را واضح بنویسید.

• مطمئن شوید حلقه در نهایت متوقف می‌شود.

• از break فقط زمانی استفاده کنید که واقعاً نیاز است.

• از حلقه‌های تو در تو فقط در مواقع ضروری استفاده کنید.

• از let برای متغیر شمارنده در مثال‌های معمول استفاده کنید.

• از پیچیده کردن بیش از حد شرط حلقه خودداری کنید.

تمرین‌های عملی

تمرین ۱

برنامه‌ای بنویسید که اعداد ۱ تا ۲۰ را نمایش دهد.

تمرین ۲

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

تمرین ۳

مجموع اعداد ۱ تا ۱۰۰ را با استفاده از حلقه محاسبه کنید.

تمرین ۴

جدول ضرب عدد ۷ را از ۱ تا ۱۰ نمایش دهید.

تمرین ۵

با استفاده از while اعداد ۱۰ تا ۱ را به‌صورت معکوس نمایش دهید.

تمرین ۶

برنامه‌ای بنویسید که اعداد ۱ تا ۲۰ را نمایش دهد، اما عدد ۱۰ را با استفاده از continue نمایش ندهد.

تمرین چالشی

برنامه‌ای بنویسید که اعداد ۱ تا ۱۰۰ را بررسی کند و اولین عددی که هم زوج و هم بزرگ‌تر از ۷۰ است را پیدا کند و پس از پیدا کردن آن حلقه را با break متوقف کند.

راهنمای شروع:

for (let i = 1; i <= 100; i++) {

    // Check condition

}

جمع‌بندی

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

یاد گرفتیم:

• حلقه چیست و چرا از آن استفاده می‌کنیم.

• ساختار و نحوه کار حلقه for چیست.

• چگونه با for شمارش صعودی و نزولی انجام دهیم.

• چگونه مجموع اعداد را محاسبه کنیم.

• چگونه از while استفاده کنیم.

• تفاوت while و do...while چیست.

• چگونه با break حلقه را متوقف کنیم.

• چگونه با continue یک تکرار را رد کنیم.

• حلقه‌های تو در تو یا Nested Loops چه هستند.

• چگونه حلقه‌ها را با شرط‌های if ترکیب کنیم.

• چگونه از ایجاد حلقه بی‌نهایت جلوگیری کنیم.

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