Spread Operator in JavaScript
Before technical part of spread operator we shall understand the spread operator by non technically
Imagine you have a bag of candies 🍬.
Inside the bag there are 3 candies:
[🍬, 🍬, 🍬]
Now you want to pour all the candies out on the table.
When you open the bag and spread the candies on the table, that is like the Spread Operator (...) in JavaScript.
Simple Example
You have a box:
box1 = [1, 2, 3]
Now you open the box and spread everything into another box
let box1 = [1,2,3];
let box2 = [...box1];
Now box2 also has the same toys.
box2 = [1,2,3]
Simple Meaning
Spread Operator (...) = Open a box and spread everything inside it.
Now lets deep dive into the technical part of spread operator
What is Spread Operator?
The Spread Operator (...) is used to expand (spread) the elements of an iterable (like an array or string) or the properties of an object into individual elements.
It was introduced in ES6 (ECMAScript 2015) and is commonly used for copying, merging, and passing values.
Basic Idea of Spread Operator
The spread operator takes a collection and spreads its values one by one
let arr = [10, 20, 30];
console.log(...arr);
Output
10 20 30
Explanation:
arr is an array.
...arr spreads the values inside the array
Instead of:
[10,20,30]
It Becomes
10,20,30
Spread Operator with Arrays
Copying an Array
Normally if you copy arrays like this
let a = [1,2,3];
let b = a;
Both variables point to the same memory reference
So if you change b, a will also change
Using Spread
let a = [1,2,3];
let b = [...a];
b.push(4);
console.log(a);
console.log(b);
Output
[1,2,3]
[1,2,3,4]
Explanation:
...a creates a new copy of the array
This is called Shallow Copy.
Merging Arrays
Spread operator is commonly used to combine multiple arrays
Example
let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
Output
[1,2,3,4]
Here:
...arr1 spreads 1,2
...arr2 spreads 3,4
Final array becomes [1,2,3,4]
Adding Elements While Merging
You can also add new values.
let arr1 = [2,3];
let arr2 = [1, ...arr1, 4];
console.log(arr2);
Output
[1,2,3,4]
Spread operator does not have to be at the start.
It can be used anywhere in the array.
Spread Operator with Objects
Spread operator can also copy or merge objects
Example
let user = {name:"Hari"};
let details = {age:21};
let person = {...user, ...details};
console.log(person);
Output
Explanation:
...user spreads object properties
...details spreads other properties
Result is a merged object
Spread Operator with Nested Arrays
Spread Operator with Nested Arrays
Example
let a = [[1,2],[3,4]];
let b = [...a];
b[0][0] = 100;
console.log(a);
Output
[[100,2],[3,4]]
Explanation
- The inner arrays still share memory
Spread operator copies only the first level
Constructor Function In Javascript
before going into the technical part of constructor function lets all first understand it non technically
Imagine you have a toy machine 🏭.
This machine can make many toy cars 🚗.
You just press a button and tell the machine:
Color
Name
Then the machine creates a new toy car.
The Toy Machine = Constructor Function
In JavaScript, a constructor function is like that toy-making machine.
It helps us create many similar objects.
Now lets understand the constructor function concept technically
What is mean by constructor function in javascript?
A Constructor Function in JavaScript is a special type of function used to create and initialize objects. It acts as a blueprint (template) for creating multiple objects with similar properties and methods.
Constructor functions were the main way of creating objects before ES6 classes were introduced.
In Another words it can say as
A constructor function is simply a regular function that is used with the new keyword to create objects.
Example
function Person(name, age) {
this.name = name;
this.age = age;
}
Here:
Person → constructor function
name, age → parameters
this → refers to the new object being created
Creating Objects Using Constructor
To create an object we use the new keyword
let user1 = new Person("Hari", 21);
let user2 = new Person("Surya", 25);
console.log(user1);
console.log(user2);
Output
{ name: "Hari", age: 21 }
{ name: "Surya", age: 25 }
Here we created two objects using the same constructor function.
What Happens Internally When new is Used
When we write:
let user = new Person("Hari",21);
JavaScript performs 4 important steps internally.
Step 1 — Create a new empty object
{}
Step 2 — Set this to the new object
Inside the function:
this → {}
Step 3 — Add properties to the object
this.name = "Hari"
this.age = 21
Object becomes:
{ name:"Hari", age:21 }
Step 4 — Return the object
JavaScript automatically returns the new object.
Final Result
user = { name:"Hari", age:21 }
Why this is Used in Constructor Functions
this refers to the object that is being created.
Example
function Car(brand) {
this.brand = brand;
}
let car1 = new Car("Toyota");
let car2 = new Car("BMW");
Objects Created
car1 → { brand: "Toyota" }
car2 → { brand: "BMW" }
Here this.brand stores the value in each new object.
Problem if new is Not Used
Example:
function Person(name) {
this.name = name;
}
let user = Person("Hari");
console.log(user);
Output
undefined
Because:
this refers to the global object, not a new object.
Constructor Naming Convention
Constructor functions usually start with a capital letter.
Example:
Person
User
Car
Student
Employee
This is not mandatory but is a common JavaScript convention.
Using Prototype with Constructor Functions
To avoid copying methods for every object, we use prototype.
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log("Hello " + this.name);
};
let user1 = new Person("Hari");
let user2 = new Person("Surya");
user1.sayHello();
user2.sayHello();
Now:
sayHello exists only once in memory
All objects share it
This improves memory efficiency.
Constructor Function Returning Values
Normally constructors return the object automatically.
But if you return another object manually:
function Test() {
this.name = "Hari";
return { age: 21 };
}
let obj = new Test();
console.log(obj);
Output:
{ age: 21 }
The returned object replaces the default object.
Advantages of Constructor Functions
Create multiple objects easily
Reusable object structure
Works with prototypes
Foundation for JavaScript’s object-oriented programming
Build In Objects In Javascript
before going into this topic we shall discuss this topic non technically
Imagine you have a magic calculator box 🧮✨.
This magic box can help you do many math things like:
finding the biggest number
finding the smallest number
rounding numbers
giving random numbers
finding square roots
In JavaScript, this magic box is called the Math Object.
Think Like This
Math = Magic Math Box
Whenever you need help with math, you ask the box.
Example-Biggest Number
You ask the box:
Math.max(5, 10, 2)
The Box Says
10
Because 10 is the biggest.
Now lets deep dive in by technically
What is Mean By Json Object In Javascript
JSON stands for JavaScript Object Notation.
It is a lightweight data format used to store and exchange data between systems.
Even though it comes from JavaScript, JSON is now language-independent, meaning it can be used with:
JavaScript
Python
Java
PHP
C#
Why JSON Exists
Before JSON, systems used formats like XML to transfer data.
Example XML:
<user>
<name>Hari</name>
<age>21</age>
</user>
This format is long and complex.
JSON solved this by being shorter and easier to read.
JSON Version:
{
"name": "Hari",
"age": 21
}
JSON.stringify()
JSON.stringify() converts a JavaScript object into a JSON string.
Example:
let user = {
name: "Hari",
age: 21
};
let jsonData = JSON.stringify(user);
console.log(jsonData);
Output:
{"name":"Hari","age":21}
Conversion
JavaScript Object → JSON String
JSON.parse()
JSON.parse() converts a JSON string into a JavaScript object.
Example:
let jsonData = '{"name":"Hari","age":21}';
let user = JSON.parse(jsonData);
console.log(user.name);
Output:
Hari
Conversion:
JSON String → JavaScript Object
Math Object In Javascript.
The Math object in JavaScript is a built-in global object that provides mathematical constants and functions for performing calculations.
Important point:
The Math object is not a constructor, so we do not use new Math().
Why the Math Object Exists
Programming often requires mathematical operations like:
1.rounding numbers
2.finding maximum or minimum values
3.generating random numbers
4.trigonometric calculations
5.powers and square roots
Instead of writing these algorithms manually, JavaScript provides the Math object with built-in methods.
Math Methods
Math.max()
Returns the largest value
Math.max(10, 50, 20)
Output
50
Internally it compares numbers and returns the maximum.
Math.round()
Rounds a number to the nearest integer.
Math.round(4.6)
Output
5
Rules:
0.5 or greater → round up
less than 0.5 → round down
Example:
Math.round(4.4) → 4
Math.round(4.5) → 5
Math.floor()
Rounds down to the nearest integer.
Math.floor(4.9)
Output
4
Example:
Math.floor(8.99) → 8
Math.floor(3.1) → 3
Math.trunc()
Removes the decimal part.
Math.trunc(5.9)
Output:
5
Math.sqrt()
Calculates square root.
Math.sqrt(625)
Output
25
Math.crbt()
Calculates Cube root.
Math.cbrt(27)
Output
3
Top comments (0)