basic.js

// 0. Can you explain the follow concepts? 
// 0.1 Explain how prototype works in JS can you give us an example. 
// 0.2 how composition works in JS (The candidate might comment about Object.assign() or Object.create();

// bonus points the candidate will comment the different

// scope and this
// 1. why bind, call and apply are used in Javascript, can you give us an example?
// what's the difference between call and apply?

// hoisting and scope
// 2. can you explain us the follow code?
//    
const animal = {
  color: 'red',
  run: function() {
    console.log('inside run:', this);
    
    function bar() {
      console.log('inside bar', this);
    }
    
    bar();
  }
};

animal.run();


// 3. basic mutability
// can you explain the following code?
const colors1 = [{
  name: 'green',
},
{
  name: 'red',
},
{
  name: 'blue',
}];

const colors2 = colors1;

colors1[0].name = 'whatever',
  
console.log('color name:', colors2[0].name)
// why? [...] || slice

// Promises and data manipulation
// 4. Please read the follow code and answer the question below of it.

const fakeApi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        characters: [{
          name: 'Hulk',
          isAGoodGuy: true,
          strength: 1200,
          factor: 2,
        },
        {
          name: 'Superman',
          isAGoodGuy: true,
          strength: 1000,
          factor: 3,
        },
        {
          name: 'Thor',
          isAGoodGuy: true,
          strength: 900,
          factor: 1.5,
        },
        {
          name: 'Thanos',
          isAGoodGuy: false,
          strength: 2000,
          factor: 8,
        }],
      })
    }, 1500)
  });
}

// 1. Retrieved the first element from the FakeApi

// 2. Retrieved all characters that are marked as "GoodGuy" (use of filter)

// 3. Calculate the amount of strength of all `GoodGuys` together (use of reduce)

// 4. Retrieved the strength of each character multiplying the strength by a factor, example of the data structure expected
// {
//   superHero: 'name of the super hero',
//   strenghtWithFactor: 'this will be the result of factor * strenght'
// }


// 1. Here the candidate will understand the concept of promises if it's junior and lack of the understanding of
// a Promise could use the array directly
fakeApi().then(response => console.log('1.', response.characters[0]));

// 2. Someone how has experience will automatically use filter
fakeApi().then(response => response.characters
  .filter(item => item.isAGoodGuy))
  .then(goodGuys => console.log('2.', goodGuys))

// 3. The developer should make use of Reduce
fakeApi().then(response => response.characters
  .filter(item => item.isAGoodGuy))
  .then(goodGuys => goodGuys.reduce((accum, item) => accum + item.strength, 0))
  .then(result => console.log('3.', result))

// 4. Use of map
fakeApi().then(response => response.characters
  .map(item => ({ superHero: item.name, strenghtWithFactor: item.factor * item.strength })))
  .then(itemWithStrenghtFactor => console.log('4.', itemWithStrenghtFactor))

// Please implemented a simple slide show that display 1 picture with a short description, bonus make it work with the keyboard