C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Voice of a Developer: JavaScript Chaining - Part Sixteen
WhatsApp
Guest User
4y
7.6k
0
1
100
Article
Introduction
JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with
JavaScript
.
Before moving further let us look at the previous articles of the series:
Voice of a Developer: JavaScript Data Types - Part One
Voice of a Developer: JavaScript Objects - Part Two
Voice of a Developer: JavaScript Engines - Part Three
Voice of a Developer: JavaScript Common Mistakes - Part Four
Voice of a Developer: Editors - Part Five
Voice of a Developer: VSCode - Part Six
Voice of a Developer: Debugging Capabilities of VSCode - Part Seven
Voice of a Developer: JavaScript OOP - Part Eight
Voice of a Developer:
JavaScript Useful Reserved Keywords - Part Nine
Voice of a Developer:
JavaScript Functions - Part Te
n
Voice of a Developer: JavaScript Functions Invocations - Part Eleven
Voice of a Developer: JavaScript Anonymous Functions - Part Twelve
Voice of a Developer: JavaScript Pure And Impure Function - Part Thirteen
Voice of a Developer: JavaScript Closures - Part Fourteen
Voice of a Developer: JavaScript Currying - Part Fifteen
Chaining
This technique got / retrieved popularity from jQuery. We write series of statements one after the other like a chain,
ex
$(
"#h1"
).text(
"Change text"
).css(
"color"
,
"red"
);
Another example of chaining
while
working
with
strings:
var
s =
"hello"
;
s.substring(0, 4).replace(
'h'
,
'H'
);
//Hell
The Chaining Method is also known as Cascading because it repeatedly calls one method on an object forming a chain/continuous line of code.
Chaining methods
Ques: What is returned if there is no return statement in the method?
Ans:
undefined
Ques: How is chaining implemented?
Ans:
When a method returns this; the entire object is returned & it is passed to next method and it is called chaining. Example,
var
games =
function
() {
this
.name =
''
;
}
games.prototype.getName =
function
() {
this
.name =
'Age of Empire'
;
return
this
;
}
games.prototype.setName =
function
(n) {
this
.name = n;
}
//now execute it
var
g =
new
games();
g.getName().setName(
'Angry Birds'
);
console.log(g.name);
We’ve created a getName method which returns this and implemented chaining.
Advantages
Code is more maintainable, simple, lean
It is easy to read chaining code
Simplify code after chaining
Use case: Let the examine the traditional way to program things. We have a problem to sort string below:
Approach 1
var
vehicles =
"Bike|Car|Jeep|Bicycle"
;
vehicles = vehicles.split(
"|"
);
vehicles = vehicles.sort();
vehicles = vehicles.join(
","
);
console.log(vehicles);
Output
Bicycle, Bike, Car, Jeep
Approach 2
var
vehicles =
"Bike|Car|Jeep|Bicycle"
;
vehicles = vehicles.split(
'|'
).sort().join(
','
);
console.log(vehicles);
Output
Bicycle, Bike, Car, Jeep
Please share your feedback/comments.
JavaScript
JavaScript Chaining
Learn JavaScript
Up Next
Ebook Download
View all
Frontend Developer Interview Questions and Answers
Read by 1k people
Download Now!
Learn
View all
Membership not found