Maybe Scrolly?
Swapna Kumar Panda 
22h • 25 tweets • 8 min read
 Bookmark
 Save as PDF
 My Authors
25 super useful methods in JavaScript
⇩
💭 Why this thread?
❑ If you have just started learning JavaScript, you might have felt exhausted by seeing so many methods.
❒ If you are simply going through those methods without knowing their use cases, it's going to be tough for you
later.
❑ Let's learn use cases.
📋 Table of Contents
❑ Array.prototype's
➊ forEach()
➋ map()
➌ reduce()
➍ every()
➎ filter()
➏ find()
➐ slice()
➑ splice()
➒ push()
➓ pop()
➊➊ shift()
➊➋ unshift()
➊➌ indexOf()
➊➍ findIndex()
➊➎ sort()
 Follow Us on Twitter!
 Tweet
 Share
❒ String.prototype's
➊➏ toLowerCase()
➊➐ toUpperCase()
➊➑ substring()
➊➒ indexOf()
20. charAt()
➋➊ trim()
❑ Math's
➋➋ floor()
➋➌ random()
❒ Global
➋➍ setTimeout()
➋➎ setInterval()
➊ Array.prototype.forEach()
❍ Use Case
✔ To iterate through each element in the array
✔ Perform a task on each element
✘ Not suitable if task is supposed to return some value
✩✩ forEach() is also available in Set.prototype and Map.prototype
➋ Array.prototype. map()
❍ Use Case
 Follow Us on Twitter!
 Tweet
 Share
✔ To iterate through each element in the array
✔ Perform a task on each element which returns a value
✔ Returns a new array with all returned values
✘ Not suitable if task doesn't return any value
➌ Array.prototype.reduce()
❍ Use Case
✔ To iterate through each element in the array
✔ Perform a task on each element which accumulates the previous returned value with current element to return a
new value
❍ Example
➀ Sum of all items
➁ Max of all items
 Follow Us on Twitter!
 Tweet
 Share
➍ Array.prototype.every()
❍ Use Case
✔ To iterate through elements in the array until a certain condition is not met
✔ The task performed on each element must return a boolean value
✘ Stops iterating when condition is not met. Hence, it's not suitable for skipping.
➎ Array.prototype.filter()
➏ Array.prototype.find()
❍ Use Case
✔ To find element(s) which match a criteria
✔ Use find() to find the first matched element
✔ Use filter() to find all matched elements
✩✩ filter() returns a new array of matched elements
 Follow Us on Twitter!
 Tweet
 Share
➐ Array.prototype.slice()
❍ Use Case
✔ To fetch a sub-array from a larger array
✩✩ slice() returns a new array, doesn't modify the existing array
➑ Array.prototype.splice()
❍ Use Case
✔ To replace a portion of the array with new elements
✩✩ splice() modifies the existing array
 Follow Us on Twitter!
 Tweet
 Share
Array.prototype's
➒ push()
➓ pop()
➊➊ shift()
➊➋ unshift()
❍ Use Case
✔ Use push() and pop() to insert/remove elements from the end
✔ Use shift() and unshift() to insert/remove elements from the start
✩✩ These methods modify the existing array
 Follow Us on Twitter!
 Tweet
 Share
Array.prototype's
➊➌ indexOf()
➊➍ findIndex()
❍ Use Case
✔ To find index of the first matched element
✔ indexOf() does exact match (===)
✔ findIndex() allows for custom match
➊➎ Array.prototype.sort()
❍ Use Case
✔ To sort all elements of an array in some order
✔ Provide a comparator to define custom order
✔ By default sorting order is lexical
✩✩ This method modifies the existing array
 Follow Us on Twitter!
 Tweet
 Share
String.prototype's
➊➏ toLowerCase()
➊➐ toUpperCase()
❍ Use Case
✔ To convert entire string to lowercase alphabets, use toLowerCase()
✔ To convert entire string to uppercase alphabets, use toLowerCase()
✩✩ These methods returns a new string
➊➑ String.prototype.substring()
❍ Use
 Follow
Us onCase
Twitter!
 Tweet
 Share
✔ To fetch a part of the string between 2 indexes
✩✩ substring() returns a new string
➊➒ String.prototype.indexOf()
❍ Use Case
✔ To find the very first occurrence of a "substring" in the original string
✔ We can also mention from which index the occurrence should be checked
20. String.prototype.charAt()
❍ Use Case
✔ To fetch the character at a specific position of a string.
 Follow Us on Twitter!
✔ The character fetched is in UTF-16 and returned as a string
 Tweet
 Share
➋➊ String.prototype.trim()
❍ Use Case
✔ To remove whitespace from both ends of a string
✩✩ trim() returns a new string
➋➋ Math.floor()
❍ Use Case
✔ To get the largest integer less than or, equals to the given number
 Follow Us on Twitter!
 Tweet
 Share
➋➌ Math.random()
❍ Use Case
✔ To get a floating point pseudo random number in the range of 0 to less than 1
✔ It can be multiplied by any number to make a random number being generated in the range of 0 to less than
that number
➋➍ setTimeout()
❍ Use Case
✔ To execute a function or, piece of code after a timer expires
✔ The code is executed only for once.
✘ It is an asynchronous function. It shouldn't be used where pausing of execution is intended.
 Follow Us on Twitter!
 Tweet
 Share
➋➎ setInterval()
❍ Use Case
✔ To execute a function or, piece of code repeatedly with a fix time delay
✘ The code is ensured to be executed each time after the time delay. But not "exactly" after the time delay.
✩✩ Cancel further execution using clearInterval()
💭 Feedbacks
✧ I have picked 25 out of 100s of methods available. My focus was to show you a "learning method" which you
may apply wherever you wish.
 Follow Us on Twitter!
 Tweet
 Share
✧ Share your feedbacks on these. It would definitely help me to share better contents with you.
End of 🧵
If you are a new learner or, someone who finds difficulties in learning JavaScript, you have reached to right person
here.
You may like to go through "JavaScript" & "JavaScript Infographics" moments to see what I share regularly.
To never miss any, Follow Me ✅ 
•••
Missing some Tweet in this thread? You can try to force a refresh
 Tweet
 Keep Current with Swapna Kumar Panda 
 Share
 Email
 This Thread may be Removed Anytime!
Stay in touch and get notified when new
unrolls are available from this author!
 Add to "My Authors"
Twitter may remove this content at
anytime! Save it as PDF for later use!
 Read all threads
 Save this thread as PDF
Try unrolling a thread yourself!
1. Follow @ThreadReaderApp to mention us!
2. From a Twitter thread mention us with a keyword
"unroll"
@threadreaderapp unroll
Practice here first or read more on our help page!
More from @swapnakpanda
Swapna Kumar Panda 
@swapnakpanda
Mar 12
💎 JavaScript Cheat Sheet : Math Object Find Complete
Reference of ❍ 8 Constants ❍ 35 Functions ✧ Link to High
 Follow
Us on Twitter!
Resolution
image
in the next tweet
Swapna Kumar Panda 
@swapnakpanda
Mar 11
Let's redefine the "undefined". Can we do it in JavaScript? ⇩
➊ What is "undefined"? ❑ "undefined" is a variable
 Tweetin the Share
global scope. The value of "undefined" is the primitive value
g
p
p
"undefined" ❒ When a variable is declared but not assigned
🏙 High Resolution Image ⬒ If you liked this one, give a ⭐️
any value, value of global variable "undefined" is assigned to
to this GitHub repo to support my work. ⬓ Direct Link:
it implicitly.
github.com/swapnakpanda/I…
➋ "undefined" is not a reserved keyword ❑ It means you can
Read 4 tweets
Read 7 tweets
Swapna Kumar Panda 
Swapna Kumar Panda 
@swapnakpanda
@swapnakpanda
Mar 10
Mar 9
🟦 All inline & block-level elements in HTML / CSS Check
inside the 🧵 for ✧ Interesting details about inline & block-
🏙 Should we use Semantic HTML? ✘ <div> ➜ <header> ✓
level ✧ Link to high resolution image ⇩
<article> ✓ ✘ <div> ➜ <aside> ✓ ✘ <div> ➜ <main> ✓ ✘
✘ <div> ➜ <nav> ✓ ✘ <div> ➜ <section> ✓ ✘ <div> ➜
<div> ➜ <summary> ✓ ✘ <div> ➜ <footer> ✓ ⇩
📋 Table of Contents ➊ Introduction ➋ inline-level ➌ block-
We will discuss about ➊ What is Semantic HTML? ➋
level ➍ Changing Element Level ➎ List of inline-level
Examples of Semantic Elements ➌ Benefits of using
elements ➏ List of block-level elements ➐ Link to High
Semantic HTML ➌.➀ Improve site's SEO positioning ➌.➁
R
H l
l i
I
Read 18 tweets
i
ibl ➌ ➂ Cl
l
Read 14 tweets
Swapna Kumar Panda 
Swapna Kumar Panda 
@swapnakpanda
@swapnakpanda
Mar 8
Mar 7
Memorise JavaScript Array Methods in 11 Steps ⇩
10 HTML Tags and Attributes for SEO ⇩
📋 TOC ➊ Static Methods ➋ Accepts -ve Index ➌ Returns
📋 Table of Contents We will discuss about ➊ <title> ➋
Boolean ➍ Returns Index ➎ Returns new Array ➏ Modifies
<meta name = "description" > ➌ <h1> to <h6> ➍ <img
Existing Array ➐ Iterates through entire Array ➑ Iterates
alt="..."> ➎ <a rel="nofollow"> ➏ <meta name = "robots" >
Partially ➒ Checks Elements "as it is" ➓ Checks Elements
➐ <link rel = "canonical" > ➑ <meta name = "viewport" > ➒
custom way ➊➊ Accepts a callback
Open Graph Tags ➓ Twitter Card Tags
➊ Static Methods ❍ of() ❍ from() ❍ isArray()
🔍 Introduction ❑ When search engines crawl a website
Read 15 tweets
it
Read 16 tweets
Did Thread Reader help you today?
Support us! We are indie developers!
This site is made by just two indie developers on a laptop doing marketing, support and
development! Read more about the story.
Become a Premium Member ($3/month or $30/year) and get exclusive features!
 Follow Us on Twitter!
 Become Premium
 Tweet
 Share
Don't want to be a Premium member but still want to
support us?
Make a small donation by buying us coffee ($5) or help with server cost ($10)
 Donate via Paypal
Or Donate anonymously using crypto!
Ethereum
0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E
copy
Bitcoin
3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi
copy
  Thank you for your support!  


 Follow Us on Twitter!
Help | About | TOS | Privacy
 Tweet
 Share