Reference datatypes in JavaScript

Do you know how crucial it is to understand reference datatypes perfectly in JavaScript? You can imagine its importance when I say that 90% of the time in development, we use these data types in one form or another. These data types are the pillars of development. So, tighten your seat belts, we're diving into one of the most vital concepts of JavaScript. From here, our real development journey begins.

Introduction

We know that reference data types are dynamic in nature and do not have a fixed size in memory. Before delving into each specific data type, let's provide a brief overview of all the data types classified as reference data types:

The following data types are classified as reference data types:

• Objects

• Arrays

• Functions

Objects

Objects are one of the most important data types as we'll be using them everywhere we have to deal with data. Objects store the data in the form of key-value pairs where keys are strings (or Symbols) and values can be of any data type, including other objects, functions, arrays, etc. Objects in JavaScript play a crucial role in every program a developer writes and are used in both client-side and server-side programming.

Let's consider an example where we create a 'person' object with three properties named 'name', 'age' and 'country'.

Example:

index.js

1

2let person = { 3 name: "Mayank", 4 age: 21, 5 country: "India" 6}; 7 8console.log(person.name); // Mayank 9console.log(person.age); // 21 10console.log(person.city); // India

We can access the properties of an object using:

* Dot notation

* Bracket Notation


**Accessing the properties**:

index.js

```cpp
1

2let person = { 3 name: "Mayank", 4 age: 21, 5 country: "India" 6}; 7 8//Dot Notation 9console.log(person.name); // Mayank 10 11//Bracket Notation 12console.log(person['name']); // Mayank

We can also dynamically *add*, *modify* and *delete* the properties in the objects.

**Changing properties of object**:

index.js

```cpp
1

2let person = { 3 name: "Mayank", 4 age: 21, 5 country: "India" 6}; 7 8// Adding a property 9person.isSleeping = false; 10 11// Modifying a property 12person.age = 22; 13 14// Deleting a property 15delete person.country; 16 17console.log(person); 18 19// Output : { name: 'Mayank', age: 22, isSleeping: false }

Objects can also contain functions as properties. These functions are often referred to as methods.

**Functions in objects**:

index.js

```cpp
1

2let person = { 3 name: "Mayank", 4 age: 21, 5 country : "India", 6 message: function() { 7 console.log("Hello, my name is " + this.name); 8 } 9}; 10 11person.message(); 12 13// Output: Hello, my name is John

## **Arrays**

Arrays in JavaScript is a collection of items of same datatype or different datatype at contiguous memory locations. Arrays are special types of objects that store collections of data. They can hold various data types, including numbers, strings, objects, functions, and even other arrays. In JavaScript, arrays are commonly used to store lists of items, such as a list of names, numbers, or any other related data.

**Example**:

index.js

```cpp
1

2let fruits = ["Apple", "Banana", "Orange"]; 3 4let primeNumbers = [3, 5, 7, 11, 13]; 5 6let data = [true, 'ab', "great", 34];

In JavaScript arrays are zero-indexed, meaning the first element is at index 0, the second element at index 1, and so on.

**Accessing the items in an array**:

index.js

```cpp
1

2let fruits = ["Apple", "Banana", "Orange"]; 3 4let fruit2 = fruits[1]; 5console.log(fruit2); // Banana 6 7let primeNumbers = [2, 3, 5, 7, 11, 13]; 8 9let firstPrimeNum = primeNumbers[0]; 10console.log(firstPrimeNum); // 2 11 12let data = [true, 'ab', "great", 34]; 13 14let data3 = data[2]; 15console.log(data3); // great

We can also modify our array, we can add and delete items in our array using:

* push : Adds an item to the end of the array.

* unshift : Adds an item to the beginning of the array.

* pop : Removes the last item from the array.

* shift : Removes the first item from the array.


**Adding items in an array**:

index.js

```cpp
1

2let fruits = ["Apple", "Banana", "Orange"]; 3 4fruits.push("Kiwi"); 5 6fruits.unshift("Grapes"); 7 8console.log(fruits); 9 10// Output : [ 'Grapes', 'Apple', 'Banana', 'Orange', 'Kiwi' ]

**Deleting items in an array**:

index.js

```cpp
1

2let fruits = ["Apple", "Banana", "Orange"]; 3 4fruits.pop(); 5 6fruits.shift(); 7 8console.log(fruits); 9 10// Output : [ 'Banana' ]

We have more methods that can be applied to arrays to modify them, such as **slice()**, **splice()**, **includes()**, **indexOf()**, etc. We will cover all of these in detail in the upcoming article on arrays, so don't worry. This article is just a brief overview of reference datatypes in JavaScript.

We'll be learning how to combine arrays, Iterate over arrays, array of objects, in the next article of Array.

## **Functions**

In JavaScript, **functions** are a fundamental building block of the language, functions are the reusable piece of code that can be called and executed at any point in our program. Functions can be defined using the *function* keyword followed by a name, a list of parameters (optional), and a block of code enclosed in curly braces {}.

**Initializing a function**:

index.js

```cpp
1

2function sum(x, y){ 3 let result = x + y; 4 return result; 5} 6 7let output = sum(3, 8); 8console.log(output); // 11

In the above example, *sum* is a function that takes two parameters **x** & **y** and returns the sum of them. *Output* stores the return value of the function sum which is then printed on the console.

### **Anonymous functions in JavaScript**

JavaScript also supports anonymous functions, which are functions without a name. They are assigned to variables or passed as arguments to other functions. They are particularly useful in situations where a function is needed temporarily or as a callback function.

**Assignment to a variable**:

index.js

```cpp
1

2var add = function(x, y) { 3 return x + y; 4};

In the above example, *add* is a variable that holds an anonymous function that takes two parameters **x** and **y** and returns their *sum*.

**Anonymous functions as callback functions**:

index.js

```cpp
1

2setTimeout(function() { 3 console.log('This is an anonymous function called after 1 second.'); 4}, 1000); ```

If you are not able to figure out what is setTimeout and all, just wait have patience, we'll go through everything, not here but in the upcoming articles of functions exclusively. We'll be exploring each and every corner of functions including arrow functions, factory functions, constructor functions, etc.

Functions in JavaScript are not merely tools, they are the backbone of the language, offering a gateway to unlimited possibilities. While our discussion has scratched the surface, the vast ocean of functions awaits deeper exploration.

From simple greetings to complex calculations, functions empower developers to encapsulate logic, enhance reusability, and promote code organization. However, our journey has only begun, for the realm of functions extends far beyond what meets the eye.

Stay tuned for the next installment as we plunge into the depths of function mastery. The adventure has just begun!

Conclusion

That's it for this article. It was just an overview of reference data types that I wanted to share before delving deeper into each data type and exploring everything about them individually. Don't worry, just keep learning, and you won't feel lost anywhere. Have faith in your learning journey. The upcoming articles will provide everything you need, so don't miss them. See you there!