Array

You may know that a variable can store only a value at a time, for example,
( var student = "jack", )this is totally fine and we may use it many times while building a project, however, sometimes it is required to collect many values in a single variable like a list of students' names, this is where we can use the Array concept.

The array is a single variable that stores a list of values and each element is specified by a single index. The array syntaxt is const array_name = [item1, item2, ...];

const names = ["Zahab", "JavaScript","Ada Lovelace"];
const everthing = ["JS", 123, true];

You can also create an array using new keyword.

const names= new Array("Zahab", "JavaScript", "Ada Lovelace");
const everthing = new Array ("JS", 123, true);

The recommended method for creating Array is the first one and in most of the programs you see the array is created using the first syntax.

Now we know how to create an array, let's discuss how to access the elements inside the array. I have mentioned that each element in an array has an index, the index for the first element is always zero and the index for the last element is (array size-1);

const names = ["Zahab", "JavaScript","Ada Lovelace"];
//accessing the first elemnt of the array

const firstElement =  names[0];
console.log(firstElement);

//  Output:  Zahab

You can find the length of an array using length.

const names = ["Zahab", "JavaScript","Ada Lovelace"];

//array length
const firstElement =  names.length;
console.log(firstElement);

//  Output:  3

Now let's learn some array methods

Array Methods

• pop()

The pop() method removes the last element of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

• shift()

The shift() method removes the first element from an array.

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.shift();
   console.log(students)

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]

• push()

The push() method adds one or more elements to the end of an array.

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.push('Zahab', 'Kakar');
   console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]

• unshift()

The unshift method adds one or more elements to the beginning of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.unshift('Zahab', 'Kakar');
   console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]

• length

The length returns the number of elements in an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
var length = students.length;
   console.log(length)

[ 'Jack', 'James', 'Robert', 'John' ]
4

• splice()

The splice() method is used to add new elements to an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
  console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

As we said before, this method is used to add elements into an array, however, we must indicate that where the new elements should be added. In the above example, 2 indicates the index number where the new elements should be placed and 1 shows the number of elements that should be deleted, as we mentioned 1 element should be deleted, we do not have the 'Robert' in the second array.

• concat()

The contact method is used to creates a new array by concatenating or merging existing arrays.

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);
var myFriends = ['Jennifer','Mary','Patricia']
  console.log(myFriends);

  var allNames =  students.concat(myFriends);  
  console.log(allNames)

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

• slice()

1. This method slices out a part of an array starting from mentioned array element index.
2. Slice can have two arguments, which indicate the starting and up to (but not including) the end argument.
3. This method also accept negative numbers.

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(1,3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'James', 'Rober' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(-1);  
  console.log(newStudent);

[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

Sorting Arrays

You can sort an array using the sort() method alphabetically.

const names = ["Zahab", "JavaScript","Ada Lovelace"];
const firstElement =  names.sort();
console.log(firstElement);

// Output: [ 'Ada Lovelace', 'JavaScript', 'Zahab' ]

Now let's sort the numbers array using sort method.

const numbers = [9, 12,30];
const firstElement =  numbers.sort();
console.log(firstElement);

// Output: [ 12, 30, 9 ]

You can see that the output is wrong, the right output should be [9,12,30]. But here the javaScript only evaluated the first number, so in 12 and 30, it just checked the 1 and 3.

To solve this we can use the bellow function.

const numbers = [9, 12,30];

//array length
const firstElement =  numbers.sort(function(a, b){return a - b});
console.log(firstElement);

// Output: [ 9, 12, 30 ]

fill() and flat()

Fill()

• fill() fills elements in an array with a static value.

const names = ['Jack', 'James', 'Robert', 'John' ];

//array fill
const firstElement =  names.fill("Zahab");
console.log(firstElement);

// Output: [ 'Zahab', 'Zahab', 'Zahab', 'Zahab' ]

• fill() fills specified elements in an array with a value.

  Syntax : arr.fill(value, start, end)

const names = ['Jack', 'James', 'Robert', 'John' ];

//array fill
const firstElement =  names.fill("Zahab", 1,2);
console.log(firstElement);

// Output: [ 'Jack', 'Zahab', 'Robert', 'John' ]

Flat() The flat() method creates a new array with all the elements of the subarrays concatenated to it recursively up to a specified depth.

Syntax : arr.flat([depth])

const numbers = [9, 12, 30, [1,2,3 ]];
const flatNumbers = numbers.flat(1);

console.log(flatNumbers);

//output : [9, 12, 30, 1, 2, 3]

const numbers = [9, 12, 30, [1,2,3,[1,2] ]];
const flatNumbers = numbers.flat(2);

console.log(flatNumbers);

//output : [9, 12, 30, 1, 2, 3, 1, 2]

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Feel free to contact me on Twitter