Fernando Saez

[email protected]
• JavaScript en el browser

• DOM (Objetos window y document)

• API HTML 5

• Jquery

• React, Vue, Angular

• Node y Standalone JavaScript
• Popular en Cliente y en Servidor
• Rasgos del lenguaje adicionales como un Nuevo
entorno de ejecución.
• ES6 (Construido sobre el motor de javascript V8
de Google)
• Soporte para módulos.
• Muchas librerias
• MDN (Documentación de tecnologías Web: HTML, CSS, JS y otros)
• Listas Awesome (https://github.com/sorrycc/awesome-javascript)
• Comenza a seguir a desarrolladores expertos (twitter, github)
• Medium
• Dev.To
• Blogs personales
• Blogs de desarrollo
• Echojs
• Reddit
• Charlas o conferencias por youtube
• Participa en comunidades
• Canales de Youtube
• Especificación de lenguaje de script para el navegador
• ECMA International es la organización responsible del estandard.
• Versiones: ES3, ES5, ES2015 (conocida como ES6)
• Última version ES10

• Algunas características agregadas en ES6:

• Ámbitos de bloque para variables y constants
• Funciones flechas
• Rasgos orientados a objetos. Ej. Classes
• Soporte para módulos

http://kangax.github.io/compat-table/es6/
• ECMAScript 5 no agregó ninguna sintaxis nueva

• ¡ECMAScript 6 sí lo hace!
• Compiladores traducen código de un lenguaje a
otro.
• Ej. Java to bytecode

• Transpiladores traducen código al mismo

lenguaje. Hay varios transpilers que traducen
código ES6 a ES5
• JavaScript con tipos
• Hace JavaScript mas deseable para grandes proyectos de software.
• Chequeo de tipos estático, soporte a herramientas mejorada.
• ES6 y más (compilado a JavaScript plano)
• Usado en aplicaciones Angular (React y Vue)
• Para instalarlo es necesario node.js y npm.
npm install -g typescript

• Los archivos serán programados en typescript y los fuentes

con extensión .ts
• tsc <nombreArchivo>.ts

let name: string = `Javier Ruiz`;

let age: number = 28;
let sentence: string = `Hola, mi nombre es ${ name }.
Este año voy a cumplir ${ age + 1 } años.`;
// Esto sería equivalente a
let sentence: string = "Hola, mi nombre es " + name + ".\n\n" + "Este año voy a
cumplir " + (age + 1) + " años.";
• Permiten mantener la coherencia del código.

• Permiten definir conjuntos de reglas y luego comprueban el

código a medida que se escribe de modo que no nos podamos
salir del camino marcado.

• ESLint

• JSHint

• Prettier
• Gulp: que se basa en código JavaScript que escribes en un
archivo para describir las diferentes tareas y enlazarlas.

• Grunt: otro ejecutor de tareas de código abierto y basado en

JavaScript, aunque en este caso prima la configuración frente
al código a la hora de definir las tareas.

• npm: sí, otra vez. El gestor de paquetes es también una

excelente herramienta de ejecución de tareas puesto que nos
permite crear pequeños scripts que se ejecutan con el
comando npm run
• Permiten incluir en un solo archivos múltiples recursos
necesarios para una aplicación Web.

• Webpack

• Browserify

• Parcel

• Rollup
• Cambia algunos comportamientos por defecto de
javascript para facilitar el descubrimiento de errores,
optimizar la performance, y migrar a futuras versiones de
ES

// antes de cualquier sentencia

use strict;
//or 'use strict';

• Elimina algunos errores silenciosos de JavaScript.

• Corrige errores que hacen difícil para los motores de
JavaScript realizar optimizaciones.
• Prohíbe cierta sintaxis
INMUTABLES MUTABLES
// El uso de un método de cadena no modifica la cadena
var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz

// El uso de un método de arreglo muta el arreglo

var foo = [];
console.log(foo); // []
foo.push(“gato");
console.log(foo); // [“gato"]

// La asignación le da al primitivo un nuevo valor (no lo muta)

bar = bar.toUpperCase(); // BAZ
• Boolean: true, false
• Number: 123, 4.56
• String: "hello", 'world'
• Null and Undefined: null, undefined

• Template literal
• Object literal: {nombre: “Juan”, madre: “Maria”}
Usar cualquiera de los siguientes valores con un operador
booleano, o en un bloque condicional coercionara a falso:

• 0 (cero)
• ‘’” (string vacio)
•null
•undefined
•NaN
•false
Variables
y var x;
Constantes

let x;
x = 'abc’;

const y = 20;
 a = 10; // global scope
var b = 20; // function scope
Global vs function vs block let c = 30; // block scope
const d = 40; // block scope
var a = 5;
var b = 10;

if (a === 5) {
let a = 4; // El alcance es dentro del bloque if
var b = 1; // El alcance es global

console.log(a); // 4
console.log(b); // 1
}

console.log(a); // 5
console.log(b); // 1

• Tip: Evite usar var o variables globales

add();
function add() {
var myNumber = 4;
console.log(myNumber + myNumber);
}
____________________________________________
function foo() { function foo() {
console.log(x); //retorna undefined var x;
var x=10; console.log(x);
Equivalente
} x=10;
}
let a = 10;
let b = 20; marcadores

console.log(`${a}+${b} is ${a+b}`);
Template literal

Cualquier Expression de javascript

console.log(`string text line 1

string text line 2`);
// "string text line 1
// string text line 2"
 Const automovil =
{
make: 'Honda',
model: "Civic",
"Year": 2001,
'owner': {
name: "Jorge"
}
}
• Un objeto literal consiste de cero o más pares key:value
llamados propiedades

• Los valores pueden incluir arrays, objetos o funciones

 Identificador literal válido

Literal String o Number

console.log( obj.make );

console.log( obj["make"] );

Mivar = ‘model‘;

console.log( obj[mivar] );

obj[0] = 10; Propiedades pueden ser agregadas

dinámicamente.
var persona = { nombreCompleto : {
nombreCompleto: ['Bob', 'Smith'], nombre: 'Bob',
edad: 32, apellido: 'Smith'
genero: 'masculino', },
intereses: ['música', 'esquí'],
bio: function () {
alert(this.nombreCompleto[0] + ' ' + this.nombreCompleto[1]
+ ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y
' + this.intereses[1] + '.');
},
saludo: function() {
alert('Hola, Soy '+ this.nombre[0] + '. ');
}
};
var nombre = persona.nombreCompleto[0]; //Notación de puntos
var edad = persona[‘edad']; //Notación de corchetes
persona.bio();
function maker(nombre, dni, grado, nivel) {
var it = {};
it.nombre = nombre;
it[‘dni'] = dni;
it.grado = grado;
it.nivel = nivel;
return it;
}
myObject = maker(“Jose Perez", ‘32887533', 'A', 3);

function Person(name, age, sex) {

this.name = name;
this.age = age;
this.sex = sex;
}
var rand = new Person('Rand McKinnon', 33, 'M');
var ken = new Person('Ken Jones', 39, 'M');
let user = {
name: “Jose",
age: 30,
isAdmin: true
};

for (let key in user) {

// keys
alert( key ); // name, age, isAdmin
// values for the keys
alert( user[key] ); // Jose, 30, true
}
 • Usado como un format para intercambiar datos.

• Requiere usar comillas dobles para las cadenas y los nombres de

propiedades.
• Las comillas simples no son válidas.
 {
0: "x",
a = ["x", 99, true]; 1: 99,
2: true
a.b = "hello"; }

a[100] = 10;

• Un array es un objeto especial donde los

elementos son almacenados como propiedades
de un objeto

• Array tiene propiedades y métodos predefinidos

length, keys()
• Todos los operadores, ej. +, -, =, && …
• Igualdad estricta : ===, !==
• Operadores de tipo: typeof, instanceof
typeof(‘Jon’) // string
typeof 23 // number
color1=new String("verde")
color1 instanceof String // devuelve verdadero (true)
color2="coral"
color2 instanceof String // devuelve falso (color2 no es un objeto)

• Operadores de propiedad: in, delete

2 + 4/2 0 == false
2 + 3/2 "" == false
"2" + 3/2 0 == ""
3/2 + "2" null == false
3/2 * "2" undefined == false
3/2 + "two" ! null == true
3/2 * "two" ! undefined == true

https://www.w3schools.com/js/js_type_conversion.asp
• En JavaScript, las funciones son objetos
• Pueden asignarse a variables
• Asignadas como una propiedad de un objeto
• Function literals (function expressions, anonymous
functions)
• Pueden ser pasadas como argumento a otra
función.
• Pueden ser retornadas como resultados de
una función
 function foo() { Declaración de una
1 alert("foo"); función regular
}
• Function literal
bar = function() {
2 alert("bar");
• Asignación
};
Function como
setTimeout( bar, 5000 );
parámetro
setTimeout( function() { Function literal
return bar;}, Como parámetro
5000 )

3 a => a + 100; Function flecha

• Cree una función anónima
• Retorne cualquier valor string
• Asigne la función a una variable
• Use la variable para imprimir el valor
 function add(a, b) {
return a + b;
}
1 let sum = add; 2
function average(a, b, fn) {
return fn(a, b) / 2;
} 3
let result = sum(10,20);
console.log(result) //que imprime aquí 4
let result = average(10, 20, sum);
console.log(result) //que imprime aquí 5
function compararPor(nombreProp) {
return function (a, b) {
let x = a[nombreProp],
y = b[nombreProp];
if (x > y) { return 1; }
else if (x < y) { return -1 }
else { return 0; }
}
} let productos = [
{nombre: 'iPhone', precio: 900},
{nombre: 'Galaxy S10', precio: 850},
{nombre: 'Sony Xperia', precio: 700}
];
• lambda expressions, function(a) {
lambdas return a*2
}

• Una forma mas concisa

de escribir una function (a)=>{return a*2}
literal

a=>a*2

()=> ‘Aprobado’
(a,b)=>a*b
 function add(x,y) { add(10,20);
return x+y; add("10","20");
} add(10);
add(10,20,30);

• Una variable especial arguments mantiene todos los

argumentos pasados a la función

• arguments no es un array pero es similar.

arguments.length,
arguments[0],
arguments[1], …
// ES6
function saludar(nombre, genero = 'Sr.', saludo = 'Hola ' +
genero){
console.log(saludo + ' ' + nombre);
};
saludar('Peter'); // Hola Sr. Peter
saludar('Alex', undefined, 'Que tal'); //Que tal Alex
1 const array = [1, 2, 3]
const [a, b, c] = array //desestructura el array en variables
console.log(a, b, c) // 1, 2, 3

2 const obj = {
primerNombre: ‘Jose’,
Color: ‘Azul’
}
const {primerNombre, Color} = obj
console.log(primerNombre,Color) // ‘Jose’, ‘Azul'
1 const note = {
id: 1,
title: 'My first note',
date: '01/01/1970’,
}

2 // Crea variables desde las propiedades del objeto

const id = note.id
const title = note.title
const date = note.date

3 // desestructura propiedades en variables

const { id, title, date } = note
• Permite que una expresión sea expandida en situaciones donde se
esperan múltiples argumentos (llamadas a funciones) o múltiples
elementos (arrays literales).

• Arrays literales: [...iterableObj, 4, 5, 6]

• Llamadas a funciones myfunction(...iterableObj);
• Desestructuración: [a, b, ...iterableObj] = [1, 2, 3, 4, 5];
//un array literal mas poderoso
var partes = [‘hombros', ‘rodillas'];
var todo = [‘cabeza', ...partes, ‘cadera', ‘pies'];

//combinar 2 arreglos en una nueva estructura

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var newarray = […arr1, …arr2]; // [0,1,2,3,4,5]
1 // Array de usuarios
const usuarios = [
{ id: 1, nombre: 'Ben' },
{ id: 2, nombre: ‘Ana' },
]

2 // agregamos un nuevo usuario

const newUsuario = { id: 3, nombre: 'Ron' }
users.push(newUsuario)

3 const updatedUsers = [...users, newUser]

1 // Create a set
const set = new Set()
set.add('octopus')
set.add('starfish')
set.add(fish’)

2 // Convertir Set a Array

const seaCreatures = [...set]
console.log(seaCreatures) // ["octopus", "starfish", “fish"]

3 const string = 'hello'

const stringArray = [...string] // ["h", "e", "l", "l", "o"]
1 // Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }
console.log(secondObject) // {enabled: true, darkMode: false}

2 const usuario = {
id: 3,
nombre: 'Ron',
}
const usuarioUpdate = { ...user, isLoggedIn: true }
console.log(usuarioUpdate) // {id: 3, nombre: "Ron", isLoggedIn: true}
Los parámetros Rest nos proporcionan una manera de pasar
un conjunto indeterminado de argumentos que el operador
agrupa en forma de Array.

// ES6
function printName(name, ...fancyNames){
var fullName = name;
fancyNames.forEach(fancyN => fullName += ' ' + fancyN);
console.log(fullName);
};
printName('Felipe'); // Felipe
printName('Felipe', 'Juan', 'Froilan'); //Felipe Juan Froilan