Javascript
ES6
miguelcast.dev
2017
Agenda
2017
- Order
- Objects
- Arrays
- Challenge 1
- ES6
- Challenge 2
miguelcast.dev
Falsy values
false
null
undefined
'' // empty string
0
NaNTruthy values
true
'false' // string de false
// all ObjectSort
[5,2,6,3,9,1].sort()
// [1, 2, 3, 5, 6, 9]Sort
[5,2,6,3,9,1].sort(
function(a, b) { return b - a }
);
// [9, 6, 5, 3, 2, 1]Sort
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
cars.sort(function(a, b){return a.year - b.year})
/*[
{type:"Saab", year:2001},
{type:"BMW", year:2010},
{type:"Volvo", year:2016}
]*/
Reverse
[5,2,6,3,9,1].reverse()
// [1, 9, 3, 6, 2, 5]Objects
Todo en javascript es un objeto

//Object-like simple types
typeof 5;
typeof 'Hello';
typeof true;
typeof null;
typeof undefined;
//Object
typeof [1,2,3];
typeof {name: 'any name'};
typeof /.+/g;
typeof function foo() {return true;};Objects
Retrieval values - Recuperar valores
var person = {
name: 'any name',
"function": 'Developer'
};
person.name; // "any name"
person['function']; // "Developer"
person.exists; // undefined
person.exists || 'no exists'; // "no exists"
person.exists.thing; // throw "TypeError" usar &&Objects
Los objetos son pasados por referencia.
Nunca son copiados.
var person = {
name: 'any name',
'function': 'Developer'
};
// Como referencia
var myPerson = person;
myPerson.name = 'other name';
// clona objeto pero no objetos hijos
var otherPerson = Object.assign({}, person);
otherPerson.name = 'developer name';
// clona objeto
var morePerson = Object.create(person);
morePerson.name = 'more name';Arrays
Length
myArray = [];
console.log(myArray.length); // 0
myArray[1000] = true;
console.log(myArray.length); // 1001Arrays
Eliminar un elemento de array
var myArray = [1,2,3,5,6];
delete myArray[1]; // [1, undefined, 3, 5, 6]
myArray.splice(1, 1); // [1, 3, 5, 6]Arrays
Is Array?
var myArray = [1,2,3,5,6];
var myObject = {key: 'value'};
console.log(typeof myArray); // Object
console.log(typeof myObject); // Object
console.log(Array.isArray(myArray)); // true
console.log(Array.isArray(myObject)); // falseArrays
Más métodos de array
var myArray = [1,2,3,5,6];
myArray.forEach(function(item, index) {...});
myArray.map(function(item, index) {...});
myArray.filter(function(item, index, array) { ... return true/false});
myArray.reduce(function(last, current, index, array) {...});
...Challenge 1
var myArray = [
[6,9,3,7,5],
[9,5,9,37,2],
[4,54,6,7,1],
];/*
[
[9, 7, 6, 5, 3],
[37, 9, 9, 5, 2],
[54, 7, 6, 4, 1]
]
*/ECMAScript 6
Una nueva versión de Javascript para navegadores y servers modernos.
ECMAScript 6
Const
const PI = 3.14593;
PI = 4; // TypeError
const myObject = {
name: 'any name'
};
const myObject = {name: 'any name'};
myObject.name = 'other name'; // Es correcto
myObject = 5; // TypeErrorECMAScript 6
Let
let x = 5;
if(x) {
let x = 2;
console.log(x); // 2
}
console.log(x); // 5for (let i = 0; i < 10; i++) {
console.log(i); // 0, 1, 2, 3, 4 ... 9
}
console.log(i); //i no esta definidoECMAScript 6
Arrow Function
() => ...
function() {return ...}
variable => ...
function(variable) {return ...}
(variable, i) => {...}
function(variable, i) {... return ...}ECMAScript 6
Parametros por defecto
function sum(a = 1, b = 1) {
return a + b;
}
sum(); // 2function sum(a, b) {
if(a === undefined) {
a = 1;
}
if(b === undefined) {
b = 1;
}
return a + b;
}
sum(); // 2ECMAScript 6
Spread operator
function sum(a = 1, b = 1) {
return a + b;
}
const numbers = [5, 3];
sum(...numbers); // 8
const moreNumbers = [4, 2, ...numbers]; // [4, 2, 5, 3]
const str = "foo"
const chars = [ ...str ]; // [ "f", "o", "o" ]ECMAScript 6
Destructuring
const myObject = {foo: "lorem", bar: "ipsum"};
const { foo, bar } = myObject ;
console.log(foo); // "lorem"
console.log(bar); // "ipsum"ECMAScript 6
Template Literals - Template String
const first = 'Hola';
const second = 'mundo';
console.log(`${first} ${second}!`); // "Hola mundo!"
const color = 'red';
const style = `
.myStyle {
color: ${color};
border: 1px solid ${color}
}
`;ECMAScript 6
Property Shorthand
const first = 'thing';
const myObject = { first };Method properties
const myObject = {
foo () {
...
},
bar () {
...
}
};const myObject = {
foo: function () {
...
},
bar: function () {
...
}
};const first = 'thing';
const myObject = { first: first};ECMAScript 6
Repetir
console.log("hello ".repeat(4));Busquedas en Strings
const text = 'Hello World!';
// case sensitive
console.log(text.includes('llo')); // true
console.log(text.startsWith('Hel')); // true
console.log(text.endsWith('!')); // trueECMAScript 6
Class
class Animal {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(name) {
this._name = `King ${name}`;
}
}
const monkey = new Animal("Chita");
console.log(monkey.name); // Chita
monkey.name = "Kong";
console.log(monkey.name); // King KongECMAScript 6
Class
class Shape {
constructor(id) {
this.id = id;
}
toString () {
return `Shape(${this.id})`;
}
} class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y);
}
toString () {
return "Rectangle > " + super.toString();
}
}
const triangle = new Rectangle('1', 1, 1, 100, 100);
console.log(triangle.toString());Challenge 2
Usar ECMAScript 6
// Filtrar los objetos del array dejando solo los pares
const numbers = [1,2,3,4,5,6,7,8,9];
var evenNumbers = function(numbers) {
var arrEvens = [];
for(var i = 0; i < numbers.length; i++) {
if(numbers[i] % 2 === 0) {
arrEvens.push(numbers[i]);
}
}
return arrEvens;
}
console.log(evenNumbers(numbers));
// [2, 4, 6, 8]Challenge 2
Usar ECMAScript 6
// Una posible solución
const numbers = [1,2,3,4,5,6,7,8,9];
numbers.filter(n => n % 2 === 0);
// [2, 4, 6, 8]Async / Await
function doubleAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x * 2);
}, 2000);
});
}
async function addAsync(x) {
const a = await doubleAfter2Seconds(10);
const b = await doubleAfter2Seconds(20);
const c = await doubleAfter2Seconds(30);
return x + a + b + c;
}
addAsync(10).then((sum) => {
console.log(sum);
});ECMAScript 2017
Async / Await
async function f() {
try {
let response = await fetch('/no-user-here');
let user = await response.json();
} catch(err) {
// catches errors both in fetch and response.json
alert(err);
}
}
ECMAScript 2017
Javascript & ES6
By Miguel Cast
Javascript & ES6
Good parts Javascript ECMAScript 6
- 452