Javascript is NOT single threaded!!

Roshan Kumar Badola — Mon, 22 Jul 2024 19:43:52 +0000

NO! you have not learned wrong that JavaScript is a single threaded language. It is a single-threaded language it has access to a single main thread to execute the code. So when we talk about synchronous programming, we are talking about this lone thread doing all the heavy lifting and executing our code.

But in reality V8 engine and Node.js use a c library called libuv to get access to six extra threads. Two of these are used for doing garbage collection and the rest are used for doing background tasks like asynchronous programming.
Do keep in mind that browsers are a completely different environment then Node.js and and handle this process in a different way.

Yes. When we say that code is asynchronous or non-blocking what really happens is the async code is passed to these extra threads with the callback and the main thread keeps on doing its work without blocking the rest of the code.

When the async code is finished, the callback function is pushed into the event queue with either error or the required data. Then the event loop pushes it into the call stack and boom we get our result, to understand this with some code. Let's look at the readfile method of fs module.



fs.readFile("demo.text","utf8",(err,data)=>{
    if(error){       
        return error
    }
    console.log("output",data);
})

In the code above the readfile method is passed to the background threads. The reading to happens in the background, and when that gets finished the callback is pushed into the event queue with either error or data.

Once in callstack the callback is executed and we are left with either error or the data as output.
Thanks for reading I hope I was able to explain about the single threaded means in Javascript.

TLDR : Yes JavaScript is a single threaded and synchronous programming language but we can achieve performance like a multi-threaded language by utilizing background threads for asynchronous programming.

this in JavaScript.

Roshan Kumar Badola — Sat, 27 Apr 2024 15:32:05 +0000

this can be a confusing topic for a lot of us when it comes to JavaScript. And I am going to try to make it a bit more easier of understand and work with this in JavaScript for you.

this

Ok, lets start with this itself. In JavaScript, this is a keyword refers to the context of the code. Now, that context is defined based on what we are calling this and their execution context.

Execution Context refers to an environment in which JavaScript code is executed.

There are several ways to use this, So, let's look at what we get when call this by itself.

console.log(this)

when we run this line of code we get the Window object as output, but it will be global object in Node.js.

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
this window object contains our window methods. We get this as output because in this case context for this is global.

`this` in function

this when called inside a function it refers to the global object by default even though function creates it's own execution context so,

function this_in_a_function() {
    console.log('this in a function', this);
}

this_in_a_function()

Output:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

However, if strict mode "use strict" is used it will output undefined.

`this` in object

When used with object we will see that this will no longer refer to Window Object. That is because the value for this in function also depends on how it's called.

const person ={
    firstName: "John",
    lastName : "Doe",
    id       : 1234,
    getThis : function() {
      return this;
    }
};

console.log(person.getThis());

Output:

{
  firstName: 'John',
  lastName: 'Doe',
  id: 1234,
  getThis: [Function: getThis]
}

and because of that we can also use this to access object properties and methods.

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 1234,
    getFullName : function() {
      return this.firstName + ' ' + this.lastName;
    }
};

console.log(person.getFullName());

Output:
John Doe

`this` in arrow functions

In arrow functions, this is set lexically. That's because the arrow function dose not make it's own execution context but rather inherits it from outer functions.

Generally it will mean that this also refers to Window Object if arrow function is defined in global scope and global object in Node.js.

const this_in_arrow = () => this

console.log(this_in_arrow())

Output:
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

but a more accurate example would be

function person(){
    name= 'Jhon'
    surname= 'doe'
    return (() => this.name)()

}

console.log(person());

Output:
Jhon

In this example this is scoped to the function person hence the output.

Let's see what happens if we do this same thing with a objects.

const person = {
    firstName: 'Jhon',
    lastName: 'Doe',
    sayName: () => this.firstName
}

console.log(person.sayName());

Output:
undefined

We get undefined. Now, that's because object does not have it's own execution context and arrow function define this based on their environment. To fix this we can wrap our arrow function in another regular function and use that to pass on the context for this to our arrow function. Also this in an arrow function within an object refers to the global context.

const person = {
    firstName: 'Jhon',
    lastName: 'Doe',
    sayName:function(){ 
            return () => this.firstName
                      }
}

console.log(person.sayName()());

Jhon

I hope this cleared your doubts about this in JavaScript and helps you in journey to learn JavaScript.

DEV Community: Roshan Kumar Badola

Javascript is NOT single threaded!!

this in JavaScript.

this

this in function

this in object

this in arrow functions

`this` in function

`this` in object

`this` in arrow functions