JavaScript String length Property

What You’ll Learn

The length property tells you how many UTF-16 code units a string holds—essential for validation, loops, and truncation. This tutorial covers syntax, five worked examples, emoji gotchas, and best practices every beginner should know.

Introduction

Every string in JavaScript carries a built-in length property. It answers one of the most common questions in programming: how big is this text? Whether you are validating a password, building a tweet counter, or looping through characters, length is usually the first tool you reach for.

In this guide you will learn how length works, how to use it in real validation and UI code, and what to watch out for with emoji and other multibyte characters.

Understanding the length Property

length returns a non-negative integer representing the number of UTF-16 code units in the string. For everyday ASCII and Latin text, each visible character typically counts as one unit. Spaces, tabs, newlines, digits, and punctuation all count too.

const greeting = "Hello, World!";
console.log(greeting.length); // 13

The property is read-only. Strings are immutable in JavaScript, so assigning to length has no effect (and is ignored in strict mode or silently fails in sloppy mode).

How to Use the length Property

Access length directly on any string primitive or String object. It is most often used in conditionals to enforce size rules:

const password = "mypassword";

if (password.length >= 8) {
  console.log("Password length is sufficient.");
} else {
  console.log("Password is too short.");
}

You can also use length as the upper bound in a for loop to visit each index from 0 to length - 1, or compare it against a maximum before truncating with slice.

📝 Syntax

string.length

Return value

• A non-negative integer (0 or greater).
• Never throws for valid strings.

Common patterns

• text.length === 0 — check for empty string.
• text.length >= min && text.length <= max — range validation.
• for (let i = 0; i < text.length; i++) — index-based iteration.
• text.length > limit ? text.slice(0, limit) + "…" : text — truncate with ellipsis.

Examples Gallery

Open DevTools Console (F12) and paste each snippet, or use the Try-it links. Examples progress from basic counting to validation, loops, emoji, and a live counter.

const greeting = "Hello, World!";

console.log(greeting.length);        // 13
console.log("".length);              // 0
console.log("  spaces  ".length);    // 10 (spaces count too)

13
0
10

function validatePassword(password) {
  if (password.length < 8) {
    return "Password must be at least 8 characters.";
  }
  if (password.length > 128) {
    return "Password is too long.";
  }
  return "Password accepted.";
}

console.log(validatePassword("short"));     // too short
console.log(validatePassword("mypassword")); // accepted

Password must be at least 8 characters.
Password accepted.

const word = "CodeToFun";
let reversed = "";

for (let i = word.length - 1; i >= 0; i--) {
  reversed += word[i];
}

console.log(reversed); // "nuFoTedoC"

nuFoTedoC

const heart = "💖";
const flag = "🇮🇳";

console.log(heart.length);              // 2 (not 1!)
console.log([...heart].length);         // 1 (spread by code point)
console.log(flag.length);               // 4 (regional indicator pair)

// Modern alternative for user-visible counts:
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
const graphemes = [...segmenter.segment(heart)].length;
console.log(graphemes);                 // 1

2
1
4
1

<textarea id="textInput" rows="4" cols="40"></textarea>
<p id="charCount">Characters: 0</p>

<script>
  const textarea = document.getElementById("textInput");
  const charCount = document.getElementById("charCount");

  textarea.addEventListener("input", () => {
    const length = textarea.value.length;
    charCount.textContent = "Characters: " + length;
  });
</script>

Characters: 0  (updates on each keystroke)

🚀 Common Use Cases

• Input validation — enforce minimum and maximum field sizes in forms.
• Substring extraction — know valid index bounds before calling slice or substring.
• Looping over characters — drive index-based for loops from 0 to length - 1.
• Truncating strings — shorten previews that exceed a display limit.
• Empty checks — guard against blank user input with length === 0.
• Progress indicators — show “280 / 280” style counters in social or chat apps.

Important Considerations

• Multibyte characters — length counts UTF-16 code units, not user-visible graphemes. Emoji like "💖" report 2.
• Whitespace — spaces, tabs, and newline characters all increase length. Trim first if you care about meaningful content only.
• Immutable property — assigning str.length = 5 does not shorten the string. Create a new string instead.
• Not byte size — length is not the storage size in bytes; encoding (UTF-8, UTF-16) affects memory differently.
• Array.length differs — arrays also have length, but it tracks elements and can be writable in some edge cases; string length is always read-only.

📝 Notes

• Primitives auto-box when you access .length—no need for new String().
• trim().length ignores leading/trailing whitespace if you only care about trimmed content.
• For international apps, test counters with emoji and combining characters from your target locales.
• String.prototype.length on the prototype itself is unrelated to instance length.
• Template literals and concatenation produce strings that support length immediately.
• When in doubt for user-facing limits, document whether the limit is code units or visible characters.

💡 Best Practices