Stop 04 · JavaScriptTopics · 11/36

Methods

Part of the Frontend Developer Roadmap

In short

A method is just a function that belongs to something. Strings, arrays and your own objects all come with methods, and knowing the common ones keeps your code short and readable.

Functions attached to objects/arrays (`.push`, `.map`, `.toUpperCase`) that operate on the data they belong to — knowing the built-in method library well speeds up everyday coding a lot. Knowing method behavior includes understanding return values, mutation, callback arguments, chaining, and whether an operation creates a new value or changes the original.

The jaadu mascot holds a smartphone with camera, alarm and call icons popping out.

Think of it like this

What your phone can do

Your phone is the object. Calling, clicking photos and setting alarms are its methods. Your friend's phone has the same methods, but they work on her contacts and her photos. Same actions, different owner.

Watch it happen

Chaining string methods

raw input
trim()
toLowerCase
split("@")

1/4We start with " rahul@GMAIL.com ", spaces and capitals included.

The big ideas

What you need to know

A function stored on an object

When a property's value is a function, it's a method. You call it with a dot: wallet.pay(100).

String methods return new strings

Strings can't be changed in place. trim, toLowerCase and replaceAll all give you a fresh string back.

Chain them

Since each call returns a value, you can chain: input.trim().toLowerCase().split("@").

this inside a method

In a method, this points to the object you called it on, so it can read and change its own data.

See it in code

Walk through the code

js
1const input = "  rahul@GMAIL.com ";2const email = input.trim().toLowerCase();  // "rahul@gmail.com"3 4console.log(email.includes("@"));          // true5console.log(email.split("@"));             // ["rahul", "gmail.com"]6console.log("98-76-54".replaceAll("-", "")); // "987654"7 8const wallet = {9  balance: 500,10  pay(amount) {11    this.balance -= amount;12    return this.balance;13  },14};15console.log(wallet.pay(120));              // 380

1/4trim and toLowerCase are chained. The clean result is saved in email.

input itself is untouched after trim and toLowerCase. You must store the result, here in email, or it's thrown away.

Save yourself the pain

Common mistakes

Oops

Calling name.toUpperCase() and expecting name to change.

Do this instead

Strings never change in place. Write name = name.toUpperCase() or store it in a new variable.

Oops

Forgetting the brackets, like email.trim instead of email.trim().

Do this instead

Without () you get the function itself, not its result. Always call methods with ().

Your mission

Clean up a signup form

~15 min

Quick check

What does this log? let name = "riya"; name.toUpperCase(); console.log(name);

Go deeper

  1. 1Skim MDN's Array and String method reference pages once, fully. Validate your understanding by applying it in a small practical example.
  2. 2Practice chaining methods together (`.filter().map().reduce()`). Test it with at least one normal case and one edge case so you can explain the behavior confidently.
  3. 3Learn which array methods mutate the original array and which return a new one.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge