متغیرها تو جاوااسکریپت مثل جعبه‌هایی هستن که اطلاعات (مثل عدد، متن یا لیست) رو نگه می‌دارن و با var، let و const تعریف می‌شن. let برای مقادیر قابل تغییر، const برای ثابت‌ها و var روش قدیمی‌تره. تو یه مثال، با متغیرها پیام خوش‌آمدگویی ساختیم و تو پروژه شمارش کلیک، تعداد رو ذخیره کردیم. متغیرها کد رو ساده و مرتب می‌کنن؛ دست به کد بزن و با اینا، برنامه‌نویسی رو شروع کن!

 

اگه تازه داری جاوااسکریپت رو یاد می‌گیری، احتمالاً شنیدی که متغیرها یکی از پایه‌های این زبانه. اما متغیر چیه و چرا باید ازشون استفاده کنی؟ تو این مقاله قراره با زبون ساده بفهمی متغیرها تو جاوااسکریپت چی‌ان، چطور کار می‌کنن و چه کاربردی دارن. دست به کد بزنیم و بریم سراغش!

متغیر چیه؟

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

مثلاً فکر کن می‌خوای اسم یه نفر رو تو سایتت نشون بدی. به جای نوشتن "علی" هر بار، اونو تو یه متغیر می‌ذاری و هر جا لازم شد ازش استفاده می‌کنی.

چرا متغیرها مهم‌ان؟

  • سادگی: کدت رو خواناتر و مرتب‌تر می‌کنن.
  • انعطاف: می‌تونی مقدارشون رو عوض کنی و دوباره استفاده کنی.
  • مدیریت: اطلاعات رو تو یه جا نگه می‌داری و تغییرشون می‌دی.

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

تو جاوااسکریپت سه راه اصلی برای تعریف متغیر داری:

  1. var: روش قدیمی‌تر که هنوز کار می‌کنه.
  2. let: برای متغیرهایی که ممکنه مقدارشون عوض بشه.
  3. const: برای متغیرهای ثابت که تغییر نمی‌کنن.

چطور متغیر بسازیم؟

برای ساختن متغیر، اول نوعش رو مشخص می‌کنی، بعد یه اسم بهش می‌دی و مقدارش رو می‌نویسی. مثلاً:

let name = "علی";
const age = 25;
var score = 100;
  • let name = "علی";: یه متغیر به اسم name با مقدار "علی".
  • const age = 25;: یه متغیر ثابت به اسم age با مقدار ۲۵.
  • var score = 100;: یه متغیر به اسم score با مقدار ۱۰۰.

فرق var، let و const

  • var: تو کل کد در دسترسه (حوزه بزرگ‌تر) و می‌تونی چند بار تعریفش کنی، ولی ممکنه باعث خطا بشه. مثلاً:
var x = 10;
var x = 20; // مشکلی نداره
  • let: فقط تو بلوک خودش (مثل {}) کار می‌کنه و نمی‌تونی دوباره تعریفش کنی، ولی مقدارش رو می‌تونی عوض کنی:
let y = 5;
y = 10; // اوکیه
let y = 15; // خطا می‌ده
  • const: نه می‌تونی دوباره تعریفش کنی، نه مقدارش رو عوض کنی:
const z = 30;
z = 40; // خطا می‌ده

برای چیزایی که قراره ثابت بمونن (مثل عدد پی یا یه تنظیم خاص)، از const استفاده کن. برای چیزایی که تغییر می‌کنن (مثل امتیاز بازی)، از let.

کاربرد متغیرها تو عمل

بیایم با یه مثال ببینیم متغیرها چطور به کار می‌رن.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>تست متغیرها</title>
</head>
<body>
    <h1 id="greeting"></h1>
    <button onclick="sayHello()">سلام کن</button>
    <script src="script.js"></script>
</body>
</html>
JS (فایل script.js):
let userName = "سارا";
const message = "خوش اومدی به دست به کد!";
let greetingElement = document.getElementById("greeting");

function sayHello() {
    greetingElement.textContent = message + " " + userName;
}

دکمه رو کلیک کن؛ می‌بینی که "خوش اومدی به دست به کد! سارا" رو نشون می‌ده. اینجا:

  • userName یه متغیر قابل تغییره.
  • message ثابته.
  • greetingElement یه عنصر HTML رو نگه می‌داره.

انواع داده تو متغیرها

متغیرها می‌تونن داده‌های مختلفی رو نگه دارن:

  • عدد (Number): مثل let age = 20;.
  • رشته (String): مثل let name = "علی"; (با نقل‌قول).
  • بولین (Boolean): مثل let isActive = true; (درست یا غلط).
  • آرایه (Array): مثل let scores = [10, 20, 30];.
  • شیء (Object): مثل let person = {name: "علی", age: 25};.

مثال:

let count = 5;
let text = "سلام";
let isLoggedIn = false;

یه پروژه عملی: شمارش کلیک

بیایم یه دکمه بسازیم که تعداد کلیک‌ها رو بشماره.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>شمارش کلیک</title>
</head>
<body>
    <button onclick="countClicks()">کلیک کن</button>
    <p id="counter">تعداد کلیک‌ها: 0</p>
    <script src="script.js"></script>
</body>
</html>
JS:
let clickCount = 0;
let counterElement = document.getElementById("counter");

function countClicks() {
    clickCount = clickCount + 1;
    counterElement.textContent = "تعداد کلیک‌ها: " + clickCount;
}

هر بار که کلیک کنی، clickCount یه واحد بیشتر می‌شه و متن عوض می‌شه. اینجا متغیر clickCount مقدارش تغییر می‌کنه و کار رو ساده کرده.

نکات مهم برای متغیرها

  1. اسم خوب انتخاب کن: اسم‌ها باید معنی‌دار باشن (مثل userName نه x).
  2. حساس به حروف: Name و name فرق دارن.
  3. شروع با عدد نه: let 1score خطاست، ولی let score1 درسته.
  4. فاصله نذار: از _ یا حروف بزرگ استفاده کن (مثل user_name یا userName).

مشکلات رایج و راه‌حل‌ها

  • متغیر کار نمی‌کنه: چک کن درست تعریف شده باشه و اسمش رو اشتباه ننوشته باشی.
  • خطای const: اگه سعی کنی مقدار const رو عوض کنی، خطا می‌ده. از let استفاده کن.
  • مقدار گم می‌شه: مطمئن شو متغیر رو تو جای درست تعریف کردی (مثلاً بیرون تابع اگه قراره همه‌جا کار کنه).

قدم بعدی چیه؟

حالا که متغیرها رو شناختی:

  • با شرط‌ها (if) و حلقه‌ها (for) ترکیبشون کن.
  • آرایه‌ها و اشیا رو تست کن.
  • تو پروژه‌های بزرگ‌تر ازشون استفاده کن.

حرف آخر

متغیرها تو جاوااسکریپت مثل دستیارای تو هستن؛ اطلاعات رو نگه می‌دارن و کار رو برات راحت‌تر می‌کنن. با let و const شروع کن، این مثال‌ها رو تست کن و کم‌کم حرفه‌ای‌تر شو. سوالی داری؟ تو کامنت‌های "دست به کد" بپرس. تو مقاله‌های بعدی، بیشتر وارد برنامه‌نویسی واقعی می‌شیم!