Working with strings in JavaScript is not overwhelming, especially regarding the string length. In regards to a String object, its length property in UTF-16 units is a read-only property.

While the command itself is relatively easy for beginners in JavaScript, knowing its basics, syntax, and use cases are necessary. For that purpose, this tutorial will dive deeper into how the length property works, what it can show in complex examples, and how you can master working with strings knowing this property.

Introduction to string.length

Fundamentally, the string.length is the property that defines the length of a chosen string. Yes, it's that simple. Syntax-wise, this property is depicted in the following manner:

String.length

When it comes to the return value, you can expect this command to give you an output consisting of a total number of characters in the specified string. Let's show the elementary use of this command to see how it works in a natural environment:

const str = 'Using the following example';

console.log(`${str} ${str.length}`);

// Output: "Using the following example 27"

As you can see, we've used a sentence: Using the following example. We then included the console.log to show the string itself and its length. The output you get will look like this: Using the following example 27. You can omit the string itself by making a minor adjustment to the code and removing the string from the output:

const str = 'Using the following example';

console.log(`${str.length}`);

// Output: 27

In this instance, the return we get is 27, it equals the number of string's characters. Please note that this property returns a number that is a number of code units in the string. As for the empty strings, review the following case:

const str = '';
 
console.log(`${str.length}`);

While we included the string itself, its content is still empty. Thus, the return you get with this code will always be 0.

The primary use of length property

Let's dig a little deeper and start with a sentence you can formulate using the string.length property:

const x = 'JavaScript';
const empty = '';

console.log(`${x} is ${x.length} characters long`);
// Output: "JavaScript is 10 characters long"

Here is an example where we let x equal JavaScript and add two more strings to the equation. This way, we can formulate a sentence that accurately depicts the number of characters in a string and then place it first.

As a result, the output will look like this: JavaScript is 10 characters long. Not only is this statement correct, but it also shows how you combine multiple strings into a sentence, concurrently using the x.length property.

Issues with manual assignment of length

Except for the most widespread uses of a string.length property, knowing whether it's possible to assign a string's length can be fruitful for complex tasks. Kindly review the following code as an example:

const myString = 'JavaScript';
myString.length = 5;
console.log(myString);        // Output: "JavaScript"
console.log(myString.length); // Output: 10

We specify that myString is JavaScript, a word consisting of 10 characters. Then, we assign the length manually, totally disregarding the number of characters within this word. When we log these commands through a console, the first query will give you an expected output: JavaScript.

However, with the second example, we try to determine the actual length of a string, realizing that we tried to assign the length manually. The output for a second console log will still be 10, not 5.

The issue here is that manually assigning characters into property has no measurable effect on the return. This example is a decent illustration of how the string.length works, showing that manual inputs don't impact the actual output you get.

Non-numeric data with length property

Another great thing you can do with the string.length property is to measure the length property of an emoji. Aren't you wondering how this is even possible? The key here is that this property works with the string size itself, not exclusively with characters. Let's review how this command can work, utilizing an emoji:

const emoji = '🍔';
console.log(emoji.length); // Output: 2

We include an emoji of a burger, followed by logging its length into a console. If you run this code yourself, you might be surprised that the output equals 2. Why 2? Emojis take up to 2 code units, with a burger being precisely the case. You can experiment with this exercise even more, including a list of emojis to measure the string's length afterward. A general rule here is simple: remember that this property can be used outside the characters' range and that emojis take up to two code units.

Test yourself

Once you've acquired the mentioned lessons, it could be a great idea to exercise on your own. Using the string.length property, try solving the following code tasks:

  • Task 1. Since emojis take up to two code units, insert a few different emojis into a string and see what output three-in-a-row emojis would have:

let emoji = '🍔🍔🍔'; console.log(emoji.length);

Solution:

6

Because an emoji takes two code units, inserting three emojis will inevitably result in an output equal to 6.

  • Task 2. Think whether a string.length output can show a negative number? Or will it always equal 0 when the string is empty?

const str = '';
console.log(`${str.length}`);

Solution:

0

Since the string length must be positive because its characters signalize it, the output can't show a negative UTF-16 number. Please note that the return will always be 0 when a string is empty.

  • Task 3. Is there any way to manipulate other string properties and commands to manually assign length?

let myString = "example";
myString.length = 10;
console.log(myString);
console.log(myString.length);

Solution:

example
7

The output we get here is linked to the logic of the string.length parameter. In particular, this parameter reviews the string's length itself. In other words, even if you try assigning the value manually, it won't work, resulting in an output of 7.

While most of them are theoretical, getting the correct answers is crucial to understand whether you've got this topic in all its nuances.

Wrapping up

Congratulations on learning more about another applicable string property, which is length. The primary use is to measure the number of characters within the specific string of your input. In this tutorial, you've also learned that this property will show 0 if the string is empty.
Besides that, JavaScript allows including emojis and measuring their length, always taking up to two code units. Overall, despite being a simplistic property, length is a necessary topic you should acquire to work with strings properly.