В чем отличия .then((data) => {...}); от .then(data => {...});

Question

я учу JS и then в Promise мне не очень понятен.

Есть ли отличия этого кода:

dataTransfer.then(product => {
    setTimeout(() => {
        console.log(product);
    }, 2000);
});

и этого

dataTransfer.then((product) => {
    setTimeout(() => {
        console.log(product);
    }, 2000);
});

Буду очень признателен за небольшое объяснение!

Answer 1

Выражения стрелочных функций имеют более короткий синтаксис по сравнению с функциональными выражениями и лексически привязаны к значению this (но не привязаны к собственному this, arguments, super, или new.target). Выражение стрелочных функций не позволяют задавать имя, поэтому стрелочные функции анонимны, если их ни к чему не присвоить.

Подробнее тут

// Круглые скобки не обязательны для единственного параметра:
(singleParam) => { statements }
singleParam => { statements }

Answer 2

Круглые скобки в стрелочных функциях используются для передачи аргументов - как и в обычных (function(){}):

const someFunc = () => { return "Hello, world!"; } // 0 параметров
const anotherFunc = (a) => { return a * 2; } // 1 параметр
const andAnother = (a, b, c) => { return a + b * c; }  // 3 параметра
// И так далее - в круглых скобках можно написать всё то же,
// что и в круглых скобках в function(){}

const useES6 = (...args) => { return args; } // ES6 spread operator! (если вы о нем  знаете)

Вариант без скобок был сделан специально. Он работает для функций только с одним аргументом:

const multiplyBy2 = a => { return a*2; } // Работает для одного аргумента

const notWorkingFunc = a, b => { return a+b; } // Не сработает для двух
const anotherNotWorking =  => { return 1; } // Тоже не сработает (да и выглядит странно)

const useES6 = ...args => { return args; } // ES6 spread operator тут не работает

В вашем случае, так как параметр у функции один, то разницы нет.
Надеюсь, поможет.

БЛОГ НА HUSL

В чем отличия .then((data) => {...}); от .then(data => {...});

Ответы (2 шт):