Learn Javascript __Array
Published: 2022-01-03 15:45:44

## 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, ...];**    


```JS
const names = ["Zahab", "JavaScript","Ada Lovelace"];
const everthing = ["JS", 123, true];
``` 
You can also create an array using **new** keyword.



```JS
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);


```JS
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**. 
```JS
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. 



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

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

``` 

- **shift()**

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

```javascript

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

``` 


- **push()**  

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


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

```text
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.

```javascript
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.


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

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

- **splice()**

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


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

```text
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.

```javascript

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)
  
``` 

```text
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.



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

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

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

``` 

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

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

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


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

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

```text
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]
``` 
### Sorting Arrays
You can sort an array using the sort() method alphabetically.


```javascript
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.

```javascript
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.


```JS
const numbers = [9, 12,30];


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

// Output: [ 9, 12, 30 ]

``` 


## 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](https://twitter.com/zahab_k/)