JavaScript

Как в данном случае лучше заменить стрелочную функцию на обычную?

Всем привет!
У меня несколько вопросов касательно программы, ссылку прилагаю ниже.
Предположим, что я хочу сделать обычную функцию то насколько это актуально?
В чём разница и когда лучше использовать стрелочную, а когда обычную функцию?
Как собственно поменять функцию стрелочную на обычную в строках ниже?

handleClickEdit = () => {
alert(`Pressed edit button of ${this.props.action}`);
}

handleClickRemove = function (){
alert(`Pressed remove button of ${this.props.action}`);
}

https://jsfiddle.net/bytwj8gk/2/
Ни то, ни другое, синтаксис методов класса:

handleClickEdit() {
  alert(`Pressed edit button of ${this.props.action}`);
}

handleClickRemove(){
  alert(`Pressed remove button of ${this.props.action}`);
}
________

Стрелки придуманы как сокращение, в первую очередь для мелких однострочных функций.

console.log( [1, 2, 3].map(function(e) { return e * 2 }) );
console.log( [1, 2, 3].map(e => e * 2) );

Отбрасываются слова function, return, фигурные и обычные скобки, приятно сокращает код. В таком контексте и так очевидно, что там ожидается функция, слова function / return только загрязняли код.

Новые кодеры любят злоупотреблять стрелками, и гордятся, что их код короче, потому что написали => вместо function...

Имхо, для однострочных (3, 5 - по ситуации) / анонимных - стрелки, для объявления функций - function ( слово быстрее бросается в глаза в коде ).

От всего написанного есть исключения, железобетонных правил нет, сильно зависит от вкусовщины и чувста прекрасного.
Илья Ларионцев
Илья Ларионцев
62 360
Лучший ответ
Евгений Тимченко Я делаю стрелочные в классах, а вне классов function. Мало того, я считаю, что это логично - функция - это функция, а стрелочное - это типа метод, а не функция как таковая. Что со мной не так?
Если текущий контекст не важен (this), то можно и заменить.
АС
Артём Сикера
88 854
Вот главные отличия стрелочных функций от обычных.
https://learn.javascript.ru/arrow-functions
так уберите стрелки и function напишите. Вот проблема.

function handleClickEdit() {
alert(`Pressed edit button of $ { this.props.action } `);
}

function handleClickRemove() {
alert(`Pressed remove button of $ { this.props.action } `);
}

P.S нет там никакого сакрального смысла, просто набирать на клавиатуре быстрее