DEV Community: Maximiliano Hernández Betancourt

How Does JavaScript Works with Scopes, Hosting, and Closures?

Maximiliano Hernández Betancourt — Thu, 13 Aug 2020 12:14:35 +0000

Scopes, Hoisting, and Closures are terms you will eventually have to deal with in your JavaScript codes. So, don't wait until you get an error you don't understand, and keep reading this post!

Before defining what is Hoisting and Closure, we first need to understand how scopes work in JavaScript.

Scopes

If you google the definition of "Scope" you will find that it is "the extent of the area or subject matter that something deals with or to which it is relevant". In simpler terms, a scope is an extent in which something is important.

Talking in terms of JavaScript, the scope is the area in which variables and functions are accessible. There are two major scopes: Global and Local

A) Global Scope

The global scope is the one where all other scopes can reach. Any variable or function declared in this scope, is accessible in any part of the code. Also, It is the first scope you can state variables and you can think of it as the father of all scopes.

In the above example, you can see that the outerVariable can be accessed inside the foo() function. Also, the variable is stated outside of any variable, so it is declared in the global scope. Also, the function foo is also declared on the global scope. So, you can access that function anywhere in your script.

You realized that we thought of the inside of the function as another scope?

B) Local Scope

There are different types of local scopes, exactly three types: Function, Block, and Module.

a) Function Scope

Every time you declare a function, it creates its scope. So, anything declared inside a function is only accessible inside the function.

The insiderVariable does not belong to the Global Scope, so it can only be accessed in the scope of foo()

b) Block Scope

In JavaScript, a group of statements arranged inside curly brackets ( {} ) is considered a block statement. These groups have their scope too. So, anything stated inside isn't available in outer scopes.

Another example of a block scope are conditional statements:

c) Module Scope

Any variable stated inside a JavaScript module can only be accessed inside it unless you export them. So every module has its scope too.

For this example, first, we are going to create a module that exports a function

Next, we are going to import this module inside our main JS and test the function

As you can see, the function sayHello() can access the str variable because it belongs to the same scope but is not available in our importing module.

But we exported the function to our main JS, so now sayHello() belongs to this scope. Doesn't it seem weird that it can access the str constant?

Closures

Well, scopes are not the only reason why the function sayHello() can access the str variable, closures are involved too!

In simple terms, closure is the capability that functions have in javascript to access the variables defined in the parent scope. This scope is bundled with the function.

In the previous example, sayHello() can access str in another module because the variable is defined in the father scope and closures allow the function to access it.

Also, if you declare a function inside another one, the child can access the father function scope.

Hoisting

Now that you know about scopes, we can talk about Hoisting. It is the default behavior in which variable declarations are moved to the top of their scope.

First, let's get clear that the only variables that are affected are the ones declared with var and with function. So, const and let are not affected by the hoisting. Second, declaration and initialization are different steps.

In order to understand this, let see this example:

The first time we execute foo() we should get a ReferenceError, instead, we are getting undefined. This is the magic of the hosting!

This is how the code would have look after the hoisting:

As we said before, the declaration of the variable a is moved to the top of the scope, so when we first call the function foo() the variable has already been declared but not initialized, that why we get an undefined

Also, Hoisting is the reason why you can execute functions in the same scope before we have declared:

Wrap-Up

There are four different types of scopes: Global, Function, Block, and Module.
The difference between each scope is where you can access a variable in the script.
The closure is the capability that functions have to access the variables stated in their parent scope.
Hoisting is a default behavior where var and function declarations are moved to the top of their scope.

I recommend that you experiment with these concepts on your console to understand them better and if you have any questions ask me down on the comments section! 😬

What is "This"? a JavaScript Explanation

Maximiliano Hernández Betancourt — Fri, 07 Aug 2020 06:33:20 +0000

We all have used this inside a function just to find out that it's not working as thought. Do you want to understand what happens? Let me explain it to you:

W3School defines this as "... The keyword that refers to the object it belongs to". Certainly, the definition is kind of confusing. Let's start by remembering that in JavaScript anything that is not a primitive type is an object. So, this is a keyword that you can use to refer to a particular object.

The tricky part is to know what object this belongs to. It's simpler to think of this as the reference to the object that is executing that block of code.

Standard Behavior of `this`

By default, this will refer to the global object. In frontend JavaScript, this object is the window. this will only change its reference in these two cases:

Inside a Method: it will reference to the owner object


  const person = {
        experience: 3,
        introduction: function() {
            return `I have ${this.experience} years of experience`      
        }
  }

  person.introduction() //I have 3 years of experience

Note that in this example the function is executed as a method of the person object. If you execute it as a normal function, this will refer to the global object.


  const fn = person.introduction
  fn()  //I have undefined years of experience

Inside an Event Handler: it will reference the element that triggered it.


   foo.addEventListener('click', function (e) {
        this.style.color = "red"
        return
   });

`This` inside Arrow Functions

In all of the above examples, I only used regular functions, and there is a reason why: Arrow Functions are a compact alternative to a regular function, but they don't bind their own scope. This means that arrow functions inherit the reference of this, which in most cases it would be the global object.

So, in order to get the persona.introduction() working with Arrows Functions, we have to enclosure it inside a regular function:

const person = {
        experience: 3,
        introduction: function() {
            const introduction = () => `I have ${this.experience} years of experience`
            return introduction()       
        }
}

person.introduction() //I have 3 years of experience

The Arrow Function is inheriting the reference of this from its father function, which is a regular function as a method of person.

Explicit Binding

You can explicitly indicate to a function the reference this should use. To achieve this, you can use the function's method .bind()

In the next example, I will execute the introduction() method of person indicating the reference that this will use.

const person = {
        experience: 3,
        introduction: function() {
            return `I have ${this.experience} years of experience`      
        }
}

const anotherPerson = {
        experience:7
}

const fn = person.introduction.bind(anotherPerson)
fn() //I have 7 years of experience

bind() will return a function bound with the object that you indicated. If you don't want a return, you can bind and execute with the methods call() and apply(). Like this:

person.introduction.call(anotherPerson) //I have 7 years of experience

The difference between call() and apply() is how you can pass in arguments. You may find more information on this topic on the JavaScript documentation of MDN.

Wrap-Up

this references to the object that is executing the block of code.
Arrow Functions inherit the reference of this.
You can define what reference of this a function should use with the methods: bind(), call(), or apply().

Hope this post helped you understand something more about JavaScript.

Ask me any questions you have down on the comments section! 😉

Personal Branding For Developers

Maximiliano Hernández Betancourt — Sat, 01 Aug 2020 08:09:54 +0000

Photo by Joao Tzanno on Unsplash

We are always behind the screen, having the minimum interaction with the world, right? "So, why do we need to care about our presence?" Well... if you think you have more than a pretty code to show to the world, this guide is what you're looking for.

Your Personal Brand is the way you have to tell a stranger who you are. That first impression we are always talking about, that is our brand. So, everyone has a personal brand, the difference is that some of us consciously design that impression.

Photo by Sincerely Media on Unsplash

"Good enough, but why should I care about what others think of me?". The idea behind Personal Branding is to expose to the world why you are the best option for whatever they are considering you: your dream job, the project you want to lead, or even getting a date with your crush. You don't know what people are considering, but you know what you want them to see.

Now that you have realized the importance of your brand. Let's own it!

Defining Core Values

No, I'm not referring to those values your primary school teacher talked about. We want to define what we want to be known for. An example could be: "I want to be known for my assertiveness, generosity, security, and expertise".

I recommend that you chose four values at most. It can get complicated if you are figuring out how to meet many adjectives. It's up to you, there are only correct answers for this step. Below is a table where you can get inspiration.

Table extracted from mindtools.com

Now that you have an idea of what values you want people to see in you, you may think that Personal Brand is all about pretending. I think is more about "Fake it till you make it".

Personal branding is about exposing the best versión of you, and in some cases, you are not there yet. There is nothing wrong with that, but you will have to work on yourself to meet the expectation. That is another plus of designing your brand, you end up designing who you want to be.

Online Presence

Nowadays, the first impressions are not only made when meeting someone in person. Some of them are going to hear about you online, like you are meeting me now! So, we have to take care of all the roads that people could follow to know who you are.

Photo by Christian Wiediger on Unsplash

As developers, a great part of our lives happens online. We meet many people on the web, and we need to make a great digital impression. For most people, you are your digital presence.

The first idea you got on your mind, "social networks", let's start there. In my opinion, there are two types of networks: Personal and Professionals.

Personal Networks

The first ones are networks like Instagram, Facebook, or Twitter. Here you are exposing your opinion and your day to day life. So, you should be exposing your core values, and be coherent with them in your interactions. If you choose to be friendly, then you should be friendly with everyone on that network. Just ask yourself before posting: Is this content representative of my values?

Photo by Kon Karampelas on Unsplash

We all have that old profile in a network we don't use anymore. What impression a stranger will have if they see it? They don't know that it is an old profile, they just found it and picture you that way.

Choose the networks you want to take care of and delete the ones you don't use anymore. The fewer roads we have, the better we can consistently maintain the brand.

Professionals Networks

People use these networks to get to know your professional self. They are looking for your professional achievements, career, and even what other people think of you as a team member. These are social networks like LinkedIn, Meetup, or Xing.

Photo by LinkedIn Sales Navigator on Unsplash

You should keep your interactions consistently with your core values. This is the key to effectively communicate your brand. Also, you want to filter the information on these sites taking into consideration what is the next step you want your career to have.

For example, if you want a job as a React developer, then you should give more exposure to your experience in this library.

Personal Website

For those of you who want to take a step further in your online presence, the next level is a personal website. People should be able to find all the information you want them to know about you just by googling your name.

My recommendation is to keep it simple: a page with your elevator pitch, a contact page with a form to send you an email, a portfolio with the same information as your professional's networks, and a blog where you can share your opinions.

Photo by Halacious on Unsplash

Personal Blog

"Wait, who said anything about writing?" Yeah, I know it could get hard to write consistently, but writing is the most powerful way someone has to know how you think. You can write about anything you want. You have a great opportunity for each post to reinforce your values and to express them to the readers.

I write articles about the topics I'm learning weakly. This helps me to consolidate the things I learned. If you want to know more about that, you can read my article: An Effective Strategy for Better Learning.

Offline Presence

This is the most simple one to manage. You only have to stick your actions to your values. If you want to be a disciplined person, you just have to be disciplined. There is no need to tell people about it, they will see it as soon as they start to know you.

Photo by Dylan Gillis on Unsplash

Sometimes, it can get hard to stick to values that we are improving, but the whole idea is to be a better versión of yourself every day.

People who already have an impression of you will start to change it as you start to change yourself. Opinions are not written in stone.

Hope this article helps you get a little close to your goals and I will love to hear about your thought on this topic.

Thanks for reading! 😬

An Effective Strategy for Better Learning

Maximiliano Hernández Betancourt — Sun, 26 Jul 2020 11:00:19 +0000

Photo by David Travis on Unsplash

As developers, we are constantly studying. There is always a new language to learn, a trending framework to try, or even a function that you didn't realize it will make your code more efficient. We consume a lot of information, but we keep forgetting a great chunk of it. So, we go again to the source and try to retain a little bit more this time, over and over again, until we have fully incorporated this new piece of information.

Pretty ineffective, don't you think? It seems that there is a better way to learn. So, I gave myself the task to try to come with a strategy to optimize this process and learn more in fewer iterations. That is not only the problem, we are also beings of habits, therefore, trying to adopt a whole different way to learn, is unrealistic. It has to be an upgrade to our already existing strategy, so we don't have to put a lot of effort into sticking to it. In this article, I'm going to explain to you the stages of learning, where are we failing, and how to improve.

How do we learn?

Learning is the ability to acquire knowledge. There are two steps to acquire it. First, getting some information about the topic and second processing it. As easy as pie! So, what are we doing wrong?

Let me explain it to you with an example: let's say you want to learn how to change a flat tire, you Google it and click on the Bridgestone's article on How to Change a Flat Tire. For the next 20 minutes, you are reading on tools you will need, the process of changing a tire, and the best practices on doing so. After finishing the read, you end the study and wait for the opportunity to put on practice this newly acquired knowledge.

A month later, you are driving to your work and hear a weird noise. You stop on the side road, get out of your car to find out that opportunity you were waiting for: a flat tire! You try to remember all these amazing tips and tricks you read on that article last month but you can only recall just a few of them. What happened to that knowledge?

You didn't acquire knowledge, you just went over some information. We are poorly processing information. That's why we have to go over and over on these steps to finally accumulate enough knowledge of the topic.

Acquire more

After some research, I found out three steps you can follow to start acquiring more knowledge from the same source.

1. Assimilate

The first one is to Assimilate. Here you want to help your brain to structure the information you are trying to incorporate. Each brain is unique, so is the way you structure information. It just has to make sense to you. To achieve this, there are some remarkable tools:

a) Take notes

Notes are the way to translate what you heard or read on a more suitable syntax for your brain to structure it. I recommend that you check The Cornell Note-Taking System. It is a really simple system to improve your notes.

This example is taken from Cornell University

b) Make diagrams

Diagrams are structured data. So, making diagrams will force you to connect all the information in a way you and your brain understands it. It can be as simple as a bunch of words connected by lines or as complex as a conceptual one. It is up to you!

For these purposes, and in my mission to use less paper, I use the web application of Draw.io. It has a simple interface and you can achieve appealing diagrams in just a few steps.

This Example is taken from Draw.io

c) Chunk Information

Chunking is a strategy where you divide information into smaller pieces. The idea behind these is to make big chunks of information into smaller, more digestible, ones. This way, you can focus on assimilating smaller pieces of information that, at the sum, will make you assimilate the whole information.

d) Recall

After you have taken notes, chunked the information, and made a cool diagram you have the whole picture of what you want to learn in a way you can comprehend it better. So, it's a good idea you recall the notes and the diagram every now and then. Just to make sure that your brain got it all right.

2. Explain

The second step is to Explain. By now you should be able to try to explain, in simple terms, what you have learned. The idea is to make complex concepts your brain has saved into simple ones. Your brain can only do so if he tries to explain it to someone who doesn't know anything about it and does not share your same mental structure.

The best way to achieve these is by making yourself a teacher for one day. Let's start teaching how to change flat tires! If you put it that way, it sounds a little bit exaggerated. The truth is that we can't go around our city offering free classes of a specific topic every time we want to learn something.

A simple way could be to explain it to your friends or family during dinner but your loved ones will not always want to hear about JavaScript Hoisting while eating pizza. So, the problem is that your learning process should not depend on having available people to explain random topics.

a) Write articles

A good solution to these is to write articles! You will always write for a generic public, one that doesn't think as you do. So, this way you still force your brain to translate your thought into simple ideas anyone can read and understand.

3. Debate

The last step is the Debate. Now you have incorporated new information and digested it to its simplest form, you should enrich this knowledge with other people's thoughts. Like I said at the beginning of these sections, every brain is different. People process the same information in different ways and it is curious to found out how others thought of it.

a) Argue about it

For these steps, you have to rely on the people you know and understand you will not always have someone you can argue with. But my recommendation here is that every time you have a chance to debate a topic with someone, do it. If you don't have someone, it's fine. This is just complementary to what you already acquired. Remember, the goal is to make more knowledge of the same information.

Conclusions

The proposal I make to you is to own your process of learning. It doesn't have to be the one you learned in high school, but the one that makes sense to you. You don't have to follow all the recommendations I made, you just have to find out what better suits you. Remember, the idea is to make an upgrade of your current strategy to stick to it. Don't force yourself into a complex process, because is theoretically the best. What works is what you can keep doing.

"The capacity to learn is a gift; the ability to learn is a skill; the willingness to learn is a choice." - Brian Herbert

DEV Community: Maximiliano Hernández Betancourt

How Does JavaScript Works with Scopes, Hosting, and Closures?

Scopes

A) Global Scope

B) Local Scope

a) Function Scope

b) Block Scope

c) Module Scope

Closures

Hoisting

Wrap-Up

What is "This"? a JavaScript Explanation

Standard Behavior of this

This inside Arrow Functions

Explicit Binding

Wrap-Up

Personal Branding For Developers

Defining Core Values

Online Presence

Personal Networks

Professionals Networks

Personal Website

Personal Blog

Offline Presence

An Effective Strategy for Better Learning

How do we learn?

Acquire more

1. Assimilate

a) Take notes

b) Make diagrams

c) Chunk Information

d) Recall

2. Explain

a) Write articles

3. Debate

a) Argue about it

Conclusions

Standard Behavior of `this`

`This` inside Arrow Functions