Introducción a JavaScript

---

freeCodeCamp BA

• freecodecampba.org
• @freeCodeCampBA

¿Qué es JavaScript?

Es un lenguaje de programación creado en 1995 por Brendan Eich, para darle dinamismo e interacción a los sitios web.

Hoy es un lenguaje de propósito general.

¿Por qué JavaScript?

Es el lenguaje que entienden y ejecutan los navegadores (browsers).

Desde hace algunos años, podemos ejecutar código JavaScript fuera del browser, con NodeJS.

Sentencia

Conjunto de caracteres y símbolos que representan una instrucción. Está compuesta por expresiones.

a = b * 2;

Las sentencias en JS terminan con ;

Expresión

Es cualquier unidad válida de código que resuelve a un valor.

Expresiones marcadas con ()

((a) = ((b) * (2)));

Tomemos a = x y b = 7. Entonces:

x = 7 * 2; // x = 14

Importante: probá el código en tu consola

Variables

Espacios con nombre para guardar valores.

Son reutilizables y se pueden reasignar.

Declarar una variable

Usamos la keyword var para crear nuevas variables.

var nombreDeLaVariable;

Inicializar una variable

var nombreDeLaVariable = 3;

Reasignar una variable

var nombreDeLaVariable = 3;
nombreDeLaVariable = 7;

Operar con variables

a + 2; // 3 + 2

Cómo nombrar variables

• Usar nombres significativos, que representen el contenido
• El nombre puede empezar con cualquier letra, $ ó _
• Hay distinción entre mayúsculas y minúsculas (case sensitive)
• Por convención se utiliza camelCase

Constantes

Espacios con nombre para guardar valores que no varían.

Son reutilizables, pero no se pueden reasignar.

Math.PI  // 3.141592653589793;

Si reasignamos una constante, obtenemos un error

const saludo = 'Hola!';
saludo = 'Hola Mundo!';  // TypeError

Imprimir texto en la consola

console.log(nombreDeLaVariable);

Tipos

JavaScript tiene tipado dinámico y débil: las variables se declaran sin un tipo de dato explícito, pueden modificarse, compararse y operar sin necesidad de ser convertidas previamente.

Los valores sí tienen tipos.

Tipos principales en JS

• String
• Number
• Boolean

String

Representan cadenas de caracteres (texto).

Se escriben entre comillas simples ó dobles, sin mezclar.

'JavaScript' // OK ✔
"JavaScript" // OK ✔
'JavaScript" ✗

Cualquier texto entre comillas es un String

'43' // Esto también es un String

Operaciones con Strings

Longitud de la cadena

var titulo = 'You Don\'t Know JavaScript';
titulo.length;  // 25

'titulo'.length;  // 5

Operaciones con Strings

Concatenación

Se usa para combinar diferentes cadenas de caracteres.

var lenguaje = 'JavaScript';
var anio = 1995;
var unaFrase = lenguaje + ' apareció en ' + anio;

Number

Números enteros ó de punto flotante, JS no los diferencia.

var unEntero = 27;

var unNumeroDePuntoFlotante = 2.5;

var unEnteroNegativo = -10;

Operaciones con Number

Suma: x + y

10 + 91;  // 101
1 + Math.PI;  // 4.141592653589793

Resta: x - y

27 - 4  // 23
3 - 5  // -2
3 - 1.5  // 1.5

Operaciones con Number

Multiplicación: x * y

7 * 3  // 21
4 * 12.5  // 50

División: x / y

1 / 2  // 0.5
8 / 2  // 4
1.0 / 3.0  // 0.3333333333333333

Incremento

Son equivalentes: x = x + 1, x += 1, ++x, x++

var x = 5;
x += 1;  // 6;

Decremento

Son equivalentes: x = x - 1, x -= 1, --x, x--

var x = 5;
x -= 1;  // 4;

Módulo: x % y

Es el resto de dividir x por y.

10 % 2  // 0
11 % 2  // 11
x % 2 === 0  // siempre que x sea par
y % 2 === 1  // siempre que y sea impar

Boolean

Tiene 2 valores posibles: true y false, para indicar si algo es verdadero o falso.

2 > 1  // true
1 > 2  // false
'hola' === 'Hola'  // false

Nota: al comparar valores, usar siempre ===

Expresión booleana

Es cualquier expresión que pueda evaluarse como verdadera ó falsa y por lo tanto, reducirse a true ó false.

Operadores de comparación

Igualdad ==

Compara sólo el valor

1 == 1  // true
1 == '1'  // true

Igualdad estricta ===

Compara el valor y tipo del mismo

1 === 1  // true
1 === '1'  // false

Son análogos a la igualdad.

Desigualdad !=

23 != '23'  // false

Desigualdad estricta !==

23 !== '23'  // true

Otros operadores de comparación

Menor <

1 < 2  // true

También podemos comparar caracteres, según su orden en la tabla ASCII.

'a' < 'b'  // true

Mayor >

77.5 > 80  // false

Menor ó igual <=

10 <= 10  // true

Mayor ó igual >=

31 >= 33  // false

Operadores lógicos

Se utilizan para evaluar valores y expresiones booleanas. Retornan un valor booleano.

AND &&

Retorna true si y sólo si todas las expresiones evaluadas son verdaderas. Caso contrario, retorna false.

true && true  // true

OR ||

Retorna true si al menos una de las expresiones es verdadera; sino, retorna false.

true || true  // true

true || false  // true

false || false  // false

NOT !

Negación. Retorna false si la expresión es verdadera; sino, retorna true.

!(true)  // false

!(2 > 1)  // false

!(expresión booleana verdadera)  // false

Ejercicio

¿Cuál es el resultado final, true ó false?

var x = 10;
var y = 'a';

y === 'b' || x >= 10

Ejercicio

¿Cuál es el resultado final, true ó false?

var x = 3;
var y = 8;

!(x == '3' || x === y) && !(y != 8 && x <= y)

Otros tipos de datos

Hay 2 tipos de datos especiales que también se usan frecuentemente en JavaScript: null y undefined.

Null

Indica explícitamente que la variable no tiene valor.

var estoEsNulo = null;

Undefined

Indica que la variable no tiene valor definido. Por ejemplo, si le asignamos el valor undefined explícitamente o sólo la declaramos, sin inicializarla.

var conValorIndefinido = undefined;

var variableSoloDeclarada;  // undefined

NaN

Expresa el resultado de un cálculo matemático que no puede ser representado númericamente.

var dividirPorString = 24 / "Hola"; // NaN

Coerción

Podemos convertir los datos a otros tipos de forma explícita o implícita.

Esto último se conoce como coerción de tipos.

Conversión explícita

var unNumero = 5;
var unCaracter = String(unNumero);

Conversión implícita (coerción)

var unNumero = 5;
/*
en este caso, el operador + está concatenando Strings,
luego de convertir el tipo de unNumero
*/
var unCaracter = unNumero + '';

Comentarios

1 sola línea

// Esto es un comentario simple

Multilínea

/*
  Los que se enamoran de la práctica sin la teoría
  son como los pilotos sin timón ni brújula,
  que nunca podrán saber a dónde van

  Leonardo Da Vinci
*/

Arrays

Un array es una colección ordenada de valores heterogéneos (de cualquier tipo).

var unArregloVacio = [];

var unArregloDeNumeros = [1, 2, 3];

var unArregloDeCosas = [3.7, 2, 'JavaScript', [48, 7]];

Para acceder a un elemento usamos índices

Primer elemento: [0]

unArregloDeNumeros[0];  // 1

Último elemento: [longitud del arreglo - 1]

var ultimaPosicion = unArregloDeNumeros.length - 1;
unArregloDeNumeros[ultimaPosicion];  // 3

Nota: los índices de los arrays empiezan en 0.

Modificar un Array

Reasignar valores

var unArregloDeNumeros = [19, 8, 3];
unArregloDeNumeros[1] = 7.5;  // [19, 7.5, 3];

Agregar al final

unArregloDeNumeros.push('FCC');  // [19, 7.5, 3, 'FCC'];

Sacar el último elemento

unArregloDeNumeros.pop();  // 'FCC';

Nota: Strings e índices

También podemos acceder a los caracteres de un String usando índices (como si fuera un Array de caracteres), pero no podemos modificarlo (los Strings en JavaScript son inmutables).

Si quisiéramos hacerlo, tendríamos que convertirlo primero a Array, operar y luego pasarlo a String nuevamente.

var unString = 'Puedo acceder a los caracteres de este texto, pero no modificarlo';

Acceder a un caracter de un String

console.log(unString[2]);  // e

Convierto el String a Array

console.log(unString.toSplit(' '));  // e

Objetos

Son colecciones no ordenadas de pares clave-valor.

Contienen propiedades, que pueden ser valores de cualquier tipo, arrays, funciones o incluso otros objetos.

Creando un objeto

var unLibroRecomendado = {
  titulo: 'Eloquent JavaScript',
  autor: 'Marijn Haverbeke',
  paginas: 472
};

Podemos acceder a los atributos por el nombre

unLibroRecomendado.titulo;  // 'Eloquent JavaScript'
unLibroRecomendado.autor;  // 'Marijn Haverbeke'
unLibroRecomendado.paginas;  // 472

Podemos redefinir los atributos

unLibroRecomendado.titulo = 'JavaScript Elocuente';

Y crear atributos nuevos

unLibro.fechaDePublicacion = '14 de Diciembre de 2014';

Condicionales

Nos permiten decidir qué camino seguir, según las condiciones que evaluemos.

if (condición booleana) {
  // se ejecuta si la condición es verdadera
} else {
  // se ejecuta si la condición es falsa
}

Ejemplo

var edad = 16;
/*
solo las personas que sean mayores a 18 años
pueden entrar al boliche
*/
if (edad > 18) {
  console.log('Puede entrar al boliche');
} else {
  console.log('No puede entrar al boliche');
}

Valores falsos (falsy values)

Son aquellos valores que se interpretan como falsos si se evalúan en el contexto de una expresión booleana.

• false
• null
• undefined
• ''
• 0
• NaN

Valores verdaderos (truthy values)

Todos los valores que no se encuentren en la lista anterior (falsy values), son verdaderos.

Conversión automática en condicionales

var paquetesGalletitas = 0;

// en este caso nuestra variable se evaluará por verdadero o falso
if (paquetesGalletitas) {
  console.log('Todavía hay galletitas');
} else {
  console.log('Hay que ir a comprar Oreos');
}

Ciclos

Nos permiten iterar sobre diferentes colecciones de valores, como arreglos u objetos.

También iterar hasta que ciertas condiciones se cumplan o no.

While

Se ejecuta hasta que la condición booleana sea falsa.

var i = 0;

while (i < 5) {
  console.log('Iteración N° ' + i);
  i++;
}

Do... While

Se ejecuta siempre al menos una vez, independientemente de que la condición booleana sea verdadera.

var i = 0;

do {
  console.log('Iteración N° ' + i);
  i++;
} while (i < 5);

For

Se ejecuta hasta que la condición booleana sea falsa y consiste en tres expresiones opcionales

for (expresión inicial; condición; expresión final) {
  ...
};

• expresión inicial: declaramos una variable como contador
• condición: expresión evaluada antes de cada iteración
• expresión final: expresión evaluada al final de cada iteración

Ejemplo I

for (var i = 0; i < 10; i++) {
  console.log('Iteración N° ' + i);
}

Ejemplo II

var animales = ['Perro', 'Gato', 'Tortuga'];

// Recorremos el array animales y mostramos cada uno
for (var i = 0; i < animales.length; i++) {
  console.log('Las mascotas disponibles son: ' + animales[i]);
}

Funciones

Son bloques de código con nombre, reutilizables. Pueden recibir (o no) parámetros.

function nombreFuncion(primerParametro, segundoParametro) {
  ...
}

Ejemplo I

// devuelve la suma entre a y b
function sumarDosValores(a, b) {
  return a + b;
}

sumarDosValores(2, 4);

Ejemplo II

// devuelve el total con solo 2 decimales
function imprimirTotal(total) {
  return total.toFixed(2);
}

imprimirTotal(10.6533);

Callbacks

Los callbacks no son una característica de JavaScript. Son una manera de usar las funciones.

Código sincrónico

Si queremos ejecutar enviarMensaje() debemos de esperar a que las instrucciones anteriores finalicen su operación. Es decir que hasta no se termine de ejecutar descargarFoto() no podremos ejecutar nada más.

var foto = descargarFoto('https://google.com/logo.png');
subirFotoTwitter(foto);
enviarMensajeTwitter('Hey! Cuando nos juntamos?', '@leogln_');

Código asincrónico

Ahora podremos ejecutar enviarMensajeTwitter() mientras se descarga la foto, y que la suba a Twitter cuando esta finalice de descargar.

descargarFoto('https://google.com/logo.png',
 function finalizoDescarga(error, png) {
  if (error) {
    console.log('error: ', error);
  } else {
    subirFotoTwitter(png);
  }
});

enviarMensajeTwitter('Hey! Cuando nos juntamos?', '@leogln_')

Scope

Es el ámbito o alcance de una variable, donde esta 'vive' y desde donde puede ser accedida y modificada.

Según la declaración

• var el scope está ligada a una función
• let y const tienen alcance dentro de un bloque de código

Warning!

En JavaScript podemos declarar variables sin usar var, let o const, ¡pero el scope pasa a ser global!

Esto significa que la variable puede ser accedida y modificada desde cualquier parte de nuestro código.

Ejemplo I

var saludo = 'Bienvenidos! al evento';

function saludar() {
  console.log(saludo);
}

saludar(); // Bienvenidos! al evento

console.log(saludo); // Bienvenidos! al evento

Ejemplo II

function saludar() {
  var saludo = 'Bienvenidos! al evento';
  console.log(saludo);
}

saludar(); // Bienvenidos! al evento

console.log(saludo); // ReferenceError: saludo is not defined

Ejemplo III

var animales = ['Perro', 'Gato', 'Tortuga'];

for (var i = 0; i < animales.length; i++) {
  console.log('Las mascotas disponibles son: ' + animales[i]);
}

console.log(i); // 3

Ejemplo IV

const animales = ['Perro', 'Gato', 'Tortuga'];

// Recorremos el array animales y mostramos cada uno
for (let i = 0; i < animales.length; i++) {
  console.log('Las mascotas disponibles son: ' + animales[i]);
}

console.log(i); // ReferenceError: i is not defined

Para seguir aprendiendo...

Algunos recursos gratuitos recomendados

• JavaScript para Gatos
• You Don't Know JS: Up & Going
• Eloquent JavaScript
• freeCodeCamp
• Documentación: MDN JavaScript