TechNik
Objects and Arrays

Objects and Arrays

Nikita Agrawal's photo
Nikita Agrawal
·

6 min read

Arrays

Sometimes we want to represent numbers as a sequence, as, 3, 4, 10, 11. We can use strings but it will awkward to extract them and convert them back to numbers.
Fortunately, JavaScript has arrays that store a list of values. They are written as a list of values between square brackets separated by commas.
[3, 4, 10, 11]

To access any value in the array we have to put an index in the square brackets and remember just like any other technology it also starts with 0.

let arr = [3, 4, 10, 11];
console.log(arr[0]);             //3

arr[0] will give the first element of the array, arr[1] will give second, and so on. There is a method "includes" which checks whether a particular element belongs to the array or not.

console.log(arr.includes(14));              //false

Properties

As you have seen in the previous example something like inputString.length or Math.max. These are the expressions to access a property of some value.

There are two ways to access the properties:
One with dot notation and the second using square brackets. 

let obj = {
   name: "Nikita",
   gender: "female"
}
console.log(obj.name);                         //Nikita
console.log(obj["gender"]);                 //female

Most of the time, when we already know which property to access we use dot notation. As in the case of length property.

value[x] evaluates the value of x and uses the result as the property name. But sometimes we don't know the property in advance. In that case, a square bracket works best as we can put a number as an index in it as we do in an array.

The elements in the array are stored as the array's properties using numbers. But we can't use dot notation. So, we use square brackets for that.

Methods

String and array values contain the number of properties that hold function values.

let name = "nikita";
console.log(name.toUpperCase());

Every string has the above property. As you can guess by the name, it converts string into upper case. Properties that contain functions are generally called methods.

let seq = [1, 2, 3];

seq.push(4);
console.log(seq);                   //[1, 2, 3, 4]

seq.pop();
console.log(seq);                 //[1, 2, 3]

In the above code snippet, push adds the value at the end of the array and pop removes the value from the end. This is similar to a data structure called stack which works on LIFO[Last In First Out) basis.

Objects

One drawback of using arrays that it stores only one type of value at a time. But sometimes, we need to mix the types like this 👇

let day1={
    household: false,
    events: ["study", "eat", "sleep"]
};

As we can see it has different types. In these cases, we can use objects. As objects provide flexibility of arbitrary collection.

To create objects, we use curly braces. In it, we have many properties separated by commas. Each property has a name followed by a colon and its value.

It is possible to assign a value to a property using = operator. It will replace the value if the value already exists or create one if not.
day1.household = true;

delete is a unary operator that deletes the given object's property. in is also a unary operator that checks whether the object contains a certain property or not.

let anObject = {
   left: 1,
   right: 2
}

delete object.left;
console.log("left" in anObject);            //false

Object.keys tells the name of the properties which a particular object has.

Object.keys(anObject);
-> Output: ["left", "right"]

Object.assign copies all properties from one object into another.

let obj2 = {
    top: 3,
    down: 4
}

Object.assign(anObject, obj2);
console.log(anObject);

-> Output: {left: 1, right: 2, up: 3, down: 4}

Since arrays store a sequence of things. It can store objects and called an array of objects.

let journal = [
    {events: ["work", "pizza",
            "running", "television"],
     household: false},
    {events: ["work", "ice cream", "cauliflower",
            "lasagna", "brushed teeth"],
   household: true}
 ];

Mutability

In the previous articles, we learned about the different types of values as strings, boolean, and numbers which are immutable in nature. Immutable means we can't change their values but you can derive new values.
Let's say you have "cat" string then you can't change it into "rat" by just changing the first letter. But in the case of objects, we can change the properties by changing their values.
When we have two numbers, they will be precisely the same. But in the case of objects, there is a difference between having two references to the same object and having two objects with the same properties.

let object1 = {value: 10};
let object2 = object1;
let object3 = {value: 10};

console.log(object1 == object2);
-> true
console.log(object1 == object3);
-> false

Bindings can be changed or remain constant. Though we can't change the values of string, numbers, and booleans we can use bindings to keep track.
Also, a const binding may not change by itself, but you can change the contents of an object.

Array Loops

You can do anything with the individual elements of an array. Suppose, you want to print every element in the console.

let arr=[1, 2, 3, 4];
for(let i=0; i<arr.length; i=i+1)
{
     console.log(arr[i]);
}

Since the array starts with index 0 so we are starting loop from 0 and going till the end. Then we are printing elements using the bracket notation for accessing properties.
There is a more convenient and simpler way of writing this loop.

let arr=[1, 2, 3, 4];
for(let i of arr)
{
     console.log(arr[i]);
}

More Methods in Arrays

Just like push() and pop() remove elements from the end of an array. unshift() and shift() add and remove elements from the starting respectively.

let arr=[1, 2, 3, 4];

arr.unshift(0);
console.log(arr);            //[0, 1, 2, 3, 4]

arr.shift();
console.log(arr);           //[1, 2, 3, 4]

To search for the index of a value in array, you can use indexOf() and lastIndexOf(). indexOf() starts searching the element from the starting and lastIndexOf() from the ending of the array.
If the element found it returns its index otherwise returns -1. 

let arr = [1, 2, 3, 4];
console.log(arr.indexOf(2));
-> 1
console.log(arr.lastIndexOf(2));
-> 1
console.log(arr.indexOf(5));
-> -1

Both indexOf() and lastIndexOf() takes an optional argument of where to start searching in the array.

let arr= [1, 2, 3, 4];
console.log(arr.indexOf(2, 2));
-> -1

slice() is used to take the subarray out from an array. It takes starting(inclusive) and ending(exclusive) indices as parameters return the elements between them.

let array= [1, 2, 3, 4, 5, 6, 7];
console.log(array.slice(1, 4));
-> [2, 3, 4]

concat() method joins the arrays together to create a new array.

let arr1=[1, 2, 3, 4, 5];
let arr2=[6, 7, 8, 9, 10];
console.log(arr1.concat(arr2));
-> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

So, this was all about Objects and Arrays.

Thanks for reading!

JavaScriptlearninglearn codingHashnodeProgramming Blogs