DEV Community: cclintris

JavaScript: Demystify Hoisting in JS

cclintris — Mon, 29 Aug 2022 06:09:13 +0000

Intro

One of the biggest reasons for writing this article is that I once heard several co-workers talking about hoisting in JS, which is, state lifting. It was really difficult for me to understand their perspectives at that time, so I started to search for related articles on the Internet. It turned out that this does not seem to be something that can be figured out in a moment, so I started this blog, hoping to crack another knowledge point of JS.

What is Hoisting actually?

Without further ado, let's look at an example. What happens if you try to access a variable that hasn't been declared?

console.log(a);
// ReferenceError: a is not defined

We find that the browser will prompt you with a reference error, telling you that a is not yet defined. But what if?

console.log(a); // undefined
var a;

How can this happen? Logically speaking, the code runs line by line, and the error should be ReferenceError? Why is it undefined?

This is because of the hoisting of JS, state lifting. Lifting is reflected in the fact that the line var a is "lifted" to the top. So in fact, when the JS engine(V8) parses this code, it actually works like this:

var a;
console.log(a); // undefined

But note! It is just imagination, not that the JS engine physically moved the code!

So what if I change the code to look like this?

console.log(a); // undefined
var a = 10;

The is still undefined, but why? Shouldn't var a = 10 be lifted to the top, thus logging a out should be 10?

Well another concept is introduced here: only the declaration of variables will be promoted, and the assignment will not.

So actually the code above looks like this in the eyes of JS engines:

var a;
console.log(a); // undefined
a = 10;

So in fact, var a = 10 can be decomposed into two steps. First, var = a will be lifted first, which is the declaration part, and the second step a = 10 will stay and not participate in the hoisting process.

For now, everything is easy, but then the chaos may start. Take a look at the following example:

function func(h) {
  console.log(h);
  var h = 3;
}

func(10);

I thought it was ridiculous at first, what is there to say, isn't it?

function func(h) {
  var h;
  console.log(h);
  h = 3;
}

func(10);

So of course the output will be undefined! Well, the actual result immediately slapped in the face, and 10 is the output.

In fact, the process of conversion and hoisting is correct, but the only thing is we forgot to call the function. So it's actually like this:

function func(h) {
  var h = 10;
  var h;
  console.log(h);
  h = 3;
}

func(10);

But it's still a bit strange, because even so, var h is called again before taking the value of h without assignment. So it should still be undefined?

Well, let's try a more straightforward example:

var a = 10;
var a;
console.log(a); // 10

Using the above decomposition method, it can actually be seen as this:

var a;
var a;
a = 10;
console.log(a);

This outputs 10, which is acceptable. At the time, my feeling was, what the hell is going on! Where did so many unreasonable rules just come from? Who can figure it out? Just first bear with it and look at one last example:

console.log(a);
var a;
function a() {}

According to the decomposition method above, we want to decompose it into this:

var a;
console.log(a);
function a() {}

The output should be undefined right? The result is another big slap in the face, outputting [Function: a]. At this point I was already hitting myself. It turns out that in addition to the concept of state lifting in variable declaration assignments, function declaration also applies. Moreover, the matching priority of state promotion of function declaration is higher than that of variable declaration. So, in fact, the above code should be imagined like this:

// Prioritized
function a() {}
var a;
console.log(a);

Having said so much, let’s sort it out a little:

1. Both variable declarations and function declarations will participate hoisting processes

2. Variables are promoted only by declaration, not by assignment

3. Don't forget that there are also passed parameters in the function

let const & hoisting

Have you noticed that when the concept of hoisting was introduced above, the keyword var was used to declare variables. However, everyone knows that ES6 introduced let and const, and the mainstream no longer recommends the use of var, but instead uses let with const.

For let and const, in fact, the concept of hoisting is similar. Let's take a look at some examples here.

console.log(a);
let a;
// ReferenceError: a is not defined

Magic! The output is ReferenceError: a is not defined. Well, this is actually more common sense, right? But does that mean that there is no such thing as hoisting when using let to declare functions? If so, it would be great, but unfortunately, it is not. Take a look at the example below:

var a = 10;
function func() {
  console.log(a);
  let a;
}

If let has no state hoisting, then the output should be 10, right? Because there is var a = 10 outside, and then let a has no hoisting. Wrong again, the output is ReferenceError: a is not defined. So in fact, let is also hoisted, but the process behavior of let promotion may be different from that of var, so it seems that there is no hoisting at first glance. As for how it works, we will discuss it later.

Pause here. If you just want to know just a little bit about what hoisting is, you can actually stop here, because in fact, make good use and take advantage of let const, and then declare assign your variables properly, you'll be just fine. But if you want to understand more thoroughly and deeper, just stick with me and keep reading. Next, we first discuss two important questions about hoisting.

Why hoisting?
How exactly does hoisting work?

Why hoisting?

Reviewing some of the rules and concepts of hoisting mentioned above, we can feel some of the benefits it brings. To answer this question, you can think from the opposite angle: "What would happen if there was no hoisting?"

Without hoisting, we would have to declare a variable before using it. But this is actually very good. After all, everyone writes like this when programming. I suppose no one will code and at meantime have the thought of JS's hoisting mechanism, then don't declare variables and use them directly, right? So this is actually good.
Without hoisting, it also stipulates that when we use a function, it must be declared and defined above. At first glance, it seems that there is nothing wrong with it, but it is actually a little troublesome. Because, this means that only by putting every function on top, can you completely ensure that any function called below can be executed normally. Now that's a little messy, isn't it?
The last point is more interesting. Without hoisting, we wouldn't be able to call each other between functions. What does this mean? Take a look at the code below:

function loop_1() {
  console.log("loop 1");
  loop_2();
}

function loop_2() {
  console.log("loop 2");
  loop_1();
}

This code is not difficult to understand. loop_1 and loop_2 call each other. But there is a problem, if there is no hoisting, how can loop_1 be above loop_2, and at the same time, loop_2 is also above loop_1. This code wouldn't work without hoisting.

As a conclusion, hoisting is to solve these problems!

How exactly does hoisting work?

First of all, we need to introduce a concept, the Execution Context of JavaScript, which is abbreviated as EC below. The concept of EC is that every time a function is entered, the function will have an EC, and then the EC will be pushed onto the stack. When the function is executed, the EC will be popped out.

In general, EC stores the information of their respective functions. When the function needs something, it will go to its own EC to find it.

Each EC has a corresponding VO (Variable Object). This VO is what stores all the information, including the variables in the function, the function, and the parameters in the function. The mechanism for searching the VO means that:

Take var a = 10 above as an example, the first step is to add a new attribute a in VO, and then find the attribute named a and set it to 10.

Step1: var a
Step2: a = 10

Well, there are so many things in a function, how does it work to put everything into the VO of each EC?

For parameters, it will be directly put into the VO, if some parameters aren't passed with a value, then its value will be initialized to become undefined. Consider the following example:

function func(a, b, c) {
    ...
    ...
}

func(10)

The above function if called, the VO will look like this:

// VO
{
    a: 10,
    b: undefined,
    c: undefined
}

If there is another function declaration in the function, it is also added to the VO, no problem. But what if the name of the function is coincidentally same as a variable name?

function func(a) {
    function a() {
        ...
        ...
    }
}

func(10)

The VO looks like this:

{
    a: function a
}

So we can know that function declarationswill take priority over the variable declarations, just like the example above, the parameter a will be overwritten by the function a.

For the variable declaration inside the function, it will be put into the VO at the end. If there is already an attribute with the same name in the VO, the variable will be ignored directly, and the original value will not be modified.

To recap, we can think of the action of the VO mentioned above as a prerequisite work before executing a function. The order is as follows:

Step1: Put the parameters into VO, and then see if there are any incoming values respectively. The parameters are matched in the order in which they are declared. If they are not matched, they will be assigned the value undefined.

Step2: Find the member methods in the function, in other words, other functions, and put it into the VO. If it has the same name as any property in the current VO, overwrite the old one.

Step3: Finally, find the variable declaration in the function and put it in VO. If it has the same name as any property in the current VO, the current state will prevail.

Having said so much, let's come back to the example we mentioned above:

function func(h) {
  console.log(h);
  var h = 3;
}

func(10);

So the execution of each function can actually be divided into two stages. First, it will enter the Execution Context of the function, and then start preparing its own VO. For the above example, first of all, because there are parameters in the call, a variable called h will be declared in VO first, and the value will be 10. Then because the member function is not found in the function, it remains unchanged. Finally find var h = 3, it is a variable declaration statement, so it should be added to VO, but because the VO at this time is already a variable called h, so VO does not change. So far, the VO of this function has been established.

// func() VO
{
    h: 10
}

After creating the VO, start executing this function. When the code executes to console.log(h), it'll look up VO and find that there is a variable called h with a value of 10, so 10 it is. So the above question is answered, it is indeed output 10 Yes!

What if the code was changed to this?

function func(h) {
  console.log(h);
  var h = 3;
  console.log(h);
}

func(10);

The first output will be 10 of course, and the second output will be 3.

In fact, the process of establishing VO is the same as above, so the first output will be 10 when executing, no problem. And because it changes the h in VO when it executes to line 3, the second output will of course be 3!

JavaScript: Arrow functions

cclintris — Thu, 25 Aug 2022 02:03:26 +0000

Intro

Arrow function is an alternative form of creating a function in JavaScript. It was introduced in ES6.

They go by name arrow functions, because they are created with arrow symbol =>.

The main benefit of arrow functions is a short syntax which most of the times increases code readability. They come really handy when you need to quickly create a function that is an argument for another function.

In most cases they can be used interchangeably with regular functions but you need to remember about few differences.

Arrow functions are anonymous functions. It means they cannot have a name. You can bypass it by assigning them to a variable and call them with this variable name.

Let's take a look at the simple conversion from regular function to arrow function.

function add(x, y) {
  return x + y;
}

// we assign an anonymous function to a variable
const add = function (x, y) {
  return x + y;
};

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
  return x + y;
};

Arrow function allow us to use even shorter syntax.

// returns x + y
// the same function in one line
const add = (x, y) => x + y;

// you can skip parentheses when using only one argument
const add1 = (x) => x + 1;

If your function contains only the return you can use the short form of arrow functions.

You can omit { } and the return keyword and the expression after => will be the value returned from this function.

When returning an object you need to remember about adding ( ).

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}

You need to add parentheses to ensure you are returning an object.

const createUser = (id, name) => ({
  id: id,
  name: name,
});

Using short form to improve code readability

Let's take a look how using short form of arrow function can improve code readability when returning a function from other function.

function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}

createAddFunction is a function which creates other function. This pattern is called currying. You can use it for example to create a function which increments a number by 1.

const add1 = createAddFunction(1);
add1(5); // 6

The definition of createAddFunction can be shortened by using features of arrow function we just learned. Let's take a look at the steps to reduce it to one line.

// Initial version
function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}

// changing the inner function to arrow function
function createAddFunction(number) {
  return (x) => x + number;
}

// changing the outer function to arrow function
const createAddFunction = (number) => (x) => x + number;

// Arrow function version
const createAddFunction = (number) => (x) => x + number;

What are the differences between regular and arrow functions

`this` in arrow functions

The most important difference is how this behaves inside those 2 function declaration types.

Arrow functions do not create its own this but use its value from the place they were defined. I will show you few examples illustrating the differences.

const logThisOutside = () => {
  console.log(this);
};

function Button() {
  this.name = "My Button";
  function logThis() {
    console.log(this);
  }
  const logThisArrow = () => {
    console.log(this);
  };

  logThis(); // Window
  logThisArrow(); // { name: 'My Button' }
  logThisOutside(); // Window
}

new Button();

As you can see logThisArrow and logThisOutsideuse the value of this from the place they were defined in. It happens because as opposed to regular function, arrow functions do not create its own this, but use the value from the outer scope.

Using `this` in arrow functions to your advantage

function Button() {
  this.name = "My Button";

  const that = this;
  document.querySelector("button").addEventListener("click", function () {
    console.log("click", this); // Button DOM Element
    console.log("that", that); // { name: 'My Button' }
    this.name = "Button Clicked"; // won't work as expected
    that.name = "Button Clicked"; // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = "Button Clicked"; // name value changed
  });
}

new Button();

We created two event listeners. In one of the we used regular function and arrow function in the other one.

In case of regular function in event listener, when you click on a button this will have a value of DOM element that was clicked. If we would want to change the value of this.name we would have to first create a variable const that = this and then modify it by that.name = 'Button Clicked. It's a common hack used to modify this from outer scope.

As a mentioned before, arrow functions do not create its own this so you can safely change value of name by this.name = Button Clicked.

Accessing arguments in arrow functions

The other feature of arrow functions is they do not create a special variable arguments inside a function body.

Let's see how arguments work in regular function.

function add() {
  console.log(arguments);
}

add(1, 2, 3); // console: [1, 2, 3]

Regular function has access to special arguments variable that stores all arguments that function was called with even if they were not defined between the parenthesis.

Arrow functions do not create arguments variable but there is other solution we can use to achieve the same - rest parameters.

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // console: [1, 2, 3]

JavaScript: Event Loop

cclintris — Thu, 25 Aug 2022 01:26:57 +0000

Intro

In this article, I'm going to talk about a very important javascript concept: the event loop. It is one of the most fundamental and vital part when learning about javascript, helps to understand this programming language to a deeper level, and sometimes it's especially critical when dealing with some bugs. So let's get to it, event loops!

Call Stack and Single Thread

Before getting into event loops, there are some basic things we should get a head start. The first one is the idea of call stacks and single thread processing.

JavaScript is a single threaded language, which we all know, but what exactly does this mean? Well, it means that javascript can only do one single task at a time, can only process one module of code at a time, meaning that javascript processes code line by line, one line at a time.

Call Stacks record where our code is processed to. For example, if we process a function, we'll push this function to the top of the call stack, and when done processing, this function would be popped out of the stack.

For example:

function a() {
  b();
}

function b() {
  console.log("hi");
}

a();

For the code above, the call stack would like this:

Idea behind asynchronous execution

Single thread JavaScript

So now we know javascript is a single thread language. It is primarily used to interact with users and to control DOM elements.

Javascript also has the concept of asynchronous and synchronous. With this mechanism, it resolves the problem of blocking. Here, we give a simple explanation between these two mechanisms.

synchronous

If when a function returns, the caller is able to get the expected result, then this function is a synchronous function.

asynchronous

If when a function returns, the caller is unable to get the expected result immediately, instead, the caller needs to use some kind of way to callback this expected result at some point in the future, then this function is a asynchronous function.

Multi thread Browser

Now we know javascript is single threaded, meaning js can only do one task at a time. So how, why are browsers able to process asynchronous tasks simultaneously.

This is because browsers are multi threaded. When js needs to process asynchronous tasks, browsers are going to activate another thread in service of these asynchronous tasks. Put it in a more simple way, when we say JavaScript is single threaded, it means that there is only one single thread actually processing the js code, which is the engine that browsers provide for js(primary thread). Besides the primary thread for processing js code, there are lots of other threads which are not mainly in usage of running js code.

For example, if there is a request to send data in the main thread, the browser will distribute this task to the Http request thread, then proceed doing other tasks, and when the data is successfully fetched, it will then continue to the callback js code where it left, and then distribute the callback tasks to the primary thread to process js code.

In other words, when you write js code to send data requests no matter in any protocols, you think you are the one sending the request, however, it is actually the browser that is the one sending the request. For Http request as an instance, it is actually the http request thread of the browser that sends the request. Javascript code is just responsible for the callback process.

To conclude shortly, when we say a js asynchronous task, to be frank, the asynchronous ability isn't an inherent feature of javascript, it is actually the ability that browsers provide.

As we see a modern architecture of browsers, there are more than one renderers, and more of them are uncharted in this pic.

Event loops for Browsers

JavaScript classifies its tasks into two catagories: synchronous and asynchronous tasks.

synchronous tasks: For tasks queued for execution on the main thread, only when one task has been completely executed can the next task be executed.
asynchronous tasks: Instead of entering the main thread, it is placed in the task queue. If there are multiple asynchronous tasks, they need to wait in the task queue. The task queue is similar to a buffer. The next task will be moved to the execution stack and the main thread will execute the task on the execution stack.

Well, mentioning the task queue and execution stack, we have to first explain what these are.

`execution stack` and `task queue`

execution stack:

As can be seen from the name, it is a stack data structure that stores function calls, following the principle of first-in, last-out(FILO). It is mainly responsible for keeping track of all the code being executed. Whenever a function is executed, the function is popped from the stack; if there is code that needs to be executed, a push operation is performed. It kinda works like the call stack previously mentioned above.

task queue:

Again, as can be seen from the name, the task queue uses the queue data structure, which is used to store asynchronous tasks and follows the principle of first-in, first-out(FIFO). It is mainly responsible for sending new tasks to the queue for processing.

When JavaScript executes code, it arranges the synchronized code in the execution stack in order, and then executes the functions within in order. When an asynchronous task is encountered, it is put into the task queue, and after all the synchronous codes of the current execution stack are executed, the callback of the completed asynchronous task will be removed from the task queue and put into the execution stack. It works just like a loop and so on and so one, until all tasks are executed.

In an event-driven mode which applies to javascript, at least one execution loop is included to check for new tasks in the task queue. By looping continuously, the callback, or say more plainly, the results, of the asynchronous task is taken out to the main thread for execution.

This whole process is called the event loop.

Macro and Micro tasks

In fact, there is more than one task queue. According to different types of tasks, it can be divided into micro task queue and macro task queue. Here, we'll list some of the most common tasks that you may ecounter, forming a more clear understanding of the difference between micro and macro tasks.

Macro tasks: script.js(overall code), setTimeout, setInterval, I/O, UI interaction events, setImmediate (Node.js environment)
Micro tasks: Promise, MutaionObserver, process.nextTick (Node.js environment)

Tasks in task queues are executed as in the picture below:

It can be seen that the execution of Event loops when processing the macro-tasks and micro-tasks is as:

The JavaScript engine first takes the first task from the macro task queue;
After the execution is completed, take out all the tasks in the micro-tasks and execute them in sequence (this includes not only the first micro-tasks in the queue at the beginning of execution).If new micro-tasks are generated during this step, they also need to be executed. That is to say, the new micro-tasks generated during the execution of micro-tasks will not be postponed to the next cycle for execution, but will continue to be executed in the current cycle.
Then take the next task from the macro task queue. After the execution is completed, take out all the tasks in micro task queues again, and the cycle repeats until the tasks in the two queues are all taken out.

So to conclude, an Eventloop cycle will process one macro-task and all the micro-tasks generated in this loop.

Let's take a look at the example below:

console.log("sync1");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

new Promise((resolve) => {
  console.log("sync2");
  resolve();
}).then(() => {
  console.log("promise.then");
});

console.log("sync3");

The output should be:

"sync1";
"sync2";
"sync3";
"promise.then";
"setTimeout";

Well, if you're answer is not exactly same as the output shown above, don't worry, let's dig in and see how does this piece of code process exactly.

When the first console is encountered, it is a synchronous code, which is added to the execution stack, executed and popped from the stack, and sync1 is printed out
When setTimeout is encountered, it is a macro task and is added to the macro task queue
When encountering the console in new Promise, because it is resolved immediately, it is a synchronous code, which is added to the execution stack, executed and popped from the stack, and sync2 is printed out
When encountering Promise then, it is a microtask and added to the microtask queue
When the third console is encountered, it is a synchronous code, which is added to the execution stack, executed and popped from the stack, and sync3 is printed out
At this point, the execution stack is empty, so execute all tasks in the microtask queue, and print out promise.then
After executing the tasks in the micro-task queue, execute one task in the macro-task queue and print out setTimeout
At this point, both the macro-task queue and micro-task queue is empty, end of execution

For step 6 and 7, you might be confused, that why shouldn't setTimeout print before promise.then, as when done executing console.log("sync3");, it should look back at the macro-task queue first since execution stack is empty, then execute all tasks in micro-tasks.

Well, the tricky part lies in the script macro-task. Notice that the whole javascript code, as in script, is a macro-task. Moreover, it is always the first macro-task that will be added to the macro-task queue and the first to be executed.

I'm sure everything is clear now. So actually, after executing console.log("sync3");, it indicates that the first macro-task is completed. Thus, it will continue the first round of Eventloop by looking into the micro-task queue, seeing Promise.then, execute it, and boom! This is when the the first round of Eventloop actually stops. The the second round of Eventloop then starts again, and so on...

From the workflow of macrotasks and microtasks above, the following conclusions can be drawn:

Micro-tasks and macro-tasks are bound, and each macro-task will create its own micro-task queue when executed.
The execution duration of the microtask will affect the duration of the current macrotask. For example, during the execution of a macro-task, 10 micro-tasks are generated, and the time to execute each micro-task is 10ms, then the time to execute these 10 micro-tasks is 100ms. It can also be said that these 10 micro-tasks caused a 100ms delay for the macro-task.
There is only one macro-task queue, and each macro-task has its own micro-task queue.So each round of the Eventloop consists of one macro-task + multiple micro-tasks.
A very important point is to always remember that the first task in the macro-task queue will always be the overall script code.

Below is a question also about the output of event loops, a bit more complicated. Maybe it's time for you to try it yourself!

setTimeout(function () {
  console.log(" set1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2 ");
  });
});

new Promise(function (resolve) {
  console.log("pr1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("set2");
});

console.log(2);

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

Your answer should be like:

pr1
2
then1
then3
set1
then2
then4
set2

JavaScript: this

cclintris — Tue, 19 Jul 2022 18:04:31 +0000

JavaScript: All about JS keyword this

Intro

As a frontend engineer, this is a keyword that you will see very often. It is a pretty fundamental concept, yet an extremely important onf if you want to become better at javascript, or as a frontend engineer. In this article, I am going to cover all the knowledge that is entailed to this.

global environment

For convenience, we'll refer global environment as ge below.

Basically, if you call this directly in ge, you will get a window object. And it is strictly equal.

this === window; // true

And of course, the code below remains true:

this.document === document;

Furthermore, if you try to add a new attribute to window directly by this, it is also feasible. For example:

this.myName = "Tris";
console.log(myName); // Tris
console.log(window.myName); // Tris

this.myName === window.myName; // true
this.myName === myName; // true

Even if you apply the strict mode by adding use strict at the top of file, it still behaves as if this basically points to the window object.

functional environment

For convenience, we'll refer functional environment as fe below.

In fe, if you call this, its reference depends on how you call this function. If you call the function directly, this will refer to the window object directly, this is called a Sample Call.

For example:

function fn() {
  return this;
}

fn() === window; // true

However, most of the time when we're actually developing, we have a preference to avoid calling a function directly(Sample Call). Take an example of Vue developing:

const app = new Vue({
  el: "#app",
  data: {
    myName: "Ray",
  },
  methods: {
    getName() {
      console.log(this.myName); // Ray
    },
  },
  created() {
    this.getName();
  },
});

Looks just fine, right? But let's see what will happen by just changing the code a little bit:

const app = new Vue({
  el: "#app",
  data: {
    myName: "Ray",
  },
  methods: {
    getName() {
      const array = [1, 2, 3];
      array.forEach(function () {
        console.log(this.myName); // undefined * 3 ，WTF?
      });
    },
  },
  created() {
    this.getName();
  },
});

Now, that's very weird right? Why does a simple forEach result in such bizarre outputs? Well, let's first take a look at forEach source code:

Array.prototype.forEach = function(callback) {
    for(let index = 0; index < this.length(); index++> {
        callback(this[index], index, this);
    })
}

We can see that the function passed to forEach is sample called, resulting in a conflict of this, therefore the reason of this reference misdirect.

How will we deal with this problem, or if we put it in other words, what is a better way of programming in order to prevent and elude these strange confusing this reference problems?

The first way is to declare a variable to reserve this.

const app = new Vue({
  el: "#app",
  data: {
    myName: "Ray",
  },
  methods: {
    getName() {
      const vm = this;
      const array = [1, 2, 3];
      array.forEach(function () {
        console.log(vm.myName); // Ray * 3，is Good!
      });
    },
  },
  created() {
    this.getName();
  },
});

The second way, it to use the arrow function.

const app = new Vue({
  el: "#app",
  data: {
    myName: "Ray",
  },
  methods: {
    getName() {
      const array = [1, 2, 3];
      array.forEach(() => {
        console.log(this.myName); // Ray * 3，is Good!
      });
    },
  },
  created() {
    this.getName();
  },
});

By either way, the problem seems to be solved. For the first way, by creating a variable to store this in the Vue component separates different this references under different enrivironment. But the second way seems somewhat confusing. Why do a simple arrow function takes care of the problem? Don't worry, everything will be explained later.

So basically, when you call a function directly, or even pass an anonymous function as a parameter, it is often a sample call, which might result in this problems.

const app = new Vue({
  el: "#app",
  data: {
    myName: "Ray",
  },
  methods: {
    getName() {
      (function () {
        console.log(this.myName); // undefined，WTF...
      })();
    },
  },
  created() {
    this.getName();
  },
});

object function

Another very common case is when we put this in a javascript object's function. This is also a very dangerous spot that may lead to a this reference misdirect problem.

var myName = "oh No!";

var obj = {
  myName: "Tristan",
  fn: function () {
    console.log(this.myName);
  },
};

obj.fn(); // Tristan

var fn = obj.fn;
fn(); // oh No!，WTF?

Notice that the output kind of makes no sense as you call the same function fn in object obj. Notice that we used var instead of let, const.

If we use let or const:

const myName = "oh No!";

const obj = {
  myName: "Ray",
  fn: function () {
    console.log(this.myName);
  },
};

obj.fn(); // Ray

var fn = obj.fn;
fn(); // undefined，WTF?

In this article we're not really gonna spend too much time explaining the differences between var, let and const, which we will in the future.

To find out this references in a js object is pretty simple though. You just need to look which object if this in when called. Take fn() above as an example. this is called under the object obj, hence this refers to obj.

new constructor

When we use new before the function that we are calling, in javascript, it treats the function as if it's an object, where this becomes a basic property of the object.

function fn(myName) {
  this.myName = myName;
}

const newFn = new fn("Tris");

console.log(newFn.myName); // Tris

Just like an plain js object:

const obj = {
  myName: "Tris",
};

console.log(obj.myName); // Tris

DOM

When you use this on DOM elements, when you use it with addEventListener, this will then refer to the DOM element itself on matter what.

For example:

<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<button type="button" class="btn">4</button>
<button type="button" class="btn">5</button>

const buttons = document.querySelectorAll(".btn");

buttons.forEach(function (button) {
  button.addEventListener("click", function () {
    console.log(this); // The DOM you click
  });
});

When you declare an event listener by adding addEventListener on a specific DOM element, it actually is going to wait in the future at some point when you conduct a certain act, such as click in this case. Meantime, the callback function will be binded to the DOM element, so basically, you can think if the code above as below, if it helps to understand:

const click = {
  button: '<button type="button" class="btn">1</button>',
  addEventListener() {
    console.log(this);
  },
};

click.addEventListener();

However, when using this with DOM elements, sometimes you find this refering to strange things. Which is when you use it with arrow functions.

const buttons = document.querySelector(".btn");

buttons.forEach(function (button) {
  button.addEventListener("click", () => {
    console.log(this); // window ???
  });
});

Well, you might remember that above you've just read about arrow functions. Actually, arrow functions indeed include some important points that has to do with this, so let's continue this this topic by taking a look at arrow functions.

arrow function expressions

Before we actually talk about arrow functions, we have to understand the differences between arrow functions and normal functions.

In MDN docs, it is said that an arrow function does not have its this, arguments, super and new.target. So, the question is, if arrow functions do not have their own this, then where does this refer to when using arrow functions.

It turns out that when using arrow functions, this will refer to its outer domain, the parent
domain.

Let's take a look again at an example which seems confusing at first:

const app = new Vue({
  el: "#app",
  data: {
    myName: "Ray",
  },
  methods: {
    getName() {
      const array = [1, 2, 3];
      array.forEach(() => {
        console.log(this.myName); // Ray * 3，is Good!
      });
    },
  },
  created() {
    this.getName();
  },
});

In the code above, if we write is as array.forEach(function() {...}), the output would be undefined or window depending on the environment you're working with. The reason is that this results in a sample call as previously mentioned. However, by using arrow functions, due to the absent of this of arrow functions' inherit nature, it then follows its way up to refer to the nearest this, which turns out to be the vue instance in this case.

references

name	link
MDN docs	https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/this
MDN docs	https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions

CSS: All about Flexbox

cclintris — Tue, 05 Jul 2022 16:47:32 +0000

CSS: Flexbox

Intro

This article will be about a very important and useful CSS position attribute, the flex layout.

To understand flex, we can think of it as a box, a flexbox. A flexbox is especially useful when you want to arrange your elements in a certain row or column matter, and also make the elements in the flexbox automatically resize to suit with spaces around them.

Context

Main axis vs Cross axis

To understand flex, the first thing is to understand the concept of the main axis and cross axis.

Any element that uses the flex layout should be viewed as a "Flex container", every sub-element within the container is a flex item. A flex container has two default axis, a horizontal main axis and a vertical cross axis. The start of the main axis, starting from the left side of the container, is called main start, the point where it ends is called main end. Similar with cross axis, let's take a look at the picture below.

Container attributes

Below is all the listed attributes for the flex container and flex items. And we'll look at how every attribute works.

Flex container

For the flex container, there are six different attributes listed below:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

flex-direction controls the direction of the main axis. It sets how the flex items arrange.

flex-direction: row | row-reverse | column | column-reverse;

option	description
row(default)	Horizontal main axis, starts from the left
row-reverse	Horizontal main axis, starts from the right
column	Vertical main axis, starts from the top
column-reverse	Vertical main axis, starts from the bottom

flex-wrap

As in default, all flex items stay in the same line horizontally, no matter if the flex items are given a width, it wouldn't change lines.

.main {
  width: 500px;
  height: 300px;
  background: skyblue;
  display: flex;
}

.main div {
  width: 100px;
  height: 100px;
  background: pink;
  font-size: 20px;
}

Notice that in this case, even we set the width of each div to 100px, the div's width has been resized to 500/7 px. In this case, we might want the flex items to change to the next line if there isn't enough space, therefore also making the width as wide as we assigned in code. flex-wrap helps us with this along with three options.

flex-wrap: nowrap | wrap | wrap-reverse;

option	description
nowrap(default)	no newline
wrap	newline, the first row is above
wrap-reverse	newline, the first row is below

flex-flow

flex-flow is just a succinct way to combine the flex-direction and flex-wrap attribute in the following form, nothing more special:

flex-flow: <flex-direction>|| <flex-wrap>;

justify-content

justify-content defines how flex items align according to the main axis.

justify-content: flex-start | flex-end | center | space-around | space-between |
  space-evenly;

option	description
flex-start(default)	left aligned
flex-end	right aligned
center	centered
space-around	two sides of each flex items equally spaced
space-between	left and right aligned, and space between any two flex item equally spaced
space-evenly	each space between any two flex item equal to the space between container and item itself

Here we show the case where flex-direction is default, which items should be horizontally arranged on the main axis.

align-items

align-items defines how flex items align according to the cross axis.

align-items: flex-start | flex-end | center | baseline | stretch;

option	description
flex-start	cross-start aligned
flex-end	cross-end aligned
center	cross axis center aligned
baseline	aligned based on the first line of flex item texts as the baseline
stretch(default)	if flex items are not height set or set to `auto`, then the flex item will stretch till it fits the container

align-content

For this option, we can think of align-content as a multiple line version of align-items. So if the elements are only in one single line, this attribute will not make any difference.

align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;

option	description
flex-start	cross-start aligned
flex-end	cross-end aligned
center	cross axis center aligned
space-between	cross-start and cross-end aligned, evenly spaced between each line
space-around	two sides of each flex items equally spaced
stretch(default)	flex item will stretch till it fits the container

Flex Item

After looking at how flex container works, next we should keep on digging, understand how flex items work within flex containers.

order

order indicates the sequence of flex items according to its container settings.

order: <integer>;

flex-grow

flex-grow indicates how much of the space left should be assigned to a flex item. flex-grow has a max value of 1, default is 0.

flex-grow: <number>;

flex-shrink

flex-shrink indicates how a flex item shrink. Notice that it is only when flex items' default width surpasses the container's width will this attribute take effect.

flex-shrink: <number>;
/* default 1 */

Here I don't really want to say too much about flex-shrink, because it's really just not that useful.

flex-basis

flex-basis indicates the width of a flex-item on the main axis, where it prioritizes the default width of the item.

flex-basis: 0 | 100% | auto | <length>;

If our css code is written as below:

.item {
  width: 400px;
  height: 300px;
  background: skyblue;
  display: flex;
  padding: 5px;
}

.item div {
  height: 100px;
  font-size: 20px;
  width: 200px;
  flex-basis: 300px;
  background: pink;
}

It renders as below:

flex

flex is just an shorter combined version of flex-grow, flex-shrink and flex-basis. The last two options, flex-shrink and flex-basis are optional.

flex: none | [ < "flex-grow" >, < "flex-shrink" >? || < "flex-basis" >];

align-self

align-self allows one single item to align differently with other items. It is able to override align-items. Its default value is auto, which indicates that it inherits its parent item's align-items. If there isn't a parent item, then its value will be stretch.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

For example, if out css code written as below:

.item {
  width: 400px;
  height: 300px;
  background: skyblue;
  display: flex;
  padding: 5px;
}
.item div {
  height: 100px;
  width: 200px;
  flex-basis: 300px;
  font-size: 20px;
}
.item div:nth-child(1) {
  background: pink;
  align-self: flex-start;
}
.item div:nth-child(2) {
  background: violet;
  align-self: center;
}
.item div:nth-child(3) {
  background: greenyellow;
  align-self: flex-end;
}

Then the three items will be rendered as below:

Conclusion

Above is all about flex in css. To conclude, flex is a very powerful layout in css that we often see and use, pretty much one of the most powerful and one of the most common used css tool.

DEV Community: cclintris

JavaScript: Demystify Hoisting in JS

Intro

What is Hoisting actually?

let const & hoisting

Why hoisting?

How exactly does hoisting work?

JavaScript: Arrow functions

Intro

Using short form to improve code readability

What are the differences between regular and arrow functions

this in arrow functions

Using this in arrow functions to your advantage

Accessing arguments in arrow functions

JavaScript: Event Loop

Intro

Call Stack and Single Thread

Idea behind asynchronous execution

Single thread JavaScript

Multi thread Browser

Event loops for Browsers

execution stack and task queue

Macro and Micro tasks

JavaScript: this

JavaScript: All about JS keyword this

Intro

global environment

functional environment

object function

new constructor

DOM

arrow function expressions

references

CSS: All about Flexbox

CSS: Flexbox

Intro

Context

Main axis vs Cross axis

Container attributes

Flex container

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

Flex Item

order

flex-grow

flex-shrink

flex-basis

flex

align-self

Conclusion

`this` in arrow functions

Using `this` in arrow functions to your advantage

`execution stack` and `task queue`