Here is Your Complete Guide about JS Array : part -1

Here is Your Complete Guide about JS Array : part -1

Arrays are most important part of Javascript. So, I have created this series to cover all the array methods at a single place. Lets begin!

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operation

Array creation

using Array() Constructor

The Array() constructor is used to create Array objects.

const arr1 = Array(5);
const arr2 =  new Array(5);
console.log(arr1);
console.log(arr2);

output:-

Array(5) [ <5 empty slots> ]

Array() can be called with or without new. Both create a new Array instance.

using literal notation

const arr = ['krishna','saini'];

So Krishna, you are declaring the array instances with const keyword. It means, these arrays are not mutable, right? Ummmm, No! Lets understand it...

const arr1 = new Array([1,2,3]);
let arr2 = new Array(1,2,3);
arr1[1] = 5;
arr2[1]=5;
console.log(arr1);
console.log(arr2);

what do you think will happen on logging these variables on console. Will they be muted or throw an error? The right answer is they both get mutate. output:-

[1,5,3]
[1,5,3]

why is that? This is because arrays are Objects in JS and each object have reference value. It means after an object declaration, an identifier is created in call stack and this piece of memory in the call stack has a reference to the piece of memory in the heap which holds value of our object. That is why objects are called as reference type. All this happens because objects might be too large to stored in the stack and hence stored in heap which is like an almost unlimited memory pool.

In JS, only arrays, objects and functions have reference value.

Now coming back to the question of declaring objects with const or let. The variable arr1 can still be manipulated even it is declared with const keyword without any problem because we are not changing the value in the call stack memory for the arr1 identifier. All we did was changed the value in the heap. So it doesn't matter whether we declare objects with const or let. As a good practice, declare them with const as we never want to change the memory address of the identifier.

only primitive value variable declared with const are immutable. The same reference value concept is applicable when we copy one array to another.

Array methods

there are two type of methods- one is static method and another is instance method. Before going deep into these methods, lets understand the difference between these two methods.

The answer of the difference Between Static and Instance Method is not for Javascript, but OOP in general. Static methods are applied on class directly while instance method are applied on the instance of the class.

Read out my other articles on classes in JS for more indepth understanding of these concepts. For this article, lets focus on array methods now.

Array Instance method

These methods are applicable on each instance of array whether it is created using Array() or literal notation. So Krishna, how many Instance method we can for JS array? Let's find out by logging an array on console. I would strongly recommend you to do that too.

const arr = [1,2,3];
console.log(arr);

output:-

Array(3) [ 1, 2, 3 ]

if you look closely, you will see :Array[] written below above output. On clicking it, you will get following list -

Array(3) [ 1, 2, 3 ]
<prototype>: Array []
​​at: function at()
​​concat: function concat()
​​constructor: function Array()
​​copyWithin: function copyWithin()
​​entries: function entries()
​​every: function every()
​​fill: function fill()
​​filter: function filter()
​​find: function find()
​​findIndex: function findIndex()
​​findLast: function findLast()
​​findLastIndex: function findLastIndex()
​​flat: function flat()
​​flatMap: function flatMap()
​​forEach: function forEach()
​​includes: function includes()
​​indexOf: function indexOf()
​​join: function join()
​​keys: function keys()
​​lastIndexOf: function lastIndexOf()
​​length: 0
​​map: function map()
​​pop: function pop()
​​push: function push()
​​reduce: function reduce()
​​reduceRight: function reduceRight()
​​reverse: function reverse()
​​shift: function shift()
​​slice: function slice()
​​some: function some()
​​sort: function sort()
​​splice: function splice()
​​toLocaleString: function toLocaleString()
​​toString: function toString()
​​unshift: function unshift()
​​values: function values()
​​Symbol(Symbol.iterator): function values()
​​Symbol(Symbol.unscopables): Object { at: true, copyWithin: true, entries: true, … }

we may not use all these methods in day to day life but this is the exhaustive list of all instance method of array.

if you search on google let say about map method, you will instead find results for Array.prototype.map() , now you may link why that is so.

Array Static Method

these are handful of methods.

Array.from()

The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object. What is an array-like object?

Since everything in JavaScript is an object. Array-like objects are objects that have an index to access elements and have a positive length property.

Array.from('foo')  // output:- ['f','o','o']

Array.of()

The Array.of() method creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.

Array.isArray()

isArray method checks if a given argument is an array or not. If it is an array returns true else false.

Read more about other part of this series:-

  1. krishnasaini.hashnode.dev/here-is-your-comp..
  2. krishnasaini.hashnode.dev/here-is-your-comp..
  3. krishnasaini.hashnode.dev/here-is-your-comp..
  4. krishnasaini.hashnode.dev/here-is-your-comp..