حلقه های for in و for of در javaScript

مقدمه

با حلقه for کلاسیک که مثل زبان C عمل میکنه کم و بیش آشنایی داریم. این for کلاسیک که ۳ تا statement می گرفت همین الان هم همه نیاز هامون رو می تونه بر طرف کنه ولی در ورژن های جدید تر jS حلقه های for جدیدی اضافه شدن که کار رو راحت تر میکنن. با استفاده از حلقه های for in و for of احتمال خطا هم کاهش پیدا میکنه. از طرفی کد کوتاه تر و خوانا تر میشه. در ادامه این مقاله به بررسی این حلقه های مدرن میپردازیم.

حلقه for in

این حلقه بین کلید های (key) های یک object گردش میکنه. مثال زیر رو در نظر بگیر:

const user = {
    name: 'bizhan',
    age: 26,
    type: 'admin'
};

همون طور که می بینی یک object به اسم user داریم که از جفت های key : value درست شده. فرض کن لازم داریم که اسامی key ها رو دونه به دونه پرینت بگیریم. با حلقه for کلاسیک باید این طوری می گفتیم:

const keys = Object.keys(user);
for (let i = 0; i < keys.length; i++) {
    console.log(keys[i]);
}

ولی با حلقه for in خیلی راحت و ساده این طوری می نویسیم:

for (let key in user) {
    console.log(key);
}

اگه با زبان Python یا Bash هم کار کرده باشی اون جا هم for in هست ولی حواست باشه که با این for in که در jS هست دقیقا یکی نیست. اگه سعی کنی همین for in رو روی یک آرایه ساده پیاده کنی می بینی که به جای مقادیر اون آرایه، index ها رو میده:

const evens = [2,4,6,8];
for (let num in evens) {
     console.log(num);    // 0, 1, 2, 3
}

البته می شه که کد بالا رو به صورت زیر نوشت تا به مقادیر برسیم:

for (let num in evens) {
      console.log(evens[num]);    // 2, 4, 6, 8
}

ولی در این صورت ممکنه که مقادیر به ترتیب پرینت نشن. واسه همین بهتره که کلا آرایه ها رو با for in ترکیب نکنیم. برای گردش در یک آرایه بهتره از for کلاسیک، متد forEach که روی خود آرایه هست و یا حلقه for of استفاده کنیم.

حلقه for of

این حلقه میان مقادیر یک شئ iterable می چرخه. پس بر خلاف for in که میان key ها می چرخید این حلقه میان value ها می چرخه. منظور از iterable هر شئ ای هست که بشه توش iterate کرد. مثلا آرایه ها، رشته ها، NodeList ها و ... مثال زیر رو در نظر بگیر:

const odds = [1,3,5,7];

با حلقه for کلاسیک که همه میدونیم چطوری میشه دونه به دونه عناصر odds رو پرینت کرد. در بالا با for in هم این کار رو انجام دادیم (هر چند توصیه نمیشه). حالا همین کار رو با for of انجام میدیم که ساده تر از همه است:

for (let num of odds) {
    console.log(num);
}

نتیجه گیری

همون طوری که jS توی اعلان متغیر ها به ما ۴ تا حالت داده (let, const, var و بدون کلیدواژه اعلان کردن) این جا هم بهمون ۴ نوع حلقه داده (for, for in, for of, while)! درکش برای من به شخصه عجیبه که چرا jS این قدر مسئله رو برای خودش پیچیده میکنه. مثلا تو زبان پایتان شما کلا یک for in داری و while و باهاش هر کاری می تونی بکنی. شاید دلیل این که jS این قدر زبان متنوع و گسترده ای هست سر و کله زدن با مرورگر های مختلف و همه فن حریف بودنشه.