function currying, context vs scope

Author: CoreyScript

README.md

@@ -1,18 +1,14 @@
 # JavaScript Foundations
 
-<br>
-
-## <b>JavaScript engine</b>
+## JavaScript engine
 
 A JavaScript engine is a program that translates JavaScript into machine language so that it can be interpreted by a computer.
 
 JS Engines were written to improve the performace of JavaScript in the browser.
 
 This documentation alalyses the [V8 Chrome Engine](https://v8.dev).
 
-<br>
-
-## How it works:
+### <b>How it works:</b>
 
 ![JavaScript Engine](./Assets/JS_Engine.png)
 
@@ -34,6 +30,8 @@ jsengine("const x = 100");
 // => ['const', 'x', '=', '100']
 ```
 
+---
+
 ![Interpreters & Compilers](./Assets/InterpreterCompiler.png)
 
 ## Interpreter
@@ -45,6 +43,8 @@ JavaScript was originally designed for the browser, so interpreters were ideal f
 <b>Pros:</b> Quick to get up and running </br>
 <b>Cons:</b> Slow at executing loops and repetitive code
 
+---
+
 ## Compiler
 
 Compilers essentially translate our code and compile it down into machine language.
@@ -64,19 +64,19 @@ Both of these do exactly what compilers do: Take one language and convert into a
 
 </i>
 
-## JIT Compiler
+### <b>JIT Compiler</b>
 
 JIT (Just in time) compilers are essentially the combination of an interpreter and a compiler. They were designed to make JS Engines run faster.
 
-<br>
+---
 
 ## ECMAScript
 
 ECMAScript is the governing body which sets the standardised rules for JS engines
 
 [List of ECMAScript engines](https://en.wikipedia.org/wiki/List_of_ECMAScript_engines)
 
-<br>
+---
 
 ## <i>"JS is an interpreted language"</i>
 
@@ -90,8 +90,7 @@ Initially when JavaScript first came out, engines such as Spider Monkey only use
 
 Today, modern JS Engines have evolved to include compilers for optimisation.
 
-<br>
-<hr>
+---
 
 ## Writing optimised code
 
@@ -105,11 +104,15 @@ Be careful when using the following functions as they can affect the JS engine's
 - with
 - delete
 
-### Inline Caching
+---
+
+## Inline Caching
 
 Inline caching is an optimization technique employed by V8. The goal is to speed up runtime method binding by remembering the results of a previous method lookup directly at the call site. JavaScript engines use IC to memorize information on where to find properties on objects, to reduce the number of timely lookups.
 
-### Hidden Classes
+---
+
+## Hidden Classes
 
 JavaScript is a dynamic language. Data type is determined at the time of execution, making accessing object properties fairly slow, in comparison to statically typed languages. It’s rather hard to optimize a dynamically typed language. Objects can change their type during runtime and it happens implicitly. To track types of JavaScript object and variables, V8 introduced the concept of hidden classes. During runtime V8 creates hidden classes that get attached to each and every object containing memory for each property. This allows for V8 to optimize the property access time.
 
@@ -120,8 +123,7 @@ It's important to write performant, predictable code which doesn't impede the en
 - Assign all properties of an object within it's constructor
 - Instantiate object properties in the same order
 
-<br>
-<hr>
+---
 
 ## Call Stack
 
@@ -134,31 +136,33 @@ You can think of the call stack as a region in memory which operates in 'first i
 - When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.
 - If the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.
 
-## Memory Heap
+---
+
+## <b>Memory Heap</b>
 
 In most native executable programs, there are two types of memory available: stack-based and heap-based memory.
 
 The heap is reserved for the memory allocation needs of the program. It is an area apart from the program code and the stack which stores program data in an unordered fashion.
 
-### Garbage Collection
+### <b>Garbage Collection</b>
 
 JavaScript is a garbage collected language. Data stored in the memory heap that isn't needed anymore gets cleared away to preserve memory. This helps prevent memory leaks.
 
 Garbage collection in JS uses the 'mark and sweep' algorithm. Essentially it marks data which is being used and needs to be kept, and sweeps away data which is no longer being used or referenced.
 
-## Memory Leaks
+### <b>Memory Leaks</b>
 
 A memory leak occurs when a computer program incorrectly manages memory allocations in such a way that memory which is no longer needed is not released. This is often due to unintentional references from other objects. Memory leaks in web pages often involve interaction between JavaScript objects and DOM elements.
 
 A memory leak may also happen when an object is stored in memory but cannot be accessed by the running code.
 
-Common causes of memory leaks to avoid:
+<b>Common causes of memory leaks to avoid:</b>
 
 - <b>Global variables:</b> Using too many global variables can add excessive amounts of data to memory which doesn't get cleared away.
 - <b>Event Listeners:</b> Unregistered event listeners can cause memory leaks because any objects referenced by them can't be garbage collected. Memory leaks often occur after a lot of user interaction.
 - <b>Set Interval:</b> Unless stopped, the objects within setInterval() are never garbage collected becuase the function keeps running.
 
-<br>
+---
 
 ## JavaScript Runtime
 
@@ -172,15 +176,15 @@ The JS Runtime Environment executes asynchronous code in the background and uses
 
 All modern browsers have a JS engine as well as a JS runtime which provides a web API.
 
-### Web Browser API:
+### <b>Web Browser API</b>
 
 Web API's are applications provided by the browser which can do a variety of tasks in the background such as sending HTTP requests, listening to DOM events, caching and database storage on the browser.
 
-### The Heap
+### <b>The Heap</b>
 
 The first container in the environment, which is also part of the V8 JS Engine, is called the ‘memory heap.’ As the V8 JS Engine comes across variables and function declarations in the code it stores them in the Heap.
 
-### The Stack
+### <b>The Stack</b>
 
 The second container in the environment is called the ‘call stack.’ It is also part of the V8 JS Engine. As the JS Engine comes across an actionable item, like a function call, it adds it to the Stack.
 
@@ -190,24 +194,30 @@ When a function returns a value, or is sent to the Web API container, it is popp
 
 <i>Note - the Stack is a data structure that runs LIFO — last in first out. No function other than the one at the top of the stack will ever be in focus, and the engine will not move to the next function unless the one above it is popped off.</i>
 
-### The Web API Container
+### <b>The Web API Container</b>
 
 The Web API calls that were sent to the Web API container from the Stack, like event listeners, HTTP/AJAX requests, or timing functions, sit there until an action is triggered. Either a ‘click’ happens, or the HTTP request finishes getting its data from its source, or a timer reaches its set time. In each instance, once an action is triggered, a ‘callback function’ is sent to the fourth and final container, the ‘callback queue.’
 
-### The Callback Queue
+### <b>The Callback Queue</b>
 
 The Callback Queue will store all the callback functions in the order in which they were added. It will ‘wait’ until the Stack is completely empty. When the Stack is empty it will send the callback function at the beginning of the queue to the Stack. When the Stack is clear again, it will send over its next callback function.
 
 <i>Note - the Queue is a data structure that runs FIFO — first in first out. Whereas the Stack uses a push and pop (add to end take from end), the Queue uses push and shift (add to end take from beginning).</i>
 
-### The Event Loop
-
-The Event Loop can be thought of as a ‘thing’ inside the javascript runtime environment. Its job is to constantly look at the Stack and the Queue. If it sees the Stack is empty, it will notify the Queue to send over its next callback function. The Queue and the Stack might be empty for a period of time, but the event loop never stops checking both. At any time a callback function can be added to the Queue after an action is triggered from the Web API container.
+### <b>The Event Loop</b>
 
-<b>This is what they mean when they say Javascript can run asynchronously. It isn’t actually true, it just seems true. Javascript can only ever execute one function at a time, whatever is at top of the stack, it is a synchronous language. But because the Web API container can forever add callbacks to the queue, and the queue can forever add those callbacks to the stack, we think of javascript as being asynchronous. This is really the great power of the language. Its ability to be synchronous, yet run in an asynchronous manner, like magic!</b>
+The Event Loop can be thought of as a ‘thing’ inside the javascript runtime environment. It's job is to constantly look at the Stack and the Queue. If it sees the Stack is empty, it will notify the Queue to send over its next callback function. The Queue and the Stack might be empty for a period of time, but the event loop never stops checking both. At any time a callback function can be added to the Queue after an action is triggered from the Web API container.
 
 <br>
 
+<b>This is what they mean when they say Javascript can run asynchronously. It isn’t actually true, it just seems true.
+
+Javascript can only ever execute one function at a time, whatever is at top of the stack, it is a synchronous language. But because the Web API container can forever add callbacks to the queue, and the queue can forever add those callbacks to the stack, we think of javascript as being asynchronous.
+
+This is really the great power of the language. Its ability to be synchronous, yet run in an asynchronous manner, like magic!</b>
+
+---
+
 ## Node.js
 
 ![Node.js Runtime](./Assets/NodeRuntime.jpg)
@@ -236,8 +246,7 @@ The main difference between the Node.js approach and a Python threaded-server is
 
 In contrast, the Node.js approach is to schedule callbacks that are to be invoked once the slow thing is done. Node.js' single thread is never sleeping except if there are literally no requests to process. The code runs in a persistent context that exists as long as your Node.js server is running.
 
-<br>
-<hr>
+---
 
 ## Lexical Environment
 
@@ -247,13 +256,17 @@ In JavaScript our lexical scope (available data & variables where the function w
 
 ![Lexical Environment Scope](./Assets/LexicalEnvironment.png)
 
+---
+
 ## Scope
 
 Scope of a variable/function is basically the locations from where a variable is visible/accessible. In JavaScript there are two types of scope:
 
 - <b>Local scope:</b> Variables defined inside a function are not accessible (visible) from outside the function. They become LOCAL to the function. JavaScript has function scope: Each function creates a new scope.
 - <b>Global scope:</b> A variable declared outside a function, becomes GLOBAL. A global variable has global scope: All scripts and functions on a web page can access it.
 
+---
+
 ## Execution Context
 
 Execution context is defined as the environment in which JavaScript code is executed. In JavaScript environment there are 2 main types of Execution Context:
@@ -272,7 +285,9 @@ The execution context/environment of a function roughly equates to:
 - The scope chain of that function i.e. variables and objects available for the function to use
 - Value of `this`
 
-### Hoisting
+---
+
+## Hoisting
 
 Hoisting is the behavior of moving variables or function declarations to the top of their respective environments during the compilation phase. The JavaScript engine allocates memory for the variables and functions that it sees in your code during the creation phase, even before the code is run.
 
@@ -311,6 +326,8 @@ But it's important to remember that during this creation phase we also have this
 
 Execution context works as a unit in the overall flow of execution. Since every function has its own execution context, the JS compiler maintains a stack of execution contexts. It tracks whether the execution contexts are in the correct order. The top of the stack contains the execution context of the function that is currently being executed.
 
+---
+
 ## Scope Chain
 
 Every scope is always connected to one or more scopes in their back forming a chain or a hierarchy, except the global scope. The global scope does not have any parent, and that makes sense too since it is sitting at the top of the hierarchy.
@@ -470,3 +487,29 @@ truck.fuel; // => 160
 <i>Summary:</i>
 
 `.call()` and `.apply()` are useful for borrowing methods from an object, while `.bind()` is useful to call functions later on with a certain context or a certain `this` keyword.
+
+---
+
+## Function Currying
+
+Currying is the process of taking a function with multiple arguments and returning a series of functions that take one argument and eventually resolve to a value.
+
+```javascript
+function multiply(a, b) {
+  return a * b;
+}
+
+let multiplyByTwo = multiply.bind(this, 2);
+
+multiplyByTwo(4); // => 8
+```
+
+---
+
+## Context vs Scope
+
+Scope pertains to the visibility of variables, and context refers to the object to which a function belongs.
+
+<b>Scope</b> has to do with the the visibility of variables. In JavaScript, scope is achieved through the use of functions. When you use the keyword `var` inside of a function, the variable that you are initializing is private to the function, and cannot be seen outside of that function.
+
+<b>Context</b> is related to objects. It refers to the object to which a function belongs. When you use the JavaScript `this` keyword, it refers to the object to which the function belongs.