استفاده از جاوااسکریپت بدون این ۱۷ تکنیک موجب بروز خطا خواهد شد
این تکنیک ها شامل بهرهگیری از ویژگی های جدید ECMAScript، روش های بهبود عملکرد کد، و الگوهای طراحی رایج هستند. با یادگیری این تکنیک ها، میتوانید مهارت های جاوا اسکریپت خود را ارتقا دهید و تبدیل به یک توسعه دهنده حرفه ای تر شوید.
- 💥
1. بهرهگیری از عملگر Spread (. . . ):
برای کپی کردن آرایه ها و اشیاء به روشی ساده و خوانا. به جای بهرهگیری از حلقه ها یا متدهای پیچیده، میتوانید به راحتی یک کپی جدید ایجاد کنید. - 💥
2. Destructuring Assignment:
این ویژگی به شما امکان میدهد مقادیر را از آرایه ها یا اشیاء به متغیرها استخراج کنید. این کار کد شما را خواناتر و مختصرتر می کند. - 💥
3. Template Literals:
برای ایجاد رشته هایی که شامل متغیرها و عبارات هستند، از بک تیک () استفاده کنید. این روش خوانایی و انعطاف پذیری بیشتری نسبت به بهرهگیری از عملگر + برای اتصال رشته ها دارد. - 💥
4. Arrow Functions:
یک روش مختصر و زیبا برای تعریف توابع. arrow function ها مخصوصا برای callback ها و توابع یک خطی مناسب هستند. - 💥
5. Default Parameters:
به توابع خود پارامترهای پیش فرض اضافه کنید. این کار از خطاهای احتمالی جلوگیری می کند و کد شما را مقاوم تر می سازد. - 💥
6. بهرهگیری از Map و Set:
به جای بهرهگیری از آرایه های معمولی برای ذخیره داده های منحصر به فرد یا جفت های کلید-مقدار، از Map و Set استفاده کنید. این ساختارهای داده ای عملکرد بهتری دارند. - 💥
7. Promises و Async/Await:
برای مدیریت عملیات ناهمزمان به طور موثر از Promises و Async/Await استفاده کنید. این روش ها خوانایی کد را بهبود می بخشند و از callback hell جلوگیری می کنند. - 💥
8. Closures:
درک کنید که closures چگونه کار می کنند و چگونه میتوانید از آنها برای ایجاد توابع خصوصی و مدیریت state استفاده کنید. - 💥
9. بهرهگیری از Modules:
کد خود را به ماژول های کوچکتر و قابل استفاده مجدد تقسیم کنید. این کار نگهداری و تست کد را آسان تر می کند. - 💥
10. Event Delegation:
به جای اینکه برای هر عنصر یک رویداد handler جداگانه تعریف کنید، از event delegation استفاده کنید. این کار عملکرد را بهبود می بخشد. - 💥
11. Debouncing و Throttling:
برای محدود کردن تعداد دفعاتی که یک تابع در یک بازه زمانی مشخص اجرا می شود، از debouncing و throttling استفاده کنید. این کار برای بهبود عملکرد برنامه های responsive مفید است. - 💥
12. بهرهگیری از console.table():
برای نمایش داده های آرایه ای و شیئی به صورت جدولی در کنسول، از console.table() استفاده کنید. - 💥
13. Object.freeze():
برای جلوگیری از تغییر خواص یک شیء، از Object.freeze() استفاده کنید. - 💥
14. بهرهگیری از Array.includes():
برای بررسی اینکه آیا یک آرایه شامل یک مقدار خاص است یا خیر، از Array.includes() استفاده کنید. - 💥
15. Local Storage و Session Storage:
برای ذخیره داده ها در مرورگر کاربر، از Local Storage (ذخیره سازی دائمی) و Session Storage (ذخیره سازی موقت) استفاده کنید. - 💥
16. try. . .catch:
برای مدیریت خطاها و جلوگیری از کرش کردن برنامه، از بلوک try. . .catch استفاده کنید. - 💥
17. Regular Expressions:
RegExp را یاد بگیرید تا الگوهای متنی را پیدا و دستکاری کنید.
امیدوارم این تکنیک ها به شما در بهبود مهارت های جاوا اسکریپت تان کمک کند. با تمرین و بهرهگیری از این تکنیک ها در پروژه های خود، میتوانید به یک توسعه دهنده جاوا اسکریپت حرفه ای تر تبدیل شوید.
17 تکنیک کاربردی جاوا اسکریپت
1. بهرهگیری از عملگر سهگانه (Ternary Operator)
عملگر سهگانه یک راه مختصر برای نوشتن عبارات شرطی ساده است. به جای بهرهگیری از if. . .else برای یک شرط ساده، میتوانید از این عملگر استفاده کنید. مثال: const age = 20; const isAdult = age >= 18 ? بزرگسال : خردسال; این کد معادل یک عبارت if. . .else است. عملگر سه گانه خوانایی کد را در شرایط ساده افزایش می دهد.
2. تبدیل یک مقدار به Boolean با بهرهگیری از !!
با بهرهگیری از !! میتوان یک مقدار را به یک مقدار Boolean (true یا false) تبدیل کرد. این تکنیک برای بررسی وجود یک مقدار یا true بودن آن بسیار مفید است. مثال: const myValue = Hello; const isTrue = !!myValue; // isTrue will be true const myValue = ; const isTrue = !!myValue; // isTrue will be false این روش یک راه سریع برای تبدیل هر نوع داده ای به بولین است.
3. بهرهگیری از Template Literals برای String Interpolation
Template Literals (با بهرهگیری از بکتیک) روشی مدرن برای ساخت رشتهها و جایگذاری متغیرها در آنها است. این روش خوانایی کد را بسیار بالا میبرد و از concatenation (+ operator) جلوگیری میکند. مثال: const name = علی; const message = سلام ${name}! خوش آمدید. ; به جای بهرهگیری از سلام + name + ! خوش آمدید. از Template Literals استفاده کنید. با بهرهگیری از ${} میتوانید به راحتی مقادیر متغیرها را درون رشته قرار دهید.
4. بهرهگیری از Destructuring Assignment
Destructuring Assignment به شما امکان میدهد مقادیر را از یک شیء یا آرایه استخراج کرده و به متغیرها اختصاص دهید. این کار کد را کوتاهتر و خواناتر میکند. مثال: const person = { name: رضا, age: 30 }; const { name, age } = person; حالا name برابر رضا و age برابر 30 خواهد بود. میتوانید از Destructuring Assignment برای توابع هم استفاده کنید.
5. بهرهگیری از Spread Operator (. . . )
Spread Operator (. . . ) به شما امکان میدهد یک آرایه یا شیء را گسترش دهید. این عملگر برای کپی کردن آرایهها، ادغام آرایهها و ارسال آرگومانهای متغیر به توابع بسیار مفید است. مثال: const arr1 = [1, 2, 3]; const arr2 = [. . .arr1, 4, 5]; // arr2 will be [1, 2, 3, 4, 5] const obj1 = { a: 1, b: 2 }; const obj2 = { . . .obj1, c: 3 }; // obj2 will be { a: 1, b: 2, c: 3 } بهرهگیری از Spread Operator برای ایجاد کپی سطحی (Shallow Copy) از آرایه ها و اشیاء بسیار کاربردی است.
6. بهرهگیری از Optional Chaining (?. )
Optional Chaining (?. ) به شما امکان میدهد به ویژگیهای یک شیء دسترسی پیدا کنید بدون اینکه نگران null یا undefined بودن آن باشید. اگر یک ویژگی null یا undefined باشد، عبارت به جای پرتاب کردن خطا، مقدار undefined را برمیگرداند. مثال: const user = { profile: { address: تهران } }; const city = user?.profile?.address; // city will be تهران const user = null; const city = user?.profile?.address; // city will be undefined این عملگر از بروز خطاهای غیر منتظره جلوگیری می کند.
7. بهرهگیری از Array.map() برای تبدیل آرایهها
Array.map() یک متد آرایهای است که به شما امکان میدهد هر عنصر یک آرایه را تبدیل کرده و یک آرایه جدید با مقادیر تبدیل شده ایجاد کنید. این متد برای ایجاد تغییرات در دادههای آرایه بسیار مفید است. مثال: const numbers = [1, 2, 3]; const doubledNumbers = numbers.map(num => num 2); // doubledNumbers will be [2, 4, 6] متد map آرایه اصلی را تغییر نمی دهد و یک آرایه جدید برمی گرداند. این متد بسیار پرکاربرد است و بهرهگیری از آن به شدت توصیه می شود.
8. بهرهگیری از Array.filter() برای فیلتر کردن آرایهها
Array.filter() یک متد آرایهای است که به شما امکان میدهد عناصر یک آرایه را بر اساس یک شرط فیلتر کنید و یک آرایه جدید با عناصر فیلتر شده ایجاد کنید. این متد برای حذف عناصر نامطلوب از یک آرایه بسیار مفید است. مثال: const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); // evenNumbers will be [2, 4] متد filter آرایه اصلی را تغییر نمی دهد و یک آرایه جدید برمی گرداند. مانند map، filter نیز یک متد بسیار پرکاربرد است. const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum will be 15 پارامتر اول، تابع کاهنده و پارامتر دوم مقدار اولیه accumulator است. reduce ابزاری قدرتمند برای پردازش آرایه هاست.
10. بهرهگیری از Closures
Closure یک تابع است که به متغیرهای محیط بیرونی خود دسترسی دارد، حتی پس از اینکه تابع بیرونی اجرا شده و به پایان رسیده است. Closures برای ایجاد توابع خصوصی و حفظ state بین فراخوانیها بسیار مفید هستند. مثال: function outerFunction() { let count = 0; return function innerFunction() { count++; console.log(count); }; } const myCounter = outerFunction(); myCounter(); // 1 myCounter(); // 2 در این مثال، innerFunction به متغیر count در outerFunction دسترسی دارد. Closures یکی از مفاهیم مهم در جاوا اسکریپت است.
11. بهرهگیری از Promises برای مدیریت عملیاتهای ناهمزمان
Promises روشی برای مدیریت عملیاتهای ناهمزمان مانند درخواستهای API است.یک Promise میتواند در یکی از سه حالت باشد: pending، fulfilled یا rejected.با بهرهگیری از .then() و .catch() میتوانید به نتیجه یک Promise واکنش نشان دهید.مثال: fetch(https://api.example.com/data).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error)); Promises کد ناهمزمان را خواناتر و قابل مدیریتتر میکنند.Async/Await یک روش جدیدتر برای نوشتن کد ناهمزمان است که بر اساس Promises ساخته شده است.با بهرهگیری از async قبل از تعریف تابع و await قبل از فراخوانی یک Promise، میتوانید کد ناهمزمان را به صورت همزمان بنویسید.
مثال: async function fetchData() { try { const response = await fetch(https://api.example.com/data); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } fetchData(); Async/Await کد ناهمزمان را بسیار خواناتر و سادهتر میکند.
این روش به شدت توصیه می شود.
13. بهرهگیری از Generators
Generators توابعی هستند که میتوانند اجرا را pause و resume کنند. آنها با بهرهگیری از کلمه کلیدی function تعریف میشوند و از کلمه کلیدی yield برای pause کردن اجرا استفاده میکنند. Generators برای ایجاد iterator ها و مدیریت state پیچیده بسیار مفید هستند. مثال: function numberGenerator() { yield 1; yield 2; yield 3; } const generator = numberGenerator(); console.log(generator.next().value); // 1 console.log(generator.next().value); // 2 Generators یک ابزار قدرتمند برای کنترل جریان اجرا هستند. اگرچه بهرهگیری از آنها کمی پیچیده است.
14. بهرهگیری از Proxy
Proxy یک شیء است که به شما امکان میدهد رفتار یک شیء دیگر را رهگیری و سفارشی کنید. Proxy میتواند برای اعتبارسنجی دادهها، لاگ کردن و انجام عملیاتهای دیگر قبل یا بعد از دسترسی به ویژگیهای یک شیء استفاده شود. مثال: const handler = { get: function(obj, prop) { console.log(Accessing property ${prop}); return obj[prop]; } }; const obj = { name: علی }; const proxy = new Proxy(obj, handler); console.log(proxy.name); // Accessing property name // علی Proxy ابزاری قدرتمند برای متاپروگرامینگ است. Meta programming یعنی برنامه نویسی در مورد برنامه نویسی.
15. بهرهگیری از WeakMap و WeakSet
WeakMap و WeakSet شبیه به Map و Set هستند، اما ارجاعات ضعیفی به کلیدها یا مقادیر خود دارند. این بدان معناست که اگر یک کلید یا مقدار دیگر در هیچ جای کد استفاده نشود، Garbage Collector میتواند آن را از حافظه حذف کند، حتی اگر هنوز در WeakMap یا WeakSet وجود داشته باشد. WeakMap و WeakSet برای ذخیره دادههای مرتبط با اشیاء DOM بدون ایجاد memory leak بسیار مفید هستند. مثال: const weakMap = new WeakMap(); let element = document.getElementById(myElement); weakMap.set(element, Some data); element = null; // element will be garbage collected, and the entry in weakMap will be removed. WeakMap و WeakSet از memory leak جلوگیری می کنند. این ویژگی برای برنامه های طولانی مدت بسیار مهم است.
16. بهینهسازی حلقهها
اجرای بهینه حلقهها در جاوا اسکریپت میتواند تاثیر قابل توجهی بر عملکرد داشته باشد. به جای محاسبه طول آرایه در هر تکرار، طول را در یک متغیر ذخیره کنید. به جای بهرهگیری از for. . .in برای آرایهها، از for یا forEach استفاده کنید. مثال: const arr = [1, 2, 3, 4, 5]; const len = arr.length; for (let i = 0; i < len; i++) { console.log(arr[i]); } بهینه سازی حلقه ها میتواند سرعت اجرای کد را افزایش دهد. 
مخصوصا در حلقه های بزرگ و پیچیده.
17. بهرهگیری از Strict Mode
Strict mode یک روش برای نوشتن کد جاوا اسکریپت با قوانین سختگیرانهتر است. با فعال کردن strict mode، جاوا اسکریپت خطاهای بیشتری را تشخیص میدهد و از برخی رفتارهای ناامن جلوگیری میکند. برای فعال کردن strict mode، use strict; را در ابتدای فایل یا تابع قرار دهید. مثال: use strict; x = 10; // Throws an error because x is not declared. Strict Mode به نوشتن کد تمیزتر و ایمن تر کمک می کند. توصیه می شود همیشه از Strict Mode استفاده کنید.
