DEV Community

hrishikesh1990
hrishikesh1990

Posted on • Originally published at flexiple.com

JavaScript String Length property explained

In this short tutorial, we learn about the JavaScript string length properly. We also look at how JavaScript finds the length of a particular string.

This tutorial is a part of our initiative at Flexiple, to write short curated tutorials around often used or interesting concepts.

Table of Contents - JavaScript startsWith():

JavaScript String Length Property:

The JavaScript string property is used to return the length of a string in JavaScript. Although this property is commonly used with other JavaScript methods it is important to remember that length in itself is not a method.

How does JavaScript return the length of a string?

JavaScript does not return the length but rather returns the code units occupied by the string. It uses the UTF-16 string formatting methods to store characters. This essentially means that the characters in your string are encoded into a 16-bit long binary number before being stored.

So whenever the .length property is involved, JavaScript looks up and returns the number of code units occupied by the string. This is why JavaScript returns 2 when the length property is called upon by certain characters such as emojis, etc. It does this because these characters take up 2 code units.

How do you find the length of a string in JavaScript?

The length of a string in JavaScript can be found using the .length property. Since .length is a property it must be called through an instance of a string class.

Syntax:

The syntax to use the length property is as follows:

string.length
Enter fullscreen mode Exit fullscreen mode

Here, “string” refers to the string whose length you are looking to return.

Code and Explanation:

let str = 'Join our community of freelance developers';

console.log(str.length);
Enter fullscreen mode Exit fullscreen mode

This is a common problem while using a switch case, this can be solved by using new blocks for each case. However, this is not a problem while using the var keyword. The below code snippet should give an idea of the case:

{
  let num = 2; 
  console.log(num) // 2
}
{
  let num = 4; 
  console.log(num)// 4
}
Enter fullscreen mode Exit fullscreen mode

The above code snippet returns the following:

>42
Enter fullscreen mode Exit fullscreen mode

The length of the string is 42.

Earlier we had methods through which the length property would return a higher number in the case of a few characters. We have an example of the same below.

Here we have involved the length property upon a string containing an emoji:

let emoji = '😀'; console.log(emoji.length);
Enter fullscreen mode Exit fullscreen mode

The above code snippet returns the following:

>2
Enter fullscreen mode Exit fullscreen mode

As you can see it returns 2, this is because this emoji takes up 2 code units.

Closing thoughts:

Once you are done practicing I would recommend you look up other string properties. For the few of you who are curious how UTF-16 works you can use this link to read more.

Apart from this, in case you haven’t already figured it out - The JavaScript string length would return 0 when invoked on an empty string.

Discussion (0)