Archer Zou's Blog

Snippets on Javascript ES6

Archer Zou's photo
Archer Zou
·

3 min read

  1. Destruction

    case: convert object

     const points = [
   [4, 5],
   [10, 1],
   [0, 40]
 ];

 to 
 [
   { x: 4, y: 5},
   { x: 10, y: 1},
   { x: 0, y: 40}
 ]

 // ES5:
 points.map( pair => {
     const x = pair[0];
     const y = pair[1];
 });

 // ES6:
 /* points.map( [x, y] => {
     const [ x, y ] = pair;
 }); */
 points.map(([x, y]) => {
     return { x: x, y: y};
 });

 // for short
 points.map(([x, y]) => {
     return { x, y};
 });

  2. The 'reducer' helper function

    Interview question Valid Parentheses

    Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

    An input string is valid if:

     function balancedParens(string) {
   return !string.split("").reduce(function(previous, char) {
     if (previous < 0) { return previous;}
     if (char === "(") { return ++previous; }
     if (char === ")") { return --previous; }
     return previous;
   }, 0);
 }

 balancedParens(")(");

  3. The hardest part

    Recursion with Destructuring

    This one is probably the hardest exercise in the entire course!

    Use array destructuring, recursion, and the rest/spread operators to create a function 'double' that will return a new array with all values inside of it multiplied by two. Do not use any array helpers! Sure, the map, forEach, or reduce helpers would make this extremely easy but give it a shot the hard way anyways :)

    Input:

    double([1,2,3])

    Output

    [2,4,6]

    Hint: Don't forget that with recursion you must add a base case so you don't get an infinite call stack. For example, if 'const [ number, ...rest ] = numbers' and number is undefined do you need to keep walking through the array?

    Solution:

     const numbers = [1, 2, 3];

 function double([head, ...rest]) {
   if (!head) {
     return [];
   }

   return [2 * head, ...double(rest)];
 }

  4. Generators

    Iterator every member of the team, including the engineering and testing team.

    ES5 code below:

const testingTeam = {
  lead: 'Amanda',
  tester: 'Bill'
};

const engineeringTeam = {
  testingTeam,
  size: 3,
  department: 'Engineering',
  lead: 'Jill',
  manager: 'Alex',
  engineer: 'Dave'
};

function* TeamIterator(team) {
  yield team.lead;
  yield team.manager;
  yield team.engineer;
  // use generator delegation
  const testingTeamGenerator = TestingTeamIterator(team.testingTeam);
  yield* testingTeamGenerator;
}

function* TestingTeamIterator(team) {
  yield team.lead;
  yield team.tester;
}

const names = [];
for (let name of TeamIterator(engineeringTeam)) {
  names.push(name);
}

console.log(names);

Refactor to ES6

const testingTeam = {
  lead: 'Amanda',
  tester: 'Bill',
  // The purpose of symbols iterator is to teach a for loop 
  // how it should iterate over this object
  [Symbol.iterator]: function* () {
    // 'this' means belong to testing team
    yield this.lead;
    yield this.tester;
  }
};

const engineeringTeam = {
  testingTeam,
  size: 3,
  department: 'Engineering',
  lead: 'Jill',
  manager: 'Alex',
  engineer: 'Dave',
  [Symbol.iterator]: function* () {
    yield this.lead;
    yield this.manager;
    yield this.engineer;
    yield* this.testingTeam;
  }
};

const names = [];
for (let name of engineeringTeam) {
  names.push(name);
}

console.log(names);
JavaScript