Part 2

Monday, June 15, 2020

Course Link

1. Create Strings using Template Literals

Template literals allow you to create multi-line strings and to use string interpolation features to create strings.
Use backticks (`), not quotes (' or “), to wrap the string
You won’t have to use concatenation with the + operator, instead, you could use the ${variable} syntax as a placeholder
Example 1

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

// Template literal with multi-line and string interpolation
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting); // prints
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.

Example 2

Use template literal syntax with backticks to display each entry of the result object’s failure array.

Each entry should be wrapped inside an li element with the class attribute text-warning, and listed within the resultDisplayArray.

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";
  const resultDisplayArray = [];
  for (let i =0;i <arr.length; i++){
    resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>` // Note: no need to add string quote ' or "" at the beginning and end. ` and ` are enough 
    );
  };
  return resultDisplayArray;
}
const resultDisplayArray = makeList(result.failure);

2. Write Concise Object Literal Declarations Using Object Property Shorthand

Example 1

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

// ES6
const getMousePosition = (x, y) => ({ x, y });

Example 2

const createPerson = (name, age, gender) => {
  "use strict";
  return {
      name, 
      age,
      gender
      }
};

3. Write Concise Declarative Functions with ES6

We can remove the : and function keyword when defining functions in objects.
Example 1

// ES5
const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

// ES6:
const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

Example 2

// Only change code below this line
const bicycle = {
  gear: 2,
  setGear: function(newGear) {
    this.gear = newGear;
  }
};
// Only change code above this line
bicycle.setGear(3);
console.log(bicycle.gear);

// ES6 refactor 
// Only change code below this line
const bicycle = {
  gear: 2,
  setGear(newGear) {
    this.gear = newGear;
  }
};
// Only change code above this line
bicycle.setGear(3);
console.log(bicycle.gear);

4. Use class Syntax to Define a Constructor Function

ES6 provides a new syntax to create objects, using the class keyword
It should be noted that the class syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc
The class keyword declares a new function, to which a constructor is added. This constructor is invoked when new is called to create a new object
The constructor method is a special method for creating and initializing an object created with a class.
UpperCamelCase should be used by convention for ES6 class names, as in SpaceShuttle used below
Example 1

// In ES5, we usually define a constructor function and use the new keyword to instantiate an object
var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');

// ES6 class syntax simply replaces the constructor function creation:
class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

Example 2

class Vegetable{
  constructor(name){
    this.name = name;
  }
}
const carrot = new Vegetable('carrot');
console.log(carrot.name); // Should display 'carrot'

The quotes today on freeCodeCamp

It is never too late to be what you might have been — Mary Anne Evans

Life shrinks or expands in proportion with one’s courage — Anaïs Nin

← Previous