👆✌🤟 🔥 ❤
Search... Write a post
Ritik
Must to know Array Methods
3 @ritik_dev_js
Being a JavaScript Dev.
2
3
in Javascript + FOLLOW
location
Ritik Apr 12 ・4 min read
India
#javascript #react #angular #vue joined
Mar 13, 2020
DISCUSS
Array are mostly used in web development and most of the task on web
need Array along with its methods. In JavaScript, arrays have many More from @ritik_dev_js
predefined methods in its _proto_.So lets discuss some commonly used Closure, Currying and IIFE in
array methods along with their purpose. JavaScript
#javascript #react #angular #vue
1. Array.find() What the hack is call, apply,
bind in JavaScript
The find() method takes a callback function which executes on each element
#javascript #react #angular #vue
in array taking three argument i.e. element, index, array
and returns the value of the first element in the provided array. Trending on DEV
Rapidtext multipurpose
sms/bulk sms app for alert &
commercial purpose
function greater_than_20(item){ #twiliohackathon #javascript #node
return item > 20; #deshowdev
}
const all_numbers = [2,4,5,7,20,23,15,9]; Trying to Understand How
const found = all_numbers.find(greater_than_20);
Node Loads Modules
console.log(found);
#node #javascript #todayilearned
//23
#books
Getting started with GraphQL
#graphql #webdev #react #beginners
or you can do it like this: using arrow function.
3 most powerful JavaScript
Promise methods
#javascript #beginners #webdev
const all_numbers = [2,4,5,7,20,23,15,9];
const found = all_numbers.find(item => item > 20); Continuous Integration and
console.log(found); Deployment with TravisCI and
//23 Netlify
#devops #javascript #tutorial #vue
On Tech Blogging: If You
Write It, They Will Come
and if you want to use all three argument that is possible than:
#javascript #productivity #blogging
#career
Is TypeScript Really... A
Language??
function greater_than_20(item,index,array){
if(item>20 && index>4){ #javascript #typescript #react
console.log(item +" "+ index + " "+ array[index]);
} What is Recursion?
}
#recursion #javascript #programming
const all_numbers = [2,21,5,7,20,23,15,9]; #algorithms
const found = all_numbers.find(greater_than_20);
//23 5 23
2. Array.filter()
The filter() method takes each element of array and check the condition
provided in callback function and creates a new array of those
elements that satisfies the condition. If no element satisfies then a empty
array is returned.
Lets see the code :
const people_age = [12,8,10,19,20,5,25,36]
function people_above_18(age) {
return age > 18;
}
const people_18 = people_age.filter(people_above_18);
console.log(people_age);
console.log(people_18);
or you can do it like this: using arrow function.
const people_age = [12,8,10,19,20,5,25,36]
const people_18 = people_age.filter(age=>age>18);
console.log(people_age);
console.log(people_18);
//[12, 8, 10, 19, 20, 5, 25, 36]
//[19, 20, 25, 36]
It also accepts optional parameters like index, array.
3. Array.forEach()
The forEach() method just runs a function for each element of array. It does
not return anything i.e. undefined.
It is same like for loop.
const arr = ['a', 'b', 'c'];
arr.forEach(element => console.log(element));
//a
//b
//c
4. Array.map()
The map() method runs a function for each element of array just like
forEach() method but it also creates a new array of result, of each element.
const number = [1,2,3,4,5,6]
function inc_by_5(element){
return element + 5;
}
const number_incremented_by_5 = number.map(inc_by_5);
console.log(number_incremented_by_5);
//[6, 7, 8, 9, 10, 11]
or you can do it like this: using arrow function.
const number = [1,2,3,4,5,6]
const number_incremented_by_5 = number.map(element=>element+5);
console.log(number_incremented_by_5);
//[6, 7, 8, 9, 10, 11]
5. Array.reduce()
The reduce() method executes a reducer function on a provided array
elements and returns a single output value.
A reducer function is a special one. It uses two arguments accumulator and
currentValue. The result of each iteration is stored in
accumulator.
Lets see an example :
const marks = [50,60,75,80,40];
function reducer(accumulator , currentValue) {
return accumulator + currentValue;
}
const total_marks = marks.reduce(reducer);
console.log(total_marks);
//305
In the first iteration 'accumulator' holds value of first element in array.
We can also assign it directly to some value by passing along with reducer.
const marks = [50,60,75,80,40];
function reducer(accumulator , currentValue) {
return accumulator + currentValue;
}
const total_marks = marks.reduce(reducer,-305);
console.log(total_marks);
//0
6. Array.sort()
The sort method sorts the elements of the provided array. By default it sorts
in ascending order.
const debts= [5500,2500,1365,5000,7584,45,745];
debts.sort();
console.log(debts);
//[45,745,1365,2500,5000,5500,7584]
We can change the sort order according to our use by passing a callback
funtion.
Lets sort the "debts" array in descending order.
const debts= [5500,2500,1365,5000,7584,45,745];
debts.sort((num1,num2)=>num2-num1);
console.log(debts);
//[7584, 5500, 5000, 2500, 1365, 745, 45]
7. Array.slice()
The slice methods returns a portion of array into a new array. It takes two
parameters as index value - begin and end.
"End index value is not included".
const data = ["ritik","rahul","shubham","ashish","gaurav","piyush"]
const partOfData = data.slice(2,5);
console.log(partOfData);
//["shubham", "ashish", "gaurav"]
What is forget or give large value to end index i.e
const data = ["ritik","rahul","shubham","ashish","gaurav","piyush"]
const partOfData = data.slice(2);
console.log(partOfData);
//["shubham", "ashish", "gaurav", "piyush"]
const partOfData2 = data.slice(2,5);
console.log(partOfData2);
//["shubham","ashish","gaurav"]
It checks data.length property if end index is missing or greater than length
of array.
8. Array.splice()
The splice method is used to alter the array. It helps in deleting or adding
items inside a array at
any particular position. It returns the array with deleted items.
It takes 3 parameter starting index , delete count from that index , and if
something to add after that index.
const alpha = ["a","b","c","d","e"];
alpha.splice(2,1);
//goes to index 2 and deletes 1 element
console.log(alpha);
// ["a", "b", "d", "e"]
alpha.splice(2,0,"c")
//goes to index 2 and deletes nothing and adds "c"
console.log(alpha)
//["a", "b", "c", "d", "e"]
alpha.splice(0);
//deletes full array as starting index is 0 and by default delete count it takes arr.length
console.log(alpha);
//[]
Thats all. You can also read this at ritikrana.netlify.com
dev.to is a community of over 125,000 developers writing blog
posts just like this one to help us all level up.
Sign Up Now
(open source and free forever )
Ritik + FOLLOW
Being a JavaScript Dev.
@ritik_dev_js rtktwt ritikrana.in
Add to the discussion
PREVIEW SUBMIT
code of conduct - report abuse
Classic DEV Post from Jan 14 '19
Changelog: Reading Time
Now Displayed
+ FOLLOW
Ben Halpern
The approximate reading time for a post on DEV is now
displayed on feed pages a...
84 27
From one of our Community Sponsors
Rollout Tutorial: Feature
Flagging in your React
+ FOLLOW
Native App in 5 minutes
Evan Glazer
By providing a gradual release mechanism and a simple way to
define target audiences, CloudBees Rollout allows developers
and product managers to optimize features releases and
customize the user experience.
24
Another Post You Might Like
Object Destructuring in
ES6
Sarah Chima
Sarah Chima
124 15 + FOLLOW
Another Post You Might Like
Deploy a Static Site in 3
Steps
Team XenoX
Sarthak Sharma
Fastest way to deploy static website ever. + FOLLOW
124 27
JavaScript Quiz Question #1: JS Array Iterators Cheat
Array Sort Comparison Sheet — Part 1
Nick Scialli (he/him) - Apr 21 Krishna Damaraju - Apr 21
A 12-Line JavaScript Building a recipes website
Function to Get All using Gatsby and Flotiq
Combinations of an Object's andrzejwp - Apr 21
Properties
Nick Scialli (he/him) - Apr 21
Home About Privacy Policy Terms of Use Contact Code of Conduct
DEV Community copyright 2016 - 2020
