Javascript

1 Índice ^toc

• 1 Índice
• 2 Introducción
  • 2.1 Html, Css y JavaScript
  • 2.2 Usos de Javascript
  • 2.3 Conceptos básicos
• 3 Valores y variables
  • 3.1 Variables
  • 3.2 Tipos de datos primitivos
  • 3.3 Declaración de variables
    • 3.3.1 var
    • 3.3.2 let
    • 3.3.3 const
  • 3.4 Variables sin declarar
• 4 Operadores
  • 4.1 Operadores matemáticos
  • 4.2 Operadores de asignación
  • 4.3 Operadores de comparación
  • 4.4 Orden de precedencia
• 5 Cadenas
  • 5.1 Plantillas de literales
    • 5.1.1 Ejemplo
• 6 Estructuras de control
  • 6.1 if else
  • 6.2 switch
  • 6.3 Operador condicional (operador ternario)
• 7 Conversión y coerción de tipos
  • 7.1 Conversión
    • 7.1.1 Booleanos
  • 7.2 Coerción
• 8 Operadores
  • 8.1 Operadores de igualdad (== y ===)
    • 8.1.1 Operadores de desigualdad
  • 8.2 Operadores lógicos
• 9 Funciones
  • 9.1 Funciones declaradas y funciones expresadas
  • 9.2 Funciones flecha
• 10 Estructuras de datos
  • 10.1 Arrays
    • 10.1.1 Operaciones básicas
  • 10.2 Objetos
    • 10.2.1 Métodos
• 11 Javascript avanzado
  • 11.1 Modo estricto
• 12 Errores
• 13 Referencias

2 Introducción

2.1 Html, Css y JavaScript

2.2 Usos de Javascript

2.3 Conceptos básicos

• No es obligatorio poner ';' al final de las líneas, pero es una buena práctica.
• Comentarios de una línea: //
• Comentarios multilínea: /* .... */

3 Valores y variables

3.1 Variables

• Deben comenzar siempre por una letra., _ o $. Solo pueden contener números, letras, _ o $.
• No pueden coincidir con una palabra reservada (como new).
• Un estándar es nombrarlas con camelCase (menos utilizado con snake_case).
• Por convención comienzan por una letra minúscula.
• En el caso de variables, lo normal es nombrarlas con mayúsculas.

3.2 Tipos de datos primitivos

Todo valor es un objeto o un dato primitivo.

Hay 7 tipos de datos primitivos:

• number → siempre son del tipo float
• string
• boolean
• undefined → valor vacío
• null
• symbol → valor único que no se puede cambiar
• BigInt → enteros muy grandes

JavaScript tiene tipado dinámico, es decir, no es necesario definir el tipo del valor almacenado en una variable. Los tipos de datos se determinan automáticamente.

Esto implica que los valores tienen tipo, pero las variables no.

El operador typeof muestra el tipo de un valor.

3.3 Declaración de variables

Las variables se pueden declarar mediante let, const o var.

3.3.1 var

Es la opción antigua de declarar variables. A partir de ES6 es conveniente usar let o const.

Funciona de forma similar a let, pero su scope es la función.

3.3.2 let

Se utiliza para variables cuyo valor puede cambiar durante la ejecución del programa.

Su scope es el bloque.

3.3.3 const

Se utiliza para variables inmutables (constantes).

• No se pueden declarar constantes nulas. Siempre hay que inicializarlas en la declaración.
• Por defecto, habría que declarar las variables con const; y solo en el caso de que estemos seguros de que va a cambiar su valor, declararla con let.

3.4 Variables sin declarar

También se pueden usar variables sin declarar con let ni const; simplemente dándoles un valor (variable = valor). Esto no hay que hacerlo nunca, porque en ese caso JavaScript va a definir una propiedad en el scope global.

4 Operadores

Un operador permite transformar o combinar valores.

4.1 Operadores matemáticos

Son los habituales: -, +, *, **

4.2 Operadores de asignación

• =
• +=
• ++
  etc.

4.3 Operadores de comparación

>, <, etc.

4.4 Orden de precedencia

5 Cadenas

5.1 Plantillas de literales

Se escriben entre ` y las variables dentro de ${}

5.1.1 Ejemplo

console.log(`Tiene ${edad} años`)

6 Estructuras de control

6.1 if else

Similar al de Java

6.2 switch

Similar al de Java.

La comparación que se hace implícitamente en switch es estricta (===).

6.3 Operador condicional (operador ternario)

Es similar a if ... else pero en una única fila.

<condición> ? <sentencia si true> : <sentencia si false>

Como es un operador, se puede guardar su valor (su resultado) en una variable.

Ejemplo:

const mayoriaEdad = edad >= 18 ? 'Sí': 'No';

7 Conversión y coerción de tipos

La conversión se da de forma manual, la coerción la hace JavaScript automáticamente.

Solo se puede convertir a number, string o boolean.

7.1 Conversión

• Number(cadena) → convierte a un número
• String(número) → convierte a una cadena
• Boolean(x) → convierte a un booleano

7.1.1 Booleanos

Al convertir a booleano se pasarán a false los siguientes valores:

• 0
• ''
• undefined
• null
• NaN

Todos los demás valores se pasarán a true

7.2 Coerción

Cuando se opera con dos valores de diferentes tipos, JavaScript convierte uno de ellos automáticamente, de la forma más conveniente.

También convierte automáticamente los valores a boolean cuando se utilizan en una condición.

8 Operadores

8.1 Operadores de igualdad (== y ===)

=== comprueba si dos valores son exactamente iguales.

== funciona como ===, pero utilizando coerción para convertir tipos.

Ejemplo:

8 === 8;
//devuelve true
8 === '8';
//devuelve false
8 == 8;
//devuelve true
8 == '8';
//devuelve true

Es importante evitar siempre que se pueda el operador == para evitar errores difíciles de depurar. Es mejor hacer la conversión de tipos manualmente, si es necesario.

8.1.1 Operadores de desigualdad

Son != y !== (equivalentes a == y === respectivamente).

Como con los operadores de igualdad, hay que usar siempre !==, para evitar errores.

8.2 Operadores lógicos

• && → Y (AND)
• || → O (OR)
• ! → No (NOT)

9 Funciones

9.1 Funciones declaradas y funciones expresadas

Las funciones declaradas siguen la notación tradicional, mientras que las expresadas están dentro de una expresión.

Ejemplo

// Función declarada
function calculaEdad1(nacimiento) {
	return 2023 - nacimiento;
}
const edad1 = calculaEdad1(1980);

// Función expresada
const calculaEdad2 = function(nacimiento) {
	return 2023 - nacimiento;
}
const edad2 = calculaEdad2(1990);

console.log(edad1, edad2);

En el caso de función declarada se la puede llamar antes de la declaración, aunque normalmente no es buena práctica, es decir, lo siguiente es correcto:

const edad1 = calculaEdad1(1980);
// Función declarada
function calculaEdad1(nacimiento) {
	return 2023 - nacimiento;
}

Mientras que en la expresada hay que llamarla siempre después de su definición.

Las dos formas de definir las funciones son perfectamente válidas y no hay una mejor que otra.

9.2 Funciones flecha

Se ha añadido en ES6.

Se usa de la siguiente forma:

const calculaEdad3 = nacimiento => 2023 - nacimiento

Con las funciones flecha no se puede usar this.

10 Estructuras de datos

10.1 Arrays

Se definen entre [ ]

Ejemplo:

const arreglo = ['uno', 'dos', 'tres'];

console.log(arreglo[0]); // uno

10.1.1 Operaciones básicas

• push(elemento1, …, elementoN) → añade elementos al final de un array
  • Devuelve la nueva longitud del array
• unshift(elemento1, …, elementoN) → añade elementos al inicio del array
  • Devuelve la nueva longitud del array
• pop() → borra el último elemento al final de un array
  • Devuelve el elemento eliminado
• shift() → borra el primer elemento al inicio del array
  • Devuelve el elemento eliminado
• index.Of(elemento) → devuelve el índice del array donde está el elemento (comenzando desde 0)
  • Si el elemento pasado no pertenece al array devuelve -1
• includes(elemento) → devuelve true si el elemento está en el array, false si no está
  • Utiliza igualdad estricta (_i.e. considera ‘23’ distinto de 23)

10.2 Objetos

Se definen entre { } y está dado por varias parejas de clave-valor.

Se puede extraer información del objeto con la notación . o con la notación [ ]

Ejemplo:

const pp = {
    nombre: 'Perico',
    apellido: 'Palotes',
    edad: 25
};

console.log(pp.nombre);
console.log(pp['apellido'])

10.2.1 Métodos

Los métodos son funciones propiedades del objeto.

---

11 Javascript avanzado

11.1 Modo estricto

Este modo facilita el crear código seguro.

Para activarlo, simplemente hay que escribir al principio del script:

'use strict';

El modo estricto nos impide hacer ciertas cosas erróneas. Además, avisa de ciertos errores que sin el modo estricto Javascript pasa por alto, por ejemplo si nos equivocamos al nombrar una variable.

---

12 Errores

• [object Promise]
  • Un Promise es un objeto que representa una operación asíncrona que en algún momento producirá un valor.
    • Utiliza el método then() para enganchar una llamada de retorno que será llamada cuando el resultado de la operación asíncrona esté listo.

---

13 Referencias

• Udemy - The Complete JavaScript Course 2023. From Zero to Expert!
• https://developer.mozilla.org/

---