@tesla809/

closures - fp - Fun Fun Function

JavaScript

Notes on closures from Fun Fun Function's series on functional programing.

fork
loading
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// functional programming - the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. You can avoid lots of bugs this way.

// callback - function that is passed into other function as value

// In JavaScript functions are not just functions and values for other functions, but they are also closures. 
// Closures- The function body has access to variables defined outside the function body.

// greetme is refering to function outside of function scope.
// we can't do this in languages that does not have support
// for closures. In those without support, we would have to pass the name as an argument instead.

let me = 'Bruce Wayne';
function greetMe(){
  console.log(`Hello ${me}!`);
}

// greetMe does not copy the value.
// It always has access to the value at the time from the outer scope.
// greatMe will remember the outer context its called in. even if its called from a completely different part of the application or a different module.
me = 'Batman';
greetMe();

// Why are closures useful?
// Since all javascript functions are closures including the callback to success, it will have access to the requestID even though this callback is executed WAAAAY later.

// Closures are useful when starting tasks where you want to execute a callback (aka an action when the task is done) with stuff available to you started that task. This delay is called "asychronous". So closures make callbacks possible and thus asynchronous programming.
// Closures makes that simple and readable.
// Without it asynchronous programming becomes way harder than it should be.
// Closures are everywhere in JavaScript!
// Use them alot in code and read Mozilla's code

// According to MDN "Closures are useful because they let you associate some data (the lexical environment) with a function that operates on that data."
// Lexical envirioment - "Lexical scope is just the environment the variable/function etc. is created. Eg If you created a variable in the global scope, then the lexical scope(or better environment) is the global environment."

// If you created a variable inside of a function, then the lexical environment is the scope of that function.

function sendRequest() {
  let requestID = '123';
  $.ajax({
    url: '/myURL',
    sucess: function(response) {
      console.log('Request' + requestID + ' returned');
    }
  });
}

// Be aware that "It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption."

// This creates a new .getName fuction for every new instance, which affects performance over time. Not good and we are creating functions inside of functions
function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}

// This is better because the .getName functionality can be shared with every object. This frees up memory and cpu.
function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};
Native Browser JavaScript