مفاهیم پایه جاوااسکریپت

سال‌ها پیش، در حالی که با PHP کار می‌کردم، تصمیم گرفتم یک اسکریپت کوچک جاوااسکریپت بنویسم. با اعتماد‌به‌نفس نشستم پشت سیستم و کدی نوشتم که به‌نظرم ساده بود: یک متغیر، یک شرط، یک تابع. کد اجرا شد، ولی رفتارش آن‌چیزی نبود که انتظار داشتم. سه ساعت طول کشید تا بفهمم مشکل از سینتکس نیست؛ از یک تفاوت بنیادین در مدل ذهنی است: در جاوااسکریپت، this بسته به نحوه‌ی فراخوانی تابع، معنی متفاوتی دارد. آن روز درس مهمی گرفتم: مفاهیم پایه جاوااسکریپت در نگاه اول ساده به‌نظر می‌رسند، ولی هرکدام یک تفاوت ظریف با زبان‌های دیگر دارند که اگر نشناسید، ساعت‌ها وقت‌تان را می‌گیرند. در این مقاله، همان مفاهیمی را مرور می‌کنم که امروز با تازه‌کارها کار می‌کنم — نه برای تکرار سینتکس، بلکه برای ساختن مدل ذهنی درست.

مدل ذهنی درست قبل از سینتکس

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

سه ویژگی که جاوااسکریپت را از زبان‌های دیگر متمایز می‌کند:

• نوع‌پویا (Dynamic Typing): متغیرها نوع ندارند؛ مقادیر نوع دارند. یک متغیر می‌تواند در یک لحظه عدد باشد و در لحظه‌ی بعد رشته.
• تک‌ریسمانی (Single-threaded) با رویداد-محور: در هر لحظه فقط یک کار انجام می‌شود، ولی می‌تواند عملیات آسنکرون را در پس‌زمینه مدیریت کند.
• مبتنی بر Prototype: وراثت با زنجیره‌ی prototype پیاده می‌شود، نه با کلاس (البته در ES6، کلاس‌ها سینتکس روان‌تری روی همان مفهوم هستند).

در جاوااسکریپت، دانستن سینتکس ده درصد راه است؛ نود درصد باقی، فهمیدن رفتار زبان در شرایط مختلف است — و این دقیقاً همان جایی است که مبتدی‌ها گم می‌شوند.

سیستم نوع در جاوااسکریپت

جاوااسکریپت هفت نوع داده‌ی اصلی دارد: شش نوع اولیه (Primitive) و یک نوع مرجع (Object).

نکته‌ی کلیدی که در پروژه‌های واقعی به آن رسیده‌ام: تفاوت بین Primitive و Object، در رفتار کپی آن‌ها خودش را نشان می‌دهد. در Primitive، کپی مقدار است؛ در Object، کپی مرجع. یعنی وقتی یک آبجکت را به متغیر دیگری اساین می‌کنید، هر دو متغیر به یک شیء اشاره می‌کنند:

let a = 5;
let b = a;
b = 10;
console.log(a); // 5 — کپی مقدار

let obj1 = { name: "Ali" };
let obj2 = obj1;
obj2.name = "Sara";
console.log(obj1.name); // Sara — کپی مرجع

این تفاوت، در پروژه‌های واقعی، منبع بسیاری از باگ‌های پنهان است. تجربه‌ی من: در یک اپلیکیشن، وقتی یک آبجکت تنظیمات را به یک تابع می‌دادیم، تابع ناخواسته مقادیری از آن را تغییر می‌داد که روی کل برنامه اثر می‌گذاشت. راه‌حل، استفاده از { ...obj } برای کپی سطحی یا structuredClone برای کپی عمیق بود. تفاوت این دو نوع کپی، در پروژه‌های جدی، ساعت‌ها دیباگ را از شما می‌گیرد.

مقادیر Truthy و Falsy

در جاوااسکریپت، هر مقدار در یک شرط، به true یا false تبدیل می‌شود. شش مقدار Falsy وجود دارد و بقیه Truthy:

// Falsy
false, 0, -0, 0n, "", null, undefined, NaN

// هر چیز دیگری Truthy است
" ", [], {}, "false", -1

نکته‌ی گیج‌کننده‌ای که در پروژه‌های واقعی زیاد دیده‌ام: [] و {}، حتی وقتی خالی هستند، Truthy هستند. یعنی if ([]) همیشه اجرا می‌شود. همین موضوع در فرم‌های وب، وقتی از فیلد آرایه استفاده می‌کنید، باعث باگ‌های عجیبی می‌شود:

const users = [];

if (users) {
    console.log("این همیشه اجرا می‌شود"); // چون [] Truthy است
}

if (users.length) {
    console.log("این فقط اگر کاربر داشته باشد اجرا می‌شود");
}

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

دامنه و Hoisting

جاوااسکریپت سه نوع دامنه دارد: Global، Function و Block. تفاوت این سه، در انتخاب بین var، let و const معنا پیدا می‌کند:

// var دامنه‌ی تابعی دارد
function test() {
    if (true) {
        var x = 5;
    }
    console.log(x); // 5 — x بیرون از بلوک if قابل دسترسی است
}

// let/const دامنه‌ی بلوکی دارند
function test2() {
    if (true) {
        let y = 5;
    }
    console.log(y); // ReferenceError
}

Hoisting: رفتار عجیب جاوااسکریپت

Hoisting یعنی موتور جاوااسکریپت، اعلان‌های متغیر و تابع را پیش از اجرای کد، به بالای دامنه‌ی جاری می‌برد. این مفهوم، منبع یکی از مهم‌ترین باگ‌های تازه‌کارهاست:

console.log(a); // undefined — نه خطا
var a = 5;

console.log(b); // ReferenceError
let b = 5;

تفاوت var و let در hoisting، دلیل دیگری برای کنارگذاشتن var در کدهای مدرن است. تجربه‌ی من: در پروژه‌های واقعی، هر بار که یک تابع با var کار می‌کرد، یک پتانسیل باگ بود. یک خط در ابتدای فایل بگذارید — "use strict" — که برخی از این رفتارهای عجیب را به خطای صریح تبدیل می‌کند. اصول کامل دامنه و hoisting را در آموزش ES6 در جاوااسکریپت با جزئیات بیشتری آورده‌ام.

this: متغیرترین کلمه‌ی کلیدی

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

همان مثال معروف که هر توسعه‌دهنده‌ای در پروژه‌های واقعی با آن روبرو می‌شود:

const timer = {
    seconds: 0,
    start() {
        setInterval(function () {
            this.seconds++; // this این‌جا window است، نه timer
            console.log(this.seconds); // NaN
        }, 1000);
    },
};

سه راه‌حل برای این مشکل که در پروژه‌های واقعی دیده‌ام:

• Arrow function: setInterval(() => { this.seconds++; }) — ساده‌ترین راه‌حل.
• متغیر کمکی: const self = this; در ابتدای متد و استفاده از self در callback.
• bind: function () {}.bind(this) — راه‌حل کلاسیک، ولی امروز کمتر استفاده می‌شود.

تجربه‌ی من: تا وقتی this را واقعاً درک نکنید، هر خطای مربوط به آن، ساعت‌ها طول می‌کشد. یک تمرین ساده‌ی من: کد بالا را در کنسول مرورگر اجرا کنید و ببینید مقدار this در سه حالت مختلف چه می‌شود. این یک تمرین، بیشتر از هر کتابی، مفهوم را جا می‌اندازد. اصول کامل این مفهوم در شی‌گرایی در جاوااسکریپت آمده است — جایی که this نقش اصلی را بازی می‌کند.

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

Closure: مفهومی که باید بفهمید

Closure یکی از قدرتمندترین مفاهیم جاوااسکریپت است که در زبان‌های دیگر معادل دقیق ندارد. تعریف ساده: یک تابع، به متغیرهای دامنه‌ی بیرونی خود دسترسی دارد، حتی پس از پایان اجرای آن دامنه. مثال:

function createCounter() {
    let count = 0;

    return function () {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

تابع برگردانده‌شده، به متغیر count دسترسی دارد حتی بعد از این‌که createCounter تمام شده. این مفهوم، پایه‌ی بسیاری از الگوهای جاوااسکریپت است: ماژول‌ها، memoization، factory functions و مدیریت وضعیت. تجربه‌ی من: در پروژه‌های واقعی، closure ابزار اصلی برای ساخت کد بدون وابستگی به متغیرهای global است.

کاربرد عملی: محدودسازی نرخ درخواست

function debounce(fn, delay) {
    let timeoutId;

    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

// استفاده در جستجوی زنده
const search = debounce((query) => {
    console.log("Searching for:", query);
}, 300);

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

Prototype و وراثت

جاوااسکریپت، برخلاف زبان‌های کلاسیک مثل Java، وراثت را از طریق زنجیره‌ی prototype پیاده می‌کند. هر آبجکت در جاوااسکریپت، یک ارجاع به یک آبجکت والد (__proto__) دارد که اگر ویژگی موردنظر در آن نبود، در آن جستجو می‌کند:

const animal = {
    speak() {
        console.log(`${this.name} makes a sound`);
    },
};

const dog = Object.create(animal);
dog.name = "Rex";
dog.speak(); // Rex makes a sound

در ES6، سینتکس class معرفی شد که روان‌تر است، ولی در زیر پوسته، همان مفهوم prototype است:

class Animal {
    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super();
        this.name = name;
    }
}

نکته‌ی مهمی که در پروژه‌های واقعی به آن رسیده‌ام: درک prototype، برای فهم بسیاری از کتابخانه‌های جاوااسکریپت ضروری است. وقتی برای اولین بار با Array.prototype.map روبرو می‌شوید، اگر prototype را نشناسید، این نام‌گذاری عجیب به‌نظر می‌رسد. اصول کامل شی‌گرایی و prototype را در شی‌گرایی در جاوااسکریپت توضیح داده‌ام. اگر با پایتون کار می‌کنید، شی‌گرایی در پایتون نشان می‌دهد که چطور مدل‌های وراثتی در زبان‌های مختلف تفاوت دارند.

برابری و تبدیل نوع پنهان

یکی از عجیب‌ترین رفتارهای جاوااسکریپت، تبدیل نوع خودکار در مقایسه‌ها است:

1 == "1"         // true
0 == false       // true
"" == false      // true
null == undefined // true
[] == false      // true
[] == ""         // true

این رفتار، به‌دلیل الگوریتم Abstract Equality Comparison است که قواعد پیچیده‌ای برای تبدیل نوع دارد. راه‌حل ساده و قاطع: همیشه از === (مقایسه‌ی سخت‌گیرانه) استفاده کنید که هیچ تبدیل نوعی انجام نمی‌دهد.

یک استثنا که در پروژه‌های واقعی زیاد به آن برخوردم: مقایسه با null. در جاوااسکریپت، null == undefined مقدار true برمی‌گرداند، ولی null === undefined مقدار false. اگر می‌خواهید هم null و هم undefined را در یک شرط بگیرید، از value == null استفاده کنید که یک الگوی استاندارد در کدهای حرفه‌ای است.

مدل آسنکرون و Event Loop

جاوااسکریپت تک‌ریسمانی است، ولی رویداد-محور. یعنی با یک تکنیک به‌نام Event Loop، می‌تواند عملیات غیرهمزمان را در پس‌زمینه انجام دهد، بدون این‌که رشته‌ی اصلی را مسدود کند:

console.log("1");

setTimeout(() => console.log("2"), 0);

console.log("3");

// خروجی: 1, 3, 2

این ترتیب عجیب، منبع سردرگمی تازه‌کارها است. توضیح: setTimeout تابع callback را در صف رویدادها می‌گذارد، ولی اجرای آن‌ها بعد از پایان کد فعلی رخ می‌دهد. یعنی حتی با delay = 0، اجرای callback بعد از کد اصلی است.

این مدل ذهنی، پایه‌ی همه‌ی کارهای آسنکرون در جاوااسکریپت است. اگر با PHP کار کرده‌اید و به مدل همگام عادت دارید، این تفاوت اول کمی گیج‌کننده است، ولی بعد از چند هفته کاملاً طبیعی می‌شود. اصول کامل آسنکرون و Promise در Promise در جاوااسکریپت، async/await در جاوااسکریپت و fetch API در جاوااسکریپت آمده است.

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

پنج تله‌ای که تازه‌کارها را می‌گیرد

در سال‌های کار با تازه‌کارها، این پنج تله را بیشتر از همه دیده‌ام:

1. استفاده از var به‌جای let و const: منبع باگ‌های دامنه. عادت کنید همیشه const، و اگر نیاز به تغییر بود، let.
2. مقایسه با ==: همیشه از === استفاده کنید. تنها استثنا، مقایسه با null که آن هم یک الگوی مشخص است.
3. مشکل this در callback: از arrow function استفاده کنید یا مقدار this را در متغیر کمکی نگه دارید.
4. انتظار ترتیب در کد آسنکرون: کد آسنکرون ترتیب ندارد؛ با async/await یا .then() صریح باشید.
5. کپی مرجع به‌جای کپی مقدار: هنگام انتقال آبجکت‌ها، به این فکر کنید که آیا می‌خواهید مرجع را منتقل کنید یا یک نسخه بسازید. اصول کامل و راه‌حل‌های کپی را در متدهای آرایه در جاوااسکریپت و بخش spread توضیح داده‌ام.

یک توصیه‌ی عملی از تجربه: در پروژه‌های واقعی، فایل‌های خود را با "use strict" شروع کنید یا از ماژول‌ها (که به‌طور خودکار strict هستند) استفاده کنید. Strict mode، بسیاری از رفتارهای عجیب مثل hoisting خودکار var یا تخصیص به متغیرهای تعریف‌نشده را به خطای صریح تبدیل می‌کند. این یک خط ساده، جلوی ساعت‌ها دیباگ را می‌گیرد.

مسیر ادامه‌ی یادگیری

مفاهیم پایه‌ی جاوااسکریپت، در نگاه اول ساده به‌نظر می‌رسند، ولی هرکدام یک تفاوت ظریف دارند که در پروژه‌های واقعی خودش را نشان می‌دهد. سه نکته‌ی اصلی که در این مقاله به آن‌ها رسیدیم: اول، مدل ذهنی مهم‌تر از سینتکس است — اگر رفتار this، closure و event loop را نفهمید، هر خطای کوچک به یک کابوس تبدیل می‌شود؛ دوم، عادت‌های کوچک مثل استفاده از === و const، جلوی بسیاری از باگ‌های پنهان را می‌گیرند؛ سوم، کد آسنکرون ذاتاً متفاوت از کد همگام است — این تفاوت را بپذیرید و از ابتدا با async/await کار کنید.

اگر امروز می‌خواهید این مفاهیم را در عمل تمرین کنید، سه کار کوچک پیشنهاد می‌کنم: در کنسول مرورگر، یک تابع با callback و this بنویسید و رفتارش را با arrow function مقایسه کنید؛ یک closure ساده برای شمارنده بسازید و بعد از فراخوانی چندباره، رفتارش را ببینید؛ و یک کد با setTimeout بنویسید و ترتیب اجرا را پیش‌بینی کنید و بعد با خروجی مقایسه کنید. همین سه تمرین، بیشتر از ده ساعت ویدیو، درک عملی این مفاهیم را جا می‌اندازد. مسیر طبیعی بعدی، آموزش ES6 در جاوااسکریپت، کار با DOM در جاوااسکریپت و رویدادها در جاوااسکریپت است. اگر تجربه‌ای از یادگیری این مفاهیم در پروژه‌های خودتان دارید — مخصوصاً اگر با یکی از این پنج تله دست‌وپنجه نرم کرده‌اید — در دیدگاه‌ها بنویسید؛ همین نکته‌های میدانی، برای خواننده‌ی بعدی از هر مستند رسمی ارزشمندتر است. 🧠