4 ویژگی مدرن جاوا اسکریپت که باید از آن استفاده کنید

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

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

Template literals
Let and Const
Arrow Functions
Destructuring

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

تمام این ویژگی ها به صورت native بر روی مرورگرهای مدرن پشتیبانی می شود.اگر شما می خواهید بخشی از کدهای زیر رو امتحان کنید کافیه که Chrome Developer Tools رو باز کنید و کد رو تایپ کنید

Template Literals

قبل از ES6 برای الحاق رشته ای ما با این شکل زشت روبرو بودیم که باعث میشد کدهامون زشت باشه:

var name = 'Mosh'; 
var message = 'Hi ' + name + ',';

1 2	var name = 'Mosh'; var message = 'Hi ' + name + ',';

حالا با template literals که قبلا template strings نامیده می شد، ما می تونیم رشته ها رو با string تعریف کنیم و از همه دردسرها راحت بشیم:

var name = 'Mosh'; 
var message = `Hi ${name},`;

1 2	var name = 'Mosh'; var message = `Hi ${name},`;

توجه داشته باشید که من در اینجا از کاراکتر backtick استفاده کردم.این کاراکتر رو با single quotation اشتباه نگیرید.این کاراکتر دقیقا قبل از شماره 1 صفحه کلید شما قرار داره.

برای اضافه کردن placeholder در template literal ما از سینتکس ${expression}استفاده کردیم.شما میتونید داخل{} هر expression جاوا اسکریپت قرار بدید.در اینجا ما نام متغیر رو قرار دادیم.همچنبن می تونید یک تابع رو فراخوانی کنید.

مزیت دیگه استفاده از template literals این است که می تونید در چندین خط اونا رو بنویسید و گسترش بدید.این ویژگی هنگامی که میخواید یک ایمیل بفرستید خیلی مفید است:

var message = `
Hi ${name},

Thank you for joining my mailing list. 

Happy coding,
Mosh
`;

var message = `

Hi ${name},

Thank you for joining my mailing list.

Happy coding,

Mosh

Let and Const

تا قبل از ES6 ما از کلمه کلیدی var برای تعریف متغیر استفاده می کردیم.scope تعریف شده با استفاده از var در واقع entire enclosing function است.به مثال زیر دقت کنید

function doSomething() {
   for (var x = 0; x < 5; x++) { 
      // Technically, x should only be scoped to this block because this is 
      // where we have defined x. 
   }

   // But it turns out that x is available here as well! 
   console.log(x); // 5 
}

function doSomething() {

for (var x = 0; x < 5; x++) {

// Technically, x should only be scoped to this block because this is

// where we have defined x.

}

// But it turns out that x is available here as well!

console.log(x); // 5

}

متغیرهای تعریف شده در یک block باید فقط در همون بلوک scop شده باشند.در این مثال x نباید در خارج از بلوک for قابل دسترسی باشد.یک مشکل دیگر استفاده از var این است که اگر شما آن را در top level بیرون تابع تعریف کنید یک property در global object ایجاد می کند:

var x = 1; 
console.log(window.x); // 1

1 2	var x = 1; console.log(window.x); // 1

ES6 دو تا keywords برای حل کردن این مشکلات معرفی کرد:let و const.هر دو این کلمات کلیدی متغیرهایی که تعریف می کنند scope میشن در “block” نه در function”:

function doSomething() {
   for (let x = 0; x < 5; x++) { 
      // With the "let" keyword, now x is only accessible in this block.
   }

   // x is out of the scope here
   console.log(x); // x is not defined  
}

function doSomething() {

for (let x = 0; x < 5; x++) {

// With the "let" keyword, now x is only accessible in this block.

}

// x is out of the scope here

console.log(x); // x is not defined

}

با const ما می تونیم یک متغیر ثابت تعریف کنیم.بنابراین نمی تونیم بعد اون رو reassign کنیم:

const x = 1; 
x = 2; // throws "Assignment to constant variable."

1 2	const x = 1; x = 2; // throws "Assignment to constant variable."

همچنین بر خلاف var، دو کلمه کلیدی let و const اگر در بالاترین سطح استفاده شود یک property در global object ایجاد نمی کند:

let x = 1; 
console.log(window.x); // undefined

1 2	let x = 1; console.log(window.x); // undefined

بنابراین شما باید موارد زیر رو رعایت کنید:

از var دیگر استفاده نکنید.فقط از let و const استفاده کنید.
constرو به let ترجیح بدید.از let فقط زمانی استفاده کنید که نیاز به re-assign داشته باشید در غیر اینصورت برای جلوگیری از re-assigning از const استفاده کنید

Arrow Functions

ویژگی مورد علاقه من در ES6 که واقعا کاربری و باحاله.arrow functions یک سینتکس مختصر و clean برای نوشتن توابع به شما می دهددر مثال زیر ما یک function expression در ES5 رو داریم:

const square = function(number) { 
   return number * number; 
}

const square = function(number) {

return number * number;

}

با arrow functions ما دیگر از کلمه کلیدی function استفاده نمی کنیم و به جای اون از (=>) بین پارامترها و بدنه تابع استفاده می کنیم

const square = (number) => { 
   return number * number; 
}

const square = (number) => {

return number * number;

}

اگر تابع ما یک خط باشد و یک مقدار را return کند دیگر نیازی به curly braces و کلمه کلیدی return نداریم:

const square = (number) => number * number;

1	const square = (number) => number * number;

این سینتکس نسبت به قبل خیلی تمیزتر و مختصرتر نیست؟

اما صبر کنید ما میتونیم حتی اون رو کوچیکتر کنیم.اگر arrow function ما فقط یک پارامتر داشته باشد، ما میتونیم پرانتزها رو نیز حذف کنیم:

const square = number => number * number;

1	const square = number => number * number;

اگر تابع ما هیچ پارامتری نداشته باشد،باید از یک جفت پرانتز استفاده کنیم:

const sayHello = () => { console.log('hello'); };

1	const sayHello = () => { console.log('hello'); };

Arrow functions مخصوصا زمانی مفید خواهد بود که ما نیاز داشته باشیم یک callback functions رو به عنوان arguments پاس بدیم:

// ES5
var activeJobs = jobs.filter(function(job) { 
    return job.isActive; 
});

// ES6
const activeJobs = jobs.filter(job => job.isActive);

// ES5

var activeJobs = jobs.filter(function(job) {

return job.isActive;

});

// ES6

const activeJobs = jobs.filter(job => job.isActive);

آموزش مقدماتی تا پیشرفته جاوا اسکریپت (javascript) - کاملا پروژه محور

به مثال زیر دقت کنید

// ES5
function onSubmit() { 
    // Keep a reference to "this" so we can use it in the inner function below. 
    var that = this; 

    orderService.store(order, function(result) { 
       // In JavaScript, ever function defines its own "this" value. So, "this" in this inner function 
       // here is different from "this" in the onSubmit() function. That's why we had to keep a 
       // reference to "this" and store it in "that". Now, we can use "that": 

       that.result = result; 
    });
}

// ES5

function onSubmit() {

// Keep a reference to "this" so we can use it in the inner function below.

var that = this;

orderService.store(order, function(result) {

// In JavaScript, ever function defines its own "this" value. So, "this" in this inner function

// here is different from "this" in the onSubmit() function. That's why we had to keep a

// reference to "this" and store it in "that". Now, we can use "that":

that.result = result;

});

}

Arrow functions بر خلاف توابع معمولی this را rebind نمی کنند.اگر ما تابع داخلی را با arrow function جایگزین کنیم، دیگری نیازی نداریم که یک reference به this داشته باشیم.

// ES6
function onSubmit() { 
    orderService.store(order, result => { 
       // Since we're using an arrow function here, "this" references the "this" value of the containing function
       // (onSubmit). Arrow functions don't re-define "this". 
       this.result = result; 
    });
}

// ES6

function onSubmit() {

orderService.store(order, result => {

// Since we're using an arrow function here, "this" references the "this" value of the containing function

// (onSubmit). Arrow functions don't re-define "this".

this.result = result;

});

}

Destructuring

Destructuring یک expression است که به ما اجازه می دهد تا properties ها رو از یک شی extract کنیم یا آیتم ها رو از یک آرایه.فرض کنید که ما یک شی آدرس شبیه مثال زیر داریم:

const address = { 
   street: '123 Flinders st',
   city: 'Melbourne',
   state: 'Victoria'
};

const address = {

street: '123 Flinders st',

city: 'Melbourne',

state: 'Victoria'

};

حالا فرض کنید که در جایی دیگر ما به این properties نیاز داریم و مقدار اون ها رو میخوایم در متغیرهایی ذخیره کنیم:

const street = address.street;
const city = address.city; 
const state = address.state;

const street = address.street;

const city = address.city;

const state = address.state;

ما در واقع داریم “address.” رو 3 بار تکرار می کنیم.Object destructuring به ما یک سینتکس خیلی تمیز و باحال برای extract کزدن value های properties های یک object می دهد:

const { street, city, state } = address;

1	const { street, city, state } = address;

این یک خط کد معادل قطعه کد بالا هست بدون تکرار address و خیلی تمیز و مرتب.فکر کنیم این خط کد نیاز به توضیح نداشته باشد و شما متوجه شده باشید که ما به همین راحتی value ها را extract کردیم.

حالا اگر ما به همه properties نیاز نداشته باشیم باید چیکار کنیم؟

const { street } = address;

1	const { street } = address;

Object destructuring زمانی مزیت خودش رو نشون میده و واقعا کاربردی میشه که شما nested objects داشته باشید:

const person = { 
   name: 'Mosh', 
   address: {
      billing: { 
         street: '123 Flinders st',
         city: 'Melbourne',
         state: 'Victoria'
      }
   }
};

const person = {

name: 'Mosh',

address: {

billing: {

street: '123 Flinders st',

city: 'Melbourne',

state: 'Victoria'

}

};

بدون destructuring ما باید این کد خیلی نچسب و پرتکرار رو می نوشتیم

const street = person.address.billing.street;
const city = person.address.billing.city;
const state = person.address.billing.state;
// So annoying!

const street = person.address.billing.street;

const city = person.address.billing.city;

const state = person.address.billing.state;

// So annoying!

حالا ما می تونیم با استفاده از یک خط کد به این نتیجه برسیم:

const { street, city, state } = person.address.billing;

1	const { street, city, state } = person.address.billing;

ما همچنین می تونیم آرایه ها رو destructure کنمی فقط کافیه به جای ({}) از ([]) استفاده کنیم.فرض کنید که یک آرایه با دو آیتم داریم که هر کدام دو متغیر مختلف را نگه داری می کنند:

// ES5
const values = ['John', 'Smith'];
const first = values[0];
const last = values[1]; 
// ugly!

// ES5

const values = ['John', 'Smith'];

const first = values[0];

const last = values[1];

// ugly!

با destructuring ما می تونیمقطعه کد بالا رو با یک خط کد بازنویسی کنیم:

// ES6
const values = ['John', 'Smith'];
const [first, last] = values;

// ES6

const values = ['John', 'Smith'];

const [first, last] = values;

ویژگی های مورد علاقه ES6 شما چیه؟ می تونید ویژگی های دلخواهتون رو در کامنت ها با ما به اشتراک بزارید.

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

مرتضی گفت:

مارس 2, 2020 در 10:21 ق.ظ

وب سایتتون رو دوست دارم چون تخصصی و بیشتر مطالبتون در مورد جاوااسکریپت هست. منم بدجوری شیفته جاوااسکریپت کردین

پاسخ
- مهدی گفت:
  
  مارس 2, 2020 در 12:25 ب.ظ
  
  سلام مرتضی عزیز.
  خیلی خوشحالیم که مطالب مفید بوده برات و باعث شیفته شدنت به جاوا اسکریپت شده
  
  پاسخ

Template Literals

Let and Const

Arrow Functions

Destructuring

مطالب زیر را حتما مطالعه کنید

آموزش کار با timing event ها

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

this در جاوا اسکریپت (JavaScript)

تفاوت for in و for of

2 دیدگاه

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