Array in Javascript for Beginner

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.