DEV Community: Nirjan Khadka

How to easily understand "this" in Javascript - with a simple visual chart

Nirjan Khadka — Sat, 04 Feb 2023 04:10:32 +0000

This post will help you figure out how you can easily find out the value of “this” in JavaScript. If you're in a hurry, there's a JavaScript this keyword cheat sheet at the end. You can view this guide to JavaScript "this" on my blog too.

The keyword “this” in JavaScript has confused a lot of developers, but with just 4 simple rules, you will never be confused again.

First, you need to know one important thing when working with the “this” keyword -

this is not author-time binding but runtime binding so it's not about where a function is declared but how it's called

When I talk about “this bindings”, I simply mean, how the “this” keyword is given a value. In JavaScript, there are 4 different types of “this” bindings, and they have their own order of precedence. So here are the 4 different “this” bindings in ascending order of precedence.
How the “this” keyword works in JavaScript — Default Binding

How the “this” keyword works in JavaScript — Default Binding

Most of the function calls in your code will have the default binding. The value of this is bound to the global object (the window object when working with JavaScript in the browser). This happens when you call a function with just the function name and it's arguments within brackets.

Note: If the function is in strict mode, then by default “this” refers to undefined. When working in a JavaScript module, strict mode is enabled automatically.

function foo() {
  this.a = 4;
  /**
   *   creates a global variable a
   *    this is the same as doing these things
   *    var a = 4;
   *    or window.a = 4;
   **/
}

foo();
console.log(a); // 4

function bar() {
  "use strict";
  /**
   * since this is undefined in strict mode
   * the a variable cannot be set and it
   * results in an error
   */

  this.a = 6;
  console.log(a);
}
bar(); // TypeError: Cannot set property 'a' of undefined

What is the “this” keyword in a JavaScript class – Class Binding

This type of binding happens when you call a function as a method of an object. The value of this is the object itself.

obj = {
  a: 4,
  foo: function() {
    console.log(this.a);
  }
};
obj.foo(); // 4

It does not matter where you declare the function, as long as you call it as a method of the object.

function foo() {
  console.log(this.a);
}

obj = {
  a: 7,
  foo: foo
};

obj.foo(); // 7

Only the top/last level of an object property reference chain matters.

function foo() {
  console.log(this.a);
}
const obj1 = {
  a: 4,
  foo: foo
};
const obj2 = {
  a: 7,
  obj1: obj1
};
obj2.obj1.foo(); // 4

/*
Here, obj2 is accessing it's obj1 property 
and then since, the obj1 property is an object itself, 
it calls it's own foo method,
which accesses the a variable set in the obj1 object so it logs the value 4.
*/

The most important thing to remember is that, it's not about the function itself. It's about how it is called. For example, here we call the foo function but since it is not called as a method of an object, we fall back to the default binding of “this”.

function foo() {
  console.log(this.a);
}

const obj = {
  a: 7,
  foo: foo
};

/**
 *  only a reference to the actual function is assigned
 * it does not care about the implicit binding
 */
const bar = obj.foo;

var a = 11;

/**
 * here this refers to the window object because of
 * default binding
 **/
bar(); // 11

How to bind this in JavaScript – Explicit Binding with call and apply

Most of the built-in functions and all user-defined functions have two special utility methods; apply and call. You can use these methods to explicitly bind the value of this. The value of “this” is easy to figure out because it is explicitly passed in as the first argument to the call or apply methods.

function foo() {
  console.log(this.a);
}

const obj = {
  a: 4
};

/**
 * calls the foo function
 * where this is bound to the obj object
 */
foo.call(obj); // 4

Note: apply and call both works the same for explicitly binding “this” to a given value, but the way they pass in other arguments is a little different. You may have also used the .bind() es6 method before which uses explicit binding under the hood, you can read more about it here.

How this works in JavaScript with the new keyword – new binding

To understand this type of binding, you need to understand how constructors work in JavaScript. In JavaScript, constructors are just functions that are called with the “new” operator in front of them. They are not attached to classes, nor are they instantiating a class. They are just regular functions hijacked by the use of the “new” keyword.

Any user-defined or built-in function can be called with a “new” in front of it, and that makes it a construction call. There is no such thing as constructor functions, but rather construction calls of functions.

These things happen when you make a construction call:

A brand-new object is created.
The new object is prototype linked.
The object is set as the “this” binding for the function call
Unless the function returns its own alternate object, the new invoked function call will return the newly constructed object.

function foo() {
  this.a = 4;
}
const bar = new foo(); // bar is set to the newly created object;
console.log(bar.a); // 4

How this works in an arrow function – Arrow function binding

I know I promised there were only 4 different types of “this” binding and in the past, that was true, until es6 which introduced arrow functions.

/**
 *  arrow functions use the fat arrow =>
 * instead of the function keyword.
 */

a => {
  console.log(a);
};

Arrow functions are not just a quicker way to write functions, but they also do “this” binding a little different. They use lexical scope for “this”. To learn more about lexical scope, check out my guide to lexical scope and closure.

They inherit the value of “this” from their outer function. By “outer function”, I mean the function where you declare the arrow function, not where you call them.

function foo() {
  var = 3;
  return () => {
    /**
     * here this actually refers to the
     * this of the foo function
     */

    console.log(this.a); // 3
  };
}

Here's a more complicated example, that uses the other ways to bind “this” alongside the arrow function binding.

function foo() {
  return () => {
    /**
     * here this actually refers to the
     * this of the foo function
     */

    console.log(this.a);
  };
}
const obj1 = {
  a: 4
};
const obj2 = {
  a: 7
};

/**
 * sets "this" binding to obj1 and
 * gets the arrow function as the return value
 * Now bar is a reference to the arrow function returned by the foo function
* */
const bar = foo.call(obj1);


/**
 * tries to set the this binding
 * of the arrow function to obj2 but
 * the arrow function's this is set
 * to the this of foo which was bound to obj1
 **/
bar.call(obj2); // 4

Therefore, the “this” binding of arrow function is actually done in author-time rather than runtime like the other types of “this” binding.

"this" in JavaScript Summary and Cheat sheet

Here are the things we now know about how "this" works in JavaScript:

The "this" keyword in JavaScript is not author-time binding but runtime binding, meaning it's not about where a function is declared but how it's called
There are 4 different types of “this” bindings in JavaScript, each with its own order of precedence:
Default Binding: the value of this is bound to the global object (the window object when working with JavaScript in the browser). If the function is in strict mode, then "this" refers to undefined.
Class Binding: the value of this is the object itself when calling a function as a method of an object.
Explicit Binding with call and apply: allows you to explicitly bind the value of this by passing the desired value as the first argument to the call or apply method.
Implicit Binding: the value of this is the object that the function is a property of.
The most important thing to remember is that it's not about the function itself, it's about how it's called.
Arrow functions in JavaScript do not have their own "this" binding, they inherit the “this” value of the surrounding scope. This means that the value of "this" inside an arrow function will be the same as the value of "this" in the code that surrounds the arrow function.

You can use this cheat sheet to help you find the value of “this” in JavaScript. So, next time when it's hard to debug the value of ”this” just remain calm and ask yourself these questions.

Cheat sheet to figure out the value of "this" in JavaScript

Step by Step guide to CSS text truncate; shorten text like a pro

Nirjan Khadka — Wed, 25 Jan 2023 04:29:03 +0000

In this post, I'll show you how to implement a CSS text truncate. I will cover how to shorten both a single line and multiple lines. I'll also mention some common problems you may face when doing a CSS text truncate. This was originally published as a guide to css text truncate on my personal blog.

What is text truncation?

Truncated or shortened text is most common when you're working on a design with equal-height columns. But generally, the text for those columns is dynamic. I had to work on a design like that at work recently.

The category names like Mario, Nintendo, Call of Duty: Modern Warfare, etc need to be in a single line. If it doesn't fit, then I need to truncate it. I also need to truncate the title of the article to 4 lines. So, for this specific layout, I had to do CSS text truncate for both a single line and multiple lines.

How to do CSS text truncate?

Let's start off with a single line CSS text truncate with a “p” tag. You can follow along with me using this snippet. Here's the link to the finished codepen if you want to copy it from there.

<p class="single-truncate">
  Call of Duty: Modern Warfare
</p>

/* global styles */
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 0.8em;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-size: 1.6rem;
}

p {
  background: tomato;
  padding: 1em;
}

Here are the steps you need to follow to truncate this text.

1. Setting fixed width with CSS

You need to set a width on the element that you are targetting. So, the browser knows how long the text should be before you truncate it.

/* truncate stuff */
.single-truncate {
  width: 150px;
}

2. Using the white-space property in CSS

To avoid wrapping the text to the next line, we need to set the white-space property to nowrap.

.single-truncate {
  width: 150px;
  white-space: nowrap;
}

3. Using the overflow CSS property

Next, you need to set the overflow property to hidden. This hides the text when it goes beyond it's width.

.single-truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
}

4. CSS text truncate with ellipsis

We have successfully truncated the text. But it would be nice to have some sort of indication that we have truncated it. Let's add ellipses to the end of the shortened text. We can do this by setting the text-overflow property to ellipsis.

.single-truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

All you need to remember is 4 CSS properties. Width, white-space, overflow, text-overflow or remember the acronym, WWOT. You can use "We Won't Overflow Text” as a mnemonic. You can probably come up with something better.

How do you shorten a paragraph in CSS?

Truncating text for multiple lines is a bit more tricky. Let's start with a simple “p” tag again, but with some more text this time and make it wider.

<p class="multiple-truncate">
   Nintendo E3 2021: Direct Dates and Time, Predictions, Rumours and Zelda Plans 
</p>

.multiple-truncate {
  width: 250px;
}

Right now, the text has 5 lines. Let's see if we can truncate it to just 4 lines.

How to use line clamp in CSS

This property only works if you set the display property to -webkit-box or -webkit-inline-box. Also, the -webkit-box-orient property needs to be set to vertical.

Note : This property was originally implemented in WebKit and has some issues. It got standardized for legacy support.

When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

Now, let's add the new rules to our multiple-truncate class and see what will happen.

  .multiple-truncate {
    width: 250px;

  /* truncates text */
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

It's not quite what we were looking for. The problem with this approach is that we won't be able to have a padding-bottom on the actual text. Otherwise, the space occupied by the bottom padding will show the truncated text. So, let's remove the bottom padding for now.

.multiple-truncate {
  width: 250px;

  /* truncates text */
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-bottom: 0;
}

Then we need to hide the truncated text by setting the overflow to hidden.

.multiple-truncate {
  width: 250px; 

 /* truncates text */
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-bottom: 0;
  overflow: hidden;
}

The downside to this approach is that you can't have a padding-bottom on the text. You would need to add your padding to the parent or try something else.

One thing you can try is to set a border on an "after" pseudo-element. The border-color should be the same as the background for the text. Then, you need to set the border-width to the padding-bottom value you want. You can use an SCSS mixin or CSS variables for this to make it more robust and reusable.

.multiple-truncate:after {
  content: '';
  display: block;
  border-bottom: 1em solid tomato;
}

CSS text Truncate issue with flexbox

Truncating text like this doesn't work well if the element you're truncating has a display value of flex or inline-flex.

The text will still be shortened but you won't get the ellipsis at the end. I'm not sure why it happens or if there are any workarounds for this. If you have any ideas, then let me know in the comments below.

SCSS mixin for truncating text

Here are two SCSS mixins that will make truncating text easier.

@mixin truncate-single-line($width) {
  width: $width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin truncate-multiple-lines($width, $lines, $paddingBottom: false, $bg) {
  width: $width;
  -webkit-line-clamp: $lines;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 0;

  @if $paddingBottom {
    &:after {
    content: '';
    display: block;
      border-bottom-width: $paddingBottom;
      border-bottom-style: solid;
      border-bottom-color: $bg;
    }
  }
}

You can even use CSS variables for the $paddingBottom argument and then use media queries to make it responsive without changing the mixin.

.multiple-truncate--with-mixin {
  --pd: 1em;
 padding: var(--pd);
  @include truncate-multiple-lines($width: 250px, $lines: 4, $bg: tomato, $paddingBottom: var(--pd));

 @media (max-width: 600px) {
    --pd: 0.2em;
  }
}

Summary on CSS text truncate

Here's a quick summary of how to do text truncation with CSS:

Truncated or shortened text is commonly used in designs with equal-height columns where the text is dynamic.
To truncate text in CSS, you can use the following steps:
1. Set a fixed width on the element you are targeting.
2. Use the white-space property and set it to 'nowrap' to avoid wrapping the text to the next line.
3. Use the overflow property and set it to 'hidden' to hide the text when it goes beyond its width.
4. Use the text-overflow property and set it to 'ellipsis' to add an indication that the text has been truncated.
Truncating text for multiple lines is more tricky, but can be done by setting a fixed height on the element, using the display property and setting it to '-webkit-box' and '-webkit-line-clamp' and setting the number of lines to be displayed.

How has your experience been with truncating text in CSS? What techniques have you tried? Do you know any other ways to do this? Let me know in the comments below. I hope this was a helpful article.

What is a JavaScript closure and JavaScript scope

Nirjan Khadka — Tue, 01 Nov 2022 04:11:30 +0000

In this post, I explain how a JavaScript closure works and what does JavaScript scope mean. In the end, I will also give some examples of JavaScript Closures in action. This was originally written as a blog post on my personal site.

What is scope in JavaScript?

To get how a JavaScript Closure and JavaScript Scope work, we need to understand what we mean by scope. Scope is a set of rules that tell you where you can access your variables and functions from.

Where you set your variables and define your function will influence where you can access them from. Here is an example of that in JavaScript.

const firstVariable = 1;
]
function firstFunction() {
    return 2;
}

function anotherFunction() {    
    const secondVariable = 2;

    function secondFunction() {
        return 3;
    }
}


// will log 1 2
console.log(firstVariable, firstFunction()) 

// Uncaught ReferenceError: secondVariable is not defined
console.log(secondVariable, secondFunction())

So what's the deal here? Why can can we access the firstVariable and the firstFunction but not the secondVariable and the secondFunction? This is because of how JavaScript Scope works.

How does scope work in JavaScript

JavaScript only had function scope (with a few exceptions) until ES6 came out. This meant that whenever you defined a new function, you created a new scope. A variable defined within a function cannot be accessed from outside the function. This is why we get an error when trying to log the secondVariable value and call the secondFunction.

const firstVariable = 1;
]
function firstFunction() {
    return 2;
}

function anotherFunction() {    
    const secondVariable = 2;

    function secondFunction() {
        return 3;
    }
}


// will log 1 2
console.log(firstVariable, firstFunction()) 

// Uncaught ReferenceError: secondVariable is not defined
console.log(secondVariable, secondFunction())

JavaScript Scopes are nested

The inner scope has access to the outer scope, but the outer scope can't access the variables set in the inner scope.

function outerFunction() {
  let i = 777;
  console.log(i); // 777
  console.log(b); // Refference Error (outer scope can't access variables in inner scope)

  function innerFunction() {
    console.log(i); // 777 (inner scope can access the enclosing outer scope)
    let b = "hello";
  }

  innerFunction();
}
outerFunction();

Scope consists of a series of bubbles that each act as a container or bucket in which identifiers are declared , these bubbles nest inside each other and this nesting is defined at author time.
Kyle Simpson (Author of YDKJS series)


//global scope
var i = 666;
console.log(i); // 666

function foo() {
  // scope of foo
  var i = 777;
  console.log(i); // 777
}

foo();

How does JavaScript Scope work in ES6

ES6 introduced two new ways to declare variables using let and const which can be used for block scoping. Whenever you use let or const to declare variables, they are scoped to the block (any code surrounded by a pair of curly brackets {}). ES6 also introduced another scope with modules, but closures work in the same way in modules too.

//global scope
var i = 666;
console.log(i); // 666

{
  // new block scope
  // you'll probably see these types of blocks used with
  // if,else,for,while,etc rather that used like this
  let i = 777;
  console.log(i); // 777
}

note: You might have heard the term lexical scope in JavaScript which is just a technical term for scope that is defined during the code compilation process called lexing. It basically means that scope is defined when you are writing the code (declaring functions, or blocks), instead of when it is actually executed.

What is a Closure?

A closure is a programming technique for allowing functions to access values that are defined outside of it. It is the combination of a function bundled together with variables that are outside of it.

You have a closure when a function accesses variables defined outside of it.

What is a JavaScript Closure?

In JavaScript, because scope is nested, it is actually pretty easy to create a closure.

let usernames = ['John', 'Jack', 'James', 'Jhonny'];
let searchTerm = 'Ja';

// Here the function is accessing the searchTerm variable which is outside the function
// this is a closure
let filteredUsernames = usersnames.filter(function (username) { 
    return username.startsWith(searchTerm)
  });

Since, functions can be nested, you can also use closures with nested functions like this:

function outerFunction() {
  let a = 666;
  function innerFunction() {
    console.log(a);
  }
  return innerFunction;
}
let myFunc = foo(); // now myFunc is just a reference to innerFunction inside the outerFunction.

myFunc(); // 666;

When you call the outer function, the 'a' variable gets set to 666. So, You might expect the 'a' variable to not be available after the outer function gets called. But the variable is inside the scope of the outer function. Since scope can be nested, the inner function still has access to the 'a' variable. So, as long as some part of the code can still call the inner function, it can still remember the 'a' variable.

Closures can cause functions to remember variables within their scope. With Scope, you are combining a function with the data that it can access outside of it.

Examples of closures in JavaScript

Now that you know what a closure is, how can you use it? Closures are useful to combine a function with some internal state that it should use. This might be familiar if you have some experience with object-oriented programming.

function getClickCountUpdater() {
  let counter = 0;
  return function() {
    counter = counter + 1;
    console.log(counter);
  };
}

const updateClickCounter = getClickCountUpdater();

// now to change the counter, you need to use this function, you can't change it directly
updateClickCounter(); // 1;
updateClickCounter(); // 2;

counter = counter+1; // ReferenceError: counter is not defined
console.log(counter); // ReferenceError: counter is not defined

// You can create another count updater function which will have a seprate counter variable in it's scope
const anotherCounter = getClickCounUpdater();
anotherCounter(); // 1;

Closures can also be useful for creating different variations of a function. It is also useful to keep track of some value within a function that shouldn't be changed from anywhere else. This is pretty useful when you want to do some logging for a specific function like this:

function createAd(width, height) {
  let adCounter = 0;
  return function (link) {
    adCounter++;
    console.log(`${width}x${height} ad created ${adCounter} times!`);
    return {
      _type: 'ad',
      link: link,
      width: width,
      height: height,
      // other generic ad options
    }
  }
}

const create300x250Ad = createAd(300, 250);
const create728x90Ad = createAd(720, 90);

// 300x250 ad created 1 times!
const new300x250Ad = create300x250Ad('https://linkToTheAd.com/path');

// 300x250 ad created 2 times!
const another300x250Ad = create300x250Ad('https://linkToTheAd.com/path');

What is the benefit of closure in JavaScript?

Closures can also be used to do some performance optimization. Let's say you have a function that needs to create access a variable but that that variable takes up a lot of memory. Instead of creating that variable each time you run the function, you could use a closure to reuse it.

function findAdLinkById(id) {
  const adMap = {
    'e645-2456': 'https://link.com/path',
    '2282-3238': 'https://another-link.com/another-path',
    // 1000 more items

    '2901-2192': 'https://one-more-link.com/path'
  }
  return adMap[id]
} 

// whenever this function gets called it needs to store a new adMap value in memory which makes calling this function slower the more we call it
const firstAd = findAdLinkById('e645-2456')
const secondAd = findAdLinkById('2282-3238')
const thirdAd = findAdLinkById('2901-2192')

function createFindAdLinkById() {
  const adMap = {
    'e645-2456': 'https://link.com/path',
    '2282-3238': 'https://another-link.com/another-path',
    // 1000 more items

    '2901-2192': 'https://one-more-link.com/path'
  }
  return (id) => adMap[id]
} 
const findAdLinkById = createFindAdLinkById()

// whenever this function gets called it reuses the same adMap value which makes it faster to run
const firstAd = findAdLinkById('e645-2456')
const secondAd = findAdLinkById('2282-3238')
const thirdAd = findAdLinkById('2901-2192')

Note: while this will be more performant, it will also use more memory. So, if you also need to optimize the memory consumption then you should try something else.

One of the most common use cases of closures is with asynchronous JavaScript.

let id = 1;

getUserFromAPI(id).then(response => {
  // this works because the function callback here can still remember the value of the id even though this code won't run immediately
  console.log(`Fetched user ID: ${id}`)
})

Most of the time, you might not even realize when you're using a closure. Basically, anytime you're using a variable that is outside a function from inside the function, you are using a closure.

So, These are some practical use cases for closures:

Limiting the access to certain variables
Limiting the access to call certain functions
Keeping track of values across function calls
Logging function calls
Optimizing the memory usage of function calls
Creating different variations of the same function
Remembering values with asynchronous functions that get executed later

Closures can cause performance issues

While closures can be pretty useful when you use them intentionally. Sometimes they can also lead to memory issues, because closures are stored in memory. If we create unnecessary closures frequently, then it can cause a memory leak.

We need to make sure we're actually using the variables that are being stored in the memory. We should not create unnecessary closures too much. Let's take a look at our example from earlier to see how closures can cause too much memory usage.

function createFindAdLinkById() {
  const adMap = {
    'e645-2456': 'https://link.com/path',
    '2282-3238': 'https://another-link.com/another-path',
    // 1000 more items

    '2901-2192': 'https://one-more-link.com/path'
  }
  return (id) => adMap[id]
} 

// now instead of having just one closure, we have 2000 closures
for (let i = 0; i <= 2000; i++) {
  const findAdLinkById = createFindAdLinkById()
  const firstAd = findAdLinkById('e645-2456')
  const secondAd = findAdLinkById('2282-3238')
  const thirdAd = findAdLinkById('2901-2192')
}

So, Whenever you are creating closures, you need to be aware of how much memory you are actually using. I hope this was useful. Let me know if you have any other questions about closures.