نه ویژگی ES6 که هر جاوااسکریپت کاری باید بداند

جاوااسکریپت

در ES6، ویژگی های جذابی به زبان جاوااسکریپت اضافه شده است. پس بدون اتلاف وقت بریم سراغ این ویژگی ها

1. Rest Parameter

به این فانکشن نگاه کنید:

 
Math.max(arg1, arg2, …, argN)

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

 
let max1 = Math.max(3, 5, 5, 1); // 5
let max2 = Math.max(23, 1, 56, 23, 13, 67); // 67

با استفاده از ویژگی rest parameter، شما میتوانید فانکشن هایی مثل Math.max ایجاد کنید.

مثلا:

 
function averageOf(…numbers) {
 let sum = 0;
 
 for (let number of numbers) {
 sum += number;
 }
 return sum / numbers.length;
}
let average = averageOf(5, 6, 2, 1); // 3.5

نقطه ها (…) به شما کمک میکنند که فانکشن های خاصی ایجاد کنید.

2. Rest Promise

Promise به شما این امکان را میدهد که تا زمان تکمیل تسک قبلی، تسک های بعدی را به تاخیر بیاندازید. در مواقعی که شما با تسک های asynchronous سروکار دارید، مثل فراخوانی APIها، این ویژگی واقعا کاراست.

مطالعه بیشتر: آیا جاوااسکریپت Synchronous است یا Asynchronous

قبل از معرفی Promise، ما از callbackها استفاده میکردیم. اما الان امکان بهتری نسبت به callbackها داریم. اما چرا؟

هیچ کس از جهنم callbackها خوشش نمی آید. هرچقدر نیاز به تاخیر یا deffer بیشتر باشد، عمق جهنم بیشتر خواهد شد. جهنم callbackها حتی میتواند چیزی شبیه به مثال زیر شود:

 
processStep1(id, function(data1) {
 processStep2(data1, function(data2) {
   processStep3(data2, function(data3) {
     processStep4(data3, function(data4) {
       finish(data4);
     });
   });
 });
});

اما با Promise کد زیباتری مانند زیر داریم:

 
proccessStep1(id)
   .then(function(data1) {
   return processStep2(data1);
 })
   .then(function(data2) {
   return processStep3(data2);
 })
   .then(function(data3) {
   return processStep4(data3);
 })
   .then(function(data4) {
   finish(data4);
 })
 .catch(errorHandler);

همانطور که ملاحظه میکنید، همه چیز بصورت منطقی مثل زنجیر به هم متصل است. اما این همه ماجرا نیست.

با کمک arrow function شما کدی بهتر از قبل خواهید داشت:

 
proccessStep1(id)
 .then(data1 => processStep2(data1))
 .then(data2 => processStep3(data2))
 .then(data3 => processStep4(data3))
 .then(data4 => finish(data4))
 .catch(errorHandler);

میبینید؟ دیگر نیازی به callback نیست.

3. Arrow Function

امروزه، حتی زبان های برنامه نویسی مدرن تمایل دارند شیوه کدنویسی خود را ساده تر کنند. یکی از وظایف arrow functionها در جاوااسکریپت این است.

فانکشن ها قبل از arrow function بدین صورت نوشته میشد:

 
function sayHello(name) {
 console.log(‘Hello ‘ + name);
}
sayHello(‘Amy’); // Hello Amy

اما الان:

 
const sayHello = name => console.log(‘Hello ‘ + name);
sayHello(‘Amy’); // Hello Amy

خروجی هردو یکسان است اما سینتکس دوم بسیار زیباتر است.

4. Template Literal

Template Literal، در مجموع strings literal هایی هستند که میتوانند به لاین های مختلفی بشکنند و از عبارت interpolate استفاده میکنند (${…}).

در قدیم شما برای تعریف یک رشته از تک quotation (‘) یا double quotes (“) استفاده میکردید. اما در Template literal شما از backtick (`) استفاده میکنید.

 
const bookTitle = ‘JavaScript’;
console.log(`This ${bookTitle} book is great.
I learned so much from it.`);
// This JavaScript book is great
// I learned so much from it.

5. const و let

قبل از ES6، با استفاده از کلیدواژه var متغیر تعیریف میکردیم. اینکار مشکلاتی به همراه داشت.

از آنجایی کهvar دارای block scope نیست، میتواند رقتارهای پیش بینی نشده ای بوجود آورد.

 
var name = ‘Amy’;
if (true) {
 var name = ‘James’;
}
console.log(name); // James

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

با کمک let، اسکوپ متغیر به بلاکی که در آن تعریف شده است محدود میشود. در مثال زیر بجای متغیر var از let استفاده کردم:

 
let name = ‘Amy’;
if (true) {
 let name = ‘James’;
}
console.log(name); // Amy

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

const نیز مانند let است. ما از متغیر const برای متغیرهایی که قرار نیست تغییر کنند استفاده میکنیم.

 
const PI = 3.14;
PI = 3; // error: Uncaught TypeError: Assignment to constant variable.

برای جلوگیری از این چنین مشکلات بجای var از let یا const استفاده کنید.

6. Default Parameter

Default Parameter در جاوااسکریپت این امکان را به شما میدهد تا در فانکشن ها مقادیر پیشفرض برای مقادیر null یا undefined تعریف کنید.

اگر شما زمان فراخوانی فانکشن به آن آرگومانی پاس ندهید، مقدار آن آرگومان بصورت پیش فرض undefined است:

 
const welcome = name => console.log(‘Welcome ‘ + name);
welcome(); // Welcome undefined

بدون ویژگی Default Parameter، اگر شما میخواستید که پارامتر name مقدار پیش فرض داشته باشد اینکار را انجام میدادید:

 
const welcome = name => {
 name = name || ‘Amy’;
 console.log(‘Welcome ‘ + name);
};
welcome(); // Welcome Amy

با معرفی Default Parameter در ES6، فانکشن شما بصورت زیر تبدیل میشود:

 
const welcome = (name = ‘Amy’) => console.log(‘Welcome ‘ + name);
welcome(); // Welcome Amy

بسیار ساده و موثر است، اینطور نیست؟

7. Module

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

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

برای مثال ماژول calculation.js را در نظر بگیرید:

 
export const moduleName = ‘Calculation’;
export function sum(a, b) {
 return a + b;
}

ما از کلید واژه export استفاده کردیم تا از بیرون به متغیر و فانکشن دسترسی داشته باشیم. در فایلی که میخواهیم به متغیر و فانکشن export شده دسترسی داشته باشیم از کلید واژه import استفاده میکنیم:

 
import { moduleName, sum } from ‘./calculation.js’;
console.log(moduleName); // Calculation
let a = sum(5, 8); // 13

8. Class

تا قبل از ES6، چیزی بعنوان کلاس وجود نداشت. ما بجای کلاس از فانکشن استفاده میکردیم.

 
function Person(name) {
 this.name = name;
}
Person.prototype.introduce = function () {
 console.log(`My name is ${this.name}`);
}
let person = new Person(‘Amy’);
person.introduce(); // My name is Amy

اکنون، دیگر لازم نیست اینکار را انجام دهید:

 
class Person {
 constructor(name) {
 this.name = name;
 }
 introduce() {
 console.log(`My name is ${this.name}`);
 }
}
let person = new Person(‘Amy’);
person.introduce(); // My name is Amy

اگر با زبان های برنامه نویسی مثل C# یا Java آشنا باشید، حتما از این ویژگی ES6 خوشحال خواهید شد زیرا سینتکس زبان را تمیز تر و راحت تر میکند.

8. Destructuring

این ویژگی این امکان را به شما میدهد تا بخش خاصی از آبجکت یا آرایه را خارج و به متغیرها assign کنید:

 
let book = {
 title: ‘JavaScript’,
 price: 13,
 author: ‘Amy’
};
let { title, author } = book;
console.log(title, author); // JavaScript Amy

به نقل از: medium

نوشتن دیدگاه

JComments

مقالات طراحی سایت