The purpose of this class is to introduce to the student:

• What synchronous vs. asynchronous processes are
• What callbacks are and how to write your own
• How the event loop works
• Show 3 commonly used array functions (filter, reduce, map)

FIRST HALF (12.00 - 13.30)

• DOM
• DOM manipulation
• browser defined functions

Note: You can ask students to explain a concept or summerise the last lecture themselves

Notes:

• Synchronous refers to a linear execution process: one step at a time
• Asynchronous helps us do multiple things in parallel

A callback in JavaScript is basically a function(callback) being passed as a parameter to another function which after some point of time would execute the function passed or invoke the callback.

Callbacks were primarily introduced in JavaScript to achieve asynchronous behaviour (https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)

Consider a situation where person A wishes to go out for a movie with a friend person B one evening. Person A finds out the time and place and now needs to share it with B. A picks up the phone and tries to call B. Let's say that B is currently busy with some work and can't answer the phone. Person A has now got two options. One option is to stay on the line until B picks up the phone and then share the movie details. Or A could drop a voicemail and ask B to callback once free.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

more examples (made by Yash): https://github.com/HackYourFuture/JavaScript2/blob/master/assets/callbacks.js

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}

first();
second();

you can’t just call one function after another and hope they execute in the right order. Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.

SECOND HALF (14.00 - 16.00)

https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/event_loop.md

const bar = () => console.log('bar')

const baz = () => console.log('baz')

const foo = () => {
  console.log('foo')
  bar()
  baz()
}


foo()

Output:

foo
bar
baz

Call stack

map, filter and reduce are three array methods that iterate (loop!) over the whole array and preform a computation or a transformation. They have in common that they return a new array based on the transformations/calculations.

MDN definition: The map() method creates a new array with the results of calling a provided function on every element in the calling array.

MDN definition: The filter() method creates a new array with all elements that pass the test implemented by the provided function

MDN definition: The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value†.

Writing the functions yourself: https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/map_filter.md

const numbers = [1, 2, 3, 4];
const square = x => x * x;
const squaredNumbers = numbers.map(square);

console.log(squaredNumbers); // -> [ 1, 4, 9, 16 ]

const numbers = [1, 2, 3, 2];
const isTwo = x => x === 2;
const Twos = numbers.filter(isTwo);

console.log(Twos); // -> [ 2, 4 ]

const numbers = [1, 2, 3, 4];

const sum = (a, b) => a + b;
const total = numbers.xxx(sum, 0);

console.log(total); // -> 10

Fill in the xxx with map, filter or reduce:

const numbers = [1, 2, 3, 4];
const doubled = numbers.xxx(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

const numbers = [1, 2, 3, 4];

const times = (a, b) => a * b;
const total = numbers.xxx(times, 0);

console.log(total); // -> 10

const numbers = [1, 2, 3, 4];
const evens = numbers.xxx(item => item % 2 === 0);
console.log(evens); // [2, 4]

Yash made a very nice exercise (with answers): https://github.com/yash-kapila/HYF-JS2-Week2/tree/master/src

Easy methodes to transform arrays, wich you'll have to do quite often, while keeping the original array intact. You can see it as a shortcut. Of course you can write these methodes yourself many times, but 'they' already did it for you