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

متد ()filter چیست؟

متد ()filter تمام المنت‌هایی از آرایه که شرایط مشخص شده در تابع callback را داشته باشد، برمی‌گرداند. در ادامه با یک مثال نحوه کارکرد این متد را بررسی خواهیم کرد:

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el*2 === 2);

console.log("y is: ", y); // y is: [1]

اگر خروجی مثال بالا را بررسی کنیم مقدار y آرایه‌ای متشکل از ۱ المنت می‌باشد که شرط تعیین شده را برآورده می‌کند. این به این دلیل است که متد ()filter روی تمام المنت‌های آرایه تکرار می‌شود و درنهایت یک آرایه فیلتر شده که شرایط مشخص شده را داشته باشد return می‌کند.

متد ()find چیست؟

متد ()find اولین المنت از آرایه که شرایط مشخص شده در تابع callback را داشته باشد، برمی‌گرداند. در ادامه آن را با یک مثال بررسی می‌کنیم:

const x = [1, 2, 3, 4, 5];

const y = x.find(el => el*2 === 2);

console.log("y is: ", y); // y is: 1

اکنون اگر خروجی مثال بالا را ببینیم مقدار y برابر با ۱ است. دلیل این اتفاق این است که متد ()find اولین المنتی را در آرایه جستجو می‌کند که شرایط تعیین شده را داشته باشد.

تفاوت اصلی بین مثال‌های بالا عبارتند از:

1. متد ()filter آرایه‌ای را برمی‌گرداند که حاوی المنتی است که شرط را داشته باشد، اما متد ()find خود المنتی که شامل شرط تعیین شده باشد را return می‌کند.
2. در متد ()filter، با وجود اینکه المنت مورد جستجو در ابتدا قرار دارد اما متد روی کل آرایه تکرار می‌شود. اما در متد ()find، به محض اینکه المنت مورد نظر پیدا شود جستجو پایان یافته و المنت return می‌شود.

موارد استفاده از متدهای ()find و ()filter

اگر موردی داریم که انتظار می‌رود خروجی نهایی بیش از یک المنت باشد و قصد داریم تا عملیات مورد نظر خود را روی همه المنت‌های موجود انجام دهیم، می‌توانیم از متد ()filter استفاده کنیم. اما اگر غیر این باشد یعنی خروجی نهایی تنها یک المنت از آرایه می‌باشد، در این صورت می‌توانیم متد ()find را مورد استفاده قرار دهیم و از تکرارهای اضافی اجتناب کنیم.

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

مثال متد ()filter

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el%2 === 0);

console.log("y is: ", y); // y is: [2, 4]

در مثال بالا استفاده از متد ()filter منطقی‌تر است زیرا می‌خواهیم شرط مورد نظر خود را روی تمام المنت‌های آرایه تکرار کنیم تا عناصری که بر ۲ بخش‌پذیر هستند را پیدا کنیم.

مثال متد ()find

const emp = [
    {
        name: "Ram",
        empID: 101
    },
    {
        name: "Sham",
        empID: 102
    },
    {
        name: "Mohan",
        empID: 103
    }
];

const res = emp.find(el => el.empID === 102);

console.log("res is: ", res); // res is: {name: 'Sham', empID: 102}

در مثال بالا استفاده از متد ()find منطقی‌تر می‌باشد زیرا فقط یک کارمند وجود دارد که empID آن برابر با مقدار ۱۰۲ باشد، بنابراین متد ()find به جلوگیری از تکرار عمل جستجو روی آبجکت‌های دیگر در آرایه موجود کمک می‌کند.

جمع‌بندی

در طول توسعه برنامه ممکن است با چالش‌هایی مواجه شویم که برای برطرف کردن آن‌ها لازم است تا آیتم‌های تکی و یا چندگانه منطبق با یک شرط به خصوصی را از یک آرایه استخراج کنیم. این کار را با روش‌های مختلفی می‌توانیم انجام دهیم که یکی از آن‌ها استفاده از متد ()find و ()filter در جاوااسکریپت است. در این مقاله این دو متد را باهم بررسی کردیم و با تفاوت بین آن‌ها آشنا شدیم.