زبان JavaScript چیست؟ مبانی، ماژول ها، رویدادها و async/await

• زبان JavaScript چیست و چرا مهم است
• ران تایم ها: مرورگر و Node.js
• سینتکس مدرن: let/const، تابع و کلاس
• ماژول ها: ESM و CommonJS
• مدل رویداد، Promise و async/await
• کار با DOM و Fetch
• ابزارها و مسیر یادگیری
• سوالات متداول
• جمع بندی

زبان JavaScript چیست و چرا مهم است

زبان JavaScript زبان برنامه نویسی تعاملی وب است. ابتدا فقط در مرورگر اجرا می شد؛ اما با Node.js وارد بک اند شد. بنابراین یک زبان واحد برای کل استک دارید. افزون بر این، جامعه بزرگ و استاندارد ECMAScript آن را دائماً به روز نگه می دارند.

ران تایم ها: مرورگر و Node.js

در مرورگر، JavaScript به DOM و Web APIs دسترسی دارد. در Node.js، ماژول ها، فایل سیستم و شبکه در اختیار شماست. با وجود تفاوت APIها، موتورهای اجرا مانند V8 مشترک هستند. در نتیجه مفاهیم هسته ای ثابت می مانند و مهارت ها قابل انتقال هستند.

سینتکس مدرن در زبان JavaScript: let/const، تابع و کلاس

اکنون با let/const محدوده ها شفاف ترند. توابع پیکانی کد را فشرده تر می کنند. کلاس ها سینتکس آشنا برای الگوهای شی ءگرا می دهند. مثال کوتاه را ببینید.

const greet = (name = "dev") => `Hello, ${name}`;
class Counter { #v = 0; inc(){ this.#v++; } value(){ return this.#v; } }
const c = new Counter(); c.inc(); console.log(greet("Amir"), c.value());

ماژول ها در JavaScript: ESM و CommonJS

ESM استاندارد رسمی است و در مرورگر و Node.js پشتیبانی می شود. در Node قدیمی، CommonJS رایج بود. امروز، ترجیح با ESM است؛ اما مهاجرت تدریجی منطقی است.

نمونه ماژول ESM

// math.js
export const sum = (a, b) => a + b;
// app.mjs
import { sum } from "./math.js"; console.log(sum(2, 3));

مدل رویداد، Promise و async/await

حلقه رویداد کارهای ناهمگام را زمان بندی می کند. Promise زنجیره سازی را ساده می کند. سپس async/await خوانایی را بالا می برد و خطاها را قابل مدیریت می کند. درنتیجه کد به مراتب تمیزتر می شود.

async function getJson(url){ const res = await fetch(url); if(!res.ok) throw new Error(res.status); return res.json(); }
getJson("/api/users").then(x => console.log(x)).catch(console.error);

DOM، رویدادها و Fetch

با انتخاب گرها عناصر را می گیرید، رویدادها را گوش می دهید، و با Fetch داده می آورید. سپس UI را بر اساس state به روز می کنید. برای پروژه های بزرگ، فریم ورک ها مدیریت state و رندر را استاندارد می کنند.

document.querySelector("#btn").addEventListener("click", async () => {
  const data = await (await fetch("/api/time")).json();
  document.querySelector("#out").textContent = new Date(data.now).toLocaleTimeString();
});

ابزارها و مسیر یادگیری

از DevTools برای پروفایلینگ و دیباگ استفاده کنید. سپس با NPM، ESLint و Prettier گردش کار حرفه ای بسازید. همچنین با Vite یا Next.js استارت بزنید. برای درک پایه ها، مطالب زبان HTML چیست و HTTP چیست را بخوانید. در ادامه، مستندات مرجع را دنبال کنید: MDN JavaScript و ECMAScript Spec.

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

TypeScript لازم است؟ اختیاری است؛ اما در پروژه های متوسط و بزرگ ارزشمند است. زیرا خطاها را زودتر آشکار می کند.

فریم ورک لازم است؟ بستگی دارد. برای SPA و مقیاس پذیری، React یا Vue مناسب هستند. اما ابتدا پایه های زبان را محکم کنید.

جمع بندی و قدم بعدی

اکنون می دانید زبان JavaScript چیست و چگونه در مرورگر و سرور به کار می رود. همین امروز یک ماژول بسازید، یک درخواست Fetch بزنید و کد را با ESLint تمیز کنید. سپس به سراغ TypeScript و یک فریم ورک محبوب بروید.