JavaScript Array fundamentals for newbies

JavaScript is an easy learning programming language, also it is known as a scripting language. In JavaScript, Arrays are one of the most commonly used structures for sorting data. In this article I'll focus on the basics that every JavaScript developer needs in his/her daily life.

Creating a JavaScript Array:

There are many way to create an array in JavaScript, for example:

// Create an empty array
var emptyArray = [ ];
// Create an array of Name
var kidsName = [ "Araf", "Mahveer", "Sarah", "Yasha" ];

indexOf() :

Array elements are accessed using their index number.

// to check position
Var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”];
var kidsPosition = kidsAge.indexOf(“Yasha”);
console.log(kidsPosition);
// result : 3

Push() :

We can insert an element to an array by using push() method.

// add an element to an array
Var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”];
kidsName.push(“Nira”);
console.log(kidsName);
// result : [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”];

Pop() :

pop() method is used to remove an element from an array

// remove an element to an array
Var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”];
kidsName.pop();
console.log(kidsName);
// result : [“Araf”, “Mahveer”, “Sarah”, “Yasha”];

N.B : push() and pop() both methods insert and remove the last item of an array.

unShift():

In array unShift() method is used for inserting items at the beginning of an array.

// add an element to an array at beginning
Var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”];
kidsName.unShift(“Nira”);
console.log(kidsName);
// result : [“Nira”, “Araf”, “Mahveer”, “Sarah”, “Yasha”];

Shift() :

Removing the item from the very beginning shift() method is used.

// remove an element to an array from beginning
Var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”];
kidsName.shift();
console.log(kidsName);
// result : [“Araf”, “Mahveer”, “Sarah”, “Yasha”];

Slice() :

The slice() method returns the selected elements from start to end in an array. where start and end represent the index of items in that array, if the end parameter is not included then it returns the full array from the starting parameter.

var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”];
var selectedKidsArray = kidsName.slice(1, 4);
console.log(selectedKidsArray);
// result : [“Mahveer”, “Sarah”, “Yasha”];

Note: The original array will not be modified.

Concat() :

concat() method is used to join multiple arrays. This method does not change the existing arrays, it returns a new joined array.

var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”];
var friendsName = [“Dina”, “Nasrin”, “Lakshmi”];
var joinedName = kidsName.concat(friendsName);
Result: [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”, “Dina”, “Nasrin”, “Lakshmi”];

Map() :

The map() method calls the provided function once for each element in an array.

var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”];
var kidsTitle = kidsName.map(name => name + ‘ ’ + ‘khan’);
Console.log(kidsTitle);
Result: [“Araf Khan”, “Mahveer khan”, “Sarah khan”, “Yasha khan”, “Nira khan”]

Filter() :

The filter() method creates a new array with all array elements that fulfill a given condition.

var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”];
var filteredName = kidsName.filter(name => kidsName.length > 4);
console.log(filteredName);
Result: [“Mahveer”, “Sarah”, “Yasha”];

Find():

The find() method returns the value of the first element in the provided array that fulfills the provided testing function.

var kidsName = [“Araf”, “Mahveer”, “Sarah”, “Yasha”, “Nira”];
var filteredName = kidsName.find(name => kidsName.length > 4);
console.log(filteredName);
Result: [“Mahveer”];

Summery:

JavaScript arrays can store any valid value, including strings, numbers, objects, functions, and arrays, thus making it possible to create more data structures such as an array of objects or an array of arrays. JavaScript arrays are dynamic. They grow or shrink as needed.