This content originally appeared on Bits and Pieces - Medium and was authored by Adarsh gupta
The only JS array guide you will ever need
In this detailed blog, you will see and learn all the basic array methods and operations in JavaScript
What is an array?
An array is a data structure that enables you to store a collection of items under a variable name, which may or may not be logically related. Usually, they are accessed by their index or key.
JavaScript array syntax
const your_arrayname =[item1,item2,...]
Characteristics of JavaScript array
Arrays are resizable and can have any type.
["Adarsh",5,true]
They are indexed from zero.
["first","second","third","fourth"]
// 0 1 2 3 <- Index
We can access array elements by their index.
arrayname[0] // returns first item in array
arrayname[1] // returns second item in array
Creating a New Array
You can create arrays in two ways:
const your_arrayname =[item1,item2,...]
OR
const your_arrayname = new Array(item1,item2,...)
Useful Array methods and operations
- Length of an array
const billionaries =["Bill Gates","Warren Buffet","Elon Musk","Adarsh"]
billionaries.length // 4
2. Looping through Array
const billionaries =["Bill Gates","Warren Buffet","Elon Musk","Adarsh"]
for(let i=0;i<billionaries.length;i++){console.log(billionaries[i])
}
//result
Bill Gates
Warren Buffet
Elon Musk
Adarsh
3. Adding a new Element at the end
method: push()
const billionaries =["Bill Gates","Warren Buffet","Elon Musk","Adarsh"]
billionaries.push("Adarsh Gupta 2")//result
["Bill Gates","Warren Buffet","Elon Musk","Adarsh","Adarsh Gupta 2"]
4. Removing Elements from the last
method: pop()
billionaires.pop()
//return the last element and removes it from the array
5. Removing Elements from the beginning
method: shift()
const billionaries =["Bill Gates","Warren Buffet","Elon Musk"]
billionares.shift()//return Bill Gates and removes it from the array
6. Add element at the Beginning
method: unshift()
const billionaries =["Bill Gates","Warren Buffet","Elon Musk"]
billionares.unshift("Adarsh") // return array length and add adarsh to the array
7. Merge two Arrays
method: concat()
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);
console.log(arr3);
// [1,2,3,4,5,6]
8. Add elements at a specific position
method: splice(start,end,...items)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']
9. Slice a part of an array
method: slice()
const WWE = ["Cena", "Randy", "Rey", "UnderTaker", "HHH"];
const WWEFAME = WWE.slice(1);
WWE = ["Cena", "Randy", "Rey", "UnderTaker", "HHH"]
WWEFAME = [ "Randy", "Rey", "UnderTaker", "HHH"]
10. Sort an Array
method: sort()
const words_Letters=["a","e","b","c","alpha","beta","gamma"]
words_Letters.sort()
['a', 'alpha', 'b', 'beta', 'c', 'e', 'gamma']
const num=[1,33,2,44,54,13,4,23,11]
num.sort() //not numerically but alphabeticaly
[1, 11, 13, 2, 23, 33, 4, 44, 54]
11. Reverse an Array
First sort using sort() ,then reverse that using reverse()
12. Reverse an array of number
const num=[1,33,2,44,54,13,4,23,11]
num.sort((a,b)=>{return a-b})13. Multidimensional Array to one Directional
method: flat()
[1, [2, [3, 4], 5], 6, [7, 8]].flat(Infinity)
//[1, 2, 3, 4, 5, 6, 7, 8]
14. Map through Array
method: map()
[1, 2, 3, 4, 5, 6, 7, 8].map(a=>console.log(a))
15. Using spread operator
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const newArray = [...array1, ...array2]
console.log(newArray)
// [1, 2, 3, 4, 5, 6]
onst array = ['A', 'B', 'C', 'D', 'E']
const [first, second, ...remaining] = array
console.log(first)
// A
console.log(second)
// B
console.log(remaining)
// ["C","D","E"]
16. Using filter method()
The filter() method takes each element from an array and applies a conditional statement against it
let num1 = [1,2, 3, 4, 5, 6, 7, 8];
let data = num1.filter((value)=> return value%2==0)
// data =[2,4,6,8]
Thats pretty much it.We have covered almost all the array methods and got an insight into Arrays in JavaScript.
Hope this detailed thread was useful.Follow me on Medium as well as on my Twitter handle Adarsh Gupta for more contents around JavaScript, Web Development and more.
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and speed up, scale, and standardize development as a team. Try composable frontends with a Design System or Micro Frontends, or explore the composable backend with serverside components.
Learn more
- Building a Composable UI Component Library
- How We Build Micro Frontends
- How we Build a Component Design System
- How to build a composable blog
- The Composable Enterprise: A Guide
- Meet Component-Driven Content: Applicable, Composable
- Sharing Components at The Enterprise
JavaScript Complete Array Guide was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Adarsh gupta
Adarsh gupta | Sciencx (2022-06-03T11:54:40+00:00) JavaScript Complete Array Guide. Retrieved from https://www.scien.cx/2022/06/03/javascript-complete-array-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.