5 ترفند جاوااسکریپت که حتما باید یاد بگیری!

امروز میخوام 5 ترفند جاواسکریپت که سرعت و کیفیت کدنویسی رو بهتر میکنه بهت یاد بدم.

1- Destructure کردن در Event Listener ها

خب Destructure کردن توی آبجکت ها که فطعا معرف حضورتون هست. اما تا حالا به این فکر کردی که پارامترهای یک function رو هم با این روش از آبجکت خارج کنی؟ یک مورد خیلی پرکاربرد از اون هم توی Event Listener هاست.

button.addEventListener('click', ({ target }) {
    // is the same as using e.target 👇
    console.log(target);
});

توضیح کد بالا اینه که ما معمولا در event ها، پارامتر e رو از anonymous function دریافت میکنیم تا از پراپرتی هایی مثل e.target توی کدهامون استفاده کنیم. خب از اونجایی که e یک آبجکت هست میتونیم مستقیما با استفاده از Destructure پراپرتی target رو بیرون بکشیم. به همین سادگی!

2- جستجوی پیشرفته در آرایه ها

دیگه وقتشه که توابع indexOf و ... رو بذاری کنار و برای جستجو در المان های آرایه از تابع find استفاده کنی که بهت اجازه جستجوی پیشرفته در آرایه رو میده. چطوری؟

نحوه استفاده از این متد خیلی ساده است و دقیقا مثل تابع map و ... میکنه:

const names = [
    "Sirvan",
    "Mina",
    "Rahman",
    "Ali",
    "Sina"
];

const output = names.find(o => o.startsWith("S"));

console.log(output);
// "Sirvan" 

3- کپی کردن آرایه ها

سوال خیلی ها اینه که چطور میتونیم یک آرایه رو در جاوااسکریپت کپی کنیم؟ جواب من هم اینه که با استفاده از اپراتور Spread میتونی یک آرایه رو در جاوااسکریپت کپی کنی:

const names = ['vahid', 'ali', 'sirvan'];
const copiedNames = [...names];

console.log(copiedNames);
// ['vahid', 'ali', 'sirvan']

console.log(numbers === numbersCopy);
// false

در کد بالا، ما با استفاده از سه نقطه ... (اپراتور Spread) محتویات آرایه names رو داخل متغیر copiedNames کپی کردیم. اما همونطور که میدونی آرایه ها در جاوااسکریپت از نوع refrence هستند نه primitive . بنابراین باید مطمئن بشیم که واقعا عمل کپی اتفاق افتاده نه اینکه همون متغیر names مجددا reassign بشه روی متغیر جدید

به همین دلیل در انتهای کد بالا دو متغیر رو با هم مقایسه کردم که false بودن نتیجه به این معناست که دو متغیر با هم برابر نیستند و در در نتیجه هر کدوم به یک آرایه جداگانه refrence میدن که این یعنی کپی اتفاق افتاده!

4- توابع خود اجرا یا self Invoking Functions

این یکی یک مقدار قدیمی تره. اما همیشه استفاده میشه. این جور توابع (که معادل فارسی سختی داره!) بعد از تعریف خود بخود اجرا میشن و کاربرد اونها هم عمدتا برای تعریف یک متغیر پیچیده است که نیازمند محاسبات برای inintialize شدن هست.

const aComplexVariable = (() => {
    const age_1 = 22;
    const age_2 = 35;

    if (age_1 < age_b) {
        return age_1 + age_2;
    }

    return age_1 * age_2;
})();

قسمت اصلی ماجرا اون دو پرانتزی هست () درست بعد از تعریف تابع قرار گرفته و باعث میشه که این تابع بلافاصله بعد از تعرف اجرا بشه. در نتیجه مقدار خارج شده از تابع در همون ابتدای کار در متغیر aComplexVariable قرار میگیره و نیاز به محاسبات بعد از تعریف متغیر رو از بین میبره

5- حذف مقادیر تکراری از آرایه

خیلی هاتون پرسیدید که چطور در جاوااسکریپت مقادیر تکراری رو از آرایه حذف کنم؟ 

برای حذف المان های تکراری از آرایه ها در جاوااسکریپت کافیه از Set استفاده کنی:

const withDuplicate = [3, 8, 5, 4, 5, 8, 2, 1];
const noDuplicates = Array.from(new Set(withDuplicate));

console.log(noDuplicates);
// [3, 8, 5, 4, 2, 1] 

کلاس Set در جاوااسکریپت متدهای زیادی رو برای کار با المان های غیرتکراری در آرایه ها، در اختیارت قرار میده و همین که یک آرایه رو بهش پاس بدی، مقادیر غیر تکراری اون رو از بین میبره. اما خروجی اون از نوع آرایه نیست و برای اینکه اون رو تبدیل به آرایه کنیم، باید از Array.from1 استفاده کنیم

امیدوارم این ترفندهای جاوااسکریپت بدردت خورده باشه و حداقل یک موضوع جدید از این مطلب یاد گرفته باشی. خوشحالم میشم نظرت رو زیر همین مطلب با من در میون بذاری.