To preface, this article does not go in depth about how return values work as I’m still just a beginner. Rather, this article is more about how taking the time to understand what return values are early on will make method chaining much easier to both write and interpret.
I’ve been with LaunchSchool for about two months at this point. It’s been a steady stream of brand new information, and it can admittedly be a bit difficult to keep up with every little concept that’s introduced to you. Sometimes, these ‘little’ concepts that fall through the cracks may be a fundamental piece of your learning experience. For me, this concept was return values.
I had serious trouble with various advanced concepts (well, advanced relative to 101) that relied on return values. I took some time to go back and solidify my understanding of return values, and I was able to see those ‘advanced’ concepts from a new perspective.
A return value is, well, the value that is returned from a piece of code. You can do certain things with these return values — store them in a variable, use them in expressions and functions, or just ignore them entirely. Let’s look at a couple of examples:
> let a = 5; // returns undefined
> a // returns 5On the first line, let a = 5; returns undefined. The reason why isn’t really important at this level, but you should definitely know that declaring a new variable will always return undefined. The second line is easier to grasp. Because we just assigned 5 to a, it’s easy to see that calling a will return its assigned value, 5.
It sounds pretty straightforward, but I’ve found that understanding return values is particularly crucial to one of my favorite concepts in JS101, method chaining. I’m a big fan because they remind me of proofs in high school geometry, which was totally my jam.
Method chaining is using multiple methods or functions in a single statement. Here’s what one might look like:
> 'Hello'.toUpperCase().slice(2).charAt(2) // returns 'O'If you are unfamiliar with any of the methods used in this article, I’d suggest searching on MDN! I promise none of them are too complicated.
We’re starting with a string, 'Hello’, and then call the toUpperCase() method on it, converting it to uppercase. Next, we use slice(2) to only get everything from index 2 onwards. Lastly, we use charAt(2) to get the character at index 2, ultimately returning 'O'.
Okay, but why do we need to understand return values for this? The important thing to understand is that each method call returns a value, even though you’re not seeing it. Understanding this concept helped method chaining become practically second-nature to me. Let’s break down the above example:
> 'Hello'.toUpperCase().slice(2).charAt(2)
Return values: 'HELLO' > 'LLO' > 'O'It reads from left to right. Starting with our string 'Hello', we then call toUpperCase() method on it. This gives us the return value 'HELLO'. Next, we use slice(2), so we get 'LLO' returned. Finally, we use charAt(2) to get the value at index 2 of 'LLO', which is 'O', our final return value. You can think of each of those intermediary return values as “invisible”, since you don’t actually see the anywhere in the console — but we’re still able to call methods on them.
Without running the below code, can you figure out what the final return value will be? Arbitrary bonus points if you list out each method call’s return value.
> 'Drink more water'.slice(11).toUpperCase().concat('world')Answer below, don’t look if you haven’t tried it yet!
========================================
> 'Drink more water'.slice(11).toUpperCase().concat('world')
Return values: 'water' > 'WATER' > 'WATERworld'Quickly going over this, slice(11) will return everything from index 11 onwards of our original string, 'Drink more water', so it returns the string 'water'. We then take that return value and call toUpperCase() on it, returning 'WATER'. Lastly, we use concat('world') to combine 'WATER' with the string 'world', giving us 'WATERworld'.
If you only learn one thing from this article, let it be that each subsequent method call is using the previous one’s return value to execute its action.
Another concept that uses return values in a similar fashion is nested object/array access, but I’ll save that for another blog post.
Thanks for reading, and I hope this article helped you out in understanding the importance of return values in method chaining!
