مروری بر ویژگی‌های ES6 – کلیدواژه‌های let و const و توابع Arrow

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

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

فرق SPA یا MPA

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

این در حالیست که در صفحات MPA اگر آدرس مرورگر تغییر کند دو صفحه HTML مختلف دریافت می کند. در واقع تعداد این صفحات ممکن است بسیار زیاد باشد.

در MPA ها نیز می توان از React استفاده کرد اما فقط در قسمت های خاصی از صفحه و تمام صفحه توسط React کنترل نمی شود.

بنابراین برنامه های SPA کاملا توسط جاوا اسکریپت مدیریت می شوند و تمام عناصر (کامپوننت های) صفحه نیز از نوع react هستند و کل صفحه یک کامپوننت ریشه ای react محسوب می شود.

از طرف دیگر صفحات MPA مخلوطی از HTML و CSS عادی و کمی react خواهند بود.

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

روش محبوب تر

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

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

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

با معرفی ES6 دو کلیدواژه جدید معرفی شدند:

let
const

هنوز هم می توانید از var استفاده کنید اما شدیدا پیشنهاد می شود که به جای var از let و const استفاده کنید.

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

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

مثال:

var myName = 'amir javanmir';
console.log(myName);
//amir javanmir

var myName = 'amir javanmir';

console.log(myName);

//amir javanmir

حالا اگر مقدار نام را تغییر دهیم مقدار متغیر نیز تغییر می کند. این حالت در متغیر var نیز وجود دارد.

مثال:

var myName = 'amir javanmir';
console.log(myName);
//amir javanmir

myName = 'shahryar barati';
console.log(myName);
//shahryar barati

var myName = 'amir javanmir';

console.log(myName);

//amir javanmir

myName = 'shahryar barati';

console.log(myName);

//shahryar barati

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

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

مثال:

var myName = 'amir javanmir';
var myName = 'shahryar barati';
console.log(myName);
//shahryar barati

var myName = 'amir javanmir';

var myName = 'shahryar barati';

console.log(myName);

//shahryar barati

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

مثال:

var myName = 'amir javanmir';
myName = 'shahryar barati';
console.log(myName);
//shahryar barati

var myName = 'amir javanmir';

myName = 'shahryar barati';

console.log(myName);

//shahryar barati

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

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

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

const myName = 'amir javanmir';
console.log(myName);
//amir javanmir

myName = 'shahryar barati';
console.log(myName);
//error

const myName = 'amir javanmir';

console.log(myName);

//amir javanmir

myName = 'shahryar barati';

console.log(myName);

//error

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

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

مثال:

Function functionName () {

}

Function functionName () {

}

اما Arrow Function ها ابتدا یک متغیر تعریف شده سپس علامت مساوی را جلوی آن قرار می دهیم.

در جلوی مساوی در صورتی که یک پارامتر برای تابع دارید آن را بدون پرانتز قرار داده (در صورتی که بیش از یک پارامتر دارید درون پرانتز قرار دهید) سپس یک مساوی بهمراه علامت بزرگتر <= قرار داده و آکلاد تابع را باز و بسته می کنیم.

مثال:

Const functionName = () => {

}

Const functionName = () => {

}

آرگومان های این تابع درون قسمت پرانتزی قرار می گیرند.

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

همچنین ما این تابع را در یک const ذخیره کرده ایم اما شما می توانید از let استفاده کنید.

نمونه یک تابع ساده:

function printMyName (name) {
  console.log(name);
}
printMyName('Amir Javanmir');
//Amir Javanmir

function printMyName (name) {

console.log(name);

}

printMyName('Amir Javanmir');

//Amir Javanmir

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

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

printMyName('Amir Javanmir');
//Amir Javanmir

const printMyName = (name) => {

console.log(name);

}

printMyName('Amir Javanmir');

//Amir Javanmir

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

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

مثال:

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

printMyName('Amir Javanmir');
//Amir Javanmir

const printMyName = name => {

console.log(name);

}

printMyName('Amir Javanmir');

//Amir Javanmir

اگر تابع شما هیچ آرگومانی نمی گیرد باید پرانتزها را به صورت خالی قرار دهید.

مثال:

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

printMyName();
//Amir Javanmir

const printMyName = () => {

console.log('Amir Javanmir');

}

printMyName();

//Amir Javanmir

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

مثال:

const multiply = number => number * 2;

console.log(multiply(2));
//4

const multiply = number => number * 2;

console.log(multiply(2));

//4

کلمات کلیدی را وارد نمایید

مروری بر ویژگی‌های ES6 – کلیدواژه‌های let و const و توابع Arrow

آموزش React

فرق SPA یا MPA

روش محبوب تر

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

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

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

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

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

آموزش React

دسترسی سریع

کلمات کلیدی را وارد نمایید

مروری بر ویژگی‌های ES6 – کلیدواژه‌های let و const و توابع Arrow

آموزش React

فرق SPA یا MPA

روش محبوب تر

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

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

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

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

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

آموزش React

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب