JavaScript String Properties and Methods: length

The length property is very useful for determining the length of strings and arrays. For strings, it returns the number of characters, and for arrays, it returns the number of elements. This property is commonly used in loops, condition checking, and data manipulation.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>length</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .demo-container {
            border: 1px solid magenta;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
        }
        .result {
            color: #2196F3;
            font-weight: bold;
            margin: 10px 0;
        }
        .code-example {
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .length-value {
            font-size: 1.2em;
            color: #4CAF50;
        }
        .practical-example {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h3>String Length</h3>
        <div class="code-example">const text = "Welcome to JavaScript tutorial!";</div>
        <div id="textExample"></div>
        <div class="practical-example">
            <strong>Practical usage:</strong>
            <div class="code-example">
// Password length validation
if (password.length < 8) {
    console.log("Password must be at least 8 characters long!");
}
            </div>
        </div>
    </div>

    <div class="demo-container">
        <h3>Array Length</h3>
        <div class="code-example">const fruits = ["Apples", "Pears", "Strawberries", "Blueberries", "Bananas"];</div>
        <div id="arrayExample"></div>
        <div class="practical-example">
            <strong>Practical usage:</strong>
            <div class="code-example">
// Get the last element of array
const lastElement = fruits[fruits.length - 1];
// Check if array is empty
if (fruits.length === 0) {
    console.log("Array is empty!");
}
            </div>
        </div>
    </div>

    <div class="demo-container">
        <h3>Object Length</h3>
        <div class="code-example">const object = { firstName: "John", lastName: "Smith", age: 30 };</div>
        <div id="objectExample"></div>
        <div class="practical-example">
            <strong>Practical usage:</strong>
            <div class="code-example">
// Count object properties
const propertyCount = Object.keys(object).length;
            </div>
        </div>
    </div>

<script>
    // String example
    const text = "Welcome to JavaScript tutorial!";
    document.getElementById("textExample").innerHTML = `
        <div class="result">
            String contains <span class="length-value">${text.length}</span> characters
        </div>
        <div class="code-example">// Access characters: text[0] to text[${text.length-1}]</div>
        <div class="result">
            First character: "${text[0]}", Last character: "${text[text.length-1]}"
        </div>
    `;

    // Array example
    const fruits = ["Apples", "Pears", "Strawberries", "Blueberries", "Bananas"];
    document.getElementById("arrayExample").innerHTML = `
        <div class="result">
            Array contains <span class="length-value">${fruits.length}</span> elements
        </div>
        <div class="code-example">// Access elements: fruits[0] to fruits[${fruits.length-1}]</div>
        <div class="result">
            First element: "${fruits[0]}", Last element: "${fruits[fruits.length-1]}"
        </div>
    `;

    // Object example
    const object = { firstName: "John", lastName: "Smith", age: 30 };
    const propertyCount = Object.keys(object).length;
    document.getElementById("objectExample").innerHTML = `
        <div class="result">
            Object contains <span class="length-value">${propertyCount}</span> properties
        </div>
        <div class="code-example">// Object properties: ${Object.keys(object).join(", ")}</div>
    `;
</script>
</body>
</html>

RESULT