Introduction to React

Javascript Booster

@GoyeSays

Carlos Goyeneche

@GoyeSays

https://github.com/Goye

Before to start I need to...

Map - Reduce - Filter

The map() method creates a new array with the results of calling a provided function on every element in the calling array.
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
The filter() method creates a new array with all elements that pass the test implemented by the provided function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

Map - Reduce - Filter

var characters = [
  { name: 'Alfred', occupation: 'Butler', age: 70},
  { name: 'Batman', occupation: 'CEO of Wayne Enterprises', age 40},
  { name: 'Harley Quinn', occupation: 'Former psychiatrist', age: 29},
  { name: 'Joker', occupation: 'Vilain', age: 35}
];

var occupations = characters.map((character) => {
  return character.occupation;
});

console.log(occupations);

Map - Reduce - Filter

var characters = [
  { name: 'Alfred', occupation: 'Butler', age: 70},
  { name: 'Batman', occupation: 'CEO of Wayne Enterprises', age 40},
  { name: 'Harley Quinn', occupation: 'Former psychiatrist', age: 29},
  { name: 'Joker', occupation: 'Vilain', age: 35}
];

var totalAge = characters.reduce((sum, character) => {
  return sum + character.age;
}, 0);

console.log(totalAge);

var charactersObject = characters.reduce((array, character) => {
  array.push(character.name);
  return array;
}, [])

console.log(charactersObject);

Pure Functions

A function is considered pure if it adheres to the following properties:

All the data it deals with are declared as arguments
It does not mutate data it was given or any other data (these are often referred to as side effects).
Given the same input, it will always return the same output

Pure Functions

Pure add function

function add(x, y) {
  return x + y;
}

Impure add function

let y = 12;
function add(x) {
  return x + y;
}

Pure Functions

This function is not pure because it references data that it hasn’t directly been given. As a result, it’s possible to call this function with the same input and get different output:

let y = 2;
add(3) // 5
y = 3;
add(3)

https://www.sitepoint.com/an-introduction-to-reasonably-pure-functional-programming/

https://rileygelwicks.gitbooks.io/you-dont-know-js/content/scope%20&%20closures/ch1.html

How the scope (this) works

https://rileygelwicks.gitbooks.io/you-dont-know-js/content/scope%20&%20closures/ch1.html

How the scope (this) works

RHS reference (who's the source of the assignment)

console.log( a );

LHS reference (who's the target of the assignment)

a = 2;

https://rileygelwicks.gitbooks.io/you-dont-know-js/content/scope%20&%20closures/ch1.html

How the scope (this) works

RHS & LHS references

function foo(a) {
    console.log( a ); // 2
}

foo( 2 );

https://rileygelwicks.gitbooks.io/you-dont-know-js/content/scope%20&%20closures/ch1.html

How the scope (this) works

Engine: Hey Scope, I have an RHS reference for foo. Ever heard of it?
Scope: Why yes, I have. Compiler declared it just a second ago. He's a function. Here you go.
Engine: Great, thanks! OK, I'm executing foo.
Engine: Hey, Scope, I've got an LHS reference for a, ever heard of it?
Scope: Why yes, I have. Compiler declared it as a formal parameter to foo just recently. Here you go.
Engine: Helpful as always, Scope. Thanks again. Now, time to assign 2 to a.
Engine: Hey, Scope, sorry to bother you again. I need an RHS look-up forconsole. Ever heard of it?
Scope: No problem, Engine, this is what I do all day. Yes, I've gotconsole. He's built-in. Here ya go.
Engine: Perfect. Looking up log(..). OK, great, it's a function.

https://rileygelwicks.gitbooks.io/you-dont-know-js/content/scope%20&%20closures/ch1.html

How the scope (this) works

https://rileygelwicks.gitbooks.io/you-dont-know-js/content/scope%20&%20closures/ch1.html

How the scope (this) works

var a = 2;
function myObject() { this.a = 2; };
var o = new myObject();

What's the difference?

Call vs Apply vs Bind

var me = {firstName: 'Carlos', lastName: 'Goyeneche'};
var you = {firstName: 'John', lastName: 'Titor'};
function say(greeting) {
    console.log(greeting + ' ' +
    this.firstName + ' ' +
    this.lastName);
}
say.call(me, 'Hello');
say.apply(me, ['Hello']);
var sayHelloJohn = say.bind(you);
sayHelloJohn();

What the heck is the Event Loop anyway?

console.log("Hello World");
setTimeOut(function(){
  console.log("I am in the timeout function")
}, 0)
console.log("I am outside of the timeout");

What the heck is the Event Loop?

http://latentflip.com/loupe/

Callbacks vs Promises

Aren't promises just callbacks?

Callbacks vs Promises

Aren't promises just callbacks?

var myPromise = new Promise(
// Asynchronous simulation
    window.setTimeout(
        function() {
          resolve({
              response: 'yei!'
          });
        }, 2000);
    }
);

myPromise.then(
    function(res) {
      console.log(res);
    })
  .catch(
    function(error) {
      console.log('Houston we have problems.');
    });
}

Questions?

https://github.com/Goye

Thanks a lot!

https://github.com/Goye