Información Básica de Javascript

Lenguaje de programación orientado a objetos y eventos, con propósito web.

Hola mundo

console.log("holamundo");

Tipos de datos

Javascript es débilmente tipado, el comando typeof ayuda a saber el tipo.

• typeof miVariable

number

• 0
• 3
• 656
• 4.443

string

• “hola mundo”
• “alejandro”
• “0”

boolean

• true
• false

object

• null
• []
• {}

undefined

• undefined
• variableNoDeclarada

Variables

Las variables se definen con la palabra reservada var.
El punto y coma se coloca por considerarse una buena práctica.
En javascript los comentarios se colocan con //.
El signo igual es el operador de asignación.
Ejemplo:

// declarar e inicializar
var nombre = "Oscar";

Declarar es definir su nombre, su existencia, para reservar su espacio en memoria.
var miVar;
Inicializar es asignarle un valor.
miVar = 30;

Operadores

• Suma: 3 + 2
  6
• Resta: 50 - 10
  40
• Multiplicación: 10 * 20
  200
• División: 20 / 2
  10
• Concatenación: "Diego" + "de la Vega"
  “Diego de la Vega”
• Negación: !false
  true
• Asignación: a = 1 se asigna un valor a la variable ‘a’
• Comparación: 3 == "3" Este resultado compara el valor, por lo que el resultado es verdadero.
  true
• Tres iguales: 3 === "3" Este resultado da falso, porque se compara tipo y valor.
  false
• Menor y mayor a:
  • 5 < 3
  • 5 > 3
  • 5 <= 6
  • 5 >= 6
• Operador y: a && b
• Operador o: a || b
• Incrementar: miVariable++
• Incremento: miVariable += 2

Arrays

Estructura de datos tipo objeto.

var frutas = ['cambur', 'lechosa', 'patilla', 'coco'];
frutas.length // 4
frutas[0] // 'cambur'
var masFrutas = frutas.push("uva");
var ultimo = frutas.pop(); // elimina el último elemento
var newLong = frutas.unshift('Uva'); // agrega desde el principio 
var borrarFruta = frutas.shift('Uva'); // Borra el primer elemento
var posicion = frutas.indexOf('patilla') // 2

Objetos (diccionario)

var miAuto = {
	marca: "Nissan",
	modelo: "Tiida",
	annio: 2020,
	detalle: function(){
		console.log(`Auto ${this.modelo}`)	
	}
}

Funciones

Las funciones requieren parámetros, argumentos de entrada, que van entre paréntesis. La palabra reservada return hace salir de la función y a su vez retorna el valor asignado al punto donde se llamó la función.

Funciones declarativas

Las funciones se definen con la palabra reservada function.

function miFuncion(){
	return 3;
}

Funciones expresivas o anónimas

var miFuncion = function(a, b) {
	return a + b;
}

Los parámetros son variables que se pasan a una función, cuando llamamos a una función estas variables se llaman argumentos.

Condicionales

• if
• else if
• else
  Las condiciones van entre paréntesis y el bloque de ejecución va entre corchetes
• Ternario: Útil para condicionales de una sola línea.

// condicion ? resultado para verdadero : resultado para falso;
var numero = 1;
var resultado = numero === 1 ? "Sí soy uno" : "no soy uno";

• Switch: condiciones por casos, el break hace salir del switch, de lo contrario se ejecuta el contenido de los casos siguientes a ese punto.

var numero = 1;

switch (numero) {
	case 1:
		console.log("soy uno");
		break;
	case 10:
		console.log("soy un 10!");
		break;	
	case 100:
		console.log("soy un 100!");
		break;
	default:
		console.log("soy otra cosa");
}

Ciclos loops for y for of

El for más común del mundo, igualito a C

var estudiantes = ['pepe', 'paco', 'pepa', 'lupe', 'pacha'];

function saludarEstudiantes(estudiante) {
	console.log(`Hola, ${estudiante}`);
}

for(var i = 0; i < estudiantes.length; i++) {
	saludarEstudiantes(estudiantes[i]);
}

Esto imprime:
Hola, pepe
Hola, paco
Hola, pepa
Hola, lupe
Hola, pacha

Pero el for of es más chévere.

for(var estudiante of estudiantes){
	saludarEstudiantes(estudiante);
}

La variable estudiante es la variable singular del for.

While

while(condicion) {
	accion();
}

En javascript existe el do-while también

Javascript contiene algunos conceptos básicos que pueden no ser intuitivos a la hora de programar.

Scope

Acceso o alcance a variables

• Scope Global
• Scope Local
  En resumen:
• En todo el código podemos utilizar la variable global.
• Las variables locales sólo pueden ser accedidas dentro de la función en la que fueron declaradas.

//El alcance (scope) de una variable puede ser:
//1- Global:
var miNombre = "Diego";
//2- Local:
function nombre(){
    var miApellido = "De Granda";
    console.log(miNombre + " " + miApellido);
}
nombre(); //Devuelve "Diego De Granda"
//En todo el código podemos utilizar la variable global.
//Las variables locales sólo pueden ser accedidas
//dentro de la función en la que fueron declaradas.

Hoisting

Variables que se declaran antes de la ejecución. Solo ocurre de ECMAScript 5 hacia abajo. ECMAScript 6 en adelante presenta cons y let como palabras reservadas para inicializar variables.

Si se llaman variables sin previa declaración, javascript las declara como undefined. Variables y funciones se procesan antes del código, pero si se inicializan después de su ejecución estas se consideran un undefined. (Solo sucede si son declaradas luego con “var”)

Ejemplo

![[Pasted image 20231009115614.png]]

Coerción

Convertir de un tipo a otro.

Coerción implícita:

Una concatenación como 4 + “7” da un string “47”. Es una operación entre valores de diferente tipo por lo que concatena strings.
Al intentar hacer 4 * “7” da un valor de número 28, ya que la multiplicación es una operación solo de número.

Coerción explícita

Para convertir tipos de dato de forma explicita por ejemplo se utiliza String(a) y convierte en string el valor de a. O bien Number() convierte a número.

Valores Truthy Falsy

//Ejemplos en los que Boolean devuelve Falso:
Boolean(0); //false
Boolean(null); //false
Boolean(NaN); //false
Boolean(undefined); //false
Boolean(false); //false
Boolean(""); //false

//Ejemplos en los que Boolean devuelve verdadero:
Boolean(1); //true para 1 o cualquier número diferente de cero (0)
Boolean("a"); //true para cualquier caracter o espacio en blanco en el string
Boolean([]); //true aunque el array esté vacío
Boolean({}); //true aunque el objeto esté vacío
Boolean(function(){}); //Cualquier función es verdadera también

Métodos para recorrer arrays

• filter, devuelve elementos que cumplan la condición
• map, devuelve el valor indicado de cada elemento

var articulos = [
	{ nombre: '📱', precio: 1000 },
	{ nombre: '💻', precio: 1500 },
	{ nombre: '🖥', precio: 2000 },
	{ nombre: '⌨️', precio: 100 },
	{ nombre: '🖱', precio: 70 },
	{ nombre: '🚗', precio: 30000 },
];

// Método Filter
var articulosFiltrados = articulos.filter(function(articulo) {
	return articulo.precio <= 500;
});

// Método Map
var nombreArticulos = articulos.map(function(articulo) {
	return articulo.nombre;
});

• find() : Devuelve el primer elemento del array que cumpla con la condición dada
• forEach() : Ejecuta lo que le definamos una vez por cada elemento de nuestro array
• some() : Comprueba si al menos un elemento del array cumple con la condición que le damos
• filter() : Devuelve todos los elementos del array que cumplan con la condición dada
  Acá la documentación de cada uno: find() - foreach() - some() - filter()