زبان برنامه نویسی جاوا اسکریپت دائما در حال پیشرفت است و آخرین نسخه آن، یعنی JavaScript ES2022 ویژگی‌های جدید و هیجان‌انگیزی را منتشر کرده است که می‌توانند زندگی شما را به عنوان یک کدنویس آسان‌تر و کدنویسی شما را کارآمدتر کنند. در این پست، نگاهی به پنج ویژگی مهم در JavaScript ES2022 خواهیم داشت. شما از همین امروز می‌توانید برای بهبود کدنویسی و افزایش بهره‌وری کار خود از آن‌ها استفاده کنید.
ویژگی 1 – Chaining اختیاری
Chaining اختیاری یک اپراتور جدید در JavaScript ES2022 است که به شما امکان می‌دهد بدون نیاز به بررسی null یا undefined ، به ویژگی‌های یک object (شیء) دسترسی داشته باشید. این ویژگی می‌تواند هنگام کار با data structure های پیچیده مفید باشد. زیرا به شما امکان می‌دهد بدون نیاز به نگرانی درباره null یا تعریف نشده بودن مقادیر intermediate به ویژگی‌های عمیق تودرتو (nested) دسترسی داشته باشید.
در این‌جا مثالی از نحوه عملکرد Chaining اختیاری آورده شده است:
Copy code
const data = {
user: {
name: 'John',
age: 30,
address: {
street: '123 Main St',
city: 'New York',
state: 'NY',
zip: 10001
}
}
};
// Without optional chaining
let zip;
if (data && data.user && data.user.address && data.user.address.zip) {
zip = data.user.address.zip;
}
// With optional chaining
const zip = data?.user?.address?.zip;
همان‌طور که میبینید، Chaining اختیاری در JavaScript ES2022 به شما امکان می‌دهد بدون نیاز به نوشتن عبارات طولانی و تودرتو دسترسی داشته باشید. این می‌تواند کد شما را تمیزتر و خواناتر کند.
ویژگی 2 – ادغام بی‌اثر (Nullish coalescing)
Nullish coalescing یک عملکرد جدید دیگر در JavaScript ES2022 است که به شما امکان می‌دهد یک مقدار پیش‌فرض را برای یک متغیر (در صورت null یا undefined بودن آن) مشخص کنید. این می‌تواند هنگام کار با متغیرهایی که ممکن است نادرست باشند (به عنوان مثال 0 ، “” ، false) مفید باشد، زیرا اپراتور Nullish coalescing مقدار پیش‌فرض را تنها در صورتی برمی‌گرداند که متغیر کاملاً null یا undefined باشد.
در این‌جا مثالی از نحوه عملکرد Nullish coalescing در JavaScript ES2022 آورده شده است:
const data = {
user: {
name: 'John',
age: 30,
address: {
street: '123 Main St',
city: 'New York',
state: 'NY',
zip: 10001
}
}
};
// Without nullish coalescing
let zip;
if (data && data.user && data.user.address && data.user.address.zip) {
zip = data.user.address.zip;
} else {
zip = 0;
}
// With nullish coalescing
const zip = data?.user?.address?.zip ?? 0;
همان‌طور که میبینید، Nullish coalescing به شما امکان می‌دهد یک مقدار پیش‌فرض را به روشی مختصر و خوانا مشخص کنید.
ویژگی 3 – ورودی‌های پویا (Dynamic imports)
Dynamic imports در JavaScript ES2022 به شما این امکان را می‌دهد که ماژول‌های جاوا اسکریپت را به صورت ناهمزمان بارگیری کنید. این زمانی مفید است که فقط نیاز به بارگیری ماژول‌های خاص دارید. این می‌تواند عملکرد اپلیکیشن شما را با کاهش مقدار کدی که باید دانلود و توسط مرورگر تجزیه شود، بهبود ببخشد.
در این‌جا مثالی از نحوه عملکرد Dynamic imports آورده شده است:
// Without dynamic imports
import MyModule from './my-module';
// With dynamic imports
const MyModule = await import('./my-module');
ویژگی 4 – Promise.allSettled
Promise.allSettled روش جدیدی در JavaScript ES2022 است که به شما امکان می‌دهد منتظر بمانید تا گروهی از Promise ها resolve یا reject شوند. این ویژگی زمانی می‌تواند مفید باشد که می‌خواهید نتایج چندین Promise را به طور همزمان مدیریت کنید؛ بدون توجه به این که آن‌ها resolve یا reject شوند.
در این‌جا نمونه‌ای از نحوه عملکرد Promise.allSettled آورده شده است:
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Error'));
const promise3 = Promise.resolve(3);
Promise.allSettled([promise1, promise2, promise3]).then(results => {
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log(result.value);
} else {
console.error(result.reason);
}
});
});
// Output: 1, Error: Error, 3
همان‌طور که میبینید، Promise.allSettled به شما امکان می‌دهد تا نتایج چندین Promise را در یک callback پاسخ دهید و مدیریت کدهای asynchronous را برای شما آسان‌تر می‌کند. Promise.allSettled به جای این‌که منتظر باشد تا تمام Promise ها resolve شوند، یا به محض رد شدن هر کدام از آن‌ها reject شوند، قبل از اجرای callback منتظر می‌ماند تا همه Promise ها تسویه شوند. (یعنی resolve یا reject شوند).
ویژگی 5 – String.prototype.matchAll
String.prototype.matchAll یک روش جدید در JavaScript ES2022 است که به شما امکان می‌دهد به جای اولین تطابق، تمام مطابقت‌های یک عبارت منظم را در یک String (رشته) پیدا کند. این ویژگی زمانی می‌تواند مفید باشد که شما نیاز دارید چندین قطعه داده را از یک String استخراج کنید، یا می‌خواهید String های پیشرفته را دستکاری کنید.
در این‌جا مثالی از نحوه عملکرد String.prototype.matchAll آورده شده است:
const str = 'Hello World';
const regex = /l/g;
// Without String.prototype.matchAll
const matches = str.match(regex);
// With String.prototype.matchAll
const matches = [...str.matchAll(regex)];
console.log(matches); // ['l', 'l']
همان‌طور که میبینید، String.prototype.matchAll به شما این امکان را می‌دهد که تمام مطابقت‌های یک عبارت منظم را در یک String پیدا کنید. و استخراج چندین قطعه داده را از یک String آسان‌تر می‌کند.
بهترین روش‌ها برای استفاده از این ویژگی‌های جدید JavaScript ES2022
اکنون که در مورد ویژگی‌های جدید JavaScript ES2022 صحبت کردیم، بیایید در مورد بهترین روش‌ها برای استفاده از آن‌ها صحبت کنیم.
قبل از هر چیز، مهم است که به خاطر داشته باشد همه این ویژگی‌ها به طور کامل در همه مرورگرها پشتیبانی نمی‌شوند. بنابراین، باید سازگاری مرورگر برای هر ویژگی را قبل از استفاده در پروژه‌های خود بررسی کنید.
علاوه بر این، بهتر است که از این ویژگی‌ها به اندازه نیاز و تنها زمانی استفاده کنید که مزایای واضحی برای شما دارند. درست است که این ویژگی‌ها در موقعیت‌های خاص مفید هستند. اما در صورت استفاده بیش از حد ممکن است کد شما را پیچیده و درک آن را دشوار کنند.
در نهایت، مطمئن شوید که پس از استفاده از این ویژگی‌های جدید، کد خود را به طور کامل تست کنید تا مطمئن شوید که همه چیز مطابق انتظار کار می‌کند.
با پیروی از این روش‌ها، می‌توانید از مزایای کامل ویژگی‌های جدید JavaScript ES2022 استفاده کنید و در عین حال از هر گونه تله احتمالی اجتناب کنید.
Leave feedback about this