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

در مقاله قبل با جاوااسکریپت آشنا شدیم و یاد گرفتیم که این زبان چه کاربردی در توسعه وب دارد. همچنین اولین کد جاوااسکریپت خود را اجرا کردیم و با دستورهایی مانند console.log() و alert() آشنا شدیم.

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

تقریباً در هر برنامه‌ای لازم است اطلاعاتی را در حافظه نگهداری کنیم. برای مثال ممکن است بخواهیم نام کاربر، سن، قیمت یک محصول، وضعیت ورود کاربر یا نتیجه یک محاسبه را ذخیره کنیم. در جاوااسکریپت برای نگهداری این اطلاعات از Variable یا متغیر استفاده می‌کنیم.

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

متغیر چیست؟

متغیر یا Variable یک نام برای نگهداری یک مقدار در برنامه است.

فرض کنید می‌خواهیم نام یک کاربر را در برنامه نگهداری کنیم.

می‌توانیم یک متغیر ایجاد کنیم:

let userName = "Ali";

در این مثال:

userName → نام متغیر
"Ali"    → مقدار متغیر
می‌توانیم این مفهوم را به‌صورت ساده تصور کنیم:

Variable
┌──────────────┐
│   userName   │
├──────────────┤
│     Ali      │
└──────────────┘

البته این تصویر فقط برای درک ساده مفهوم متغیر است. در عمل، جاوااسکریپت مقدار را در حافظه مدیریت می‌کند.

چرا به متغیر نیاز داریم؟

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

برای مثال:

console.log("Ali");
console.log("Ali");
console.log("Ali");

اگر نام کاربر تغییر کند، باید تمام قسمت‌هایی که نام در آن‌ها نوشته شده است را پیدا و تغییر دهیم.

اما با متغیر می‌توانیم بنویسیم:

let userName = "Ali";

console.log(userName);
console.log(userName);
console.log(userName);

حالا اگر نام کاربر تغییر کند، فقط مقدار متغیر را تغییر می‌دهیم:

let userName = "Sara";

و تمام قسمت‌هایی که از userName استفاده می‌کنند، مقدار جدید را دریافت خواهند کرد.

ایجاد متغیر در جاوااسکریپت

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

var
let
const

در جاوااسکریپت مدرن بیشتر از let و const استفاده می‌شود.

var مربوط به روش قدیمی‌تر تعریف متغیرهاست و در پروژه‌های جدید معمولاً ترجیح داده نمی‌شود.

در ابتدا با let و const شروع می‌کنیم.

تعریف متغیر با let

برای ایجاد یک متغیر که مقدار آن ممکن است در آینده تغییر کند، می‌توانیم از let استفاده کنیم.

let userName = "Ali";

حالا می‌توانیم مقدار آن را تغییر دهیم:

let userName = "Ali";

userName = "Sara";

console.log(userName);

خروجی:

Sara

در اینجا ابتدا مقدار userName برابر "Ali" بود، اما بعداً آن را به "Sara" تغییر دادیم.

تغییر مقدار یک متغیر

وقتی متغیری را با let ایجاد می‌کنیم، می‌توانیم بعداً مقدار آن را تغییر دهیم.

let age = 20;

age = 21;

console.log(age);

خروجی:

21

حتی می‌توانیم چند بار مقدار آن را تغییر دهیم:

let score = 10;

score = 20;
score = 30;
score = 40;

console.log(score);

خروجی:

40

آخرین مقدار ذخیره‌شده در متغیر، 40 است.

تعریف متغیر با const

کلمه کلیدی const برای ایجاد متغیرهایی استفاده می‌شود که نمی‌خواهیم مقدار آن‌ها را دوباره به یک مقدار جدید تغییر دهیم.

مثلاً:

const country = "Iran";

console.log(country);

در اینجا مقدار country را تعیین کرده‌ایم.

اگر تلاش کنیم مقدار آن را تغییر دهیم:

const country = "Iran";

country = "Türkiye";

جاوااسکریپت خطا ایجاد می‌کند.

بنابراین زمانی که مقدار یک متغیر نباید دوباره مقداردهی شود، معمولاً از const استفاده می‌کنیم.

تفاوت let و const

تفاوت اصلی let و const در امکان مقداردهی مجدد است.

مثال let:

let age = 20;

age = 25;

console.log(age);

مثال const:

const birthYear = 2000;

console.log(birthYear);

به‌صورت ساده:

اگر مقدار قرار است تغییر کند → let

اگر مقدار نباید دوباره مقداردهی شود → const

آیا همیشه باید از const استفاده کنیم؟

در جاوااسکریپت مدرن، معمولاً بهتر است ابتدا بررسی کنیم آیا مقدار متغیر قرار است تغییر کند یا خیر.

اگر تغییر نمی‌کند:

const name = "Ali";

اگر تغییر می‌کند:

let score = 10;

score = 20;

این روش باعث می‌شود کد واضح‌تر و قابل فهم‌تر باشد.

کلمه کلیدی var چیست؟

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

مثال:

var name = "Ali";

var هنوز در جاوااسکریپت وجود دارد و ممکن است در کدهای قدیمی آن را ببینید.

اما برای یادگیری جاوااسکریپت مدرن بهتر است تمرکز اصلی خود را روی:

let
const

قرار دهید.

در بخش‌های پیشرفته‌تر دوره، تفاوت‌های var، let و const را دقیق‌تر بررسی خواهیم کرد.

نام‌گذاری متغیرها

انتخاب نام مناسب برای متغیرها یکی از مهارت‌های مهم برنامه‌نویسی است.

مثلاً:

let x = "Ali";

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

بهتر است بنویسیم:

let userName = "Ali";

حالا مشخص است که این متغیر نام کاربر را نگهداری می‌کند.

مثال‌های دیگر:

let userAge = 25;

let productPrice = 500;

let firstName = "Ali";

let isLoggedIn = true;

نام متغیر باید تا حد امکان معنادار باشد.

قوانین نام‌گذاری متغیرها

برای نام‌گذاری متغیرها باید چند قانون را رعایت کنیم.

نام متغیر نباید با عدد شروع شود

این مورد صحیح نیست:

let 1name = "Ali";

اما این مورد صحیح است:

let name1 = "Ali";

استفاده از فاصله مجاز نیست

این کد صحیح نیست:

let user name = "Ali";

به‌جای آن می‌توانیم از روش camelCase استفاده کنیم:

let userName = "Ali";

می‌توان از حروف، اعداد، _ و $ استفاده کرد

مثال:

let userName = "Ali";

let user_name = "Ali";

let $price = 100;

let product1 = "Laptop";

با این حال در کدهای جاوااسکریپت مدرن معمولاً استفاده از camelCase انتخاب رایجی است:

let firstName = "Ali";

let productPrice = 100;

let userAddress = "Tehran";

جاوااسکریپت به حروف بزرگ و کوچک حساس است

جاوااسکریپت به حروف بزرگ و کوچک حساس است.

برای مثال:

let userName = "Ali";

console.log(userName);

با این مورد تفاوت دارد:

console.log(username);

userName و username دو نام متفاوت هستند.

مثال دیگر:

let age = 20;

let Age = 30;

این دو متغیر متفاوت هستند.

بنابراین در جاوااسکریپت باید به حروف کوچک و بزرگ دقت کنید.

مقدار چیست؟

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

برای مثال:

let name = "Ali";

در این کد:

name  → Variable
Ali   → Value

مثال دیگر:

let age = 25;

در اینجا:

age → Variable
25  → Value

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

یکی از مباحث بسیار مهم در جاوااسکریپت، Data Types یا انواع داده است.

داده‌ها می‌توانند انواع مختلفی داشته باشند.

برای مثال:

let name = "Ali";
let age = 25;
let isStudent = true;

این سه متغیر سه نوع داده متفاوت دارند.

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

• String

• Number

• BigInt

• Boolean

• Undefined

• Null

• Symbol

• Object

در ادامه هر کدام را به زبان ساده بررسی می‌کنیم.

String چیست؟

String برای نگهداری متن استفاده می‌شود.

مثال:

let firstName = "Ali";

یا:

let message = "Hello JavaScript!";

همچنین می‌توانیم از کوتیشن تکی استفاده کنیم:

let city = 'Tehran';

در جاوااسکریپت این دو حالت معمولاً برای String استفاده می‌شوند:

"Hello"

و:

'Hello'

مقدار باید داخل علامت نقل‌قول قرار بگیرد.

مثال String

let firstName = "Ali";
let lastName = "Ahmadi";

console.log(firstName);
console.log(lastName);

خروجی:

Ali
Ahmadi

Number چیست؟

نوع Number برای نگهداری اعداد استفاده می‌شود.

مثال:

let age = 25;

let price = 1500;

let temperature = 22.5;

جاوااسکریپت با اعداد صحیح و اعشاری با نوع Number کار می‌کند.

مثال:

let score = 95;

console.log(score);

Boolean چیست؟

نوع Boolean فقط دو مقدار دارد:

true
false

Boolean معمولاً برای نمایش وضعیت‌های دوحالتی استفاده می‌شود.

مثلاً:

let isLoggedIn = true;

یعنی کاربر وارد سیستم شده است.

یا:

let isAdmin = false;

یعنی کاربر مدیر نیست.

مثال:

let isOnline = true;

console.log(isOnline);

خروجی:

true

Undefined چیست؟

اگر یک متغیر ایجاد شود اما هنوز مقداری برای آن تعیین نشده باشد، مقدار آن می‌تواند undefined باشد.

مثال:

let userName;

console.log(userName);

خروجی:

undefined

در اینجا متغیر ایجاد شده، اما مقدار مشخصی ندارد.

Null چیست؟

null برای نشان دادن نبودن عمدی یک مقدار استفاده می‌شود.

مثلاً:

let selectedUser = null;

یعنی در حال حاضر هیچ کاربری انتخاب نشده است.

تفاوت ساده:

let userName;

مقدار:

undefined

اما:

let userName = null;

مقدار به‌صورت صریح null تعیین شده است.

در مقالات بعدی درباره تفاوت این دو مفهوم بیشتر صحبت خواهیم کرد.

BigInt چیست؟

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

مثال:

const bigNumber = 123456789012345678901234567890n;

console.log(bigNumber);

حرف n در انتهای عدد نشان می‌دهد که مقدار از نوع BigInt است.

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

Symbol چیست؟

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

مثال:

const id = Symbol("id");

console.log(id);

Symbol بیشتر در مباحث پیشرفته‌تر جاوااسکریپت کاربرد دارد و در ابتدای مسیر یادگیری، استفاده روزمره زیادی از آن نخواهیم داشت.

Object چیست؟

Object برای نگهداری مجموعه‌ای از اطلاعات مرتبط استفاده می‌شود.

مثلاً می‌خواهیم اطلاعات یک کاربر را نگهداری کنیم:

const user = {
    name: "Ali",
    age: 25,
    city: "Tehran"
};

در این مثال یک Object داریم که چند اطلاعات مرتبط با یک کاربر را نگهداری می‌کند.

در بخش مربوط به Objectها به‌صورت کامل و از پایه با این ساختار آشنا خواهیم شد.

Array چیست؟

Array یا آرایه برای نگهداری چند مقدار در یک ساختار استفاده می‌شود.

مثال:

const fruits = ["Apple", "Banana", "Orange"];

در اینجا سه مقدار داخل یک Array قرار گرفته‌اند.

در بخش آرایه‌ها، متدها و کاربردهای آن‌ها را به‌صورت کامل یاد خواهیم گرفت.

Primitive و Object

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

JavaScript Data Types
        │
        ├── Primitive
        │
        └── Object

انواع Primitive شامل:

String
Number
BigInt
Boolean
Undefined
Null
Symbol

و Object شامل ساختارهایی مانند:

Object
Array
Function

این تقسیم‌بندی در مباحث پیشرفته جاوااسکریپت اهمیت بیشتری پیدا می‌کند.

چگونه نوع یک مقدار را تشخیص دهیم؟

جاوااسکریپت دارای عملگری به نام typeof است.

با استفاده از typeof می‌توانیم نوع یک مقدار را بررسی کنیم.

مثلاً:

let name = "Ali";

console.log(typeof name);

خروجی:

string

مثال Number:

let age = 25;

console.log(typeof age);

خروجی:

number

مثال Boolean:

let isOnline = true;

console.log(typeof isOnline);

خروجی:

boolean

مثال Undefined:

let userName;

console.log(typeof userName);

خروجی:

undefined

بررسی چند نوع داده با typeof

می‌توانیم چند مقدار مختلف را بررسی کنیم:

console.log(typeof "Hello");
console.log(typeof 100);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

نتیجه تقریباً به شکل زیر خواهد بود:

string
number
boolean
undefined
object

ممکن است خروجی typeof null در ابتدا عجیب به نظر برسد.

در جاوااسکریپت:

typeof null

نتیجه:

object

این یک رفتار قدیمی جاوااسکریپت است و یکی از نکاتی است که در مسیر یادگیری با آن مواجه خواهید شد.

فعلاً کافی است بدانید که null از نظر مفهومی یک مقدار تهی است، اما typeof null مقدار object برمی‌گرداند.

ترکیب متغیرها با یکدیگر

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

مثلاً:

let firstName = "Ali";
let lastName = "Ahmadi";

console.log(firstName + " " + lastName);

خروجی:

Ali Ahmadi

همچنین می‌توانیم با Numberها عملیات انجام دهیم:

let price = 100;
let quantity = 3;

let total = price * quantity;

console.log(total);

خروجی:

300

در اینجا نتیجه محاسبه داخل متغیر total ذخیره شده است.

مثال عملی: اطلاعات یک کاربر

بیایید یک مثال ساده ایجاد کنیم.

فرض کنید می‌خواهیم اطلاعات یک کاربر را در چند متغیر نگهداری کنیم:

const firstName = "Ali";
const lastName = "Ahmadi";
const age = 25;
const isStudent = true;

console.log(firstName);
console.log(lastName);
console.log(age);
console.log(isStudent);

در این مثال:

firstName  → String
lastName   → String
age        → Number
isStudent  → Boolean

هر متغیر نوع داده متفاوتی را نگهداری می‌کند.

مثال عملی: محاسبه قیمت محصول

فرض کنید قیمت یک محصول 500 هزار تومان و تعداد آن 3 عدد است.

let price = 500000;
let quantity = 3;

let totalPrice = price * quantity;

console.log(totalPrice);

خروجی:

1500000

این مثال نشان می‌دهد که چگونه می‌توانیم از متغیرها برای نگهداری اطلاعات و انجام عملیات استفاده کنیم.

مثال عملی: وضعیت ورود کاربر

فرض کنید یک سایت داریم و می‌خواهیم بدانیم کاربر وارد حساب خود شده است یا خیر.

let isLoggedIn = false;

console.log(isLoggedIn);

اگر کاربر وارد شود:

isLoggedIn = true;

console.log(isLoggedIn);

در اینجا از نوع داده Boolean برای نگهداری وضعیت استفاده کرده‌ایم.

تفاوت مقداردهی اولیه و مقداردهی مجدد

این دو مفهوم را از همین ابتدا از هم جدا کنیم.

وقتی یک متغیر را ایجاد می‌کنیم:

let age = 20;

در واقع متغیر را ایجاد و مقداردهی اولیه کرده‌ایم.

بعداً اگر بنویسیم:

age = 21;

این کار مقداردهی مجدد است.

مثال کامل:

let age = 20; // Initial assignment

age = 21;     // Reassignment

console.log(age);

اشتباهات رایج در کار با متغیرها

استفاده از متغیری که وجود ندارد

مثلاً:

console.log(userName);

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

تغییر مقدار const

این کد اشتباه است:

const age = 20;

age = 25;

چون متغیری که با const تعریف شده است نمی‌تواند دوباره مقداردهی شود.

استفاده از نام‌های نامفهوم

مثلاً:

let a = 500;
let b = 3;

این کد ممکن است کار کند، اما مشخص نیست a و b چه هستند.

بهتر است بنویسیم:

let price = 500;
let quantity = 3;

اشتباه در حروف بزرگ و کوچک

این دو نام متفاوت هستند:

let userName = "Ali";

console.log(username);

در نتیجه username همان userName نیست.

تمرین عملی

حالا یک تمرین ساده انجام دهید.

تمرین ۱: اطلاعات شخصی

متغیرهای زیر را ایجاد کنید:

• نام

• نام خانوادگی

• سن

• شهر

• وضعیت دانشجو بودن

مثلاً:

const firstName = "Ali";
const lastName = "Ahmadi";
const age = 25;
const city = "Tehran";
const isStudent = true;

سپس نوع هر مقدار را با typeof بررسی کنید.

تمرین ۲: محاسبه قیمت

دو متغیر ایجاد کنید:

let price = 250000;
let quantity = 4;

سپس قیمت کل را محاسبه کنید و در متغیری به نام totalPrice قرار دهید.

خروجی مورد انتظار:

1000000

تمرین ۳: تغییر مقدار

یک متغیر با let ایجاد کنید:

let score = 10;

سپس مقدار آن را به 20 و بعد به 30 تغییر دهید.

در نهایت مقدار آن را در Console نمایش دهید.

تمرین ۴: تشخیص نوع داده

نوع داده موارد زیر را با typeof بررسی کنید:

"JavaScript"
100
99.5
true
undefined
null

قبل از اجرای برنامه، سعی کنید حدس بزنید خروجی typeof برای هر کدام چه خواهد بود.

جمع‌بندی

در این مقاله با یکی از مهم‌ترین مفاهیم پایه جاوااسکریپت یعنی متغیرها و انواع داده آشنا شدیم.

یاد گرفتیم که متغیرها برای نگهداری اطلاعات در برنامه استفاده می‌شوند و برای تعریف متغیر در جاوااسکریپت مدرن بیشتر از let و const استفاده می‌کنیم.

همچنین با انواع داده مهم جاوااسکریپت مانند String، Number، Boolean، Undefined، Null، BigInt، Symbol و Object آشنا شدیم.

یاد گرفتیم که با typeof می‌توانیم نوع یک مقدار را بررسی کنیم و دیدیم که متغیرها چگونه می‌توانند در محاسبات و ساخت برنامه‌های ساده مورد استفاده قرار بگیرند.