let و const در ری اکت | دوره جامع آموزش React

Overview of ES6 Features: Let and const Keywords and Arrow Functions

با React چه برنامه هایی می سازیم؟

قبل از شروع صحبت در مورد جاوا اسکریپت باید در مورد مطلبی تذکر بدهم:

هنگامی که در مورد فریم ورک هایی مانند React یا Angular یا View صحبت می کنیم باید بدانید که با استفاده از آن ها می توان دو نوع برنامه ساخت:

SPA یا Singla Page Application
MPA یا Multi-Page Application

در صفحات SPA فقط یک فایل HTML به ما برگردانده می شود و از آن جا به بعد به عهده React است تا عناصر را روی کامپیوتر کاربر (و نه روی سرور) Render کند. این در حالیست که در صفحات MPA اگر آدرس مرورگر تغییر کند دو صفحه HTML مختلف دریافت می کند. در واقع تعداد این صفحات ممکن است بسیار زیاد باشد. در MPA ها نیز می توان از React استفاده کرد اما فقط در قسمت های خاصی از صفحه و تمام صفحه توسط React کنترل نمی شود.

روش محبوب تر، SPA است چرا که اگر شما تمام صفحه را با جاوا اسکریپت مدیریت کنید هیچ وقت لازم نیست که به سرور برگردید تا صفحه را reload کنید. این مسئله از نظر UX بسیار عالی است زیرا همه چیز سریعا اتفاق می افتد. حتی اگر کاربران در یک صفحه React منتظر بارگذاری محتوای صفحه باشند، از سمت شما یک spinner (علامت لودینگ) یا خود صفحه را می بینند نه اینکه یک صفحه خالی یا صفحه لودینگ که کاربر هیچ کاری نتواند بکند.

بنابراین برنامه های SPA کاملا توسط جاوا اسکریپت مدیریت می شوند و تمام عناصر (کامپوننت های) صفحه نیز از نوع react هستند و کل صفحه یک کامپوننت ریشه ای react محسوب می شود. از طرف دیگر صفحات MPA مخلوطی از HTML و CSS عادی و کمی react خواهند بود. مثلا قسمت گالری تصاویر دست react خواهد بود و این قسمت های ریز از وجود یکدیگر خبر ندارند.

نکته بعدی اینجاست که در برنامه های SPA تنها یک بار تابع ()render را فراخوانی می کنیم چرا که تمام صفحه یک عنصر ریشه ای react محسوب می شود اما در صفحات MPA باید برای هر کامپوننت/قسمت یک تابع ()render داشته باشیم.

کدهای react ای که برای MPA ها می نویسید تفاوتی با کدهای SPA ندارد بنابراین با گذراندن این دوره می توانید هر دوی این برنامه ها را بسازید اما تمرکز ما در این دوره روی SPA ها خواهد بود. استفاده از react برای MPA ها آنچنان توجیهی ندارد.

کلیدواژه‌های let و const

از آنجایی که کار با react نیاز به جدیدترین ویژگی های ES6 دارد بنابراین این جلسه و چند جلسه آینده را به مرور این ویژگی ها اختصاص داده ایم.

حتما با کلیدواژه var آشنا هستید؛ با استفاده از این کلیدواژه می‌توان متغیرها را در جاوا اسکریپت ایجاد کرد اما برخی از متغیرها هیچگاه تغییر نمی کنند و همیشه ثابت هستند. با معرفی ES6 دو کلیدواژه جدید معرفی شدند: let و const

هنوز هم می توانید از var استفاده کنید اما شدیدا پیشنهاد می شود که به جای var از let و const استفاده کنید. Let در عمل نسخه جدید var است و از آن برای نگهداری مقدار متغیرها استفاده می شود. شما باید هنگامی از let استفاده کنید که واقعا مقدار موردنظرتان متغیر باشد و تغییر کند و زمانی از const استفاده کنید که قرار است مقدار خاصی را تعریف کنید و هیچگاه تغییرش ندهید. ما در این دوره از var استفاده نخواهیم کرد.

بگذارید در عمل برایتان توضیح بدهم. به سایت jsbin.com بروید. از قسمت بالای سایت صفحات HTML و Output را غیرفعال کنید (با کلیک کردن روی آن ها) و به جای آن ها Javascript و console را فعال نمایید.

قسمت بالای JSBin برای تنظیم صحیح محیط کار

من یک متغیر به نام myName می سازم:

var myName = 'Amir';
console.log(myName);

حالا با فشردن کلیدهای Ctrl + Enter خروجی در قسمت Console نمایش داده می شود:

Amir

حالا اگر مقدار نام را تغییر دهیم مقدار متغیر نیز تغییر می کند:

var myName = 'Amir';
console.log(myName);

myName = 'mahdi';
console.log(myName);

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

"Amir"

"mahdi"

در این کد اگر var را به let تغییر دهیم هیچ اتفاقی نمی افتد اما نتیجه همان خواهد بود:

let myName = 'Amir';
console.log(myName);

myName = 'mahdi';
console.log(myName);

خروجی این کد با کد قبلی یکسان است.

توجه داشته باشید که redefine کردن متغیر، یعنی تعریف دوباره یک متغیر مثلا:

Var myName = ‘Amir’;
Var myName = ‘Mahdi’;

اما می توانید مقدار متغیر را بدون دوباره تعریف کردن آن به روزرسانی کنید:

Var myName = ‘Amir’;
myName = ‘Mahdi’;

تعریف دوباره یعنی استفاده از کلیدواژه var یا let یا const.

نکته مهم: var به شما اجازه می دهد متغیرها را دوباره تعریف کنید (که اصلا شکل و منطق جالبی ندارد) اما let به شما اجازه تعریف دوباره (redefine) را نمی دهد بلکه فقط می توانید مقدار یک متغیر را به روزرسانی کنید.

حالا اگر در مثال خود از const استفاده کنید چطور؟

const myName = 'Amir';
console.log(myName);

myName = 'mahdi';
console.log(myName);

در این کد با خطا روبرو می شویم. مقدار Amir نمایش داده می شود اما مقدار mahdi خطای TypeError را می گیرد به این دلیل که قرار بود const ها ثابت باشند و هیچگاه مقدار جدیدی نگیرند.

توابع فلشی (Arrow Functions)

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

Function functionName () {
	// some code here
}

اما Arrow Function ها به شکل زیر تعریف می شوند:

Const functionName = () => {
	// some code here
}

آرگومان های این تابع درون قسمت پرانتزی قرار می گیرند. این نوع توابع مشکلات متعددی که با کلیدواژه this در جاوا اسکریپت داشتیم را حل می کند. در بسیاری از اوقات کلیدواژه this در جاوا اسکریپت باعث بروز مشکلاتی می شد (آن چیزی نبود که ما فکر می کردیم) اما اگر از this در این نوع از توابع استفاده کنید همیشه زمینه خود را حفظ می کند و ناگهان تغییر نخواهد کرد.

همچنین ما این تابع را در یک const ذخیره کرده ایم اما شما می توانید از let استفاده کنید؛ البته اگر می خواهید بعدا مقدار آن را تغییر دهید که تقریبا چنین حالتی پیش نمی آید.

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

function printMyName (name) {
  console.log(name);
}

printMyName('Amir');

اگر بخواهیم همین کد را در یک Arrow Function بنویسیم میگوییم:

const printMyName = (name) => {
  console.log(name);
}

printMyName('Amir');

خروجی این تابع نیز همان Amir خواهد بود.

چند نکته کوتاه

اولا اگر تابع شما فقط یک آرگومان دریافت می کند (مانند تابعی که بالا نوشتیم که فقط name را می گرفت) می توانید پرانتزها را حذف کنید:

const printMyName = name => {
  console.log(name);
}

printMyName('Amir');

توجه داشته باشید که اگر تابع شما دو یا تعداد بیشتری آرگومان می گیرد نمی توانید از این syntax استفاده کنید. همچنین اگر تابع شما هیچ آرگومانی نمی گیرد باید پرانتزها را به صورت خالی قرار دهید. مثال:

const printMyName = () => {
  console.log('Amir');
}

printMyName();

دوما اگر تنها کاری که تابع شما می کند return کردن یک مقدار است (بدون خط های اضافی) می توانید curly braces های بدنه تابع را نیز حذف کنید. به مثال زیر دقت کنید:

const multiply = (number) => {
  return number * 2;
}

console.log(multiply(2));

اگر بخواهیم curly braces ها را حذف کنیم باید return را در یک خط نوشته و کلیدواژه return را حذف کنیم:

const multiply = (number) => number * 2;

console.log(multiply(2));

مثلا در همین مثال می توانیم به نکته 1 برگردیم و از آنجا که فقط یک آرگومان داریم پرانتزها را نیز حذف کنیم:

const multiply = number => number * 2;

console.log(multiply(2));

هدف من از معرفی این syntax ها این نیست که شما حتما آن ها را حفظ کنید بلکه می خواهم ذهن شما با این قالب ها آشنا شود تا اگر جایی آن ها را دیدید تعجب نکنید.

امیدوارم این قسمت برایتان مفید بوده باشد. در قسمت بعدی در مورد ویژگی های بیشتری از ES6 صحبت خواهیم کرد.

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

میثم

01 آذر 1398

سلام چرا وسط آموزش قفل گذاشتین،اصلا منطقی نیست!!!!کلا کاری کنید قبل از خرید اشتراک کسی نتونه،مقالات رو ببینه

علی

31 شهریور 1398

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