Array in Javascript for Beginner
Tags: array, javascript, beginners
Published: 2019-10-21 14:32:26

---
title: " Array in Javascript for Beginner "
published: true
description: The simpler the better
tags: array,  javascript,  beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/r8b9zcjsygzqxaj5o5ss.jpg
---

The array is a special of object that store list-like information:

```let emptyArray = [ ]; // this is an empty array 🙂```

for create an array we use square brackets  []

```let arrayWithThreeItem = [itemOne, itemTwo, itemThree]; // this is an array with three items```

we use the a comma for separate each item, 
#### array may contain any valid JavaScript value 
"Numbers and Strings"or " Objects, functions or other array".
To improve the readbility we put items in separate line.
```// this is an array of strings about some Marvell heroes
// for convention we use this order for improve the readbility 
 // each element is separate by comma 
// the array live inside [] brackets
let superHero = [  
  'Wolverine',       
  'Spider-Man',      
   'Thor',            
   'Iron Man',              
  'Hulk',
  'Captain America',
   'Daredevil',
  'Punisher',
  ' Deadpool',
   'Silver Surfer',
  ' Gambit',
  'Cyclops'
];```

#### array as proprety an methods since they are object:
```console.log(superHero.length);// 12```
the property array.length allow us to  check the number of items in an array.
```superHero[3] // "Iron Man"```
like this we get the value of the item 3 in superHero array.
#### arrays in JavaScript are zero-based!!!!

```superHero[superHero.length -1] // "Cyclops"
superHero[superHero.length -2] // "Gambit"
superHero[superHero.length -3] // "Silver Surfer"
superHero[superHero.length -4] // "Deadpool"```
like this we get the last item in the array and so on.
#### set the value of an item:
```superHero[0] = 'Iris' //["Iris", "Spider-Man", "Thor", "Iron Man", "Hulk", "Captain America", "Daredevil", "Punisher", " Deadpool", "Silver Surfer", " Gambit", "Cyclops"]```
If you provide an index that exceeds the number of items, javaScript create the intermediary items and fill them with undefined.
```superHero[20] = 'Iris'; //["Wolverine", "Spider-Man", "Thor", "Iron Man", "Hulk", "Captain America", "Daredevil", "Punisher", " Deadpool", "Silver Surfer", " Gambit", "Cyclops", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, "Iris"]```
#### It's important to provide the right index value whenever you work with  arrays. If you don't , you'll get or change a wrong item in the array.
```superHero.indexOf('Hulk') // 4```
With indexOf() method I find a position of an item in an array, if the element doesn't exist inside the array the method return -1. 
#### indexOf work just with primitive value for find object, arrray and function you have to use findIndex.
```const arrayConcat = superHero.concat('Iris')//["Wolverine", "Spider-Man", "Thor", "Iron Man", "Hulk", "Captain America", "Daredevil", "Punisher", " Deadpool", "Silver Surfer", " Gambit", "Cyclops", "Iris"]```
whit concat method we may add items to the end of an array, items can be a comma-separated list of items, arrays, or a combination of the two.
```const prepend = 'Iris';
const arrayPrepend = [prepend];
const concatBeginnig = arrayPrepend.concat(superHero); //["Iris", "Wolverine", "Spider-Man", "Thor", "Iron Man", "Hulk", "Captain America", "Daredevil", "Punisher", " Deadpool", "Silver Surfer", " Gambit", "Cyclops"] ```
 we  use concat also for adding item to the biginning of an array like above.
#### the method slice() is super cool, allows us todo alot of stuff:
```const array = [1,2,3,4,5];
const newArray = array.slice(1, array.length) // [2,3,4,5];```
in this case we removing an item from the front in fact slice() method accept two arguments inside it , the startIndex (1) and the endIndex(array.length), if we don't pass any argument we make a copy of our array in our example we may achive the same result also just passing oone argument:
```const array = [1,2,3,4,5];
const newArray = array.slice(1) //[2, 3, 4, 5]```
#### the startIndex is always non included viceversa the endIndex is it
 ```const array = ['a','b','c','d','e'];
const newArray = array.slice(1,5) // ["b", "c", "d", "e"]```
like in the example above the  --startIndex(1)//'a'--  is not included but the  --endIndex(5)'e'--  is included.
```const array = ['a','b','c','d','e'];
const newArray = array.slice(0, array.length -1) //["a", "b", "c", "d"]```
like this we may remove 'e' the  last item of our array.
#### the negative indexes can only used in slice I.E. (array.length -1).
we may also remove items from the middle:
```const array = ['a','b','c','d','e', 'f'];
const firstPart = array.slice(0, 2);
const secondPart = array.slice(4);
const removeitemsFromTheMiddle = firstPart.concat(secondPart) //["a", "b", "e", "f"]```

which is the same thing as writing:
```const array = ['a','b','c','d','e', 'f'];
const removeitemsFromTheMiddleTwo = [].concat(array.slice(0, 2), array.slice(4)); //["a", "b", "e", "f"]```
or add items in the middle:
```const array = ['a','b','c','d','e', 'f'];
const firstPart = array.slice(0, 3); // ['a','b','c']
const secondPart = array.slice(3); // ['d','e', 'f'] we don't take the first item 😉
const middlePart = ['Kamy', 'Iris'];
const newPartInTheMiddle = [].concat(firstPart, middlePart, secondPart); // ["a", "b", "c", "Kamy", "Iris", "d", "e", "f"]```
which is the same thing as writing:
```const array = ['a','b','c','d','e', 'f'];
const middlePart = ['Kamy', 'Iris'];
const newPartInTheMiddle = [].concat(array.slice(0,3), ['Kamy', 'Íris'], array.slice(3)); //["a", "b", "c", "Kamy", "Íris", "d", "e", "f"] ```
#### push, pop, shift, unshift and splice are method that mutate array and this is not usefull is more better use slice and concat over this methods.