Las funciones en JavaScript pueden escribirse de muchas maneras usando una combinación de diversos elementos para crear sus instrucciones. En este post, te explicaremos la diferencia entre pasar una variable por valor y por referencia en JavaScript a la hora de crear una función.
¿Qué es pasar una variable por valor y por referencia en JavaScript?
Cuando hablamos de pasar por valor o por referencia una variable en JavaScript nos referimos a pasar una variable usando un valor primitivo o un valor no primitivo. Entonces, pasar una variable por valor se refiere a asignarle uno de los siete elementos con valores primitivos de JavaScript. Por su parte, pasar una variable por referencia quiere decir que estamos asignándole un elemento con un valor no primitivo, sea un objeto, un array o una función.
¿Cuál es la diferencia?
La diferencia entre pasar una variable por valor y por referencia en JavaScript es su relación con lo que sucede dentro y fuera de la función. Cuando pasamos una reference variable javascript, lo que «ocurre» dentro de la función «repercute» fuera de ella. Mientras tanto, cuando pasamos una variable por valor, lo que «ocurre» dentro de la función, «se queda» en la función, sin alterar el resto del código.
A continuación, te mostramos un ejemplo:
Supongamos que generamos la siguiente función usando valores primitivos, es decir, que la pasamos por valor:
let numero = 21;
const funcionValor = (value) => {
value = value * 10;
console.log (‘Dentro de la función, value es ${value}’);
}
funcionValor (numero);
console.log (‘Fuera de la función, value es ${numero}’);
Entonces, como hemos pasado la variable value por un valor primitivo (es decir, por valor), lo que suceda dentro de la función «se queda» dentro de ella y no afecta lo que se pinta fuera de la misma. El resultado de estas líneas de código es el siguiente:
Dentro de la función value es 210
Fuera de la función, value es 21
Ahora, veamos una función con una variable en su paso por referencia y paso por valor. Por refencia: como hemos visto, un array funciona como referencia. Entonces, a continuación, te presentamos una función hecha con elementos array:
let arrNumeros = [numero]
const funcionReferencia = (value) => {
value [0] * 10;
console.log (‘Dentro de la función, value [0] es ${value[0]}’);
}
funcionReferencia (arrNumeros)
console.log (‘Fuera de la función, arrNumeros [0] es ${arrNumeros [0]}’);
Como esta variable ha sido pasada por un array (es decir, por referencia), lo que sucede dentro de la función repercute en lo que se pinta fuera de ella. A continuación, te presentamos el resultado de estas líneas de código:
Dentro de la función, value [0] es 210
Fuera de la función, arrNumeros [0] es 210
Ya que una imagen vale más que mil palabras, te invitamos a ver este gif en el que se resume fácilmente el efecto de pasar una variable por valor y por referencia en JavaScript.
¿Qué sigue?
Ahora que sabes cómo pasar una variable por valor y por referencia en JavaScript, el siguiente paso es seguir aprendiendo sobre este lenguaje de programación web para crear tus propias líneas de código. Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para desarrollar en JavaScript y ejecutarás tu propio proyecto. ¡Te esperamos!
