Outras formas do Map.

Talvez algumas possam ficar com dúvidas pela forma redutiva das arrow functions de retornar valores, como vi em um comentário acima, sobre Diferença entre "nomes" e "nome"...

Sintaxe de uma função "comum".

Nomeada:

function paraCaixaAlta(valor) { //function statement
    //...instruções
    return novoValor;
}

Anônima:

const paraCaixaAlta = function (valor) { //anonymous function
    //...instruções
    return novoValor;
}

existem alguns elementos que à define como função, dentre eles a palavra chave function, o parênteses () onde definimos um ou mais parâmetros (param1)... (param1, param2)..., os colchetes { }onde uma ou mais instruções podem ser definidas...

...tion (valor) {
    return valor.toUpperCase();
}

...tion (valor) {
    //... outras instruções que faz algo antes
    return valor.toUpperCase();
}

...o nome da função no caso da função nomeada, e ter ou não o valor de retorno, com a palavra chave return, (em algumas literaturas técnicas, você pode ver uma função sem return sendo chamada de "função procedimento" ou mesmo "procedimento", pois esta, só estaria executando alguma/s ação/ações).

Sintaxe da arrow function

Para entender a sintaxe da arrow function, vou fazer uma analogia ao bloco do if tambem definido por { } não só em javascript, mas também em outras linguagens, quando há uma única instrução¹, o colchetes podem serem omitidos.

¹"Por instrução, podemos considerar toda e qualquer Statements ou Expression, definidas ou não pela linguagem, que vai até o ";" que no caso do javascript pode ser omitido)"

Então:

function otherFunction() {
    return 'Hello guy';
}

console.log('Start');
if(true) {
    console.log(otherFunction());
}
console.log('Finish');

Note que apesar de console.log() estar aninhada com a chamada de outra função, isso ainda é somente uma instrução no bloco desse if, oque permite que:

console.log('Start');
if(false) 
    console.log(otherFunction());
console.log('Finish');

console.log(otherFunction()); nunca seja executado neste exemplo, mesmo estando sem nenhum colchetes { }, os colchetes são opcionais nesse caso.

Essa mesma opcionalidade se aplica a uma arrow function, na verdade, a arrow function tem outras duas opcionalidades, os parenteses () quando somente um parâmetro, e o return quando apenas uma única instrução. A arrow fuction, é uma função anônima por natureza, que precisa ser atribuída a uma variável ou definida diretamente em alguma função callback então, no exemplo da aula:

const nomesAtualizados = nomes.map(nome =>  nome.toUpperCase()); //aqui NÃO pode ter mais instruções, "{}" ausentes, "nome.toUpperCase()" é a única instrução, e é a instrução de retorno.

//é o mesmo que:

const nomesAtualizados = nomes.map((nome) => { 
    //aqui poderia ter mais instruções
    return nome.toUpperCase();
});

Note os parênteses e os colchetes omitidos na primeira linha.

O map

O map, como já dito na aula, retorna um novo array. Os valores do novo array é definido na função que passastes para o map. Mas como de fato é isso? bom... pense em um loop comum, iterando sobre cada item do array, a cada iteração seu algorítimo passa esse item para uma outra função modificar, e devolver este novo valor:

function transform(value) {
    //instructions
    return newValue;
}

const arr = [1, 2, 3];
let newArr = [];

for (let i = 0; i < arr.length; i++) {
    newArr.push(transform(arr[i]);
}

console.log(arr);
console.log(newArr);

A grosso modo, é isso é oque o map faz, o map espera por um retorno definido pela sua função, para montar o novo array nos "bastidores" e atribui-lo à uma variável, o map chama sua função, passando alguns argumentos, e o primeiro deles sendo cada item do array, basta sua função ter a assinatura para aceitar esses argumentos. Por isso do nome em ...omes.map(nome => nome.toUpperCase()); você está dizendo que quer receber o primeiro argumento de map, na variável nome. talvez seja mais fácil visualizar o map em uma função comum anônima:

const nomes = ["ana Julia", "Caio vinicius", "BIA silva"];

const nomesAtualizados = nomes.map(function (nome) {
    //aqui poderia ter mais instruções
    return nome.toUpperCase();
});

console.log(nomesAtualizados);

Ou também, passando uma referência de função.

const nomes = ["ana Julia", "Caio vinicius", "BIA silva"];

const nomesAtualizados = nomes.map(paraCaixaAlta);

function paraCaixaAlta (nome) {
    //aqui poderia ter mais instruções
  return nome.toUpperCase();
}

console.log(nomesAtualizados);

Se viu algum erro de qualquer espécie, please, comente para eu alterar, Thx <3.