Deep vs Shallow Copy in Javascript objects

How to copy a Javascript Object ? - is an age old question. Let's try to answer it by checking difference between a shallow copy and deep copy.
Detailed videos :
Shallow Copy : • SHALLOW COPY in javasc...
Deep Copy : • DEEP COPY in JavaScrip...
🤯 Crash Courses (Single Video)
Git/Github Crash Course : bit.ly/3JSA5VT
TypeScript Crash Course : bit.ly/372dZSh
Angular Crash Course : bit.ly/3DoGJR1
Vue JS Crash Course : bit.ly/3uDujRl
Python Crash Course : bit.ly/3Dod7U2
React Router Crash Course : bit.ly/36YfO2i
🧑‍🏫 Full Course Playlists
HTML : bit.ly/36IMq0h
CSS : bit.ly/3LpRQw6
JavaScript : bit.ly/3u049tf
BootStrap : bit.ly/3NA9nDJ
ES 6 : bit.ly/3DvYCh6
DOM Playlist : bit.ly/35nMKB7
ReactJS (Redux & Hooks) : bit.ly/3iMethN
React with TypeScript : bit.ly/3fQjXtF
React Hooks: bit.ly/3Vmh7wV
Redux: bit.ly/3yAIIkl
NodeJS/ExpressJS : bit.ly/35nN6Yt
MongoDB / Mongoose : bit.ly/3qPj0EO
💻 Projects Playlists
MERN Stack Complete Ecommerce : bit.ly/3ymSs0E
Web Design HTML+CSS - Home Page : bit.ly/35nZiIB
Web Design BootStrap - E-Commerce Site : bit.ly/3iPhaz7
React/Redux/Firebase - Todo-App : bit.ly/3DnekL8
🕹 Mini Projects (Single Video)
React - Tic Tac Toe (Redux / Hooks) : bit.ly/3uzLEuy
React - Game of Flag Quiz (Hooks) : bit.ly/3LpTC0e
React - Google Translate Clone (Hooks) : bit.ly/3Lo9xvZ
React - Chat App using Firebase (Hooks) : bit.ly/3wLgymj
Visit our site: coderdost.com
🔴 Full Courses List : coderdost.com/courses
🔴 Full Projects List : coderdost.com/projects
💾 Source Codes at : github.com/coderdost

[@coderdost]

Detailed videos :
Shallow Copy : th-cam.com/video/oVqp_azAn3U/w-d-xo.html
Deep Copy : th-cam.com/video/AS0CgLWNGAQ/w-d-xo.html
Course of JavaScript : bit.ly/3u049tf
Course of Modern JS. (ES6) : bit.ly/3DvYCh6
React JS MasterClass (10 Hour) : th-cam.com/video/6l8RWV8D-Yo/w-d-xo.html
NODE+ EXPRESS+ MONGO MasterClass (12 Hour) : th-cam.com/video/ChVE-JbtYbM/w-d-xo.html
React Interviews : bit.ly/3QAjAln
JavaScript Shorts:
bit.ly/3XhHRQ1
React Shorts :
bit.ly/3VfIrMi

[@sourabhsisodia9563]

Best channel for web d

[@coderdost]

Thanks bro

[@hardikluhar4738]

Helpful

[@masudpervez6065]

Bhai ap kashe console log side par show kar rahe ho

[@nilesh906]

👌

[@dg_official96]

Wow

[@vishalrathour6450]

👍

[@sourabhsisodia9563]

I have a question..
Can you tell us which vs code extension you use so that you get value of variable in the code line

[@coderdost]

Quokka js

[@ranatahirtahir9980]

How you put apple 🍎 string which extension?

[@coderdost]

Emoji pedia or any emoji picker

[@littleshorts6969]

How to deep clone a cyclic object

[@coderdost]

No simple way. But now there is a web API for structuredClone()
developer.mozilla.org/en-US/docs/Web/API/structuredClone

[@mitesh5189]

sturecturedClone(obj) this will return fully cloned object even nested object will be cloned with deep copy

[@deo_kumar]

But what about functions as a value of property?

[@coderdost]

Yes there is no straightway in JavaScript to do that. Even after using API like structuredClone - you can only get non function properties.

[@deo_kumar]

@@coderdost Is it good practice to create an empty object and add all the properties of another object using for..in loop?

[@coderdost]

@@deo_kumar In case only data properties then this should not be used. But you might have to do it for Function properties. There are online some clone functions - which can be used to do clone. Still most used things in real projects is JSON.stringify (or Object.assign/Spread in case of 1 level objects)

[@MohammedThavafMT]

structuredClone???

[@coderdost]

Appreciate your knowledge. We will try to make it in some video. Even though this API exists - its very rarely seen in Projects.

[@MohammedThavafMT]

Sure. Problem occurs when there is functions involved. Which can happen with JSON.Stringify as well

[@masudpervez6065]

Bhai ap kashe console log side par show kar rahe ho

[@coderdost]

Quokka JS extension in VSCODE