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.
Antes de trabajar con tipos, objetos o clases hace falta responder algo más básico: qué es una variable, qué es una función y dónde se ejecuta el código que las usa. Sin dar nada por sabido, estos tres conceptos son la base de todo lo que sigue en la serie.
console.log("Hola");
// HolaEste código se ejecuta 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 el código ahí directo. El segundo es Node, un programa que ejecuta JavaScript fuera del navegador, en una terminal: el código se guarda en un archivo, por ejemplo consola.js, y se ejecuta con el comando node consola.js.
Todos los ejemplos de este blog se ejecutan en Node antes de publicarse, y el comentario // Hola de arriba es la salida real que imprimió la terminal, no la que "debería" imprimir. Esa práctica se mantiene 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 el valor que 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: guarda 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 genera un error apenas se ejecuta esa línea, no un aviso silencioso.
La convención 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 sigue el resto de esta serie: si un ejemplo usa let, es porque esa variable se reasigna en algún punto del mismo bloque.
Existe un tercer nombre, var, anterior a los otros dos. Todavía aparece en código escrito antes de 2015, pero no es necesario y no se recomienda su uso: let y const cubren cualquier caso.
function saludar(nombre) {
return `Hola, ${nombre}`;
}
saludar("Fernando");
// "Hola, Fernando"
saludar("Ana");
// "Hola, Ana"function saludar(nombre) { ... } define una función: le asigna un nombre (saludar), especifica qué datos necesita para trabajar (nombre, entre paréntesis, se llama parámetro) y qué hace con ellos dentro de las llaves. Nada de esto se ejecuta todavía: definir la función solo la deja lista para usarse.
saludar("Fernando") es lo que la ejecuta: es una llamada a la función, con "Fernando" como argumento, el valor concreto que ocupa el lugar del parámetro nombre en esa llamada puntual. return es lo que la función entrega de vuelta a quien la llamó: en este caso, 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. Esta plantilla de texto se llama template literal y aparece con frecuencia en el resto de la serie, porque evita concatenar cadenas de caracteres con el operador +.
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 anterior, escrito de otra forma. Una arrow function (=>, "función flecha") es otra sintaxis para 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 automáticamente.
No hay una versión "correcta" entre las dos formas: ambas declaran una función que se llama de la misma manera. La arrow function es la más usada en código actual, por su sintaxis más breve y por algunas diferencias de comportamiento que se tratan más adelante en la serie, así que es la que aparece con más frecuencia en el resto de esta serie. Guardarla en una const (como en el ejemplo) 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, porque no queda guardado 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 se puede volver a usar después.
El ; al final marca dónde termina cada sentencia. JavaScript puede inferirlo en la mayoría de los casos aunque se lo omita, pero esta serie lo escribe siempre, de forma explícita, para no depender de esa inferencia.
Las líneas que empiezan con // son comentarios: texto dirigido a quien lee el código, que el motor de JavaScript ignora por completo al ejecutar. Todos los // resultado de este blog son ese tipo de comentario, agregado después de ejecutar el código real.
Una variable es un nombre para un valor, declarada con
letsi va a cambiar o conconstsi no. Una función agrupa código para reutilizarlo: 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 sabiendo dónde se ejecuta el código, alcanza para seguir cualquier ejemplo del resto de la serie.
Para quien nunca programó antes, no hace falta memorizar nada de esto de una sola vez: estos conceptos vuelven a aparecer en cada ejemplo de la serie hasta volverse automáticos.
El próximo post trata el Call Stack: cómo JavaScript ejecuta una llamada a función mientras otra sigue en curso, qué significa que una quede "pendiente" mientras corre otra, y qué es un stack overflow.