ترفندهای کاربردی جاوا اسکریپت که باید بدانید: 14 ترفند
جاوا اسکریپت یک زبان برنامه نویسی قدرتمند و همه کاره است که در توسعه وب بسیار پرکاربرد است. این مقاله به شما 14 ترفند و تکنیک کاربردی جاوا اسکریپت را آموزش می دهد که میتوانند به شما در نوشتن کد کارآمدتر و خواناتر کمک کنند. در اینجا لیستی از ترفندهای جاوا اسکریپت آورده شده است که میتوانید از آنها در پروژه های خود استفاده کنید:
- ✔️
تبدیل سریع به Boolean:
برای تبدیل یک مقدار به نوع Boolean از عملگر نفی مضاعف (!!) استفاده کنید. به عنوان مثال: !!string مقدار true را برمی گرداند. - ✔️
دریافت آخرین آیتم یک آرایه:
برای دسترسی به آخرین عنصر یک آرایه میتوانید از array[array.length – 1] استفاده کنید یا روش کوتاه تر array.slice(-1)[0] را امتحان کنید. - ✔️
تبدیل NodeList به Array:
از Array.from(document.querySelectorAll(p)) برای تبدیل یک NodeList به یک آرایه واقعی استفاده کنید. این کار امکان بهرهگیری از متدهای آرایه را روی گره های DOM فراهم می کند. - ✔️
کوتاه کردن آرایه:
با تنظیم مقدار array.length میتوانید یک آرایه را کوتاه کنید. مثلا array.length = 3 آرایه را به 3 عنصر اول محدود می کند. - ✔️
ادغام چند شیء:
از عملگر spread (. . . ) برای ادغام چند شیء در یک شیء جدید استفاده کنید. به عنوان مثال: const merged = {. . .obj1, . . .obj2}; - ✔️
اعتبارسنجی پارامترهای تابع:
با بهرهگیری از ویژگی های پیش فرض پارامترهای تابع (default parameter values) میتوانید از تعریف نشده بودن یک پارامتر جلوگیری کنید. مثال: function myFunction(param1 = default value) { . . . } - ✔️
حذف موارد تکراری از یک آرایه:
برای حذف موارد تکراری از یک آرایه میتوانید از [. . .new Set(array)] استفاده کنید. - ✔️
بهرهگیری از Destructuring Assignment:
این قابلیت امکان استخراج آسان مقادیر از اشیاء و آرایه ها را فراهم می کند. به عنوان مثال: const { name, age } = person; - ✔️
بهرهگیری از Template Literals:
برای ایجاد رشته های پویا با قابلیت قرار دادن متغیرها درون رشته، از template literals (با بهرهگیری از بک تیک ) استفاده کنید. مثال: const greeting = Hello, ${name}!; - ✔️
تبدیل یک عدد به رشته:
به جای بهرهگیری از toString() میتوانید به سادگی یک رشته خالی به عدد اضافه کنید: 5 + “”. - ✔️
بررسی وجود یک ویژگی در یک شیء:
به جای بهرهگیری از hasOwnProperty() میتوانید از عملگر in استفاده کنید. مثال: propertyName in object. - ✔️
گرفتن یک عدد تصادفی در یک محدوده مشخص:
از تابع زیر استفاده کنید: Math.floor(Math.random() (max – min + 1)) + min. - ✔️
بهرهگیری از console.table():
برای نمایش داده های آرایه ای یا شیء به صورت جدولی در کنسول مرورگر. - ✔️
بهرهگیری از عملگر کاما (comma operator):
به شما اجازه می دهد چندین عبارت را در یک خط بنویسید. مقدار آخرین عبارت برگردانده می شود. مثال: let x = (1, 2, 3); // x = 3
این ترفندها تنها بخش کوچکی از امکانات و قابلیت های جاوا اسکریپت هستند. با یادگیری و بهرهگیری از این تکنیک ها میتوانید کد خود را بهینه تر و کارآمدتر کنید.
14 ترفند کاربردی جاوا اسکریپت برای توسعه دهندگان
1. بهرهگیری از عملگر Nullish Coalescing (??)
عملگر Nullish Coalescing (??) راهی مختصر برای ارائه یک مقدار پیشفرض زمانی است که یک مقدار null یا undefined باشد. این عملگر بر خلاف عملگر || که مقادیر falsy را نیز پوشش میدهد، فقط روی null و undefined اعمال میشود. مثال: const name = user.name ?? کاربر مهمان; اگر user.name مقدار null یا undefined باشد، name برابر با کاربر مهمان خواهد شد. این کار خوانایی کد را افزایش می دهد و از بروز خطاهای غیرمنتظره جلوگیری می کند. این عملگر مخصوصا زمانی مفید است که بخواهید مقادیر پیش فرض برای تنظیمات یا داده های API که ممکن است مقدار نداشته باشند را تعیین کنید.
2. خلاصهنویسی اشیاء (Object Shorthand Notation)
اگر کلیدی در یک شیء هم نام با متغیری باشد که می خواهید مقدار آن را قرار دهید، میتوانید از خلاصه نویسی اشیاء استفاده کنید. مثال: const name = علی; const age = 30; const user = { name, age }; // به جای { name: name, age: age } این کد بسیار تمیزتر و خواناتر است.
3. بهرهگیری از Optional Chaining (?. )
Optional Chaining یک راه حل عالی برای جلوگیری از خطاهای TypeError: Cannot read property of undefined است. این عملگر به شما امکان می دهد زنجیره ای از خواص را با خیال راحت دسترسی پیدا کنید. مثال: const street = user?.address?.street; اگر user یا user.address مقدار null یا undefined داشته باشند، street برابر با undefined خواهد شد، بدون اینکه خطایی رخ دهد. این ویژگی مخصوصا هنگام کار با دادههای API که ممکن است ساختار متغیری داشته باشند مفید است.
4. Destructuring Assignment
Destructuring Assignment به شما اجازه می دهد که مقادیر را از اشیاء یا آرایه ها به متغیرها استخراج کنید. مثال: const { name, age } = user; این کد مقدار user.name را به متغیر name و مقدار user.age را به متغیر age اختصاص می دهد. Destructuring Assignment باعث می شود کد شما خواناتر و تمیزتر باشد.
5. Spread Operator (. . . )
Spread Operator میتواند برای کپی کردن آرایه ها یا اشیاء، ادغام آنها و یا ارسال آرگومان های نامحدود به یک تابع استفاده شود. مثال: const newArray = [. . .oldArray]; // کپی کردن آرایه const mergedObject = {. . .object1, . . .object2}; // ادغام اشیاء function sum(. . .numbers) { / . . . / } // ارسال آرگومان های نامحدود
6. بهرهگیری از Template Literals
Template Literals به شما امکان می دهند رشته هایی را با قابلیت درج متغیرها و عبارات ایجاد کنید. مثال: const name = علی; const greeting = سلام ${name}!; این کار کد را خواناتر می کند و از بهم ریختگی رشته ها جلوگیری می کند.
7. متدهای آرایه ای جدید: map، filter، reduce
متدهای map، filter و reduce به شما امکان می دهند عملیات های پیچیده را روی آرایه ها به صورت مختصر و خوانا انجام دهید. map برای تبدیل هر عنصر آرایه به یک مقدار جدید استفاده می شود. filter برای ایجاد یک آرایه جدید شامل فقط عناصری است که یک شرط خاص را برآورده می کنند. reduce برای تجمیع مقادیر آرایه به یک مقدار واحد استفاده می شود.
8. بهرهگیری از Async/Await
Async/Await راهی ساده تر و خواناتر برای کار با کد ناهمزمان است. این ویژگی به شما اجازه می دهد تا کد ناهمزمان را به شکلی بنویسید که شبیه کد همزمان باشد. مثال: async function fetchData() { const response = await fetch(https://example.com/data); const data = await response.json(); return data; }
9. بهرهگیری از Set برای حذف مقادیر تکراری
اگر می خواهید مقادیر تکراری را از یک آرایه حذف کنید، میتوانید از Set استفاده کنید. Set یک مجموعه است که فقط میتواند مقادیر منحصر به فرد را در خود نگه دارد. مثال: const uniqueArray = [. . .new Set(myArray)];
10. بهرهگیری از console.table() برای نمایش داده های ساختار یافته
به جای بهرهگیری از console.log() برای نمایش اشیاء و آرایه ها، میتوانید از console.table() استفاده کنید. این متد داده ها را به صورت یک جدول مرتب و خوانا در کنسول نمایش می دهد.
11. بهرهگیری از Closure ها
Closure ها توابعی هستند که به متغیرهای محدوده بیرونی خود دسترسی دارند، حتی پس از اینکه تابع بیرونی اجرا شده است. این ویژگی میتواند برای ایجاد متغیرهای خصوصی و یا پیاده سازی الگوهای طراحی مختلف مفید باشد.
12. دیباگ کردن با بهرهگیری از debugger;
برای توقف اجرای کد در یک نقطه خاص و بررسی وضعیت برنامه، میتوانید از دستور debugger; استفاده کنید. این دستور به مرورگر اعلام می کند که اجرای کد را متوقف کند و ابزارهای دیباگ را باز کند.
13. بهرهگیری از WeakMap و WeakSet
WeakMap و WeakSet نسخه هایی از Map و Set هستند که ارجاع های ضعیفی به کلیدها و مقادیر خود دارند. این به این معنی است که اگر کلید یا مقدار دیگری به آن اشاره نکند، میتواند توسط Garbage Collector جمع آوری شود. این ویژگی از نشت حافظه جلوگیری می کند.
14. اجتناب از بهرهگیری از “==” و ترجیح دادن “===”
عملگر “==” فقط مقادیر را مقایسه می کند و تبدیل نوع را انجام می دهد، در حالی که “===” هم مقدار و هم نوع را مقایسه می کند. بهرهگیری از “===” ایمن تر است و از رفتارهای غیرمنتظره جلوگیری می کند.
