DEV Community: Yogesh Pant

Shallow Copy VS Deep Copy In Java Script : Explained in easiest way

Yogesh Pant — Fri, 26 Jun 2026 10:19:51 +0000

What is copying and how does it Work in JS?

In JavaScript, Copying is the process of making duplicate of of an existing values like integer, string, objects and function.
However this is not so easy and straightforward as it looks. It all depends upon either you are copying primitive data types or non-primitive data types. If you are copying a primitive data type then it would be working with primary value but in the case of non-primitive data types it work with referenced values.

Lets see how it works with primary value and the referenced values

Primitive Value (Copy By Value)

For primitive data types, there it is copy by value.
Let me show this to you with the help of an example in code block by just simply declaring an integer "a" and copying its value in another integer "b".

let a = 10;
let b = a;     // Copying the value

b = 20;        // Changing b does NOT affect a
console.log(a); // Output: 10

You can see that changing value of b does not affecting a. This all happens because JavaScript creates a completely new independent copy of the actual values in the memory.

On other hand primitive data types consist of integers, boolean values,strings, symbols, bigInt and null.

Non-Primitive Value (Copy By Reference)

For non- primitive data types, there it is copy by reference.
Let it make clear with example of non-primitive data type object.

let original = { name: "YOO" };
let copy = original; // Copying the reference!

copy.name = "NEW"; 

console.log(original.name); // "NEW" -> Oops! The original changed too.

In above code block there it is a object name original that is stored somewhere in memory, and variable hold a pointer(reference) to that location.
If you are copying the variable you are just copying the pointer, not the actual referenced value.
So, when you are changing the value in copied item it will change the actual value in it.

To solve this problem here comes the concept of Shallow Copy and Deep Copy:

Here comes the golden rule to understand the difference between shallow copy and deep copy.

A shallow copy copies the references.

A deep copy copies the values.

Its simple, let break it through analogy of pizza :

-- > For shallow copy it is same as you and your friend is sharing a same pizza. Whenever you and your friend eats pizza it shrinks.

-- > For deep copy it is like you both owns different pizza. If your friend eats a slice, his pizza gets shrinks your remains untouched and same goes with your friend's pizza when you eats your pizza, his pizza remains untouched.

And that's it , this is full concept that revolves around shallow copy and deep copy.
Now lets get it through some examples of javascript.

Shallow Copy in JavaScript:

A shallow copy duplicates the top level of values. If there are some nested values it still copies it but only the referenced values.

Using Spread Operator(...) - This is one of the most common techniques used to make shallow copy in JavaScript.

let original = { name: "YOO",
    age: 22,
    gender: "Male"
 }; // Original named object.

let copyOriginal = { ...original}  // making a shallow copy of original named object using spread operator.

console.log(copyOriginal.name) // Output --> YOO

But there is A Shallow trap, whenever it comes a nested values and copying through spread operator those nested values will share exactly same references. So changing these referenced values will also lead to the changes in actual values.

To solve this problem here comes the concept of Deep Copy, lets learn this through some examples of javaScript.

Deep Copy In JavaScript:

Deep Copy in JavaScript creates a differently new object to copy the actual values. Changes done in values of new copied objects are not displayed in the actual values.
Let us see some methods to create a deep copy in JavaScript.

Using built in function structuredClone() : StructuredClone() is a built in javaScript function that is available in all modern day browser and Node.js. It handles deep nested structure perfectly. It is built into the runtime(browser and node.js) and handles most complex data types smoothly.

let Teas = {            // Create a object named as tea with some values inside it
    name: "Lemon tea",
    caffine: "No",
    tasty: "Yes"
}

let newTeas = structuredClone(Teas);  // Creating a deep copy of teas using structured clone method 

newTeas.name = "Mango Tea";
console.log(Teas);  //Output --> { name: 'Lemon tea', caffine: 'No', tasty: 'Yes' }
console.log(newTeas); //Output --> { name: 'Mango Tea', caffine: 'No', tasty: 'Yes' }

PROS AND CONS

Pros is that it is fast, native and correctly handles Date ,RegExp ,maps and circular references.
Cons is that it is will throw error when an object contain function or DOM nodes.

Using JSON.parse(JSON.stringify()): Before structuredClone() developers uses this trick to create a deep copy of object. It converts the object into a JSON string, then parse it back into brand-new object.

const original = { name: "Yo!!", nested: { id: 12 } };

const clone = JSON.parse(JSON.stringify(original));

Why we should not use it?
The method strips out the data type that are not supported by JSON. IF your object contains date , undefined , Null, Map, Set , or Infinity, they would either be lost or may be get corrupted or the value can be converted to NULL.

This is all about Deep Copy and Shallow Copy. Hope this gets you how and when to use shallow and deep copy method. JavaScript is full of such twist and turns.

Basics Of CSS (Cascading Style Sheet)

Yogesh Pant — Sun, 07 Jun 2026 11:41:27 +0000

CSS is basically used for styling the web page or the structure of the website. It is the stylesheet website use to enhance the style and presentation of the website. It works along HTML and JavaScript that plays vital role in building and making website more presentable.
• HTML is use to make structure of the website.
• CSS is use to style and make it more presentable.
• JavaScript is use to make web page responsive.
CSS was released three after the HTML in 1996 with the main idea to sperate the content from presentation. This makes website to be easily maintain and more flexible. The main focus of CSS is to design and style the web pages.

Core Architecture and Mechanism :

Separation of Concerns : SoC in web pages means design of splitting the webpages into distinct sections, where each section manages each responsibility. There are three core layers:

Content layer : It is managed by HTML file. Web page structure is designed by HTML file.
Presentation layer : It is managed by CSS file. Designing and presentation of web pages is done by CSS file.
Behaviour layer : It is done using JavaScript file. JavaScript is used to make web page responsive.

Cascading Order : It resolves rules based on importance ,specificity , and source code. It resolves conflicts in a HTML file when multiple style rules target the same HTML elements. The browser reads rules from top to bottom filtering them through a strict hierarchy to determine which final style wins.
Targeted selectors : It points to specific HTML nodes using tags, class and IDs. These combinations are parsed by browser from right to left, adding up their structural weights to create a final specificity score.
Here it is how it works down :
Tag selector : It targets down the standard HTML elements nodes directly. They represents broad level and target specificity. It include tag like h1, div, p, button etc..
---> How it works : The browser scan the documents and matches every nodes matching the exact same tag name.

p { font-variant: small-caps; font-family : 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size : medium; }
Class Selector : It target nodes that contain specific HTML strings in their HTML class attributes.
Syntax : .classname

.parent { height : 250px; display : flex; flex-direction: column-reverse; justify-content: start; align-items: start; }

ID selector : Id selector targets a completely unique node on the HTML page. Syntax : #idname

#child { color-scheme: inherit; font-style: italic; }

The Box Model: Box Model is the fundamental layout engine of CSS. It work upon the rectangular box type model where specific elements occupies space in the webpage. Further it is stacked into four layers together from inside out.

Four layers of Box Model :
Every elements of box model contains these four parts :
1. Content : The inside more layer contains the actual texts, images, or child elements.
2. Padding : Padding is the internal clearing space between an elements actual content and its outer border.
3. Border : It is the structural wrapping line that wrap around the elements padding and contents.
4. Margin : It is completely transparent clearing space that pushes away the neighboring elements.

Layout and Presentation tools

In the broader space of CSS layout and presentation tools , Flexbox works alongside media typography center, Grid layout and Visual effects to present complete design ecosystem.

Flexbox Layout : Flexbox layout is a one dimensional layout that is designed to distribute space and align items along a single row or columns. It automatically shrinks or extend space to fill the available space, making it perfect to fill available screen space, making it perfect for responsive design.

.parent { display : flex; flex-direction: column-reverse; justify-content: start; align-items: start; flex-wrap: wrap; gap: 20px; }

Grid Layout : Grid layout is two dimensional layout engine developed directly into CSS. Unlike flexbox which aligns into single dimension, Grid layout works upon two dimensions. Grid layout manages rows and columns layout simultaneously. This makes it most powerful tool to design and create webpages architecture, magazine style layout and complete dashboard type layout.

.grid-container { display: grid; grid-template-columns: 200px 1fr 300px; grid-template-rows: 100px 400px; gap: 20px; }

3.Visual effects : Visual effects in CSS represents flat, basic HTML structures into polished , interactive interfaces. Some of the features of it are :

Depth and Elevation (Shadows)
Color Transitions (gradients)
Layer Controls (Opacity & Blend Models)
Image filters (filter)
Backdrop Filters (backdrop-filter)

.glass-modal { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }

This is all about some basics of CSS layout. This is how it works to make web pages more attractive and separate the content of web pages from the design part of the web pages. CSS focuses upon styling the web page and make it look more attractive and interactive. Component of CSS play vital roles in developing web page more attractive.