متغیر و مقدار

در این فصل چه می‌سازی#

متغیر یک جعبهٔ اسم‌دار است که یک مقدار را نگه می‌دارد — این فصل با let و const متغیر می‌سازی، سه جنسِ اصلیِ مقدار (string، number، boolean) را از هم تشخیص می‌دهی، و با template literal متغیرها را وسطِ جمله می‌گذاری. آخر فصل کارتِ یک بازیکن را داری — اسم، امتیاز، وضعیت — که وقتی امتیازش عوض می‌شود، همهٔ گزارش‌هایش در console خودشان به‌روز می‌شوند.

آخر این فصل می‌توانی:

• با let متغیر بسازی و مقدارش را بعداً عوض کنی
• با const مقداری را ثابت اعلام کنی و بگویی کِی let و کِی const
• فرق string و number و boolean را با یک آزمایش در console نشان بدهی
• با template literal یک جمله بسازی که متغیرها تویش نشسته‌اند

قبل از شروع#

• از فصل ۱: وصل‌کردن script.js با <script src> و بازکردن console با F12 — کل این فصل در console زندگی می‌کند.
• از فصل ۱: console.log و فرقِ «متنِ داخل گیومه» با «چیزی که حساب می‌شود».

مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. جعبه‌ای با اسم: let#

فکر کن داری امتیازِ یک بازی را گزارش می‌کنی. امتیاز اولِ بازی صفر است، وسطش می‌شود ۱۲۰. اگر عدد را در ده جای کد دستی نوشته باشی، با هر تغییر باید ده جا را پیدا کنی. راهِ درست: عدد را یک بار در یک جعبهٔ اسم‌دار بگذار و همه‌جا اسمِ جعبه را صدا بزن. به این جعبه متغیر می‌گویند.

let score = 0;
console.log(score);

خط اول را تکه‌تکه بخوان: let یعنی «یک جعبهٔ جدید بساز»، score اسمِ جعبه است، و = یعنی «این مقدار را بگذار تویش». در خط دوم score گیومه ندارد — پس متن نیست؛ JavaScript اسم را باز می‌کند و مقدارِ داخلِ جعبه را چاپ می‌کند: 0.

اسمِ جعبه را خودت انتخاب می‌کنی، با سه قاعده: انگلیسی باشد (مثل اسمِ class ها)، فاصله نداشته باشد، و اگر چندکلمه‌ای شد، از کلمهٔ دوم به بعد را با حرفِ بزرگ بچسبان: playerName. به این سبک camelCase می‌گویند و در JavaScript همه‌جا همین است.

حالا مقدارش را عوض کن — دقت کن دفعهٔ دوم دیگر let نمی‌نویسی، چون جعبه از قبل هست:

score = 120;
console.log(score);

✅ چک کن: در console اول 0 را می‌بینی، بعد 120. یک جعبه، دو لحظه، دو مقدار.

۲. const: قولی که پس نمی‌گیری#

بعضی مقدارها قرار نیست عوض شوند — اسمِ بازیکن وسطِ بازی عوض نمی‌شود. برای این‌ها const داری: مثل let جعبه می‌سازد، ولی درش را قفل می‌کند.

const playerName = "سارا";

حالا عمداً قفل را امتحان کن. این خط را اضافه کن:

playerName = "نیما";

console سرخ می‌شود:

Uncaught TypeError: Assignment to constant variable.

🔧 اگر کار نکرد: پیام دقیقاً همین را می‌گوید: «داری روی متغیرِ ثابت مقدار می‌گذاری.» دو راه داری: اگر این مقدار واقعاً باید عوض شود، از اول با let بسازش؛ اگر نه، خطِ عوض‌کردن را بردار — همان کاری که این‌جا می‌کنیم. قانونِ حرفه‌ای‌ها ساده است: پیش‌فرض const؛ فقط وقتی از اول می‌دانی مقدار عوض می‌شود let. این‌طوری مرورگر خودش نگهبانِ قول‌هایت است.

Checkpoint. قبل از ادامه، جواب بده: اگر score را با const ساخته بودیم، خطِ score = 120; چه می‌کرد؟ (جواب: همان TypeError را می‌داد. امتیاز ذاتش عوض‌شدن است، پس جایش let است.)

۳. سه جنسِ مقدار: string، number، boolean#

هر مقداری که تا حالا در جعبه‌ها گذاشتیم یک جنس دارد:

• string: متن، همیشه داخل گیومه — "سارا"
• number: عدد، بدون گیومه — 120
• boolean: فقط دو مقدارِ true یا false — مثل «بازی تمام شده؟»: const gameOver = false;

گیومه مرزِ بین دو دنیاست: "120" یک متن است که فقط شکلش شبیه عدد است. ببین این فرق کجا خودش را نشان می‌دهد:

console.log(120 + 5);
console.log("120" + 5);

✅ چک کن: خط اول 125 چاپ می‌کند؛ خط دوم 1205!

⚠️ مواظب باش: وقتی یک طرفِ + متن باشد، JavaScript به‌جای جمع‌زدن می‌چسباند. اگر روزی جمعِ عددی‌ات «چسبید»، اولین مظنون گیومه‌های اضافه است.

۴. template literal: متغیر وسطِ جمله#

گزارشِ خشکِ 120 به دردِ کاربر نمی‌خورد؛ می‌خواهی بنویسی «امتیاز سارا: 120». برای جمله‌سازی، JavaScript یک گیومهٔ سوم دارد: backtick — علامت ` روی دکمهٔ کنارِ عددِ 1 در چیدمان انگلیسیِ کیبورد. به متنی که با backtick ساخته می‌شود template literal می‌گویند، و جادویش این است: هرجا ${} بگذاری، یک پنجره به دنیای متغیرها باز می‌شود:

console.log(`امتیاز ${playerName}: ${score}`);

✅ چک کن: console می‌نویسد: امتیاز سارا: 120. مقدارها از جعبه‌ها آمدند و در جمله نشستند — و اگر فردا score عوض شود، همین خط خودش گزارشِ تازه را می‌سازد.

💡 نکته: داخلِ ${} هر مقداری جا می‌شود، حتی یک حسابِ کوچک: ${score + 10}. ولی جمله را ساده نگه دار — حسابِ بلند را اول در یک متغیرِ اسم‌دار بگذار، بعد همان اسم را در جمله صدا بزن؛ هم خواناتر است، هم غلط‌گیری‌اش راحت‌تر.

هنوز مطمئن نیستی گیومه و backtick و جنسِ مقدارها کِی به‌کارت می‌آیند؟ یک آزمایشِ کوچک با نظرِ دوم:

🤖 با AI: از دستیار AI ات بپرس: «در JavaScript فرقِ "120" و 120 چیست؟» بعد جوابش را خودت آزمایش کن: console.log("120" + 5) و console.log(120 + 5) را در آزمایشگاه بنویس و F12 را بزن. فقط چیزی را قبول کن که خروجیِ console تأییدش می‌کند.

کد کاملِ این فصل#

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>کارت بازیکن</title>
  </head>
  <body>
    <main>
      <h1>کارت بازیکن</h1>
      <p>گزارشِ این کارت در console است — F12 را بزن.</p>
    </main>

    <script src="script.js"></script>
  </body>
</html>

و script.js:

// script.js — kart-e bazikon
const playerName = "سارا";
let score = 0;
const gameOver = false;

console.log(`بازیکن: ${playerName}`);
console.log(`امتیاز: ${score}`);

score = 120;
console.log(`امتیاز تازه: ${score}`);
console.log(`بازی تمام شده؟ ${gameOver}`);

واژه‌های تازهٔ این فصل#

در فصل بعد#

متغیرهایت هنوز پشتِ صحنه‌اند — کاربر console را نمی‌بیند. فصل بعد دستت به خودِ صفحه می‌رسد: با document.querySelector عنصر را با همان selector هایی که از ترم ۲ بلدی پیدا می‌کنی و متن و ظاهرش را از JavaScript عوض می‌کنی — همان «راهِ درستی» که فصل ۱ قولش را داد.