چرا نباید از توابع پیکان در جاوا اسکریپت استفاده کنید؟

جاوا اسکریپت، زبان وب، از زمان آغاز به کار پیشرفت های زیادی داشته است. یکی از مهم ترین موارد اضافه شده در سال های اخیر، تابع فلش است که با ES6 (ECMAScript 2015) معرفی شد. توابع Arrow شیوه نوشتن و درک جاوا اسکریپت توسط توسعه دهندگان را متحول کرده است. علیرغم محبوبیت و مفید بودن آنها، یک مفهوم جالب برای بررسی وجود دارد: چرا نباید از توابع پیکان در جاوا اسکریپت استفاده کنید.

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

مقدمه ای بر توابع پیکان

توابع پیکانی که به دلیل نحوی که دارند گاهی اوقات به عنوان توابع “فلش چربی” شناخته می شوند، راه مختصرتری برای نوشتن عبارات تابع در جاوا اسکریپت ارائه می دهند. آنها در ES6 برای رفع مشکلات رایج و خوانایی بیشتر کد و کمتر خطاپذیر معرفی شدند.

نحو پایه

نحو اصلی یک تابع فلش در مقایسه با عبارات تابع سنتی کوتاه تر و ساده تر است. در اینجا یک مقایسه است:

بیان عملکرد سنتی:

const add = function(a, b) {
  return a + b;
};

تابع پیکان:

const add = (a, b) => a + b;

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

ارزش های بازگشتی

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

const square = x => x * x;

برای عملکرد پیچیده تر، از بریس های فرفری و return کلمه کلیدی:

const sum = (a, b) => {
  const result = a + b;
  return result;
};

کنترل پارامترها

توابع پیکان پارامترها را مشابه توابع سنتی مدیریت می کنند. با یک پارامتر واحد، پرانتز اختیاری است:

const double = x => x * 2;

برای پارامترهای صفر یا چندگانه، پرانتز مورد نیاز است:

const greet = () => console.log('Hello, world!');
const multiply = (a, b, c) => a * b * c;

مزایای عملکردهای پیکان

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

واژگانی this

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

مثال زیر را با استفاده از یک تابع سنتی در نظر بگیرید:

function Person() {
  this.age = 0;

  setInterval(function() {
    this.age++;
    console.log(this.age);
  }, 1000);
}

const person = new Person();

در کد بالا، this درون setInterval تماس برگشتی به شی سراسری اشاره دارد (window در مرورگرها)، نه Person نمونه، مثال. این منجر به NaN هر ثانیه ثبت می شود

استفاده از تابع فلش این مشکل را حل می کند:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++;
    console.log(this.age);
  }, 1000);
}

const person = new Person();

اکنون، this در داخل تابع فلش اشاره به Person به عنوان مثال، و سن به درستی افزایش می یابد.

مختصر بودن

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

// Traditional function
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
  return number * 2;
});

// Arrow function
const doubled = numbers.map(number => number * 2);

بازگشت ضمنی

برای توابعی با یک عبارت واحد، توابع فلش امکان بازگشت ضمنی را فراهم می‌کنند و نیاز به آن را از بین می‌برند return کلمه کلیدی و به همین دلیل است که نباید از آن استفاده کنید توابع پیکان. :

const getLength = str => str.length;

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

بدون اتصال از this

توابع پیکان خود را ندارند this، arguments، super، یا new.target اتصالات آنها برای توابع غیر متد که نیازی به اتصالات خاص خود ندارند مناسب هستند. این رفتار به جلوگیری از اشتباهات رایج مرتبط با this binding در جاوا اسکریپت

موارد استفاده رایج

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

روش های آرایه

روش های آرایه مانند map، filter، reduce، و forEach مکان های رایجی هستند که توابع فلش می درخشند:

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => number * number);

const evens = numbers.filter(number => number % 2 === 0);

const sum = numbers.reduce((total, number) => total + number, 0);

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

شنوندگان رویداد

توابع پیکان را می توان به عنوان شنونده رویداد استفاده کرد، اگرچه باید در مورد آن احتیاط کرد this متن نوشته:

document.getElementById('button').addEventListener('click', () => {
  console.log('Button clicked');
});

وعده ها

هنگام کار با Promises، توابع فلش زنجیره ای را ساده می کنند then و catch کنترل کننده ها:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

محدودیت ها و ملاحظات

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

خیر this الزام آور

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

const person = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // Output: Hello, my name is undefined

در مثال بالا، this.name است undefined زیرا this داخل تابع arrow به زمینه بیرونی اشاره دارد نه به person هدف – شی.

خیر arguments هدف – شی

توابع پیکان خود را ندارند arguments هدف – شی. در عوض، آنها بر روی arguments شی از محدوده عملکرد بیرونی. این رفتار هنگام کار با توابعی که نیاز به مدیریت تعداد متغیری از آرگومان ها دارند می تواند محدود کننده باشد:

const add = () => {
  console.log(arguments);
};

add(1, 2, 3); // Output: Uncaught ReferenceError: arguments is not defined

استفاده از پارامترهای استراحت یک جایگزین مناسب است:

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // Output: [1, 2, 3]

برای متدها مناسب نیست

توابع پیکان نباید به عنوان متد در اشیا استفاده شوند، زیرا خود آنها را ندارند this الزام آور:

const person = {
  name: 'Bob',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // Output: Hello, my name is Bob

در این مورد، یک عبارت تابع سنتی برای متدهای شی مناسب تر است.

کد قابل خواندن

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

// Less readable due to excessive chaining
const result = data.map(x => x.value).filter(val => val > 10).reduce((sum, val) => sum + val, 0);

// More readable with intermediate variables
const values = data.map(x => x.value);
const filteredValues = values.filter(val => val > 10);
const result = filteredValues.reduce((sum, val) => sum + val, 0);

نتیجه

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

با این حال، توسعه دهندگان باید به محدودیت های خود، مانند کمبود توجه داشته باشند

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

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