Gabriele Ferro Home

#100DaysOfCode Weekly Recap 08

What have I learned this week?

Some techniques in JavaScript allow us to hide variables and functions from other parts of code, in order to simulate the behavior of public and private attributes and methods found in object-oriented languages like C++ or Java.

Before we talk about how to do this, we need to understand what Closures and IIFEs are.

Let's proceed in stages.

First of all, we need to know that functions in JavaScript are first-class functions. They can take an argument, they can return a function, and they can be stored in a variable. Also, everything in JavaScript is an object, even functions.

Next step is to understand the internal engine of JavaScript, in particular the the scope chaining. That is, the JavaScript internal engine searches inside the declaration of our function the necessary variables and if it does not find them it searches them outside of our function (the parent function).

Taking advantage of this mechanism, Closures allow us to encapsulate variables external to the function declaration, to our function, in the execution context. In this way, each element of the execution context will possess its own variables.

Each addValue function contains its own variable x

IIFEs are unnamed functions that are executed as soon as they are declared. Their variables are visible only inside this function and this method allows us to create a sort of private variables.

The counter variable is not defined outside the IIFE scope

The last step is to combine the two concepts just seen to obtain encapsulation and information hiding. That is, the possibility of declaring internal variables and functions that will not be accessible to the outside world, since they are private, and public functions that will instead be available to the entire project.

Only addOne and addTwo are public. The function addThree is private.

I also found some articles that go into more detail:

Understanding Scope and Scope Chain in JavaScript

Understanding The Execution Context & Stack

Understanding Closures

The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript


The execution context has a variable called "this" that is bound to it.

The variable "this" in the global context is the window object.

Though, if we create an object, the "this" inside the object will refer to that specific object. We can for example create a single object to show that the object variable containing the name becomes accessible using this syntax.

If we want to create more objects that contain functions, we will have an inefficient memory allocation, because each object will contain a copy of the function. For this reason the ideal is to use prototypes, as they allow the objects to keep a pointer to the original function without creating a copy. Simply put, the variable will contain a memory address (a number) instead of the text string of the entire function. For example, in jargon we will say that "the variable points to the function located at memory address 0xf99a44eb". The concept of retrieving the memory address of variables during execution is VERY simple in languages like C or C++. In JavaScript it's a different matter.

I found this article that explains the problem well:

(kind of) Getting the memory address of a JavaScript object

JavaScript has (like Java) a garbage collector, i.e. the dynamic memory is managed automatically but this does not mean that we are saved from potential memory leaks.

Memory Management

4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them


What if I have a function, external to an object and I want to use it for that object:

How can we change the value of "this"?

There are functions such as bind, call and apply that allow us to change the value of this.

The bind method applies to a function and takes an object as argument. Finally it returns a new function.

The bind method allows also to fix the value of the arguments that will be taken by the new function that will be created.

Here the first argument is set to the number 2

The difference between bind and call/apply is that: bind returns a function without executing it, while call and apply execute it directly.

So what's the difference between call and apply?

The way they accept arguments.

Both functions take an object as first argument, but while the call method accepts a variable number of arguments separated by a comma, the apply method accepts as second argument an array composed of a variable number of elements.

I'll stop here for today, I'll edit this part later to include the other topics.

Anyway, here's the full log for the week:

Day 42

JavaScript Execution Context, Scope chain, Hoisting, Refactoring Techniques.

Plenty of quizzes. I also improved my snake game and now the canvas is reponsive.

Day 43

I have added a few functions to handle the swipe gesture and now my snake game also works on my phone !

I used a small hack to achieve this by using an overlay.

I could have achieved the same result by extending the entire canvas and reducing the playing area... ¯\_(ツ)_/¯

Day 44

I am taking another course in French on JavaScript programming.

Today's topics are:

First-class function https://en.wikipedia.org/wiki/First-class_function…

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

IIFE https://developer.mozilla.org/en-US/docs/Glossary/IIFE…

Now obsolete because of modules? https://freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/

Day 45

I continue the course on advanced concepts of JavaScript.

Today's topics are:

1) Strict mode vs Sloppy Mode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode…

2) This https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this…

3) The bind method https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Day 46

The 2nd part of the course is turning out to be better than the first!

I continue to study JavaScript functions such as:

call https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call…

apply https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply…

The arrow functions and the behavior of this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions…

Day 47

Objects, the constructor function, Prototypes, the prototype chain, classes.

I think I'm going to die of exhaustion this week.

Day 48

I finished the course (in French) on advanced JavaScript concepts.

**Thoughts:**

I must say that it was good to review some concepts that I already knew, but by taking a different course I was able to notice some nuances of the language that I had missed.

I wonder how many people like me do the challenge and work 8 to 10 hours a day.

June 2024
MTWTFSS
 12
3456789
10111213141516
17181920212223
24252627282930

Archives

Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.