Variables y funciones en JavaScript: lo mínimo para arrancar
En esta página
Seguí leyendo
Enterate del próximo post
Un mail cuando publico algo nuevo. Sin spam y te podés dar de baja cuando quieras.
Un mail cuando publico algo nuevo. Sin spam y te podés dar de baja cuando quieras.
En la primera clase del curso alguien preguntó algo que no tiene nada de tonto: "¿dónde escribo esto?" Nunca había abierto una terminal. Antes de tipos, antes de objetos, antes de class, hace falta esto: qué es una variable, qué es una función, y dónde corre en verdad ese código.
console.log("Hola");
// HolaEste código corre en dos lugares, sin instalar nada. El primero es la consola del navegador: se abre con F12 (o clic derecho, "Inspeccionar"), se va a la pestaña "Console", y se escribe ahí directo. El segundo es Node, un programa aparte que ejecuta JavaScript fuera del navegador, en una terminal: se guarda el código en un archivo consola.js y se corre node consola.js.
Todos los ejemplos de este blog están corridos en Node antes de publicarse, y el comentario // Hola de arriba es la salida real que imprimió, no lo que "debería" imprimir. Esa costumbre no cambia en el resto de la serie.
let nombre = "Fernando";
console.log(nombre);
// Fernando
nombre = "Ana";
console.log(nombre);
// Analet nombre = "Fernando" hace dos cosas a la vez: crea una variable llamada nombre, y le asigna el valor "Fernando". Después, nombre = "Ana" cambia qué valor tiene esa misma variable. El nombre queda fijo, lo que guarda adentro no.
El signo = acá no es una comparación como en matemática: es el operador de asignación. "Guardá lo que está a la derecha en el nombre que está a la izquierda."
const PI = 3.1416;
PI = 3;
// TypeError: Assignment to constant variable.const declara una variable igual que let, pero prohíbe reasignarla después. Intentar cambiar PI tira un error apenas se ejecuta esa línea, no un aviso silencioso.
La costumbre en el código moderno es empezar siempre con const, y usar let solo cuando de entrada ya se sabe que el valor va a cambiar (un contador, un total que se acumula). No es una regla del lenguaje, es una convención, pero es la que van a ver en el resto de esta serie: si un ejemplo usa let, es porque esa variable se reasigna en algún momento del mismo bloque.
Existe un tercer nombre, var, más viejo que los otros dos. Se sigue viendo en código anterior a 2015, pero no hace falta para nada de lo que sigue: alcanza con let y const.
function saludar(nombre) {
return `Hola, ${nombre}`;
}
saludar("Fernando");
// "Hola, Fernando"
saludar("Ana");
// "Hola, Ana"function saludar(nombre) { ... } define una función: le pone un nombre (saludar), le dice qué datos necesita para trabajar (nombre, entre paréntesis, se llama parámetro) y qué hace con ellos adentro de las llaves. Nada de eso se ejecuta todavía: definir la función solo la deja lista.
saludar("Fernando") es lo que la ejecuta de verdad: se la está llamando, pasándole "Fernando" como argumento, el valor concreto que va a ocupar el lugar del parámetro nombre esa vez. return es lo que la función entrega de vuelta a quien la llamó: acá, un string armado con una plantilla de texto entre comillas invertidas (los backtick), donde ${nombre} se reemplaza por el valor que tenga la variable en ese momento. Eso se llama template literal, y va a aparecer todo el tiempo de acá en adelante porque evita concatenar strings a mano con +.
Sin return, la función igual se ejecuta, pero no devuelve nada útil: quien la llama recibe undefined.
const saludar = (nombre) => `Hola, ${nombre}`;
saludar("Fernando");
// "Hola, Fernando"Esto hace exactamente lo mismo que la función de arriba, escrito distinto. Una arrow function (=>, "función flecha") es otra forma de escribir una función: sin la palabra function, con una flecha después de los parámetros, y sin llaves ni return cuando el cuerpo es una sola expresión, porque en ese caso el valor de esa expresión se devuelve solo.
No hay una versión "correcta" entre las dos: ambas declaran una función que se puede llamar de la misma manera. La arrow function es la que más se usa hoy por lo corta que queda, así que es la que van a ver más seguido en el resto de esta serie. Guardarla en una const (como acá) es lo habitual, porque casi nunca hace falta reasignar a qué función apunta ese nombre.
3 + 4;
// una expresión: produce un valor (7), pero no hace nada con él
let total = 3 + 4;
// una sentencia: guarda ese valor en una variable
// Esto es un comentario. El motor lo ignora por completo.3 + 4 es una expresión: algo que se evalúa y produce un valor. Sola, en una línea, ese valor se calcula y se pierde: nadie lo guardó en ningún lado. let total = 3 + 4 es una sentencia completa: toma el valor de esa expresión y lo guarda en total, que después se puede volver a usar.
El ; al final marca dónde termina cada sentencia. JavaScript puede inferirlo solo en la mayoría de los casos aunque se lo omita, pero esta serie lo escribe siempre, explícito, para no depender de esa inferencia.
Las líneas que empiezan con // son comentarios: texto para quien lee el código, que el motor de JavaScript directamente salta al ejecutar. Todos los // resultado de este blog son ese tipo de comentario, puesto ahí después de correr el código de verdad.
Una variable es un nombre para un valor, que se declara con
letsi va a cambiar o conconstsi no. Una función agrupa código para reusarlo, se declara una vez y se llama todas las veces que haga falta, confunctiono con la forma corta de la arrow function. Con esas dos piezas y saber dónde correr el código alcanza para seguir cualquier ejemplo de acá en adelante.
Si nunca programaste antes, no hace falta memorizar nada de esto de una sentada: va a aparecer en cada ejemplo de la serie hasta quedar automático.
El próximo post de la serie es sobre los tipos primitivos de JavaScript: qué tipos de valores existen (además de los strings y números que ya aparecieron acá), qué dice typeof sobre cada uno, y por qué en un momento hace falta comparar dos valores con === en vez de con ==.