Object Oriented JavaScript Tutorial #7 - Method Chaining

Net Ninja · Beginner ·🔧 Backend Engineering ·8y ago

Key Takeaways

This video tutorial demonstrates method chaining in Object Oriented JavaScript, using the User class as an example, and explains how to set it up by editing the return value of methods.

Full Transcript

alright then so now we've got the basics of how to create classes add on these properties and these different methods right here I want to introduce you to a little trick called method chaining but what does that really mean exactly well right down here where we're calling these different methods we're saying user one login or user to log out right and then if we wanting to call another method for example on user one after this we'd have to go to the next line and say user one dot log out this time okay now instead of what if we wanted to do something like this so get rid of that and then say login dot or log out so we perform one method then we chain on another method when this is done this is called method chaining right here now right now if we did this it's not going to work I can demo that I'll press save and we'll get an error right here it says cannot read property log out of undefined now what that means essentially is that we're trying to call this on undefined so when we call this user 1 dot login we're getting returned undefined yeah we're calling this function and it's logging this to the console but the return value of this is undefined so how do we kind of combat this well to demo this first of all I want to create a new method and this method is going to be called update school so let's create this method first of all update school and inside here what I want to do is update the score or add one to the score of this user so say for example whatever a new user signs up whenever we create a new user this way we'll give them a score property so I'll say this to school and then initially we'll set that to zero to begin with so new users all have a score of zero to begin with we don't pass it in as a parameter right it's the same for every user ok so whenever we call update score on a user what I want to do is take their current score and then increase it by one so what I'll do is say this dot score plus plus right then what I'll do is log something to the console I'll say console dot log and this email so the court uses email and comet and I'll say score is now and then comet after this and then I'll output this score so the current uses school alright so it should be something like a Ryu at ninjas calm score is now five or six depending on what the score is so let's just try this what I'll do is save it and then over in the console I'll say user one update school first of all so now we can see that it's one if I call it again and it should be two if I call it again it should be three because we're increasing the score property by one each time but if I do use it to don't orbit eight school then this should just start out at one then two etc okay so they've both got their own score property which is updating and whatever we call this method now the whole idea of this lesson was method chaining so how then do we do this we don't want to return an undefined value whenever we call a method what we want to do is return the instance of that object now we know that the instance of the object is stored in this right here so all we need to do is say okay well once you've done this then return this so now every time we call this method update score on a user now what we're doing is doing all of this functionality right here and then we're returning this which is that instance of the object that particular user so if we're returning that particular user we can then just do another method on that user right so we can chain them now or we should be able to at least so let's return this for each individual method right here return this like so and then let's give this a whirl down here what I'm gonna do is say user want to update score and I'm gonna call update score again so it does it twice then I'll say logout and in fact to begin with what we'll do is say login all right so all of these different methods were chaining together now now we couldn't do this before but now that were returning the object every time we call one of these methods we should be able to chain these methods because if you think about it we're calling the method and then it's returning this which is essentially just user 1 back here so we're saying user 1 update school then we're returning this again so this value is now user 1 so we're saying user 1 2 updates go again and so forth that's the whole idea behind method chaining so I've saved that let's see if this works okay so first of all right ninjas comm just logged in score is now 1 scores now to just logged out awesome so now that is all working and that my friends is how we do method chaining

Original Description

Hey gang, in this Object Oriented JavaScript tutorial I'll explain what method chaining is, and how we can set this up to work by editing the return value of the methods inside our User class. 🐱‍💻 Course Links: - VS Code editor - https://code.visualstudio.com/ - GitHub repository (course files) - https://github.com/iamshaunjp/object-oriented-js - JavaScript for Beginners - https://www.youtube.com/watch?v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET 🤑 Donate @ https://www.paypal.me/thenetninja 🎓Find me on Udemy @ https://www.udemy.com/user/47fd83f6-5e4a-4e87-a0f0-519ac51f91b6/ 👾 Video thumbnail artwork by PixelSwish @ https://www.youtube.com/channel/UCGKSD3mitWl5UpMxZzaIrRA
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Net Ninja · Net Ninja · 56 of 60

1 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

This video tutorial teaches method chaining in JavaScript by modifying the return value of methods in a class, allowing for chained method calls.

Key Takeaways
  1. Create a class with methods
  2. Modify method return values to return the object instance
  3. Call multiple methods in a chain
💡 Method chaining is achieved by returning the object instance from each method, allowing for subsequent method calls.

Related Reads

Up next
AI Security: Preventing Data Leaks in RAG 🔓
KodeKloud
Watch →