Questions and exercises for one to demonstrate understanding of fundamental* front-end developer knowledge

javascript

Use the following code snippet to answer questions 1 - 2

var stringTransformerMaker (fn) {
  return function (string) {
    return fn(string)
  }
}

var yell = stringTransformerMaker(function (string) {
  return string.toUpperCase()
})

console.log(yell('hey neighbor') // HEY NEIGHBOR

var censor = stringTransformerMaker(function (string) {
  return string.replace(/aeiou/, '*')
})

console.log(censor('cattle')) // c*ttl*

1. Describe closure. How is it demonstrated in the above code snippet?

Closure is how a function is able to remember the variables in its enclosing scope when it runs later in a different scope. For example, when I pass a function to an event handler or Ajax call, and its surrounding variables later when the event fires to remember its context. That’s an example of the function closure maintaining state.

In the above example, we can see closure at work with the stringTransformerMaker. Whenever this function is called, it returns a function, that when executed, will remember the original function value provided to the stringTransformMaker function. This is demonstrated with the execution of yell and censor returning strings transformed according to the functions provided to their respective stringTransformerMaker executions.

2. Describe what it means for javascript the language to have `first-class`, or `lamda`, functions. How is this feature demonstrated in the above code snippet?

Having first-class / lamda functions means you are able to use functions just as any other piece of data. In practice this allows you to pass them around as parameters and return them as values to be used and executed as desired at application runtime.

stringTransformMaker demonstrates this feature as it both receives a function as a parameter and returns it as a value that can be executed later.

3. Demonstrate replacing a for loop for doubling an array of numbers with it's Array.map equivalent. Show both the for loop and the cooresponding Array.map replacement.

  var numbers = [1,2,3,4,5]
  var doubledWithLoop = []
  var doubledWithMap = []
  
  for (var i = 0; i < numbers.length; i++) {
    doubled[i] = numbers[i] * 2
  }
  
  console.log(doubledWithLoop) // [2,4,6,8,10]
  
  
  function doubleMe (x) {
    return x * 2
  }
  doubledWithMap = numbers.map(doubleMe)
  
  console.log(doubledWithMap) // [2,4,6,8,10]

4. Create a user `map` data structure from an array of user objects that take the following shape. Use the user `id` as the map key values.

{
  id: '1234'
  firstName: 'Todd'
  bio: 'I like to have friends'
}

  // Pretend Users is a globally available value with this array of user objects
  
  var userMap = {}
  Users.forEach(function (user) {
    userMap[user.id] = user
  })

5. how is javascript's prototypal inheritance different from classical inheritance?

Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the new keyword. Class inheritance may or may not use the class keyword from ES6.

Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or Object.create(). Instances may be composed from many different objects, allowing for easy selective inheritance.

CSS

why may using id selectors be a bad idea for large applications?
what's the difference between inline and block?
how could you style each element within the div to have the same vertical margin?

  <div class='thing'>
    <h1>Thing Title</h1>
    <p>Thing paragraph</p>
    <p>Thing paragraph 2</p>
    <footer>Thing footer</footer>
  </div>

mikeyamadeo/front_end_fundamental_knowledge.md