فهرست سرفصل‌های React
خانه (Home) مقدمه (Intro) شروع کار (Get Started) اولین اپ (First App) رندر HTML (Render HTML) ارتقا (Upgrade) آشنایی با ES6 (ES6) کلاس ها در ES6 (ES6 Classes) توابع پیکانی ES6 (ES6 Arrow Functions) متغیرها در ES6 (ES6 Variables) متد map روی آرایه ها (ES6 Array map()) دیس ترکچرینگ (تقسیم ساختاری) (ES6 Destructuring) عملگر پخش (Spread) (ES6 Spread Operator) ماژول ها در ES6 (ES6 Modules) عملگر سه تایی (Ternary) (ES6 Ternary Operator) رشته های قالبی (Template Strings) (ES6 Template Strings) مقدمه JSX (JSX Intro) عبارت ها در JSX (JSX Expressions) خصیصه ها در JSX (JSX Attributes) شرط ها در JSX (JSX If Statements) کامپوننت ها (Components) کلاس ها (Class) پراپس ها (Props) (Props) دیس ترکچرینگ پراپس ها (Props Destructuring) پراپس children (Props Children) رویدادها (Events) رندر شرطی (Conditionals) لیست ها (Lists) فرم ها (Forms) ارسال فرم (Forms Submit) فیلد Textarea (Textarea) فیلد Select (Select) چند ورودی در فرم (Multiple Inputs) چک باکس (Checkbox) دکمه های رادیویی (Radio) پورتال ها (Portals) Suspense (Suspense) استایل دهی با CSS (CSS Styling) CSS Modules (CSS Modules) CSS-in-JS (CSS-in-JS) مسیریابی (Router) (Router) ترنزیشن ها (Transitions) (Transitions) Forward Ref (Forward Ref) کامپوننت های مرتبه بالاتر (HOC) (HOC) استایل دهی با Sass (Sass) هوکس چیست؟ (What is Hooks?) هوک useState (useState) هوک useEffect (useEffect) هوک useContext (useContext) هوک useRef (useRef) هوک useReducer (useReducer) هوک useCallback (useCallback) هوک useMemo (useMemo) هوک های سفارشی (Custom Hooks) کامپایلر (Compiler) کوئیز (آزمون کوتاه) (Quiz) تمرین ها (Exercises) سیلابس (سرفصل دوره) (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) آمادگی مصاحبه (Interview Prep) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
React

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

آخرین بروزرسانی: 1404/08/24

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

در این صفحه با متغیرها در ES6 آشنا می شوی. متغیر (Variable) یعنی یک جعبه کوچک در حافظه. داخل این جعبه می توانی عدد یا متن ذخیره کنی.

متغیرها در ES6 چطور تعریف می شوند؟

قبل از ES6 فقط یک راه برای ساختن متغیر بود. همیشه از کلمه var استفاده می کردیم و همه جا همین بود. اگر متغیر را اشتباه می نوشتی، ممکن بود سراسری ساخته شود. در حالت strict mode این کار خطا تولید می کرد.

در ES6 سه کلمه داریم: var، let و const. این ها شبیه سه نوع قفسه در یک کمد هستند. هرکدام قانون مخصوص خودشان را برای محدوده و تغییر دارند.

var؛ مدل قدیمی با محدوده تابع

کلمه var قدیمی ترین روش ساخت متغیر در جاوااسکریپت است. اگر بیرون تابع از var استفاده کنی، متغیر سراسری می شود. اگر داخل تابع باشد، فقط همان تابع به آن دسترسی دارد.

اگر از var داخل یک بلاک مثل حلقه for استفاده کنی، متغیر بیرون بلاک هم دیده می شود. یعنی var محدوده تابع دارد، نه محدوده بلاک.

var x = 5.6;

مشاهده در ادیتور

let؛ نسخه امن تر با محدوده بلاک

کلمه let نسخه بلاک محور var است. یعنی متغیر فقط همان جایی دیده می شود که داخلش تعریف شده است. اگر داخل یک بلاک مثل حلقه for از let استفاده کنی، بیرون حلقه دیگر در دسترس نیست.

let x = 5.6;

مشاهده در ادیتور

نکته: let محدوده بلاک دارد. یعنی دقیقا بین آکولاد باز و بسته معتبر است؛ مثل محدوده یک زنگ در برنامه مدرسه.

const؛ متغیر با مرجع ثابت

کلمه const هم مثل let محدوده بلاک دارد. تفاوت این است که بعد از مقداردهی دیگر نمی توانی متغیر را به چیز دیگری نسبت بدهی.

const x = 5.6;

مشاهده در ادیتور

اسم const کمی گمراه کننده است. const مقدار را کامل قفل نمی کند، بلکه مرجع را ثابت می کند. یعنی نمی توانی خود متغیر را به یک چیز کاملا جدید نسبت بدهی.

با const نمی توانی مقدار ساده، آرایه یا شیء را دوباره نسبت بدهی. اما می توانی عضوهای آرایه را عوض کنی یا ویژگی های شیء را تغییر بدهی. فقط خود متغیر باید به همان آرایه یا شیء قبلی اشاره کند.

چطور متغیرها در ES6 را تمرین کنیم؟

برای تمرین، چند مرحله ساده انجام بده. این تمرین ها مثل سوال های کوتاه سر کلاس هستند.

  1. یک مثال ساده با var بنویس و محدوده آن را تست کن.
  2. همان کد را با let بازنویسی کن و نتیجه را مقایسه کن.
  3. یک متغیر const بساز و سعی کن آن را دوباره مقداردهی کنی.
  4. در یک آرایه const عضوها را تغییر بده و نتیجه را ببین.

اگر نیاز به مرور کلی خود ES6 داشتی، صفحه آشنایی با ES6 (ES6) در همین بخش را ببین. برای کار با توابع جدید هم می توانی به صفحه توابع پیکانی ES6 (ES6 Arrow Functions) سر بزنی.

برای دسترسی سریع، لینک متغیرها در ES6 را در ذهن نگه دار. این صفحه مرجع اصلی تو برای تفاوت var، let و const است.

جمع بندی سریع

  • قبل از ES6 فقط var برای تعریف متغیر وجود داشت.
  • در ES6 سه کلمه var، let و const داریم.
  • var محدوده تابع دارد و داخل بلاک محدود نمی شود.
  • let محدوده بلاک دارد و امن تر رفتار می کند.
  • const مرجع را ثابت می کند اما داخل آرایه و شیء قابل تغییر است.