ECMAScript Challenges

ecmascript-challenges.md

ECMAScript Challenges

The following are short little puzzles designed to introduce you to new features in ECMAScript you may not yet have come across. Please lookup the new features where you aren't sure. This link is a good place to start.

You can answer the questions in an online JS editor (please use chrome to ensure all JS features required are available). We have set one up for you (it contains a writeOutput function used in some questions below. Please replace this with your own solution if you use something else). Please fork the example so you have a clean copy to work on.

1. Arrays

1. Given the following array:

   const a = [1,2,3];

   create a new array b from a and add the numbers 4, 5, and 6 so that the following is true:

   a !== b

   hint

   lookup new operators in ES

2. Given the following array:

   const a = [1,2,3,4,5,6];

   select the first three elements into new variables b, c, and d and the remaining elements in the array into a new variable rest.

   hint

   another use of the same operator from 1, and a way of breaking down arrays (or objects)

3. Given the following:

   const a = Array.from(new Array(100),(val,index)=>index + 1); // Array [1,2...,100]

   return a new array with only the even numbers from this array.

   hint

   look at functions on Arrays

4. Given the following:

   const a = Array.from(new Array(100),(val,index)=>index + 1); // Array [1,2...,100]

   return a new array with every element doubled.

   hint

   look at functions on Arrays

5. Given the following:

   const a = Array.from(new Array(100),(val,index)=>index + 1); // Array [1,2...,100]

   return the sum of all elements.

   hint

   look at functions on Arrays

6. Given the following array of items:

   const games = [
       { title: 'Dark Souls 3', platform: 'PS4', price: 34.99 },
       { title: 'Mario Kart 8', platform: 'Switch', price: 39.99 },
       { title: 'Fifa 18', platform: 'PS4', price: 44.99 },
       { title: 'Binding of Isaac', platform: 'Xbox One', price: 15.99 },
       { title: 'League of Legends', platform: 'PC', price: 0.00 }
   ];

   return the total cost for all items.

7. Rewrite the above answer using a reusable method that will work to sum any value from any array of objects. (if you didn't do this the first time)

8. Given the following array of items:

   const games = [
       { title: 'Dark Souls 3', platform: 'PS4', price: 34.99, inventory: 10 },
       { title: 'Mario Kart 8', platform: 'Switch', price: 39.99, inventory: 5 },
       { title: 'Fifa 18', platform: 'PS4', price: 44.99, inventory: 2 },
       { title: 'Binding of Isaac', platform: 'Xbox One', price: 15.99, inventory: 15 },
       { title: 'League of Legends', platform: 'PC', price: 0.00 }
   ];

   return the total cost for the entire inventory.

   hint

   there's something to catch you out. Look closely at the items in the array

2. Functions

1. Fix the following code so it correctly logs the even numbers:

   class numberLogger {
       constructor() {
           this.numbers = [1,2,3,4,5,6,7];
       }
       
       isEven(x) {
           return x % 2 === 0;
       }
       
       logEven() {
           this.numbers.forEach(function(x) { if(this.isEven(x)){writeOutput(x)} });
       }
   }

   hint

   you need to look at different ways you can write the function inside the forEach

2. Write a function add that will allow the following code to work:

   const add = ;//fill this in
   const add2 = add(2);
   if(add2(7) === 9) {
       writeOutput('It worked!');
   } else {
       writeOutput('It is broken');
   }

   hint

   currying (google it) -> functions can return functions

3. Write a function logger to complete the code below that will log called doSomething with arguments [1,2] to the console

   const logger = ;//fill this in
   const doSomething = (a, b) => a + b;
   const doSomethingWithLog = logger('doSomething')(doSomething);
   
   doSomethingWithLog(1, 2);

   hint

   it requires the rest spread operator and the functionality you used in question 2

4. Using the knowledge gained in question 3, extend the solution to also include a function that will only allow execution if the user is in the admin role. (Note, the logger should only log if the function is executed, therefore it shouldn't log when the user isn't in the admin role)

   const user = {isAdmin: true};
   // fill this in
   const doSomething = (a, b) => a + b;
   const doSomethingWithAdminOnlyThenLog = ;// fill this in
   doSomethingWithAdminOnlyThenLog(1, 2);
   user.isAdmin = false;
   doSomethingWithAdminOnlyThenLog(3, 4);

   The above two questions are an example of higher order functions that return a function. These are functions that you can wrap other functions in to provide additional functionality. They are very useful in React as "Higher Order Components" that can provide additional functionality to other React Components.

3. Promises

​ Using the promise syntax:

1. Write a function that will query the pokeapi (https://pokeapi.co/) and return the name of the pokemon with id 4

2. Write a function that will query the pokeapi for the pokemon with ids 1,4,7 and return the name of the heaviest of the three

3. If you haven't already, write the above function in such a way that the three queries will happen in parallel to make it more efficient.

   Now using the async/await syntax (can combine with promise syntax where it makes your code cleaner)

4. Write a function that will query the pokeapi (https://pokeapi.co/) and return the name of the pokemon with id 4

5. Write a function that will query the pokeapi for the pokemon with ids 1,4,7 and return the name of the heaviest of the three. Make sure the queries run in parallel

4. Objects

1. Again using the pokeapi, use the following url https://pokeapi.co/api/v2/pokemon/?limit=9 to retrieve information on the first 9 pokemon and output all the properties you get back for each pokemon using the following structure:

   {propertyName}: {propertyValue}
   

   hint

   look at template literal format for outputting the strings, and look at turning the object properties into an array

5. Challenge

Using all of the above, write a simple game using the pokeapi. For example, you might like to write a top trumps game, or a price is right style game. It's up to you.

Answers

The answers to all of the above can be found on the following link:

https://codesandbox.io/s/k2xrr8prr.