Showing posts with label ES6. Show all posts
Showing posts with label ES6. Show all posts

Friday, October 25, 2019

[JS][Example] JavaScript ES6 feature : Enhanced Object Literals

Example 1
ECMAScript 6 :
function Person(name,age,gender){
  return {
    name,
    age:age,
    gender,
    ["is"+gender]:true,
    makeSelfIntro(){
      return `I am ${name} and is ${age} years old, is a ${gender}. `
    }
  }
}
let people = [Person("Sam",45,"male"),
              Person("Ann",15,"female")];
document.write(people[0].makeSelfIntro());
Result is I am Sam and is 45 years old, is a male.

script write by ECMAScript 2015:
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function Person(name, age, gender) {
  var _ref;
  return _ref = {
    name: name,
    age: age,
    gender: gender
  }, _defineProperty(_ref, "is" + gender, true), _defineProperty(_ref, "makeSelfIntro", function makeSelfIntro() {
    return "I am ".concat(name, " and is ").concat(age, " years old, is a ").concat(gender, ". ");
  }), _ref;
}
var people = [Person("Sam", 45, "male"), Person("Ann", 15, "female")];
document.write(people[0].makeSelfIntro());
Reference:
https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

[JS][Example] JavaScript ES6 feature : Destructuring Assignment

According from the defination : "The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables."

Example 1 - array destructuring

ECMAScript 6 :
var a = ["str1","str2"];
var [b,c] = a;
If you print variable b, you would get result as str1

script write by ECMAScript 2015:
var a = ["str1", "str2"];
var b = a[0],
    c = a[1];

========================================

Example 2

ECMAScript 6 :
let o = {name: "Sam", age: 45, gender:"M"};
let {name, age, gender} = o;
document.write(name);
document.write(age);
document.write(gender);
Result is Sam45M

script write by ECMAScript 2015:
var o = {
  name: "Sam",
  age: 45,
  gender: "M"
};
var name = o.name,
    age = o.age,
    gender = o.gender;
document.write(name);
document.write(age);
document.write(gender);
========================================

Example 3

ECMAScript 6 :
let people = [{name:"Sam",age:45,gender:"male"},
              {name:"Ann",age:15,gender:"female"}]
for(let i in people){
 let {name,age,gender} = people[i];
   document.write(`${name} is ${age} years old and is ${gender}. `);
}
Result is Sam is 45 years old and is male. Ann is 15 years old and is female.

script write by ECMAScript 2015:
var people = [{
  name: "Sam",
  age: 45,
  gender: "male"
}, {
  name: "Ann",
  age: 15,
  gender: "female"
}];
for (var i in people) {
  var _people$i = people[i],
      name = _people$i.name,
      age = _people$i.age,
      gender = _people$i.gender;
  document.write("".concat(name, " is ").concat(age, " years old and is ").concat(gender, ". "));
}

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Wednesday, October 16, 2019

[JS][Example] JavaScript ES6 feature : Multi-line Strings


ECMAScript 6 :
let lines = `line 1
line 2
line 3
line 4
line 5
`;

Result is 6

script write by ECMAScript 2015:
var lines = "line 1\nline 2\nline 3\nline 4\nline 5\n";
Remark: you need to use ` (the symbol next the number 1 on keyboard)

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Wednesday, September 11, 2019

[JS][Example] JavaScript ES6 feature : Template Literals

ECMAScript 6 :
let name = "Sam";
let age = "45";
let str = `I am ${name} and I am ${age} years old.`
console.log(str);
Result is I am Sam and I am 45 years old.

Script write by ECMAScript 2015:
var name = "Sam";
var age = "45";
var str = "I am ".concat(name, " and I am ").concat(age, " years old.");
console.log(str);
Remark: beware you must use the symbol `, not " or '