Javascript

ES6

2017

Agenda

2017

  • Order
  • Objects
  • Arrays
  • Challenge 1
  • ES6
  • Challenge 2

 Falsy values

false
null
undefined
'' // empty string
0
NaN

 Truthy values

true
'false' // string de false
// all Object

Sort

[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); // 1001

Arrays

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)); // false

Arrays

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; // TypeError

ECMAScript 6

Let

let x = 5;

if(x) {
  let x = 2;
  console.log(x); // 2
}

console.log(x); // 5
for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2, 3, 4 ... 9
}

console.log(i); //i no esta definido

ECMAScript 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(); // 2
function sum(a, b) {
    if(a === undefined) {
        a = 1;
    }
    if(b === undefined) {
        b = 1;
    }
    return a + b;
}

sum(); // 2

ECMAScript 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('!'));      // true

ECMAScript 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 Kong

ECMAScript 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