Funkcja strzałkowa z oraz bez klamerek

Mam taki fragment kodu:

let tab1 = (HexValue.split('').map((element, index) => index ));
let tab2 = (HexValue.split('').map((element, index) => {index}));

gdzie HexValue to string.

Daje on różne wyniki. tab1 zwraca 1,2,3... natomiast tab2 zwraca undefined, undefined...

Rozumiem, że różnica wynika z obecności klamerek wokół index. Bo w manualu jest napisane:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Dobrze myślę, czy o czymś pominąłem? Rozumiem, że obecność klamerek oznacza "tu jest funkcja, która coś musi zwrócić". Bo takie coś działa:

let tab3 = (HexValue.split('').map((element, index) =>  {return index} ));

Dobrze myślisz. Kiedy nie ma klamerek domyślnie jest tam niewidzialny return, który zwraca pożądaną wartość. Natomiast stosując klamerki definiujesz funkcję, która musi coś zwrócić.

Edit:
Jak napisał @LukeJL funkcja z klamerkami nie koniecznie musi coś jawnie zwracać. Jej zadaniem może być np. uruchomienie innej funkcji lub nadpisanie zmiennej.

Czyli poniższe zwróci "WTF":

let tab = (HexValue.split('').map((element, index, arr) =>  {index}), "WTF" );

Ten przykład zawsze w konsoli zwróci WTF i (chyba, niech ktoś bardziej doświadczony mnie poprawi) jest błędny. Te wtf nie ma nic wspólnego z map. Równie dobrze możesz zrobić coś takiego let tab = ("a", "b") i wynik będzie "b". Nie wiem, czy taki zapis ma zastosowanie gdziekolwiek.

kosmonauta80 napisał(a):

Czyli poniższe zwróci "WTF":

let tab = (HexValue.split('').map((element, index, arr) =>  {index}), "WTF" );

W Javascripcie istnieje coś takiego jak comma operator, który zwraca zawsze ostatnią wartość

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

więc metody split i map są wykonywane, ale finalnie wynik jest ignorowany i nie trafia do zmiennej tab.

Gdybyś chciał przypisać jedną lub drugą wartość w zależności od wyniku to można skorzystać z operatora ||, ?? lub ? : (który służy jako skrócona wersja if'a)

let tab = undefined || false || "WTF"; // 'WTF'
let tab2 = null ?? undefined ?? false ?? tab // false;
let tab3 = tab2 ? tab : 'WTF 2' // WTF 2 

Tutaj link wyjaśniający jak działają arrow function, o które pytasz
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

oraz
|| -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR
? : -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
?? -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Kolejny raz widać, że klepiąc własne projekty można się sporo nauczyć.

kosmonauta80 napisał(a):

Dobrze myślę, czy o czymś pominąłem? Rozumiem, że obecność klamerek oznacza "tu jest funkcja, która coś musi zwrócić"

Nie musi wcale. Tj. jeśli nic nie zwrócisz, to domyślnie zwróci się undefined:

const foo = x => {};
console.log(foo() === undefined); // true

raczej bym powiedział, że odwrotnie - nieobecność klamerek oznacza, że musisz coś jawnie zwrócić, bo inaczej będzie błąd składniowy:

const foo = x => ; // bład!

const bar = x => 123; // zwracamy 123

// zwracamy wynik wywołania funkcji console.log(), 
// czyli... undefined, bo console.log nic nie zwraca, czyli zwraca undefined
const baz = x => console.log(123); 

// zwracamy undefined
const bay = x => undefined;

Składnia funkcji strzałkowej ma dwie formy:

• argument => {
    operation1;
    operation2;
    return value; // to można ominąć, i wtedy funkcja nic nie zwróci. tzn. zwróci undefined
  }
  

• argument => value; // zwraca wartość "value"
  

Więc W Twoim przykładzie (element, index) => index) funkcja zwróci drugi argument, natomiast (element, index) => {index} to jest to samo co function (element, index) { index; }, czyli nie zwróci nic.

Żeby zamienić (element, index) => index, tak żeby była z klamerkami, musiałbyś dopisać return: (element, index) => { return index; }.