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?
En JavaScript, una variable es un contenedor que se utiliza para almacenar datos o valores. Estos valores pueden ser de diversos tipos, como números, cadenas de texto, objetos, funciones, y más. Las variables permiten a los desarrolladores nombrar y hacer referencia a estos valores para usarlos en diferentes partes de un programa.
Cuando hablamos de pasar una variable por valor y por referencia 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:
//paso por referencia javascript
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:
//parametros por referencia javascript
let arrNumeros = [numero]
const funcionReferencia = (value) => {
value [0] * 10;
console.log ('Dentro de la función, vale [0] es ${value[0]}');
}
//javascript parametros por referencia
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!
