Funcionalidad del return en JavaScript

Question

Estudiando el paradigma funcional en JavaScript me encontré con este código:
var rooms = ["H1", "H2","H3"];

var newRooms = rooms.map(function(rm) {
if (rm == "H3"){ return "H4"; }
else { return rm; }
});

Los outputs:
newRooms; // ["H1","H2","H4"]
rooms; // ["H1","H2","H3"]

Por que el return sirve allí para reemplazar el "H3" por el "H4", cual es su función exactamente, por que pensé que solo funcionaba para literalmente solo retornar algo de una función.

Luis Maracara Cruz · Accepted Answer

la funcion map de array lo que hace es iterar sobre cada elemento de un arreglo y lo reemplaza por el return de la funcion callback:
Ejemplo: Imagina que tienes un arreglo de numeros y quieres cambiarlo por un arreglo de los mismos numeros pero por 2.


var arrayOfNumber = [1,2,3,4];

var callbackFunction = function(number){
return number * 2;
}

var newArrayOfNumber = arrayOfNumber.map(callbackFunction);

// output [2,4,6,8]
console.log(newArrayOfNumber)

Ahi lo que hace el map es ejecutar la funcion callbackFunction en cada uno de los numeros y asigna en su posicion lo que retorna (numero * 2), claramente puedes jugar con numero y no solamente retornar numeros, sino tambien objetos, string, lo que quieras.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

Ricardo Cuaresma · Answer

El return sirve para retornar un valor una vez se termina de ejecutar una función.
Entonces el valor retorna justo en donde llamaste a la función, también por eso una invocación de función doSomething() es una expresión porque se evalúa a un valor, como si hicieras una suma o cualquier otro calculo.
Las funciones son objetos, un valor que puedes pasar como argumento, y ejecutarlo donde lo tengas.
Ahí pasas como argumento la función y dentro de map se ejecuta, puedes hacer lo mismo con tus propias funciones, pasarle como argumento otra función y ejecutarla.

Gabitohh · Answer

Según la documentación de Mozilla:

El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

Este método ejecuta una misma función para cada elemento del array en que se aplica, se va ir añadiendo un elemento a un nuevo array según el resultado de ejecutar dicha función con cada elemento como parámetro.

Por que el return sirve allí para reemplazar el "H3" por el "H4"

Veamos esta función
const cambio = (elemento) => {
    if (elemento === 3) {
        return 5;
    } else {
        return elemento;
    }
};

Si el elemento que se usa como parámetro es 3, se cambiará por 5. Si no es el caso se conservará el mismo elemento. Con los condicionales se evalúa el elemento y dependiendo del elemento se retorna un valor u otro.
Podemos generar un nuevo array al que se aplique este cambio (de 3 a 5), de esta manera


elementos = [1,2,3,4,3,2,1,0,3];

const cambio = (elemento) => {
    if (elemento === 3) {
        return 5;
    } else {
        return elemento;
    }
};

nuevos = [];
for (let i = 0;i < elementos.length;i++) {
    nuevos.push(cambio(elementos[i]));
}

console.log(nuevos);

Esto es un poco largo, entonces podemos hacer uso de map(). Como ya dije esta va aplicar la función que se use como parámetro sobre cada elemento y se va añadir el resultado de esta llamada al nuevo array que se genera.


elementos = [1,2,3,4,3,2,1,0,3];

const cambio = (elemento) => {
    if (elemento === 3) {
        return 5;
    } else {
        return elemento;
    }
};

nuevos = elementos.map(cambio);
console.log(nuevos);

Esto es básicamente lo que pasa con el ejemplo que pones, si el elemento sobre el que es la iteración actual es "H3" se va a añadir "H4" al nuevo array generado, en otro caso se añade el mismo elemento (por eso es que se retorna el mismo elemento).
Con map() se puede usar cualquier tipo de función, solo tiene que quedar claro que al nuevo array se va a añadir el valor retornado por la función que se use como parámetro.

Funcionalidad del return en JavaScript

3 Answers

Add your own answers!

Ask a Question