arrow-functions

Arrow Function ها در جاوا اسکریپت

در جاوا اسکریپت ES6 مدل نوشتاری (syntax) تعریف کردن توابع تغییر کرد. با استفاده روش جدید به صورت کوتاه و خلاصه تر می توان یک تابع تعریف کرد. البته همچنان به روش قدیمی هم می توان یک تابع تعریف کنیم اما با استفاده از مدل جدید کدهای کمتری می نویسیم. نظر سنجی ها نشان می دهد که Arrow Function ها جزء معروف ترین تغییرات در ES6 هستند.

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

Arrow Functions ها چه هستند؟

Arrow Functions ها که به آن ها fat arrow هم گفته می شود سینتکس (syntax) جدیدی برای نوشتن توابع هستند. برای نوشتن توابع به این روش از علامت <= که شبیه یک فلش چاق است استفاده می شود. وقتی از Arrow Functionها استفاده می کنیم نیازی به نوشتن دو کلمه کلیدی function و return نمی باشد.

 

استفاده از Arrow Function ها

سینتکس های مختلفی برای نوشتن arrow functionها وجود دارد. در اینجا متداول ترین نوع آن را مورد بررسی قرار می دهیم. به مثال زیر نگاه کنید. در این مثال نحوه تعریف تابع در ES5 و ES6 را مقایسه می کنیم.

        
            // ES5 تعریف تابع در
            var hello = function(){
                return 'Hello';
            }

            // ES6 تعریف تابع در
            const hello = () => 'Hello';

            // نمایش خروجی در کنسول
            console.log(hello());
        
    

به مثال بالا دقت کنید. در تعریف تابع در ES5 یک متغیر با کلمه کلیدی var به نام hello تعریف کردیم و آن را مساوی با function قرار دادیم. و در بدنه تابع که در بین { } قرار می گیرد با استفاده از کلمه کلیدی return رشته ی Hello را بر می گردانیم.
حالا برای تعریف همین تابع در ES6 برای تعریف متغیر از کلمه const استفاده شده است. سپس نام تابع و در اینجا به جای استفاده از کلمه function از این علامت <= () استفاده کردیم، سپس رشته ی Hello بدون درج کلمه کلیدی return آورده شد. تابع ما در اینجا خیلی خلاصه تر و کوتاه تر نسبت به ES5 شد.

 

خروج تابع به شکل object

می دانیم که برای تعریف آبجکت از { } استفاده می کنیم. در توابع برای اینکه خروجی تابع به شکل آبجکت باشد بعد از علامت <= پرانتر باز و بسته می کنیم و داخل پرانتز آبجکت را تعریف می کنیم. مثال زیر:

        
            // خروجی تابع از نوع آبجکت

            const hello = () => ({msg:'Hello'});
        
    

 

استفاده از پارامتر در Arrow Functions

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

        
            // یک پارامتر
            const hello = (name) => `Hello ${name} `;
            console.log(hello('Saeed'));

            // بیشتر از یک پارامتر
            const hello = (firstName, lastName) => (`Hello ${name} ${lastName} `);
            console.log(hello('Saeed', 'Panahi'));
        
    

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

 
 
 
 

نویسنده: سعید پناهی

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

تفاوت let و var

در گذشته تنها روشی که برای تعریف متغیر در جاوا اسکریپت استفاده می شد استفاده از کلمه کلیدی var بود. این کلمه برای مدت های طولانی برای تعریف متغیر ها در جاوا اسکریپت به کار می رفت اما مشکلاتی هم به همراه داشت که باعث شد درنسخه های بعدی جاوا اسکریپت با اضافه کردن دو کلمه کلیدی دیگر const و let برای تعریف کردن متغیر، این مشکلات بر طرف شود. بعد از انتشار نسخه ۶ جاوا اسکریپ دو کلمه کلیدی دیگر let و const برای تعریف متغیر به این زبان اضافه شد. که در مجموع سه کلمه کلیدی برای تعریف متغیر در این زبان مورد استفاده قرار می گیرد. به طور کلی کلمه کلیدی const برای تعریف یک ثابت به کار می رود. منظور از ثابت متغیری است که مقدار آن ثابت است مثلا اگر یک ثابت رو معادل یک رشته قرار دادیم نمی توان آن را تغیر داد.

لزوم استفاده از Lazy Loading برای تصاویر

امروزه استفاده از تصاویر در محتوای صفحات وب بسیار زیاده شده. اصلا بدون استفاده از تصاویر، صفحات وب خشک و کسل کننده می شوند. این موضوع وقتی اهمیت بیشتری پیدا می کند که محتوای وب سایت، مطلب آموزشی یا تبلیغ و مواردی از این دست داشته باشد. که در این حالت نقش تصاویر بسیار مهم هستند و بدون استفاده از تصاویر عملا کار ناقص می ماند. اما مشکل اینجاست که استفاده از تصاویر باعث می شود که سرعت لود صفحه ی وب پایین بیاد و همین موضوع به خودی خود یک مساله جدی است. اگر کاربری وارد وب سایت شود و سرعت لود صفحه مناسب نباشد باعث می شود کاربر به جای اینکه صبر کند تا صفحه لود شود به طور کامل از وب سایت شما خارج شود. حالا فرض کنید که سرعت اینترنت کاربر هم زیاد مناسب نباشد! برای حل این مشکل از تکنیک Lazy Loading استفاده می کنیم که درادامه به بررسی بیشتر و نحوه استفاده از آن می پردازیم.