تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

۱۰ ترفند جاوا اسکریپت که فقط توسعه‌دهندگان حرفه‌ای از آن‌ها خبر دارند!


۳ فروردین ۱۴۰۴

جاوا اسکریپت، به عنوان یک زبان پویا و چندمنظوره، مجموعه‌ای از ویژگی‌های قدرتمند و پنهان دارد که اغلب توسط برنامه‌نویسان مبتدی و متوسط نادیده گرفته می‌شود. درحالی که برنامه‌نویسان حرفه‌ای به خوبی از این قابلیت‌ها بهره‌برداری می‌کنند تا کدهایی زیبا، بهینه و کارآمد بنویسند.

در این مقاله قصد داریم 10 ترفند جاوا اسکریپت را معرفی کنیم که می‌تواند مهارت‌های کدنویسی شما را به سطح بالاتری ارتقا دهد و شما را با برخی از نکات کلیدی و تکنیک‌های پنهان این زبان آشنا کند؛ با لیارا همراه باشید.

در ادامه خواهید خواند:

  • تخریب (Destructuring) با مقادیر پیش‌فرض
  • کلیدهای داینامیک در اشیا
  • استفاده از Optional Chaining (?.) برای دسترسی به اشیای تو در تو
  • عملگر Nullish Coalescing (??) برای مقداردهی پیش‌فرض
  • استفاده از میان‌بر (Short-Circuiting) با عملگرهای منطقی
  • مقدارنگاری (Memoization) با Closureها
  • استفاده از Intl برای فرمت‌بندی حساس به موقعیت جغرافیایی
  • دیباونس (Debouncing) و تروتلینگ (Throttling) برای بهینه‌سازی عملکرد
  • حلقه زدن سفارشی در Map با استفاده از forEach
  • حلقه زدن ناهمزمان با استفاده از for await…of
  • سوالات متداول
  • جمع بندی
جاوا اسکریپت js

1. تخریب (Destructuring) با مقادیر پیش‌فرض

تخریب (Destructuring) در جاوا اسکریپت یکی از ویژگی‌های محبوب است، اما برنامه‌نویسان حرفه‌ای از آن با مقادیر پیش‌فرض استفاده می‌کنند تا کد خود را مقاوم‌تر و انعطاف‌پذیرتر کنند.

کد زیر را در نظر بگیرید.

const user = { name: "Alice" };
const { name, age = 25 } = user;

console.log(name); // Alice
console.log(age);  // 25

در اینجا، ما از تخریب برای استخراج مقادیر متغیرها استفاده کرده‌ایم، به طوری که اگر مقدار age در شیء وجود نداشته باشد، به صورت پیش‌فرض مقدار 25 برای آن در نظر گرفته می‌شود.

این ترفند به خصوص زمانی مفید است که با اشیای داده ناقص مواجه هستیم و نیازی به نوشتن بررسی‌های طولانی برای مقادیر نال (null) نداریم. در واقع، استفاده از مقادیر پیش‌فرض در تخریب کمک می‌کند که کد ساده‌تر و خواناتر شود، به‌ویژه زمانی که داده‌ها ممکن است کامل نباشند.

2. کلیدهای داینامیک در اشیا

جاوا اسکریپت پیشرفته به شما این امکان را می‌دهد که کلیدهای اشیا را به صورت داینامیک (پویا) ایجاد کنید، که این ویژگی باعث می‌شود کد شما انعطاف پذیرتر و قابل تنظیم‌تر باشد.

کد زیر را مشاهده کنید.

const key = "dynamicKey";
const obj = {
  [key]: "value",
};

console.log(obj.dynamicKey); // value

در اینجا، کلید شیء obj به صورت داینامیک و از طریق متغیر key ساخته شده است. این یعنی می‌توانید نام کلیدها را در زمان اجرا و به دلخواه تعیین کنید.

این ویژگی به ویژه زمانی مفید است که بخواهید اشیا را از ورودی‌های کاربر یاد داده‌های خارجی بسازید. به عنوان مثال، اگر نام کلیدهای بسته به ورودی کاربر تغییر کند، این امکان را می‌دهد که به راحتی کلیدهای داینامیک ایجاد کنید و کد خود را برای استفاده‌های مختلف و داده‌هیا متغیر، انعطاف پذیرتر کنید.

3. استفاده از Optional Chaining (?.) برای دسترسی به اشیای تو در تو

عملگر Optional Chaining (?.) دسترسی به ویژگی‌های تو در تو (nested) اشیاء را ساده‌تر می‌کند و دیگر نیازی به نگرانی در مورد خطاهای undefined نخواهید داشت.

کد زیر را بررسی کنید.

const user = { address: { city: "New York" } };
console.log(user.address?.city);    // New York
console.log(user.profile?.age);    // undefined

در اینجا، از عملگر ?. برای دسترسی به ویژگی‌های city و age استفاده شده است. در صورت وجود نداشتن هر یک از این ویژگی‌ها، کد به جای ایجاد خطای undefined، مقدار undefined را برمی‌گرداند.

این ویژگی به شما کمک می‌کند تا بدون نیاز به نوشتن بررسی‌های طولانی (if checks) برای هر سطح از اشیاء، کد تمیزتر و قابل فهم‌تری داشته باشید. به عبارت دیگر، اگر یکی از ویژگی‌ها یا مسیرهای دسترسی وجود نداشته باشد، کد به راحتی از بروز خطا جلوگیری کرده و کد را به‌صورت خودکار به حالت undefined برمی‌گرداند. این ویژگی در برنامه‌نویسی بسیار مفید است، به‌ویژه زمانی که با داده‌های پیچیده و تو در تو کار می‌کنید.

سرور ابری NodeJS لیارا با پشتیبانی از مقیاس‌پذیری خودکار، امنیت بالا و مدیریت آسان، گزینه‌ای ایده‌آل برای راه‌اندازی سریع برنامه‌های NodeJS است.
✅ پشتیبانی از نسخه‌های مختلف NodeJS ✅ ترافیک نامحدود ✅ مدیریت آسان از طریق پنل کاربر
خرید هاست NodeJS

4. عملگر Nullish Coalescing (??) برای مقداردهی پیش‌فرض

در حالی که از عملگر || معمولاً برای مقادیر پیش‌فرض (fallback) استفاده می‌شود، این عملگر مقادیر 0، false و '' (رشته خالی) را به‌عنوان مقادیر نادرست (falsy) در نظر می‌گیرد. در مقابل، عملگر ?? فقط برای مقادیر null یا undefined چک می‌کند.

کد زیر را بررسی کنید.

const value = 0;
console.log(value || 10); // 10 (fallback applied)
console.log(value ?? 10); // 0  (fallback not applied)

در اینجا، خط اول با استفاده از عملگر || مقدار 0 را به عنوان فالس (false) در نظر گرفته شده و مقدار پیش‌فرض 10 به آن اختصاص داده می‌شود. اما در خط دوم، با استفاده از عملگر ؟؟، مقدار 0 به عنوان یک مقدار معتبر باقی می‌ماند و مقدار پیش فرض اعمال نمی‌شود.

این تفاوت ظریف می‌تواند از رفتار غیر منتظره در عملیات های منطقی جلوگیری کند. به ویژه زمانی که بخواهید مقادیر پیش‌فرض را فقط برای null یا undefined اعمال کنید، بدون اینکه مقادیر دیگری مثل 0 یا false تحت تاثیر قرار گیرند.

بیشتر بخوانید: نحوه نصب Node.js روی سرور مجازی اوبونتو Ubuntu

5.استفاده از میان‌بر (Short-Circuiting) با عملگرهای منطقی

عملگرهای منطقی (&& و ||) نه تنها برای شرایط استفاده می‌شوند، بلکه می‌توانند عملیات را به‌طور مؤثر متوقف کنند (short-circuit) و باعث بهینه‌سازی کد شوند.

کد زیر را بررسی کنید.

const isAuthenticated = true;
isAuthenticated && console.log("User is authenticated");

const fallback = "default";
const data = null || fallback;
console.log(data); // default

در خط اول، با استفاده از عملگر &&، وقتی که مقدار isAuthenticated برابر با true است، پیام "User is authenticated" به کنسول چاپ می‌شود. در واقع، عملگر && باعث می‌شود که تنها زمانی که شرط (در اینجا isAuthenticated) درست باشد، دستور بعدی اجرا شود. اگر شرط نادرست بود، کد بعدی اصلاً اجرا نمی‌شود.

در خط دوم، از عملگر || برای تنظیم یک مقدار پیش‌فرض استفاده شده است. در اینجا، چون مقدار null فالس است، مقدار پیش‌فرض fallback به‌عنوان مقدار نهایی انتخاب می‌شود.

این ترفندها به کاهش کد اضافی (boilerplate code) کمک می‌کنند و در عین حال خوانایی کد را حفظ می‌کنند. به‌ویژه زمانی که بخواهید عملیات را به‌طور مؤثر متوقف کنید و از پیچیدگی‌های اضافی جلوگیری کنید.

6. مقدارنگاری (Memoization) با Closureها

مموری‌سازی (Memoization) یک تکنیک است که برای ذخیره نتایج فراخوانی‌های پرهزینه (مثل عملیات محاسباتی پیچیده) استفاده می‌شود. این تکنیک به شما این امکان را می‌دهد که نتایج قبلی را ذخیره کنید و از انجام محاسبات تکراری جلوگیری کنید. در جاوا اسکریپت، closures (بسته‌ها) این کار را به‌طرز بسیار مؤثری انجام می‌دهند.

کد زیر را بررسی کنید.

const memoizedAdd = (() => {
  const cache = {};
  return (a, b) => {
    const key = `${a},${b}`;
    if (cache[key]) return cache[key];
    const result = a + b;
    cache[key] = result;
    return result;
  };
})();

console.log(memoizedAdd(2, 3)); // 5 (calculated)
console.log(memoizedAdd(2, 3)); // 5 (cached)

در این کد، یک تابع memoizedAdd ایجاد شده است که به کمک کش (cache)، نتایج محاسبات قبلی را ذخیره می‌کند. وقتی که تابع با مقادیر مشابه فراخوانی می‌شود، به‌جای انجام مجدد محاسبه، نتیجه قبلی را از کش برمی‌گرداند.

این تکنیک یک بهینه‌سازی عملی برای وظایف محاسباتی تکراری است که می‌تواند عملکرد برنامه را به صورت چشمگیری بهبود بخشد، به ویژه زمانی که نیاز به انجام محاسبات پیچیده به صورت مکرر دارید.

7. استفاده از Intl برای فرمت‌بندی حساس به موقعیت جغرافیایی

شیء Intl در جاوا اسکریپت به شما کمک می‌کند که کارهایی مثل فرمت کردن تاریخ‌ها، اعداد و ارزها را به‌صورت جهانی و متناسب با زبان و منطقه (locale) انجام دهید. این ابزار به‌ویژه برای ایجاد برنامه‌هایی که نیاز به پشتیبانی از زبان‌ها و فرهنگ‌های مختلف دارند، بسیار مفید است.

کد زیر را بررسی کنید.

const number = 1234567.89;
const formatted = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).format(number);

console.log(formatted); // $1,234,567.89

در این مثال، با استفاده از Intl.NumberFormat، عدد 1234567.89 را به‌صورت ارز (دلار آمریکا) فرمت کرده‌ایم. توجه داشته باشید که برای منطقه “en-US” (ایالات متحده آمریکا)، علامت دلار و جداکننده هزارگان به‌درستی اعمال شده است.

توسعه دهندگان حرفه‌ای از این ویژگی برای اطمینان از این‌که برنامه‌هایشان ب صورت صحیح و با دقت بالا، فرمت‌های محلی را برای انواع داده‌ها مدیریت می‌کنند، استفاده می‌کنند. این قابلیت به ویژه در برنامه‎‌هایی که نیاز به نمایش اعداد و ارزها به زبان‌های مختلف را دارند، کاربرد فراوانی دارد.

بیشتر بخوانید: Node.js چیست؟

همچنین بخوانید: بهترین هاست nodejs ایران و خارج

8. دیباونس (Debouncing) و تروتلینگ (Throttling) برای بهینه‌سازی عملکرد

دو تکنیک Debouncing و Throttling برای بهینه‌سازی عملکرد در هنگام رسیدگی به رویدادها (Event Handling) در جاوا اسکریپت بسیار حیاتی هستند. این دو روش به شما کمک می‌کنند تا از اجرای بیش از حد توابع جلوگیری کنید و در نتیجه، برنامه‌هایتان سریع‌تر و کاراتر عمل کنند.

Debouncing: این تکنیک به این صورت عمل می‌کند که یک تابع را پس از تاخیری خاص اجرا می‌کند. اگر این تابع دوباره در مدت زمان تاخیر فراخوانی شود، تایمر ریست می‌شود و تابع دوباره اجرا نمی‌شود تا تاخیر مورد نظر سپری شود. این روش به ویژه برای جلوگیری از اجرای بیش از حد توابعی که به صورت مداوم در حال فراخوانی هستند(مثل تغییر اندازه پنجره یا تایپ در فیلد جستجو) کاربرد دارد.

در این کد، ما تابع debounce را پیاده‌سازی شده است.

const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

const onResize = debounce(() => console.log("Resized!"), 300);
window.addEventListener("resize", onResize);

در اینجا، زمانی که پنجره تغییر اندازه می‌دهد، فقط پس از 300 میلی‌ثانیه از آخرین تغییر اندازه، پیام “Resized!” چاپ می‌شود.

Throttling: این تکنیک برای محدود کردن احرای تابع در یک بازه زمانی مشخص استفاده می‌شود. به این معنا که تابع تنها یک بار در هر بازه زمانی معیین مثلا هر 500 میلی‌ثانیه اجرا می‌شود، حتی اگر رویدادهای متوالی به آن ارسال شوند. این روش برای رویدادهایی مثل اسکرول کردن یا حرکت موس که ممکن است خیلی سریع رخ دهد، مفید است.

در کد زیر، از throttle استفاده شده است.

const throttle = (fn, interval) => {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn(...args);
    }
  };
};

در این مثال، تابع “Scrolling!” تنها یک‌بار در هر 500 میلی‌ثانیه هنگام اسکرول کردن صفحه اجرا می‌شود، حتی اگر رویدادهای اسکرول به طور مکرر ارسال شوند.

این دو تکنیک کمک می‌کنند تا از فراخوانی تابع به صورت بی‌رویه جلوگیری کنید و عملکرد برنامه خود را بهینه کنید، به ویژه زمانی که رویدادهایی کار می‌کنید که به صورت مکرر و سریع فراخوانی می‌شوند.

9. حلقه زدن سفارشی در Map با استفاده از forEach

آبجکت‌های Map در جاوا اسکریپت ترتیب درج کلیدها را حفظ می‌کنند و به شما این امکان را می‌دهند که به‌صورت سفارشی آن‌ها را تکرار کنید.

در اینجا، یک نمونه ساده از استفاده از Map را مشاهده می‌کنید.

const map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
]);

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

در این مثال، از متد forEach برای تکرار روی هر یک از کلیدها و مقادیر داخل Map استفاده شده است. در اینجا، key و value به ترتیب کلید و مقدار هر جفت داده را نشان می‌دهند. این کد برای هر جفت کلید-مقدار، پیام “کلید: مقدار” را چاپ می‌کند.

ویژگی‌های مهم Map:

  • برخلاف آبجکت‌های ساده (Plain Objects)، در Map شما می‌توانید از کلیدهایی غیر از رشته (مثل عدد، شیء یا هر نوع داده دیگر) استفاده کنید.
  • Map همیشه ترتیب درج کلیدها را حفظ می‌کند. یعنی زمانی که شما داده‌ای را وارد می‌کنید، وقتی که می‌خواهید آن‌ها را تکرار کنید، به همان ترتیب که وارد شده‌اند، قابل دسترسی خواهند بود.
  • Map از عملکرد بهتری برای ذخیره و مدیریت داده‌ها در مواقعی که نیاز به حفظ ترتیب یا استفاده از کلیدهای غیررشته‌ای دارید، برخوردار است.

این ویژگی‌ها باعث می‌شود که Map برای استفاده در سناریوهای پیشرفته و پیچیده، مانند ذخیره‌سازی داده‌های کلید-مقدار که ممکن است شامل انواع مختلف کلیدها باشد، انتخاب بهتری نسبت به آبجکت‌های ساده باشد.

سرور ابری NuxtJS لیارا با پشتیبانی از مقیاس‌پذیری خودکار، امنیت بالا و مدیریت آسان، گزینه‌ای ایده‌آل برای راه‌اندازی سریع برنامه‌های NuxtJS است.
✅ پشتیبانی از نسخه‌های مختلف NuxtJS ✅ ترافیک نامحدود ✅ مدیریت آسان از طریق پنل کاربری
خرید هاست NuxtJS

10. حلقه زدن ناهمزمان با استفاده از for await…of

پرداختن به داده‌های غیرهمزمان با استفاده از حلقه for await...of بسیار راحت و بی‌دردسر است.

در اینجا، مثالی از نحوه استفاده از این ویژگی آورده شده است.

async function* fetchData() {
  yield await fetch("https://api.example.com/data1").then((res) => res.json());
  yield await fetch("https://api.example.com/data2").then((res) => res.json());
}

(async () => {
  for await (const data of fetchData()) {
    console.log(data);
  }
})();

در این مثال، ابتدا یک Generator function به نام fetchData تعریف می‌شود که به صورت غیرهمزمان داده‌ها را از دو منبع مختلف (در اینجا API) دریافت می‌کند. هر بار که داده‌ها از API دریافت می‌شود، از دستور yield استفاده می‌شود تا داده‌ها بازگشت داده شوند.

ویژگی‌های مهم این روش:

  • حلقه for await...of این امکان را می‌دهد که به صورت ساده و قابل فهم روی داده‌های غیرهمزمان تکرار کنید، بدون اینکه نیازی به استفاده از then و catch به طور جداگانه باشد.
  • این روش مخصوصاً برای کار با API‌ها، استریم‌ها و وظایف غیرهمزمان مفید است که در آن‌ها داده‌ها به تدریج بارگذاری می‌شوند.
  • با استفاده از این ساختار، شما می‌توانید کد خود را به شکلی تمیز و خوانا بنویسید، در حالی که همچنان به راحتی با داده‌های غیرهمزمان کار می‌کنید.

این الگو، کدنویسی با داده‌های غیرهمزمان را بسیار ساده‌تر می‌کند و نیاز به مدیریت دستی داده‌های غیرهمزمان را کاهش می‌دهد.

سوالات متداول

در ادامه برخی از سوالات متداول شما بررسی و پاسخ داده شده است.

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان برنامه‌نویسی است که به طور گسترده برای ایجاد صفحات وب تعاملی استفاده می‌شود. این زبان امکان انجام عملیات‌های پیچیده در مرورگرهای وب را فراهم می‌کند و می‌تواند برای توسعه وب‌سایت‌های پویا و تعاملی مورد استفاده قرار گیرد.

چه تفاوتی بین جاوا و جاوا اسکریپت وجود دارد؟

جاوا یک زبان برنامه‌نویسی کاملاً مجزا است که معمولاً برای توسعه برنامه‌های دسکتاپ و سرور استفاده می‌شود، در حالی که جاوا اسکریپت بیشتر برای تعاملات در وب‌سایت‌ها و صفحات وب استفاده می‌شود.

چگونه می‌توانم اولین برنامه جاوا اسکریپت خود را بنویسم؟

برای نوشتن اولین برنامه جاوا اسکریپت، می‌توانید یک فایل HTML بسازید و داخل آن از تگ <script> برای نوشتن کد جاوا اسکریپت استفاده کنید.

جاوا اسکریپت چه کاربردهایی دارد؟

جاوا اسکریپت برای توسعه صفحات وب تعاملی، ایجاد انیمیشن‌ها، مدیریت داده‌های فرم‌ها، تعامل با سرورها و بسیاری از وظایف دیگر در برنامه‌های وب استفاده می‌شود.

آیا جاوا اسکریپت در تمام مرورگرها کار می‌کند؟

بله، جاوا اسکریپت تقریباً در تمام مرورگرهای مدرن مانند گوگل کروم، فایرفاکس، سافاری و اج پشتیبانی می‌شود.

آیا جاوا اسکریپت یک زبان برنامه‌نویسی آسان است؟

جاوا اسکریپت نسبت به بسیاری از زبان‌های برنامه‌نویسی دیگر، نسبتا ساده است و یادگیری آن برای مبتدیان نسبتاً آسان است. اما برای استفاده پیشرفته‌تر از آن، نیاز به آشنایی با مفاهیم پیچیده‌تر و فریم‌ورک‌های مختلف دارید.

چه ابزارهایی برای توسعه جاوا اسکریپت وجود دارد؟

برخی از ابزارهای محبوب برای توسعه جاوا اسکریپت شامل ویرایشگرهایی مانند VS Code و Sublime Text و همچنین فریم‌ورک‌هایی مانند React، Angular و Vue.js هستند.

چگونه می‌توانم اشکال‌زدایی کد جاوا اسکریپت را انجام دهم؟

برای اشکال‌زدایی کد جاوا اسکریپت، می‌توانید از ابزارهای موجود در مرورگرها مثل کنسول جاوا اسکریپت و ابزارهای اشکال‌زدایی در محیط‌های توسعه مثل VS Code استفاده کنید.

آیا جاوا اسکریپت فقط برای وب است؟

اگرچه جاوا اسکریپت عمدتاً برای توسعه وب استفاده می‌شود، اما با استفاده از فناوری‌هایی مانند Node.js، می‌توان از آن برای توسعه برنامه‌های سمت سرور نیز استفاده کرد.

چگونه می‌توانم به یک توسعه‌دهنده جاوا اسکریپت ماهر تبدیل شوم؟

برای تبدیل شدن به یک توسعه‌دهنده جاوا اسکریپت ماهر، باید درک خوبی از مبانی جاوا اسکریپت، ساختار داده‌ها، الگوریتم‌ها، و استفاده از فریم‌ورک‌ها و کتابخانه‌ها داشته باشید. همچنین باید تمرین و پروژه‌های واقعی را انجام دهید تا تجربه عملی کسب کنید.

ترفند جاوا اسکریپت

جمع بندی

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

برچسب‌ها: