Variables y constantes

const mom = 'Marge';
mom = 'Magie'; // Mal!

let dad = 'Bart';
dad = 'Homer';
					

Objects y lists

const mom = {
  name: 'Marge',
  years: 45,
};

const family = [];
family.push(mom)
/* family
[
  mom: {
    name: 'Marge',
    years: 45,
  },
]
*/
					

ES5 - Function scope

// ES5
if (true) {
  var dad = 'Homer';
}
console.log(dad); // 'Homer'

// ES5 - function scope
function () {
  var dad = 'Homer';
}
console.log(dad); // Error not defined

					

ES6 - Block scope

// ES6
if (true) {
  let dad = 'Homer';
}

console.log(dad); // undefined
					

Functions

// ES5
const double = function (x) {
  return 2 * x;
}

// ES6
const double = (x) => {
  // ... más de 1 sentencia
  const y = 2 * x;
  return y;
}

// ES6
const double = (x) => 2 * x;
// Si solo hay una sentencia, hace return por defecto
					

Functions

// ES6 - Default value, Rest params
const calculation = (x = 1, ...others) => {
  const y = (2 * x) + others.lenght;
  return y;
}

// ES6 Spread array
const params = [ "Homer", true, 7 ]
const other = [ 1, 2, ...params ] // [ 1, 2, "Homer", true, 7 ]

// ES6 Spread object
const params = { name: "Homer", lastName: "Simpson" }
const other = { ...params, age: 54 }
// { name: "Homer", lastName: "Simpson", age: 54 }
					

ES5 - Functions context

// ES5
var dancer = {
  name: 'Disco Stu',
  saySomething: function() {
    return function(baby) {
      return this.name + ' llega antes que tu, ' + baby + '!';
    }
  }
}
var talk = dancer.saySomething();

talk('nena'); // ' llega antes que tu, nena!'
					

ES5 - Functions context (bind)

// ES5
var dancer = {
  name: 'Disco Stu',
  saySomething: function() {
    return function(baby) {
      return this.name + ' llega antes que tu, ' + baby + '!';
    }.bind(this); // Seteamos el valor de 'this'
  }
}
var talk = dancer.saySomething();

talk('nena'); // 'Disco Stu llega antes que tu, nena!'
					

ES6 - Arrow functions

// ES5
var dancer = {
  name: 'Disco Stu',
  saySomething: function() {
    return (baby) => this.name + ' llega antes que tu, ' + baby + '!';
  }
}
var talk = dancer.saySomething();

talk('nena'); // 'Disco Stu llega antes que tu, nena!'
					

Ifs y operadores condicionales

//Ifs
if () {
  ...
} else if {
  ...
}

// Conditional operator
const isBurnsEvil = true;
const result = isBurnsEvil ? 'Yes, he stole the sun' : 'No, he is worst';
					

Switches

const apu = 'Apu';

const getWife = (person) => {
  switch (person) {
    case 'Homer':
      return 'Marge';
    case 'Apu':
      return 'Manjula';
    default:
      return null;
  }
}

getWife(apu) // 'Manjula'

					

Bucles

Bucles típicos en MDN

Para recorrer arrays, normalmente se usan funciones propias de los arrays como map, forEach... o lodash

Array MDN

Contenar strings - string templates

// ES5
var name = 'Apu';
name = name + 'Nahasapeemapetilon';

// ES6
let name = 'Apu';
name = `${name} Nahasapeemapetilon`;
					

Destructing

const user = {
  name: 'Ned Flanders',
  age: 42,
}

// Forma menos chachi
const name = user.name;
const age = user.age;

// Forma chachi
const { name, age } = user;
					

Property Shorthand

const name = 'Ned Flanders';
const age = 42;

// ES5
const newUser = {
  name: name,
  age: age,
}

// ES6
const newUser = {
  name,
  age,
}
					

Clases

class Character {
  constructor (name) {
    this.name = name;
  }
}
class SimpsonCharacter extends Character {
  constructor (name, famousStatement) {
    super(name)
    this.famousStatement = famousStatement;
  }
  sayFamousStatement() {
    console.log(`${this.name} say: ${this.famousStatement}`);
  }
}
const bart = new SimpsonCharacter('Bart', 'Multiplícate por cero!')
					

Módulos

// Export
export const CREATOR = 'Matt Groening';
export const getSeason(chapterNumber) => Math.floor(chapterNumber / 24);

export default const simpsonSerie = {
  CREATOR: CREATOR,
  getSeason: getSeason,
};
// Import
import simpsonSerie from 'simpson-file';
simpsonSerie.getSeason(254); // 10

import { CREATOR, getSeason } from 'simpson-file';
console.log(CREATOR) // 'Matt Groening'
					

// .eslintrc
{
  "extends": [
    "airbnb", // https://github.com/airbnb/javascript
  ],
  "plugins": [
    "react"
  ],
  "rules": [
    ...
  ],
}