JavaScript Arrays, a quick look with code snippets

JavaScript Arrays
Demonstrate some of the capabilities of JavaScript arrays with code snippets

1. Declare an empty array
> var myArray = [];
undefined
> myArray
[]
2. Initialize an array with specified values
> var myArray = [1,2,3]
undefined
> myArray
[ 1, 2, 3 ]

3. JavaScript array can contain values of mixed types.

> var myArray = [1,”The string two”, {“key”:”value”}, undefined, null, false, [1,2,3]];
undefined
> myArray
[ 1,
 ‘The string two’,
 { key: ‘value’ },
 undefined,
 null,
 false,
 [ 1, 2, 3 ] ]

4. Arrays can be initialized using variables that have already been initialized.

> var myVariable = “Sample String”;
undefined
> var myArray = [myVariable];
undefined
> myArray
[ ‘Sample String’ ]

5. Retrieve value at an index using the subscript notation.

> var myArray = [1,2,34,4];
undefined
> myArray[2];
34

6. Retrieve value at an index by using an expression that returns the index.
In this example, using an anonymous function call to return the value of the index as 2.

> var myArray = [1,2,34,4];
undefined
> myArray[function(){return 1+1;}()]
34

In Java, once you have defined an array of particular size, if you try to assign a 
 value at an index higher than the declared size, compiler throws exception.
In JavaScript, it lets you add elements at higher indices and in that sense,

7. Array is not a fixed data structure in JavaScript

> var myArray = [1,2,3];
undefined
> myArray[3]=4;
4
> myArray
[ 1, 2, 3, 4 ]
> myArray[4]=5;
5
> myArray
[ 1, 2, 3, 4, 5 ]

8. Length:Indicates the number of elements in the array.

> var myArray = [1,2,3,4,5];
undefined
> myArray.length
5

9. Index:Filling in holes with undefined.
When an index higher than the current length of the array is chosen,
 then all the indices between the current length and higher index is 
 supplied with undefined.

> var myArray = [1,2];
undefined
> myArray[9] = 10;
10
> myArray
[ 1, 2, , , , , , , , 10 ]
> myArray.length
10
> myArray[4]
undefined

10. length:Set to a lower value to delete all elements with indices greater than the length.

> myArray
[ 1, 2, , , , , , , , 10 ]
> myArray.length
10
> myArray[4]
undefined
> myArray.length = 4
4
> myArray
[ 1, 2, , ]

So far, we have pushed elements into arrays using indices.
We may just need to push one more element into the array regardless of how many elements are there currently.

11. Use the push method for the purpose.

> var myArray = [1,2]
undefined
> myArray.push(3);
3
> myArray
[ 1, 2, 3 ]

12. To pop the last element from the array, use the pop() method.

> myArray
[ 1, 2 ]
> var poppedElement = myArray.pop();
undefined
> poppedElement;
2
> myArray
[ 1 ]

13. To delete an element from an array, the delete method can be used.
However, this causes the said index to become undefined and does not cause the latter elements to fill into the place, 
 effectively creating holes in the array.

> var myArray = [1,2,3]
undefined
> delete myArray[1];
true
> myArray
[ 1, , 3 ]

14. Delete element using the splice method. 
Splice takes two arguments, first argument is the index from which to start deleting
 and the second argument is the number of elements to delete from that index.

> var myArray = [1,2,3,4,5];
undefined
> myArray
[ 1, 2, 3, 4, 5 ]
> myArray.splice(2,1);
[ 3 ]
> myArray
[ 1, 2, 4, 5 ]

15. Using splice method to delete all elements from an index onward.
The deleted section is the result of the splice method and the remaining is what is left of the array.

> var myArray = [1,2,3,4,5];
undefined
> myArray.splice(2);
[ 3, 4, 5 ]
> myArray
[ 1, 2 ]

16. To check if a given variable is an array or not, check if the variable is an object
 and also check if the constructor for the object is Array.

> var myArray = [1,2,3,4,5];
undefined
> typeof myArray === “object” && myArray.constructor === Array
true

17. To combine two arrays, concat method can be used.

> var myArray = [1,2,3,4,5];
undefined
> var mySecondArray = [5,6,7,8];
undefined
> var combinedArray = myFirstArray.concat(mySecondArray);
undefined
> combinedArray
[ 1, 2, 3, 4, 5, 6, 7, 8 ]

18. concat method keeps the integrity of each of the arrays being combined.
In this instance, each array had arrays within them. Those inner arrays are 
 kept intact in the combined array.

> var myFirstArray = [1,[2,3],[4,5]];
undefined
> var mySecondArray = [[6,7],[8,9],10];
undefined
> var combinedArray = myFirstArray.concat(mySecondArray);
undefined
> combinedArray;
[ 1, [ 2, 3 ], [ 4, 5 ], [ 6, 7 ], [ 8, 9 ], 10 ]

19. Demonstrate that concat method can be used across any number of arrays.

> var arrayOne = [1,2];
undefined
> var arrayTwo = [3,4];
undefined
> var arrayThree = [5,6];
undefined
> arrayOne.concat(arrayTwo).concat(arrayThree);
[ 1, 2, 3, 4, 5, 6 ]

20. To convert an array to a String, use + operator with “”.

> var arrayOne = [1,2,3,4];
undefined
> arrayOne + “”;
‘1,2,3,4’

21. When arrays are converted to Strings, inner nested arrays break structure to just become a string of data.

> var arrayOne = [1,[2,3],4];
undefined
> arrayOne+””;
‘1,2,3,4’

22. every function on an array returns true if every element in the array satisfies the function that is passed as argument to the every function.

> var arrayOne = [1,2,3,4,5]
undefined
> var greaterThanZero = function (number){
… return number > 0;
… };
undefined
> var greaterThanThree = function (number) {
… return number > 3;
… }
undefined
> arrayOne.every(greaterThanZero);
true
> arrayOne.every(greaterThanThree);
false

23. some function on an array returns true there is atleast one element for which the predicate passed as argument to the “some” function evaluates to true.

> var arrayOne = [1,2,3,4,5];
undefined
> var greaterThanFour = function ( number ) {
… return number > 4;
… }
undefined
> arrayOne.some(greaterThanFour);
true
> arrayOne.every(greaterThanFour);
false

Notice how as the function names should indicate, every function returned false where as some function returned true.

24. Find function returns the first element in the array that satisfies the predicate function that is passed in as the argument to the find function.

> var arrayOne = [4,1,3,5,6,2];
undefined
> var greaterThanFour = function ( number ) {
… return number > 4 ;
… };
undefined
> arrayOne.find(greaterThanFour);
5

25. indexOf function as conveyed by the name indicates the first index at which the specified argument was found in the array.

> arrayOne
[ 4, 1, 3, 5, 6, 2 ]
> arrayOne.indexOf(5);
3

26. lastIndexOf function works exactly the same as indexOf except that it searches right to left where as indexOf function checks left to right.

> var arrayOne = [1,2,3,2,1];
undefined
> arrayOne.indexOf(1);
0
> arrayOne.lastIndexOf(1);
4

27. Reduce and reduceRight are two methodologies to perform aggregate operations on the elements in an array.
The argument to the reduce functions is a function that takes two arguments indicating how an element in the array and the element next to it needs to interact.

> var arrayOne = [ 1,2,3,4,5];
undefined
> var minus = function (numberOne, numberTwo){
… return numberOne — numberTwo;
… };
undefined
> arrayOne.reduceRight(minus);
-5
> arrayOne.reduce(minus);
-13

28. slice method in an array to return a portion of the array without changing the original array.

> var arrayOne = [1,2,3,4,5];
undefined
> var arraySlice = arrayOne.slice(2);
undefined
> arrayOne
[ 1, 2, 3, 4, 5 ]
> arraySlice
[ 3, 4, 5 ]

29. slice method takes as the first argument the index from which to start slicing the ekenebts 
 and as the second argument the number of elements being sliced.
> arrayOne
[ 1, 2, 3, 4, 5 ]
> var arraySlice = arrayOne.slice(0,2);
undefined
> arraySlice;
[ 1, 2 ]

30. copywithin method to copy the number of elements specified as argument to the beginning of the method
 and truncating as many at the end leaving the array with the same length as original 
> var arrayOne = [1,2,3,4,5,6];
undefined
> arrayOne.copyWithin(3);
[ 1, 2, 3, 1, 2, 3 ]
> arrayOne
[ 1, 2, 3, 1, 2, 3 ]

31. filter method in the Array takes in a predicate(function that returns boolean) and all values
 that satisfy the predicate are returned by the method.
> var myArray = [1,2,3,4,5];
undefined
> var isGreaterThanThree = function ( number ) {
… return number > 3;
… };
undefined
> var filteredArray = myArray.filter(isGreaterThanThree);
undefined
> filteredArray
[ 4, 5 ]
> myArray
[ 1, 2, 3, 4, 5 ]

32. shift method takes elements out of the front of the queue and returns the element at the 
 end of queue(array) leaving the array without that particular element.
> var myArray = [1,2,3,4,5,6,7,8];
undefined
> var elementFromQueue = myArray.shift();
undefined
> elementFromQueue;
1
> myArray;
[ 2, 3, 4, 5, 6, 7, 8 ]

33. map function takes in a function as argument that is applied to each of the elements of the array 
 and new array is returned with each element replaced with the result of execution of the function
 passed to the map function.
> var myArray = [1,2,3,4,5];
undefined
> var double = function ( number ) {
… return 2 * number ;
… };
undefined
> var doubledArray = myArray.map(double);
undefined
> doubledArray;
[ 2, 4, 6, 8, 10 ]
> myArray;
[ 1, 2, 3, 4, 5 ]

34. reverse an array using the reverse function.
> myArray
[ 1, 2, 3, 4, 5 ]
> myArray.reverse();
[ 5, 4, 3, 2, 1 ]

35. sort method to sort an array based on the function passed to the sort method.
> var myArray = [1,4,2,3,5];
undefined
> var integerCompare = function ( firstNumber , secondNumber ) {
… return firstNumber — secondNumber;
… };
undefined
> var sortedArray = myArray.sort(integerCompare);
undefined
> sortedArray
[ 1, 2, 3, 4, 5 ]

36. In JavaScript, it is possible to add your own methods to Array in addition to the 
 methods that are already present in JavaScript for Array. Demonstrated below.
> Array.prototype.isEmpty = function(){};
[Function]
> Array.prototype.isEmpty = function(){
… if(this.length===0){
….. return true;
….. } else {
….. return false;
….. }
… };
[Function]
> var myArray = [];
undefined
> var isMyArrayEmpty = myArray.isEmpty();
undefined
> isMyArrayEmpty
true
> var myArray = [1,2,3,4];
undefined
> myArray.isEmpty();
false

If you liked this, please click the💚 below so other people will see this here on Medium