🔹 React ES6 Variables (متغیرها در React و ES6)

در این درس یاد می‌گیری چطور با متغیرها در ES6 کار کنی و تفاوت بین var، let و const چیه.
در React معمولاً از let و const استفاده میشه چون کد رو ایمن‌تر، خواناتر و قابل پیش‌بینی‌تر می‌کنن.

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

در ES6 سه روش اصلی برای تعریف متغیر داریم:

• var

• let

• const

🔹 var (روش قدیمی)

var name = "Ali";
console.log(name);

📌 var از نسخه‌های قدیمی جاوااسکریپت وجود داشت ولی مشکلات زیادی داشت:

• Scope آن سراسری است (حتی در بلاک‌ها مثل if و for).

• می‌تونه دوباره تعریف (redeclare) بشه.

🔹 مثال:

var x = 10;
var x = 20; // مجاز است!
console.log(x); // 20

🔹 let (روش مدرن‌تر برای متغیر قابل تغییر)

let age = 25;
age = 26;
console.log(age); // 26

📌 ویژگی‌ها:

• Block Scope دارد (فقط داخل بلاکی که تعریف شده معتبر است).

• نمی‌تونه دوباره تعریف بشه در همون بلاک.

• مقدارش قابل تغییر است.

🔹 مثال:

let city = "Tehran";
{
  let city = "Shiraz";
  console.log(city); // Shiraz
}
console.log(city); // Tehran

🔹 const (برای مقادیر ثابت)

const PI = 3.14159;
console.log(PI);

📌 ویژگی‌ها:

• مقدارش قابل تغییر نیست.

• Block Scope دارد.

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

🔹 مثال:

const name = "Sara";
// name = "Reza"; ❌ خطا: مقدار ثابت قابل تغییر نیست

🔹 تفاوت let و const در React

در React معمولاً:

• برای مقادیر ثابت (مثل نام، رنگ، آدرس API و ...) از const استفاده میشه.

• برای مقادیر قابل تغییر موقت از let استفاده میشه.

🔸 مثال در React

const App = () => {
  const siteName = "TabzMedia";
  let visitorCount = 5;

  return (
    <div>
      <h2>Welcome to {siteName}</h2>
      <p>Visitors today: {visitorCount}</p>
    </div>
  );
};

export default App;

📌 siteName ثابت است ولی visitorCount در طول زمان می‌تونه تغییر کنه.

🔹 ترکیب با State

در React، به‌جای let برای تغییر مقدار متغیرها از state استفاده می‌کنیم:

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  const appName = "Counter App";

  return (
    <div style={{ textAlign: "center" }}>
      <h2>{appName}</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default Counter;

📌 اینجا:

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

• count با state کنترل میشه چون متغیریه که قراره در طول اجرا تغییر کنه.

🔹 محدوده (Scope) در ES6

🔹 بازتعریف و تغییر مقدار

🔹 نکته مهم برای React

در React تقریباً همیشه از const استفاده کن مگر اینکه واقعاً نیاز به تغییر موقت داشته باشی.
چون این باعث میشه:

• کدت قابل پیش‌بینی‌تر بشه

• خطاهای ناگهانی کمتر بشن

• عملکرد بهتری در build نهایی داشته باشی

✅ خلاصه

✅ نتیجه:
در ES6 و React، بهترین روش برای تعریف متغیرها استفاده از const و در صورت نیاز let است.
var دیگه در پروژه‌های مدرن استفاده نمی‌شود چون باعث خطاهای غیرمنتظره می‌شود.