javaScript Method chaining tutorial ( function chaining)
Вставка
- Опубліковано 30 вер 2024
- We will learn how to jquery style chain functions ( Methods) using pure javaScript. in Jquery we can do $('.class').addClass('new').removeClass('old'). we can achive similar chaining using pure javascript.
Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement without requiring variables to store the intermediate results.
javascript advance tutorials
javascript function chaining
jquery like function chaining
javascript how to chain functions
java script function chaining
method chaining
chaining module method calls
method cascading
ECMAScript 5
ECMAScript6
#JavaScript #FunctionChaining #MethodChaining
*My Udemy Courses
www.udemy.com/...
*couponCode*=TECHSITH-9.99
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
Note the shorthand instead of "{add: add, substract: substract, print: print};" you can now write
return {add, substract, print}; And thanks for this clear demonstration.
yes. thanks for pointing it out.
Is it possible to chain methods from factory functions? E.g. sayName().location().favFoods(). I can't use the `return this` keyword inside the factory function like how you would with a regular constructor function :(
const nerd = (user, city, food) => {
const { sayName, location } = Person(user, city)
const { favFoods } = FaveFood(food, user) // console.log(`${user} likes nerd stuff!`)
return { sayName, location, favFoods, doSOmethingNerdy }
return this
}
Great tutorial, but “substract”??
Anyone Here to know how Promise.then().catch() chained together ?
Promise returns an object with "then" method, then method returns an object with "catch" method.. :)
x.add(3) is fine when we call it, why undefined ? inside the console.log?
The only video I understood.
Subtract*
:)
hi, how to limit method chain to some perticular function ? returning this will give all method access, and i am trying to make a routing package where i need to return a chain of method like router.get() here i only want to return get, post and other method but i have many methods in class that all are showing up, i also have applyMiddleware() method that i only want after method is selected but it is showing while accessing router.* anything
one question, please is it correct to do the following code?
var obj = function () {
var oper = {
i: 0,
add: function (j) {
this.i += j
return this
},
sub: function (j) {
this.i -= j
return this
},
print: function () {
console.log(this.i)
},
}
return oper
}
var x = obj() //no need new
x.add(3).sub(2).print() //1
console.log(x)
I hope your answer, thank you. Blessings
very very good example .
Not only method chaining
the example at the end is very useful for writing a class with private fields and public methods..
This man is the best teacher, UA-cam has been recommending the wrong people to me
What is difference in defining a variable like $url or var url in js
Calling both variables "i" is kinda misleading.
I have never found most precise, concise and trick catching instructive series on UA-cam or Udemy like this, really good baked pastry been brought only by "bakers". If you would author a book on JS it will be of most useful one
Return this is instant object, what is value hold by this element, it is difficult to understand
'this' means the reference to the entire object.
I have always added new when creating the object. How did you get away with removing the new at 10:08 Can you please elaborate. Thanks :)
+Sheshagiri Pai Thanks for watching the video . Following is the explanation you asked.
var obj = function() {
this.i = 1;
this.geti = function(){ return this.i;};
};
the above behaves more like a class. so if i need to create an object from this class i can use 'new' like this
var a = new obj();
var b = new obj();
var c = new obj();
as you can see i can create multiple object from this obj class function . Basically 'new' here means creating a new object.
Now lets look at closure
var obj = function() {
var i = 1;
var geti = function(){ return i;);
return {geti:geti};
};
var a = obj();
here i when i do var a= obj(); , i am not creating a new object . obj() is actually returning me a object with function geti . you can see in this statement "return {geti:geti};" that is why i am not using new.
also in the first example you dont see return statement.
Thanks
And it is always a function, isn't?!
var obj = function(){
this.num = 0;
};
Why not just write a class instead of an object that acts as a class? Why in good heavens does Javascript even give you the option to do this?
Classes are there in JS but not used as much. Frameworks like react are completely moving away from classes.
jillakidumma
:)
thanks for this tutorial.
When you write this.i += i inside this.add func() why it isn't creating a new this? I thought only arrow func doesn't have their own this
Great video. FYI, it's "subtract".
+ECUdweber Thanks for the correction you are the first one to notice. :)
it seems that the returned object is nothing but bunch of functions,these bunch of functions share the out parameter i,they can modify this i and return the object itself,which was cool, thanks sith!
Simply superb ☺️
javaScript Method chaining tutorial ( function chaining) what you want to explain in this video did get it please tell me
The best one
I am glad it helped. Thanks for watching!
What is the logic behind return this; after you made 'i' as private variable?
You don't create a closure, you use a closure because closure is a feature of the language.
I just wish the keyboard clicks could be louder...
so, all this 2 examples are working, so I can use any of them?
Method chaining on closure is bit tough to understand for me
Kamaal karte ho Patel ji
so function xpressions inside a function expression
Nicely done. A very good use of 12 minutes for beginning JS programmers.
This is a topic that's been on my mind for some time now, I've read blogs about method chaining but never quite understand it. Watching this video now makes me understand it better. Thanks
Glad it was helpful! Thanks for watching!
Hi, I have tried in my localhost, but i didn't get any console output, please guide me
which one did you try?
are bhai substract nahi, Subtract :-)
i dont understand how come you were able to get the correct result here 04:45 but when you chain them you had to return the object first ???
Mooli Morano m
Nice explanation sir.. I have one doubt is that what is difference between creating object with new and without new operator because which i know (if i am wrong then rectify me) that while creating an object with new operator they maintain there own data member & method then i tied with above example without using new operator i was thinking that may be they are referring to same address/reference
Without Using new Operator
var x = obj();
var y = obj();
console.log(x===y) // false
x.add(3).substract(2).substract(2).print(); // -1
y.add(3).substract(2).print(); // 1
With Using new Operator
var x = new obj();
var y = new obj();
console.log(x===y) // false
x.add(3).substract(2).substract(2).print(); // -1
y.add(3).substract(2).print(); // 1
can you help me to clear my this doubt..Thanks
What you are looking for is understanding of how to create objects diffrent ways. Here is one of my tutorial that explains that. ua-cam.com/video/xizFJHKHdHw/v-deo.html
How can I do this asyncronously?
You have to return a promise for it to execute asynchronously.
techsith That would return the promise itself, not the class, therefore I wouldn't be able to chain it.
This is very helpful, thanks for sharing your knowledge!
very nice
Thanks for watching!
Hi, I liked your tutorial. Is there other way than just return{add:add, substract:st...} and why didn't you use new obj()??? Could you please guide me :)
when you run the function it's returning the object with mehtods with closures. which means this is not a function constructor. only function constructor uses new. I have a tutorial on that called "constructor" you can look at that. You can return like this
jsfiddle.net/7dg1g3j8/ does that answer your question?
Your quick response is highly appreciated. I really liked your example at jsfiddle.net/7dg1g3j8/ and something like this "const cal = () => {" is very new to me. It was a great learning. Thank you for sharing your knowledge. Have a great time ahead and keep publishing :)
when we should use 'new' keyword and should not , please help me to understand this
new is a constructor pattern. Basically when you want to create objects from a constructor. If you are doing functional programming where you are returning functions with closures and such you are using with out new. You should watch my object oriented series to understand 'new' keyward . ua-cam.com/play/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt.html
techsith thank you so much ....I have learned alot from your videos . Once again thanks for sharing playlist will go through all
You are very good at explaining things.
Very helpful. I am newbie to java script. Thanks for the video.
This is great! Illustrates Method Chaining clearly!
why return "this" ?
When you return this. you return refrence to yourself ( in this case the main function ) , this way now you can can call the methods defined in itself using dot notation . x.add().add();
but in the 'add' method for example, returning 'this' there will return the main function itself, but I don't understand why it doesn't return the add function
In this case you only have one function. what if you have many functions like "add" you dont want to return only one function . instead you should return "this" so you can chain any functions.
Very nice explanation.. hurray👏👏
awesome sir..your advanced js tutorial
i must very interesting tutorials , you simply made it so easy to understand ,thanks a lot
very nice explanation.
This was extremely useful. Thank you for the straighforward and great tutorial.
:D
Hi, Thank you for the wonderful video. Can you please share your jsFiddle link here.
Thanks,
thanks for a great tutorial..it completely makes sense for me ..
Thanks great explanation, easy to follow
Nice lesson, thank you for teaching, keep up the good work, peace!
Very informative video!
this guy is on point! great teacher
really helpful, nice one