LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

ES6 Examples

JS Compatibility table

Toggle View Compiled tab to see ES5 compiled by Babel.

Check dev console for results.

Let Keyword test (click boxes)

CSS
#letKeyword > div {
    height: 10rem;
    width: 10rem;
    background-color: HoneyDew;
    float: left;
    margin: 3px;
    cursor: pointer;
    border: 1px solid olive
  }
JS
//-------------------------------------
// Let keyword
//-------------------------------------
for(let i=0; i<10; i++){
  var div = document.createElement('div');
  console.log(i);
  div.onclick = function(){
    alert('you clicked on box #' + i);
  };

  document.getElementById('letKeyword').appendChild(div);
  //document.getElementsById('section').appendChild(div);
}

//-------------------------------------
// Constant keyword
//-------------------------------------
function drinksAmount(amount){
  const freezingTemp = 4;
  if(freezingTemp >= amount){
    return amount + " is OK";
  } else {
    return amount + " is too much!";
  }
}

console.log(drinksAmount(2));
console.log(drinksAmount(10));

//-------------------------------------
// Templating
//-------------------------------------
// Example 1
function print(drinksName) {
  console.log(`Let's have  ${drinksName}`);
}
print("Cognac");

// Example 2
function passwordReset(firstName, emailAddress){
  var tempPass = '1234qwerty';
  console.log(
    `Hi ${firstName}, you have requested password reset.
        Email address: $${emailAddress}
        Temporary Password: $${tempPass}
    `
  )
}

passwordReset("Lukasz", "test@test.com");


//-------------------------------------
// Spread operator
//-------------------------------------
var beer = ["Ale", "Lager", "Wheat Beer"];
var drinks = ["Riesling", "Syrah", "Merlot", ...beer ];
console.log(drinks);

//-------------------------------------
// Default Parameters
//-------------------------------------
function drinking(drinkName="cider", items=2){
  console.log(`Today I will drink ${items} pints of ${drinkName}`);
}

drinking('Ale', 3);

//-------------------------------------
// Object Literal Enhancments
//-------------------------------------
var wine = {
  merlot(times){
    console.log("Merlot".repeat(times));
  },
  syrah(times){
    console.log("Syrah".repeat(times));
  }

}
wine.merlot(2)
wine.syrah(10)

//-------------------------------------
// Arrow functions
//-------------------------------------
// ES5
// var cidersList = function(ciders){ console.log(ciders); }
// cidersList(["Aspall", "Magners", "Somersby"]);

// ES6
var vodkasList = (vodkas) => console.log(vodkas);
vodkasList(["Monopolowa", "Belvedere", "Absolwent"]);

//-------------------------------------
// Arrow functions and 'this'
//-------------------------------------
var person = {
  first: "Lukasz",
  drinks: ["beer", "cider", "vodka", "wine"],
  printActions: function(){
    var self = this;
    this.drinks.forEach(function(drink){
      var str = self.first + " likes to drink " + drink;
      console.log(str);
    });
  }
}

person.printActions();

//-------------------------------------
// Destructuring Assigment
//-------------------------------------
// Example 1
// ES6
var [,two,,,five,] = ["Beer", "Cider", "Wine", "Whisky", "Cognac"];
console.log(two);
console.log(five);
// ES5
// var choice = ["Beer", "Cider", "Wine", "Whisky", "Cognac"];
// console.log(cities[1]);
// console.log(cities[4]);

// Example 2
// ES6
var {name, description} = {
  name: "Mojito",
  price: 5,
  description: "Traditional Cuban highball",
  ingredients: ["1 1/2 oz White rum", "6 leaves of Mint", "Soda Water", "1 oz Fresh lime juice", "2 teaspoons Sugar"]
};

console.log(name);
console.log(description);
// ES5 
// var drink = {
//   name: "Mojito",
//   price: 7,
//   description: "Traditional Cuban highball",
//   ingredients: ["1 1/2 oz White rum", "6 leaves of Mint", "Soda Water", "1 oz Fresh lime juice", "2 teaspoons Sugar"]
// }
// console.log(drink.name);
// console.log(drink.description);

// Example 3
var order = {
  drink: "Martini",
  qty: 1,
  how: "shaken, not stirred",
  cost: 4
}

function orderDrink({qty, drink, how}){
  return `Can I have ${qty} ${drink} ${how}`
}

console.log(orderDrink(order));

//-------------------------------------
// Genertators
//-------------------------------------
function* eachItem(arr) {
  for(var i=0; i

Description

ES6 examples compiled to ES5 using Babel
Term
Sat, 01/13/2018 - 08:35

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv