راهنمای کامل از سطح مبتدی تا حرفه‌ای برای فهم انواع داده‌ها، رفتار حافظه، تفاوت‌ها و کاربردهای واقعی

بخش ۱: مقدمه – چرا باید انواع داده‌ها را بفهمیم؟

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

• نمی‌توانید داده‌ها را درست ذخیره کنید

• هنگام مقایسه باگ می‌گیرید

• در کار با APIها به خطای نوع داده می‌خورید

• تبدیل نوع داده (Type Coercion) رفتار عجیب پیدا می‌کند

• برنامه در حافظه رفتار ناخواسته دارد

• رفتار Reference و Primitive را اشتباه استفاده می‌کنید

• ساختارهای داده مثل آرایه و آبجکت را نادرست مدیریت می‌کنید

به همین دلیل Data Types یکی از بنیادی‌ترین بخش‌های یادگیری جاوااسکریپت است.

خبر خوب:

در این مقاله همه چیز را با مثال‌های واقعی و قابل لمس یاد خواهید گرفت.

بخش ۲: انواع داده‌ها در جاوااسکریپت

جاوااسکریپت دارای ۸ نوع داده اصلی است:

Primitive Types (بدون مرجع – مقدار ثابت در حافظه)

1. string
2. number
3. boolean
4. null
5. undefined
6. symbol
7. bigint

Reference Types (نوع مرجع: در حافظه یک آدرس دارند)

8. object• array• function• date• regex• map / set• …

اما قبل از ورود به جزئیات، یک تفاوت مهم:

• Primitive = کپی مقدار

• Reference = کپی آدرس (و این یعنی تغییرات خطرناک!)

این موضوع را در بخش‌های بعدی کاملاً لمس می‌کنید.

بخش ۳: Primitive Types – مقداری و قابل لمس

۳.۱ نوع داده string (رشته)

نمونه:

let name = "Kamran";
let message = 'Hello';
let text = `Template Literal`;

مثال‌های واقعی:

ذخیره نام کاربر:

const userName = "َAhmad Kamran";

ساخت پیام کاربر:

let greeting = `Welcome ${userName}`;

کاربرد در پروژه‌ها:

• فرم ثبت‌نام

• جستجوی محصولات

• پیام‌های خطا و هشدار

• ذخیره داده‌های دریافت شده از API

۳.۲ number (عدد)

let age = 25;
let price = 19.99;

جاوااسکریپت فقط یک نوع عدد دارد!

اعداد صحیح و اعشاری یک نوع هستند.

مثال واقعی:

محاسبه قیمت سبد خرید:

let total = 0;
total += 120000;
total += 45000;

console.log(total);

نکته مهم:

جاوااسکریپت در اعشار همیشه دقیق نیست:

0.1 + 0.2 // 0.30000000000000004

در پروژه‌ها باید از:

• کتابخانه‌ها (decimal.js)

• یا روش ضرب و تقسیم

استفاده کرد.

۳.۳ boolean (درست یا غلط)

let isLoggedIn = true;
let hasError = false;

مثال واقعی:

نمایش/عدم نمایش منو:

let isMenuOpen = false;

if (isMenuOpen) {
    console.log("Menu is open");
}

۳.۴ undefined – متغیر تعریف شده اما مقدار ندارد

let x;
console.log(x); // undefined

مثال واقعی:

یک ورودی فرم که هنوز کاربر چیزی ننوشته:

let userInput;

۳.۵ null – مقدار خالی عمدی

let selectedProduct = null;

مثال واقعی:

وقتی هیچ محصولی انتخاب نشده:

let selectedProduct = null;

وقتی کاربر یک محصول انتخاب می‌کند:

selectedProduct = { id: 1, title: "Laptop" };

۳.۶ symbol – برای کلیدهای یکتا

برای پروژه‌های پیشرفته استفاده می‌شود.

۳.۷ bigint – اعداد خیلی بزرگ

let big = 123456789012345678901234567890n;

بخش ۴: Reference Types – داده‌هایی که آدرس دارند

این بخش مهم‌ترین بخش مقاله است؛ چون رفتار Reference در جاوااسکریپت همیشه برای مبتدی‌ها گیج‌کننده است.

اما با مثال‌های واقعی خیلی ساده می‌شود.

۴.۱ object (شیء)

ساختار کلیدی–مقداری:

const user = {
    name: "Sara",
    age: 22
};

مثال واقعی:

ذخیره داده محصول:

const product = {
    id: 1,
    title: "Phone",
    price: 8900000
};

۴.۲ array (آرایه)

لیست داده‌ها:

const numbers = [1, 2, 3];

مثال واقعی:

لیست محصولات:

const cart = [
    { id: 1, title: "Laptop", price: 30_000_000 },
    { id: 2, title: "Mouse", price: 300_000 }
];

۴.۳ function (تابع)

در جاوااسکریپت تابع نوع داده است:

function sum(a, b) {
    return a + b;
}

مثال واقعی:

const showMessage = () => {
    console.log("Welcome");
};

بخش ۵: تفاوت اصلی Primitive و Reference (مهم‌ترین درس)

در Primitive رفتار این است:

let a = 10;
let b = a;

b = 20;

console.log(a); // 10
console.log(b); // 20

اما در Reference:

const obj1 = { name: "Ali" };
const obj2 = obj1;

obj2.name = "Sara";

console.log(obj1.name); // Sara 😱

چرا؟

چون:

• obj1 مقدار نیست

• obj1 آدرس حافظه است

• obj2 همان آدرس را دریافت می‌کند

نتیجه:

تغییر obj2 یعنی تغییر obj1

این یکی از رایج‌ترین باگ‌های تازه‌کارهاست.

بخش ۶: مثال واقعی Reference (لمسی!)

فرض کنید یک فرم دارید:

const user = { name: "" };

// این تابع مقدار را تغییر می‌دهد
function updateUser(obj) {
    obj.name = "Ali";
}

updateUser(user);

console.log(user.name); // Ali

چرا تغییر کرد؟

چون تابع آدرس شیء user را دریافت کرده.

بخش ۷: جلوگیری از مشکل Reference – Copy کردن شیء

کپی سطحی (Shallow Copy)

const userCopy = { ...user };

کپی عمیق (Deep Copy)

۱. روش JSON:

const deepCopy = JSON.parse(JSON.stringify(obj));

۲. روش structuredClone (استاندارد جدید):

const clone = structuredClone(obj);

بخش ۸: typeof – تشخیص نوع داده

typeof 10 // "number"
typeof "Hi" // "string"
typeof [] // "object"
typeof null // "object"  (باگ قدیمی جاوااسکریپت)

نکته مهم:

• typeof برای تشخیص array مناسب نیست

از Array.isArray() استفاده کنید.

بخش ۹: تبدیل نوع داده (Type Casting)

یکی از کاربردی‌ترین بخش‌ها در پروژه‌هاست.

۹.۱ تبدیل به number

Number("10") // 10
Number("") // 0
Number("Hi") // NaN

مثال واقعی:

let price = Number(priceInput.value);

۹.۲ تبدیل به string

String(10) // "10"

مثال واقعی:

let message = "Your total: " + total;

۹.۳ تبدیل به boolean

Boolean("") // false
Boolean("hello") // true
Boolean(0) // false
Boolean(1) // true

مثال واقعی در فرم‌ها:

let isValid = Boolean(input.value);

بخش ۱۰: Truthy و Falsy (فوق‌العاده مهم!)

Falsy values:

• 0

• “”

• null

• undefined

• false

• NaN

مثال واقعی:

if (!username) {
    alert("Please enter your username");
}

بخش ۱۱: مثال‌های واقعی از پروژه‌ها

مثال ۱: مدیریت سبد خرید

let cartTotal = 0;

function addToCart(product) {
    cartTotal += product.price;
}

addToCart({ id: 1, price: 200000 });
addToCart({ id: 2, price: 150000 });

console.log(cartTotal);

مثال ۲: ذخیره داده در LocalStorage (نوع string است!)

localStorage.setItem("user", JSON.stringify(user));

بازخوانی:

const user = JSON.parse(localStorage.getItem("user"));

مثال ۳: ساخت سیستم Todo List

const todos = [];

function addTodo(text) {
    todos.push({
        id: Date.now(),
        text,
        completed: false
    });
}

addTodo("Learn JavaScript");
console.log(todos);

در این مثال انواع داده:

• string → متن

• number → id

• boolean → وضعیت

• object → هر todo

• array → لیست todoها

بخش ۱۲: اشتباهات رایج دانشجویان

❌ اشتباه ۱: مقایسه نوع داده اشتباه

"10" == 10  // true (خطرناک!)

✔️ همیشه از === استفاده کنید

❌ اشتباه ۲: اصلاح کردن آرایه یا شیء هنگام ارسال به تابع (Mutation)

✔️ از کپی استفاده کنید

❌ اشتباه ۳: فکر کردن اینکه null و undefined یکسان‌اند

خیر!

❌ اشتباه ۴: متوجه نبودن رفتار Reference

❌ اشتباه ۵: ذخیره داده در LocalStorage بدون JSON

بخش ۱۳: تمرین عملی (مینی‌پروژه)

پروژه: سیستم مدیریت کاربر

این مثال را بنویسید، اجرا کنید و ببینید چطور انواع داده در کنار هم استفاده می‌شود:

const user = {
    name: "",
    age: null,
    hobbies: []
};

function setName(name) {
    user.name = String(name);
}

function setAge(age) {
    user.age = Number(age);
}

function addHobby(hobby) {
    user.hobbies.push(String(hobby));
}

setName("Sara");
setAge("24");
addHobby("Reading");

console.log(user);

جمع‌بندی

در این مقاله یاد گرفتید:

• انواع داده Primitive و Reference

• تفاوت رفتار آنها در حافظه

• typeof و تشخیص نوع داده

• تبدیل نوع داده – کاربردی و واقعی

• اشتباهات رایج

• مثال‌های پروژه‌ای مثل API، LocalStorage، سبد خرید و Todo List

• ساختارهای داده کاربردی

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