Skip to content

16-method-chaining

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

16-method-chaining

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
index.html
index.html
 
 
index.js
index.js
 
 
style.css
style.css
 
 

README.md

Learn JS Method Chaining ⛓

📺 Video

Learn JS METHOD CHAINING in 5 minutes! (5:27)

📝 Description

Method chaining is a programming technique where you call one method after another in one continuous line of code. Learn how to write cleaner, more concise code by chaining multiple method calls together instead of creating unnecessary intermediate variables.

🎯 What You'll Learn

  • What method chaining is and how it works
  • Benefits of method chaining
  • Chaining string methods
  • Writing cleaner, more concise code
  • When to use vs when not to use chaining
  • Avoiding unnecessary variables
  • Combining method chaining with string concatenation

🔧 HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="style" href="style.css">
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

Note: This chapter uses window.prompt() for user input.

💻 Complete Code Example (from index.js)

// Method chaining = calling one method after another
//                   in one continuous line of code

let username = window.prompt("Enter your username: ");

// ---------- Without Method Chaining (commented out) -------------------
// username = username.trim();
// let letter = username.charAt(0);
// letter = letter.toUpperCase();
// let extraChars = username.slice(1);
// extraChars = extraChars.toLowerCase();
// username = letter + extraChars;
// console.log(username);

// ------------ With Method Chaining ----------------------
console.log(username.trim().charAt(0).toUpperCase() + username.slice(1,).toLowerCase())

How it works:

  • Prompts user for username (e.g., " bRo CoDe ")
  • Trims whitespace, gets first character, makes it uppercase: "B"
  • Slices from index 1 onwards, makes it lowercase: "ro code"
  • Concatenates them: "Bro code"

💻 Without Method Chaining (Step-by-Step)

From transcript: "I'll give you two examples of the same program, one that uses no method chaining and another that does, then we'll be able to see some of the benefits of method chaining."

let username = window.prompt("Enter your username: ");

// Step 1: Trim whitespace
username = username.trim();

// Step 2: Get first letter
let letter = username.charAt(0);

// Step 3: Make first letter uppercase
letter = letter.toUpperCase();

// Step 4: Get remaining characters (everything after first character)
let extraChars = username.slice(1);

// Step 5: Make remaining characters lowercase
extraChars = extraChars.toLowerCase();

// Step 6: Combine them
username = letter + extraChars;

console.log(username);
// Input: "  bRo CoDe  " → Output: "Bro code"

From transcript: "This program does have a lot of steps... This program does work but it is a lot to write."

Problems:

  • Multiple variables (letter, extraChars) that we don't need
  • Multiple reassignments
  • More lines of code
  • Less concise

✨ With Method Chaining (from actual code)

From transcript: "With method chaining we can combine some of these steps together and avoid creating variables that we don't need such as letter and extra characters."

let username = window.prompt("Enter your username: ");

// Method chaining - all in one line!
console.log(username.trim().charAt(0).toUpperCase() + username.slice(1,).toLowerCase());

// Input: "  bRo CoDe  " → Output: "Bro code"

How this works:

  1. username.trim().charAt(0).toUpperCase() - "Three-hit combo" (from transcript)

    • trim() removes whitespace: "bRo CoDe"
    • charAt(0) gets first character: "b"
    • toUpperCase() makes it uppercase: "B"

  2. username.slice(1,).toLowerCase() - Another chain

    • slice(1,) gets everything after first character: "Ro CoDe"
    • toLowerCase() makes it lowercase: "ro code"

  3. + String concatenation combines them: "B" + "ro code" = "Bro code"

From transcript: "It's kind of like in a video game how you can have a combo, well this is a three-hit combo: boom boom boom - take our username, trim it, get the first character, and then make it uppercase all in one line of code."

🔗 How Method Chaining Works

From transcript: "Method chaining is a programming technique where you call one method after another in one continuous line of code."

Each method returns a value that the next method can operate on:

"  hello  "
  .trim()         // Returns "hello" (a string)
  .toUpperCase()  // Operates on "hello", returns "HELLO" (a string)
  .charAt(0);     // Operates on "HELLO", returns "H"

Key concept: "We're not going to end this method with a semicolon, we're going to end it with a dot, write another method." (from transcript)

username.trim()        // Don't end with ;
        .charAt(0)     // Chain with .
        .toUpperCase() // Keep chaining!

📋 Common String Method Chains

Capitalize First Letter

let name = "john";
name = name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
// "John"

Clean and Format Input

let input = "  HELLO WORLD  ";
let cleaned = input.trim().toLowerCase();
// "hello world"

Multiple Replacements

let phone = "(123) 456-7890";
let cleaned = phone.replaceAll("(", "")
                   .replaceAll(")", "")
                   .replaceAll(" ", "")
                   .replaceAll("-", "");
// "1234567890"

Email Validation

let email = "  USER@EXAMPLE.COM  ";
email = email.trim().toLowerCase();
// "user@example.com"

📊 Chaining Benefits

✅ Advantages

  • Less code - "We're using a lot less lines of code" (from transcript)
  • Fewer variables - "Helps you avoid creating named variables" (from transcript)
  • More concise - Combine multiple operations in one line
  • Fluent interface - Natural reading pattern like a combo

⚠️ Disadvantages

  • Can become hard to read - "If your method chain is too long it can become difficult to read" (from transcript)
  • Debugging is harder (which method in the chain failed?)
  • Performance - May call same method multiple times (e.g., trim() twice in the example)

💡 Best Practices

✅ Good Chaining

// Clear, readable, logical flow
let result = text.trim()
                 .toLowerCase()
                 .replace(" ", "-");

❌ Bad Chaining

// Too long, hard to read
let result = text.trim().toLowerCase().replace(" ", "-").slice(0, 10).padEnd(15, "x").toUpperCase().repeat(2);

✅ Better Approach for Long Chains

let result = text.trim()
                 .toLowerCase()
                 .replace(" ", "-")
                 .slice(0, 10)
                 .padEnd(15, "x")
                 .toUpperCase();

🔄 Method Chaining with Numbers

let num = 3.14159;

// Chain Math and Number methods
let formatted = num.toFixed(2)  // "3.14"
                   .toString()   // "3.14" (already a string)
                   .padStart(6, "0");  // "003.14"

📋 Practice Exercises

Exercise 1: Name Formatter

let fullName = "  jOHn DoE  ";
// Expected: "John Doe"
// Hint: Split by space, capitalize each word, join

Exercise 2: URL Slug Creator

let title = "  Learn JavaScript Today!  ";
// Expected: "learn-javascript-today"
// Hint: trim, toLowerCase, replace spaces and punctuation

Exercise 3: Phone Number Cleaner

let phone = "  (555) 123-4567  ";
// Expected: "5551234567"
// Hint: trim, remove all non-numeric characters

Exercise 4: Password Validator

let password = "  MyPass123  ";
// Check: trimmed, has uppercase, has number, min length 8

🎯 Real-World Example

User Registration Form

function processUsername(input) {
    return input.trim()
                .toLowerCase()
                .replace(/\s+/g, "_")  // Replace spaces with underscores
                .slice(0, 20);         // Limit to 20 characters
}

let username = processUsername("  John Doe  ");
// "john_doe"

Format Currency

function formatPrice(price) {
    return price.toFixed(2)
                .replace(/\d(?=(\d{3})+\.)/g, '$&,');
}

let price = 1234567.89;
formatPrice(price);  // "1,234,567.89"

🚨 Common Pitfalls

Calling Methods Multiple Times (from actual code)

// ❌ Inefficient - trim() and slice() operate on original username multiple times
console.log(username.trim().charAt(0).toUpperCase() + username.slice(1,).toLowerCase())
// Note: username still has whitespace when slice(1,) is called!

// ✅ Better - trim once, then operate on trimmed version
username = username.trim();
console.log(username.charAt(0).toUpperCase() + username.slice(1).toLowerCase());

Important: In the actual code, the second part username.slice(1,).toLowerCase() operates on the original username (with whitespace), not the trimmed version. This can lead to unexpected results if there's leading whitespace.

Chaining on Null/Undefined

let text = null;
// text.trim().toUpperCase();  // Error! Cannot read property of null

// ✅ Check first
if (text) {
    text = text.trim().toUpperCase();
}

🎯 Key Takeaways

  • Method chaining = "calling one method after another in one continuous line of code" (from transcript)
  • Each method returns a value for the next method to operate on
  • "It's like a video game combo" - chain methods together: boom boom boom (from transcript)
  • Reduces intermediate variables like letter and extraChars
  • Makes code more concise - fewer lines to write
  • Don't end with semicolon - use dot (.) to chain next method
  • Keep chains readable - "If your method chain is too long it can become difficult to read" (from transcript)
  • Can combine with string concatenation (+) as shown in the example
  • "Helps you avoid creating named variables" (from transcript)
  • Watch for repeated operations on original value vs chained value
  • Balance readability and conciseness - don't overuse

⏭️ Next Lesson

JavaScript LOGICAL OPERATORS

Duration: 5:27
Difficulty: Beginner
Category: Programming Techniques