12 مفهوم مهم جاوااسکریپتی که قبل شروع یادگیری ری اکت باید بدونیم!

همه ما میدونیم که ری اکت یک کتابخانه جاوااسکریپتی هست، یعنی پایه و اساس React همون مباحث Javascript هستن. اگه قصد شروع یادگیری ری اکت رو داشته باشیم، خیلی خیلی ضروریه که این 12 مفهوم مهم جاوااسکریپت رو بدونیم تا امکان شروع یادگیری ری اکت رو داشته باشیم!

پس اگه قصد شروع یادگیری ریکت رو داریم باید این 12 مفهوم مهم جاوااسکریپتی که تو این مقاله مطرح میشه رو حتما حتما مطالعه کنیم تا بعدا دچار مشکل و سردگمی نشیم!

قضیه چیه ؟

اگه قصد شروع یادگیری کتابخانه ری اکت رو داریم، بشدت ضروریه که یکسری مفاهیم ضروری و مهم رو درمورد کتابخانه ری اکت بدونیم. چون اصولا ری اکت یک کتابخانه جاوااسکریپتی هست و قراره از همون مفاهیم جاوااسکریپتی، در React استفاده کنیم.

بریم ببینیم این مفاهیم ضروری جاوااسکریپتی چی هستن 🙂

مفهوم 1 – متغیر ها

متغیر ها به ما کمک میکنن که اطلاعات و داده های خودمون رو داخلشون ذخیره کنیم و هر زمان نیاز داشتیم، ازشون استفاده کنیم.

ما تو ری اکت، از همین متغیر ها برای ذخیره کردن اطلاعات و سپس خواندن همین اطلاعات استفاده کنیم.

بطور کل 3 نوع متغیر تو جاوا اسکریپت و ری اکت داریم :

• متغیر از نوع Var :
  

اگه متغیر ما از نوع var باشه، میتونیم هر زمان که نیاز داشتیم مقدارش رو عوض کنیم ( بدون محدودیت در تغییر مقدار متغیر )

حتی میتونیم متغیر هایی که از نوع var هستن رو دوباره بسازیم ( redeclared ). بطور مثال اگه یکبار var x = 1 رو تعریف کردیم، میتونیم دوباره var x = 2 رو در جای دیگری بنویسیم.

• متغیر از نوع let :
  

متغیر هایی که از نوع let هستن نمیتونن 2 یا چند بار تعریف بشن ( not redeclared ) ، اما میتونیم بصورت نامحدود مقدار داخلشون رو عوض کنیم و تغییر بدیم.

• متغیر از نوع const :
  

متغیر هایی که از نوع const هستن، نه امکان تغییر مقدار دارن و نه امکان تعریف مجدد ( نه میشه redeclared کرد، نه مقدارشون رو update کرد )

حالا که هر 3 نوع متغیر جاوااسکریپت رو یادگرفتیم، اجازه بدید هر 3 نوع متغیر رو در عمل ببینیم :

// Var متغیر از نوع

var age = 25;

console.log(age);

// اینجا متغیر خودمون رو مجدد تعریف کردیم

// این نوع متغیر قابلیت تعریف مجدد داره

var age = 30;

console.log(age);

// خروجی لاگ های بالا :

// 25

// 30

// let متغیر از نوع

let name = &quotما داریم اینجا زحمت میکشیم&quot

console.log(name);

// میتونیم این نوع متغیر رو مقداردهی مجدد کنیم

name = &quotFrontEndi.com&quot

console.log(name);

// خروجی لاگ های بالا :

// FrontEndi.com

// const متغیر از نوع

const name = 'اردک تک تک';

console.log(name);

name = 'بوقلمون سفید';

// تو خط بالا ارور میگیریم چون این نوع متغیر امکان مقداردهی مجدد نداره

تو ری اکت، قراره دقیقا از همین متغیر ها استفاده کنیم. قوانین و باید ها و نباید های این نوع متغیر ها در جاوااسکریپت و ری اکت کاملا یکسانه! پس ضروریه که با این 3 نوع متغیر آشنا باشیم.

مفهوم 2 – توابع

یه قانونی تو برنامه نویسی وجود داره به اسم DRY که مخفف عبارت Do Not Repeat Yourself هست ( به این معنی که نباید کد تکراری بنویسیم ).

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

بطور مثال برای اینکه بتونیم از هوک ها استفاده کنیم، باید قوانین توابع جاوااسکریپتی رو بدونیم، چون هوک ها فقط در Functional Component ها قابل پیاده سازی هستن.

همچنین ما میتونیم بخش ها و تیکه کد های پرتکرار پروژه خودمون رو به تابع تبدیل کنیم و هر زمان که نیاز بود، صرفا صداشون بزنیم ( فراخوانیشون کنیم )

همچنین استفاده از Function ها باعث افزایش خوانایی کد میشن و کمک میکنن کد ما استانداردتر باشه.

بطور کلی 2 نوع تابع میتونیم بسایم:

• Function ساده
  
• Arrow Function
  

بریم ببینیم هر 2 مدل تابع رو چطور میشه ساخت :

// ساخت تابع ساده

function multiply(a,b){

    return (a*b); // این تابع 2 عدد به عنوان ورودی میگیره و ضربشون رو برمیگردونه

}

console.log(multiply(3,5)); // خروجی عدد پانزده میشه

// Arrow Function ساخت

let addition = (a,b)=>{

        return (a+b); // این تابع هم 2 عدد به عنوان ورودی میگیره و جمعشون رو برمیگردونه

}

console.log(addition(3,5)); // خروجی عدد هشت هست

مفهوم 3 – آبجکت ها

درک و تسلط کامل به Object ها در جاوااسکریپت خیلی خیلی ضروریه چون ماهیت خیلی از موارد در ری اکت Object هست! بطور مثال خود کامپوننت ها یک نوع Object هستن.

پس برای درک و تسلط کامل به کامپوننت های ری اکتی، باید عمیقا Object هارو درک کرده باشیم.

همچنین برای کار کردن با متود ها، باید بدونیم چطور با آبجکت ها کار کنیم.

تو مثال زیر ما یک Object داریم، اما بنظر شما چطور میشه به یکی از اعضای این آبجکت دسترسی داشت ؟

تو تیکه کد زیر من یکبار خود Object رو لاگ گرفتم و سپس یکی از اعضای این Object رو :

let user = {

  name: &quotاکبر&quot,

  family: &quotاکبری&quot,

  site: &quotفِرانت اِندی&quot

}

console.log(user)

// output : {name:'اکبر',family:'اکبری',site:'فِرانت اِندی'}

console.log(user.site)

// output : فِرانت اِندی

مفهوم 4 – Destructuring

مبحث Destructuring هم یکی از مفاهیم مهم جاوااسکریپت هست که تو ری اکت هم کاربرد داره. به کمک این قابلیت ما میتونیم دیتاهای مورد نیاز خودمون رو از یک Object یا Array استخراج کنیم. حتی میتونیم اسمشون رو هم عوض کنیم.

تو تیکه کد زیر تکنیک Array Destructuring رو شرح دادیم :

const vehicles = ['Swift', 'Blackhawk', 'Fortuner'];

const [car, truck, suv] = vehicles;

console.log(&quotCar is&quot, car);

console.log(&quotTruck is&quot, truck);

خروجی :

// Car is Swift

// Truck is Blackhawk

به خط 1 دقت کنید.. اگه بخوایم به یکی از اعضای این آرایه دسترسی داشته باشیم باید به شماره ایندکس صداشون بزنیم. مثل vehicles[2] که این خیلی جالب نیست و خوانایی کد رو کم میکنه!

اما تو خط 5 و 6 به کمک تکنیک Array Destructuring تونستیم با اسم صداشون بزنیم. این تکنیک توی خط 3 پیاده سازی شده.

برای Object ها هم میتونیم همین کارو بکنیم:

let user ={

  fullName: &quotAhmad AhmadNejad&quot,

  country: &quotIran&quot,

  site: &quotFrontEndi.com&quot,

}

let {fullName: name, country: loc}=user;

console.log(&quotName is &quot + name + &quot which is located in &quot+loc);

تو تیکه کد زیر ما از تکنیک Object Destructuring استفاده کردیم. این تکنیک تو ری اکت و مخصوصا Props های ری اکت خیلی خیلی کاربردیه.

ما میتونیم از بین Props های دریافتی، فقط همون اطلاعاتی که نیاز داریم رو Destructure کنیم.

مفهوم 5 – متود های آرایه

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

خیلی ضروریه که با این متود های کار با آرایه آشنا باشیم.

متود map :

این متود یک آرایه جدید میسازه که در نتیجه اجرای یک تابع روی تک تک اِلِمان های یک آرایه دیگس.

شکل استفاده ( سینتکس ) این متود بصورت زیر هست :

array.map(function(currentValue, index, arr), thisValue)

تو تیکه کد زیر، از متود map استفاده کردیم:

const array = [1, 2, 3, 4];

function func(num) {

  return num + 1;

}

// تو تیکه کد زیر یک آرایه جدید میسازیم که هر اِلِمان این آرایه یک عدد افزایش مقدار داشتن

const newArr = array.map(func);

console.log(&quotOld array is: &quot, array); // Old array is:  [ 1, 2, 3, 4 ]

console.log(&quotNew array is: &quot, newArr); // New array is:  [ 2, 3, 4, 5 ]

تو خط 1 ، یک آرایه درست کردیم.

تو خط 4 یک تابع داریم که یک عدد به عنوان ورودی میگیره، و مقدارش رو + 1 میکنه. ( یکی زیاد میکنه )

تو خط 9 روی آرایه خودمون متود map رو اجرا کردیم و تابع func رو بهش دادیم ( این تابع روی تک تک اِلِمان های آرایه اجرا میشه و در نتیجه مقدار هر اِلِمان یکی زیاد میشه )

نتیجه متود map، یک آرایه جدید هست که داخل newArr ریخته شده.

تو خط 11 و 12 هر 2 آرایه قدیمی و جدید رو لاگ گرفتیم.

متود filter :

این متود روی آرایه ها اعمال میشه و بر اساس شرطی که ما لحاظ کردیم، اِلِمان های دلخواه رو بر میگردونه. ( فیلتر میکنه )

روش استفاده ( سینتکس ) این متود بصورت زیر هست :

array.filter(function(currentValue, index, arr), thisValue)

تو تیکه کد زیر ما از متود filter استفاده کردیم :

const salaries = [10500, 33000, 1600, 4000];

function checkSalary(salary) {

  return salary >= 10000;

}

const resultArray = salaries.filter(checkSalary);

console.log(&quotقیمت های بزرگتر از 10000 عبارتند از :&quot, resultArray);

تو خط 1 یک آرایه داریم که چند قیمت داخلشون ذخیره کردیم.

میخوایم قیمت های بزرگتر از 10000 رو فیلتر کنیم.

تو خط 7 از متود filter برای این کار استفاده کردیم ( خود متود filter از ما یک تابع میگیره که این تابع در خط 3 تعریف شده )

خروجی تیکه کد بالا، یک آرایه هست که شامل 10500 و 33000 هست. ( عدد های بالاتر از 10000 حذف/فیلتر شدن )

متود reduce :

این متود یک تابع رو روی تک تک آیتم های آرایه اعمال میکنه و یک خروجی برمیگردونه.

شکل کلی استفاده از متود reduce بصورت زیر هست :

array.reduce( function(total, currentValue, currentIndex, arr), initialValue )

تو تیکه کد زیر از این متود استفاده کردیم :

let arr = [10, 20, 30, 40, 50, 60];

function sumofArray(sum, num) {

    return sum + num;

}

function myGeeks(item) {

    console.log(arr.reduce(sumofArray));

}

myGeeks()

// output : 210

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

مفهوم 6 – Rest and Spread Operator

دو نوع اپراتور ( operator ) داریم با نامهای rest و spread که هر دوی آنها با سه نقطه ( … ) تعریف میشن اما اصولا کاربرد های متفاوتی دارن.

از Spread Operator بصورت زیر استفاده میکنیم:

const aboutWork = [&quothelp&quot, &quotstudents&quot];

const aboutUs = [&quotFrontEndi.com&quot, ...aboutWork, &quotgrow.&quot];

console.log(aboutUs);

// output : [ 'FrontEndi.com', 'help', 'students', 'grow.' ]

از Rest Operator هم بصورت زیر استفاده میکنیم :

function rest(...theArgs) { // it combines all the input in an array

console.log(theArgs.length);

}

rest(); // 0

rest(5); // 1

rest(5, 6, 7); // 3

// output : 0 1

مفهوم 7 – توابع بازگشتی ( Callback Functions )

جاوااسکریپت برای مدیریت کارها و عملیات های ناهمزمان ( async ) توابع بازگشتی رو در اختیار ما گذاشته.

توابع بازگشتی خودشون رو صدا میزنن و همیشه باید یک شرط برای توقف تابع داشته باشن، واگرنه بصورت نامحدود اجرا میشن.

تو تیکه کد زیر ما یک Callback Functions ساختیم :

// ساخت یک تابع بازگشتی

function callbackFunction() {

console.log(&quotمن یک تابع بازگشتی هستم&quot);

}

setTimeout(callbackFunction, 5000);

console.log(&quotسلام&quot);

// output :

// سلام

// من یک تابع بازگشتی هستم

مفهوم 8 : پرامیس ( Promises )

به این دلیل که توابع بازگشتی مشکل IOC دارن، ما از Promises برای مدیریت کارهای Async ( ناهمزمان ) استفاده میکنیم.

تو تیکه کد زیر ما از مفهوم Promises استفاده کردیم :

let myPromise = new Promise(function(myResolve, myReject) {

// یک پرامیس جدید ساختیم تو خط بالا

let x = &quotFrontEndi"

if (x == &quotFrontEndi&quot) {

	myResolve(&quotYes it is FrontEndi&quot);

} else { //if gives any error

	myReject(&quotError&quot);

}

});

myPromise.then(

function(value) {console.log(&quotهمه چی بدون مشکل داره کار میکنه&quot);},

function(error) {console.log(&quotمتاسفانه ارور داریم&quot);;}

);

// output : Your Code is working fine

مفهوم 9 – کلوژر ( Closure )

کلوژر یکی از جدیدترین و جالب ترین ویژگی های جاوااسکریپت هست و چیزی نیست جز یک تابع خیلی ساده و معمولی که داخل یک تابع دیگه تعریف و return میشه.

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

بطور مثال تو تیکه کد زیر یک Closure داریم :

function outer () {

return function inner () {

    // something

}

}

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

مفهوم 10 – Async/Await

تو جاوااسکریپت انجام برخی کارها نیاز به گذشت زمان داره مثل درخواست های شبکه، دریافت فایل و ..

این عملیات ها ناهمزمان ( Async ) هستن. تو جاوااسکریپت به کمک Async/Await میتونیم این عملیات رو مدیریت کنیم.

بعد از معرفی مفهوم Callback و Promises که راجبشون صحبت کردیم، مفهوم Async/Await معرفی شدن که کمک میکنن کد ما خواناتر و ساده تر باشه.

کلمه کلیدی Async زمانی استفاده میشه که میخوایم تابع ناهمزمان ( Async ) خودمون رو مشخص کنیم.

داخل این تابع Async باید از کلمه کلیدی await استفاده کنیم ( زمانیکه منتظر موندیم و اون اتفاقی که منتظرش بودیم افتاده )

تو تیکه کد زیر از مفهوم Async/Await استفاده کردیم :

async function getData() {

let promise = new Promise((resolve, reject) => {

	setTimeout(() => {

	resolve({ name: &quotFrontEndi&quot});

	}, 200);

});

let Data = await promise;

console.log(Data);

}

getData();

// output : FrontEndi

مفهوم 11 – شی گرایی در جاوااسکریپت

شی گرایی میتونه به 2 روش توی جاوااسکریپت پیاده سازی بشه ( بصورت Class یا Functional )

OOP های کلاسی :

جاوااسکریپت شی گرایی در class رو در ES6 معرفی کرد ( سال 2015 )

برای استفاده از شی گرایی در Class ها باید از کلمه کلیدی class استفاده کنیم :

class Rectangle {

constructor(width, height) {

	this.width = width;

	this.height = height;

}

area() {

	return this.width * this.height;

}

perimeter() {

	return 2 * (this.width + this.height);

}

}

const rect = new Rectangle(5, 10);

console.log(rect.area());	 // Output: 50

console.log(rect.perimeter()); // Output: 30

تو تیکه کد بالا کلاس Rectangle دارای یکسری ویژگی هست ( width و height ) و چندین متود ( area و perimeter ).

ما باید از کلمه کلیدی new برای ساختن یک نمونه ( instance ) استفاده کنیم تا بتونیم به متود هاش دسترسی داشته باشیم.

شی گرایی در توابع :

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

function Rectangle(width, height) {

this.width = width;

this.height = height;

}

Rectangle.prototype.area = function() {

return this.width * this.height;

}

Rectangle.prototype.perimeter = function() {

return 2 * (this.width + this.height);

}

const rect = new Rectangle(5, 10);

console.log(rect.area());	 // Output: 50

console.log(rect.perimeter()); // Output: 30

تو تیکه کد بالا Constructure ما Rectangle Function هست و متود ها به کمک Prototype بهش متصل میشن. برای ساخت یک نمونه جدید از کلمه کلیدی new باید استفاده کنیم و سپس از متود ها استفاده کنیم.

مفهوم 12 – ماژول ( Modules )

زمانیکه ما برای اپیکیشن های تحت وب داریم کدنویسی میکنیم، خیلی ضروری و مهمه که اطمینان حاصل کنیم کد ما قابل نگهداری و بهینه هست!

ماژول ها تیکه کد های مارو به بخش های جداگونه تبدیل میکنن.

علاوه بر این، تیکه کد های ما قابلیت استفاده مجدد دارن ( reusable هستن ) تو ری اکت خیلی زیاد به این مبحث نیاز پیدا میکنیم.

ما باید یاد بگیریم ماژول های خودمون رو فراخوانی ( import ) کنیم و خروجی ( export ) بگیریم.

تو تیکه کد زیر ما یک ماژول ساختیم و در خط آخر export کردیمش :

let variable=&quotمن یک متغیرم"

class GfG{

     constructor(name){

          this.gfg= &quotسلام &quot +name;

}

}

export {variable, GfG};

حالا اگه به یک ماژول مفید نیاز داشتیم، میتونیم به کمک کلمه کلیدی import ، اون ماژول رو فراخوانی کنیم :

import * as syntax from 'syntax.js'

جمع بندی

ری اکت یک کتابخانه جاوااسکریپتی باحال و دوست داشتنی برای ساخت صفحات تحت وب زیبا و بهینه هست.

اگه قصد شروع یادگیری ری اکت رو داریم، بشدت ضروریه که یکسری مفاهیم مهم و ضروری درمورد جاوااسکریپت رو بدونیم ( این نکته رو تو مسیر یادگیری ری اکت مطرح کردیم )

یکی از این پیش نیاز ها، آشنایی با مفاهیم اصلی و مهم جاوااسکریپت هست، تو این مقاله 12 مورد از مهمترین موارد این مفاهیم رو باهم بررسی کردیم 🙂

فراموش نکنیم که برای اینکه بتونیم طبق یک مسیر اصولی و صحیح ری اکت رو یاد بگیریم، نیاز به یک مسیر و نقشه راه درست و اصولی داریم ( در غیر اینصورت به دلیل طی کردن مسیر اشتباه دچار مشکل میشیم )

تو صفحه مسیر یادگیری React ، بهترین و اصولی ترین مسیر یادگیری رو منتشر کردیم. ( اگه قصد شروع یادگیری ریکت رو دارید پیشنهاد میکنم مطالعه کنید )