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

• ✅

  تبدیل سریع به Boolean:

  بهره‌گیری از !! برای تبدیل هر مقداری به مقدار Boolean (true یا false). برای مثال: !!سلام نتیجه true و !!0 نتیجه false می دهد.
• ✅

  ادغام چند شیء:

  بهره‌گیری از عملگر spread (. . . ) برای ادغام چند شیء در یک شیء جدید. این کار باعث می شود که کد شما مختصرتر و خواناتر شود. مثال: const obj = {. . .obj1, . . .obj2};
• ✅

  مقادیر پیش فرض برای پارامترهای تابع:

  می‌توانید مقادیر پیش فرض را مستقیماً در تعریف تابع برای پارامترها مشخص کنید. مثال: function greet(name = کاربر) { console.log(سلام ${name}!); }
• ✅

  کوتاه نویسی شرطی با عملگر Ternary:

  به جای بهره‌گیری از دستور if. . .else برای شرط های ساده، از عملگر ternary استفاده کنید: condition ? valueIfTrue : valueIfFalse.
• ✅

  بهره‌گیری از Template Literals:

  بجای علامت + از template literals () برای ساخت رشته ها استفاده کنید.
• ✅

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

  بهره‌گیری از new Set() برای ایجاد یک مجموعه منحصر به فرد از عناصر آرایه و سپس تبدیل دوباره آن به آرایه با بهره‌گیری از spread operator (. . . ). مثال: [. . .new Set(array)]
• ✅

  یافتن Min و Max در آرایه:

  بهره‌گیری از Math.min() و Math.max() همراه با spread operator برای یافتن کمترین و بیشترین مقدار در یک آرایه. مثال: Math.min(. . .array).
• ✅

  تبدیل NodeList به Array:

  بهره‌گیری از Array.from() برای تبدیل یک NodeList (مانند خروجی document.querySelectorAll()) به یک آرایه. این به شما امکان می دهد از متدهای آرایه مانند forEach() روی NodeList استفاده کنید.
• ✅

  اجرای توابع به صورت شرطی با عملگر &:

  اگر فقط می خواهید یک تابع را در صورت درست بودن یک شرط اجرا کنید، می‌توانید از عملگر && استفاده کنید: condition && myFunction()
• ✅

  کنسول با استایل:

  برای زیباسازی خروجی های console.log در کنسول مرورگر میتوانید استایل های css به کنسول دهید. برای مثال: console.log(%c سلام دنیا!, color: blue; font-size: 20px;);
• ✅

  بهره‌گیری از Destructuring Assignment:

  برای استخراج مقادیر از اشیاء و آرایه ها به روشی تمیز و مختصر استفاده کنید. مثال: const { name, age } = person;
• ✅

  غیر فعال کردن console.log در production:

  می‌توانید در محیط production دستور console.log را با دستور noop جایگزین کنید console.log = function() {};
• ✅

  JSON.stringfy با فرمت زیبا:

  هنگام تبدیل یک شیء جاوا اسکریپت به JSON با بهره‌گیری از JSON.stringify()، می‌توانید از پارامترهای سوم و چهارم برای فرمت بندی خروجی استفاده کنید: JSON.stringify(myObject, null, 2);. پارامتر سوم تعداد فاصله ها را برای تورفتگی مشخص می کند.

13 ترفند جادویی در جاوا اسکریپت که باید بدانید!

1. بهره‌گیری از عملگر Nullish Coalescing (??)

این عملگر یک راه ساده برای اختصاص دادن یک مقدار پیش‌فرض به یک متغیر است، در صورتی که مقدار آن null یا undefined باشد. به عنوان مثال: const username = user.name ?? Guest; اگر user.name مقدار داشته باشد، به username اختصاص داده می‌شود، در غیر این صورت مقدار Guest به آن اختصاص می‌یابد. تفاوت آن با عملگر || در این است که عملگر ?? فقط در صورتی که مقدار null یا undefined باشد مقدار پیش‌فرض را برمی‌گرداند، در حالی که || مقادیر falsy دیگر مانند 0 یا را نیز نادیده می‌گیرد. این عملگر در ES2020 معرفی شده است.

2. کوتاه کردن آرایه‌ها با Length

با تغییر طول یک آرایه با بهره‌گیری از ویژگی length، می‌توانید به راحتی عناصر انتهای آن را حذف کنید. برای مثال: const array = [1, 2, 3, 4, 5]; array.length = 3; // array now is [1, 2, 3] این روش سریع و آسان است و بدون نیاز به متدهای پیچیده، آرایه را تغییر می‌دهد.

3. بهره‌گیری از Object.freeze() برای جلوگیری از تغییرات

با بهره‌گیری از Object.freeze() می‌توانید یک شیء را غیرقابل تغییر کنید. این به این معنی است که نمی‌توانید ویژگی‌های جدید اضافه کنید، ویژگی‌های موجود را حذف کنید یا مقادیر آنها را تغییر دهید. const obj = { name: Ali }; Object.freeze(obj); obj.name = Reza; // This will not work in strict mode, otherwise ignored این روش برای جلوگیری از تغییرات ناخواسته در اشیاء مهم بسیار مفید است.

4. تبدیل به Boolean با بهره‌گیری از !!

با بهره‌گیری از عملگر !! (NOT NOT) می‌توانید هر مقداری را به یک مقدار Boolean تبدیل کنید. const value = "Hello"; const booleanValue = !!value; // booleanValue is true این روش کوتاه و سریع برای چک کردن وجود یا عدم وجود مقدار است.

5. ادغام اشیاء با بهره‌گیری از Spread Operator (. . . )

عملگر Spread به شما اجازه می‌دهد تا به راحتی ویژگی‌های یک شیء را در یک شیء دیگر کپی کنید. const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const mergedObj = { . . .obj1, . . .obj2 }; // mergedObj is { a: 1, b: 2, c: 3, d: 4 } این روش برای ادغام اشیاء بدون تغییر اشیاء اصلی بسیار کارآمد است.

6. بهره‌گیری از Template Literals برای رشته‌های چند خطی

Template Literals به شما امکان می‌دهند تا رشته‌های چند خطی را به راحتی ایجاد کنید و همچنین مقادیر متغیرها را در داخل رشته قرار دهید. const name = "Ali"; const message = Hello, ${name}! This is a multi-line string. ; این روش خوانایی کد را افزایش می‌دهد و از مشکلات مربوط به اتصال رشته‌ها با + جلوگیری می‌کند.

7. بهره‌گیری از Destructuring Assignment

Destructuring Assignment به شما اجازه می‌دهد تا به راحتی مقادیر یک شیء یا آرایه را به متغیرهای جداگانه اختصاص دهید. const person = { name: Ali, age: 30 }; const { name, age } = person; // name is Ali, age is 30 این روش کد را مختصرتر و خواناتر می‌کند، مخصوصا زمانی که با اشیاء یا آرایه‌های پیچیده کار می‌کنید.

8. بهره‌گیری از Optional Chaining (?. )

Optional Chaining به شما امکان می‌دهد تا به ویژگی‌های یک شیء عمیقاً تو در تو دسترسی پیدا کنید، بدون اینکه نگران خطای TypeError باشید اگر یک ویژگی میانی null یا undefined باشد. const user = { profile: { name: Ali } }; const name = user?.profile?.name; // name is Ali const unknown = user?.address?.city; // unknown is undefined این عملگر در ES2020 معرفی شده است.

9. بهره‌گیری از Set برای حذف عناصر تکراری در آرایه

Set یک ساختار داده است که فقط مقادیر منحصر به فرد را ذخیره می‌کند. با بهره‌گیری از Set، می‌توانید به راحتی عناصر تکراری را از یک آرایه حذف کنید. const array = [1, 2, 2, 3, 4, 4, 5]; const uniqueArray = [. . .new Set(array)]; // uniqueArray is [1, 2, 3, 4, 5] این روش نسبت به روش‌های سنتی حذف عناصر تکراری بسیار سریع‌تر و کارآمدتر است.

10. بهره‌گیری از console.table() برای نمایش داده‌های جدولی

به جای بهره‌گیری از console.log() برای نمایش داده‌های جدولی، می‌توانید از console.table() استفاده کنید. این روش داده‌ها را به صورت یک جدول مرتب و خوانا در کنسول نمایش می‌دهد. const users = [ { name: Ali, age: 30 }, { name: Reza, age: 25 } ]; console.table(users); این روش برای دیباگ کردن و بررسی داده‌ها بسیار مفید است.

11. ایجاد متغیرهای خصوصی با بهره‌گیری از WeakMap

WeakMap به شما امکان می‌دهد تا داده‌ها را به اشیاء مرتبط کنید به طوری که اگر شیء از حافظه حذف شود، داده‌های مرتبط با آن نیز حذف می‌شوند. این ویژگی می‌تواند برای ایجاد متغیرهای خصوصی در کلاس‌ها استفاده شود. const _private = new WeakMap(); constructor(name) { _private.set(this, { name: name }); } getName() { return _private.get(this).name; } }

12. بهره‌گیری از Generator ها برای کدهای ناهمزمان

Generator ها به شما امکان می‌دهند تا تابعی را متوقف کرده و بعداً از همان نقطه ادامه دهید. این ویژگی برای مدیریت کدهای ناهمزمان (Asynchronous) بسیار مفید است. function myGenerator() { yield 1; yield 2; yield 3; } const generator = myGenerator(); console.log(generator.next()); // { value: 1, done: false }

13. بهره‌گیری از Performance API برای اندازه‌گیری عملکرد

Performance API به شما امکان می‌دهد تا عملکرد بخش‌های مختلف کد خود را اندازه‌گیری کنید. این API شامل توابعی برای اندازه‌گیری زمان اجرای کد، بهره‌گیری از حافظه و غیره است. const start = performance.now(); // Your code here const end = performance.now(); console.log(Execution time: ${end - start} ms);