Don't worry! Take a chill pill 😎

I'll break it down for you, bit by bit.

But first thing first...

Take a deep breath, and follow along.

JavaScript engines use the JIT(just in time) compiler to execute the code.

I know you must be wondering what the hell is JIT and how it works?

Let me demystify it for you

But before understanding JIT, let's change the topic for a while, and try to understand what compiler and interpreter are and how they work?

Compiler

The source code is converted into machine code once and then gets executed.

Pros

• Suppose we have a loop that runs 40 times, we do not need to translate the same code again and again. The time it saves is huge.
• The converted code will be more efficient cause we have more time for optimization.

Cons

• It takes a little bit more time to start up because it has to go through that compilation step at the beginning.

Interpreter

Interpreters are quick. We don’t have to go through that whole compilation step before execution. It just starts translating the first line and then executes it.

Pros

• Fast start-up times are characteristic of interpreters. That's why browsers used JavaScript interpreters in the beginning.

Cons

• When you’re running the same code more than once. For example, if you’re in a loop. Then you have to do the same translation over and over and over again.
• The code will be less efficient than the compiler cause we have less time for optimization.

Just In Time(JIT) compiler

To get rid of the interpreter's inefficiency, "the interpreter keeps retranslating the same code every time it goes through the loop".

In the JIT compiler, we have a new component called a monitor (aka a profiler). That monitor watches the code as it runs and

• Identify the hot or warm components of the code eg: repetitive code.
• Transform those components into machine code during run time.
• Optimize the generated machine code.
• Hot swap the previous implementation of the code.

In short Just in time compiler is nothing but a combination of an interpreter and a compiler.

I hope you found it helpful, and if you have any questions, please let me know.

Feel proud to correct me if I'm wrong:)

Twitter || Linkedin

And you would be wondering what the hell is happening??

Even after checking your code thoroughly, over and over again, you find it 100% correct.

Then where the hell actual problem lies in?

Let's understand this weird behaviour of JavaScript.

As we all know, JavaScript keeps on evolving over time. The browsers need to be updated with the time too.

If we don't update our browser, Modern JavaScript code will fail on the older versions of the browsers.

So basically It's not your fault It's the browser's fault.

Pro Tip: Don't forget to update your browser.

But wait...

We don't want to give users a bad user experience.

Is there any way we can fix this issue..?

And the answer is ...

Yes! we're magicians.

We gotta learn new magic mantras for this.

And those are:

• Polyfill's Mantra
• Transpiler's Mantra

Polyfill's Mantra

A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.

EG:

let str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes('bye')); //false

If you run the above code in updated versions of Chrome, firebox, safari, etc. It will work fine.

But if you run it in Internet Explorer 11 you will face an error as below.

To make our code run in older engines we need to write a polyfill for includes function.

// Checking if includes method exist or not
if (!String.prototype.includes) {
    // polyfill method
    String.prototype.includes = function (searchString) {
    let isFound = false;

    // here <this> refers to the string it self
    if (this.indexOf(searchString) !== -1) {
      isFound = true;
    }
    return isFound;
  }
} 

// Now it will work in IE 11 too.

let str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes('bye')); //false

Transpiler's Mantra

A transpiler is a piece of software that translates one source code to another source code. It can parse modern code and rewrite it using the older syntax of that language so that it will also work in outdated engines.

Babel is one of the most used transpilers out there.

Usually, developer runs the transpiler on their own computer or in the cloud and then deploys the transpiled code to the server.

Tip: Remember these two mantras, and your code will never fail.

Do let me know if this blog was helpful

follow me for more such blog posts.

Twitter || Linkedin

And the moment I got it right, I was like...phewww

Here is how I solved this issue.

By creating a -

• Simple node server.
• Middleware to process files.
• POST route to accept files.
• Route to serve files.
• Middleware to Handle CORS issue(you won't get this issue in postman).

Node server using express

• Initialize the project using below command

node init

• Install the required dependencies.

using npm -> npm i express dotenv

using yarn -> yarn add express dotenv

• Create server.js and paste below code

const express = require("express");
const dotenv = require("dotenv");

const app = express();

dotenv.config(); // <-- To use.env file

app.use(express.json());
/*
express.json() middleware helps us to parse all HTTP requests

like --> req.body

And express.json() middleware always should be at the top

*/

const PORT = process.env.PORT || 5000;
app.listen(
  PORT,
  console.log(`Server is up and running on port ${PORT}`)
);

Now run the node server using below command

node server.js

Create a middleware to process files.

Install the dependencies

using npm -> npm i multer

using yarn -> yarn add multer

Create processFile.js file and paste below code in it and create upload folder to store uploaded files in it.

const multer = require("multer");
const path = require("path");

const MIME_TYPES = {
  "image/jpg": "jpg",
  "image/jpeg": "jpg",
  "image/png": "png",
  // you can add more here
};

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null,path.join(__dirname, './upload'));
   // Note ./upload path should be relative. Change this path according to your folder structure
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(" ").join("_");
    const extension = MIME_TYPES[file.mimetype];
    callback(null, name + Date.now() + "." + extension);
  },
});

const processFile = multer({ storage: storage }).single("file"); //<--here `file` key
/*
Look at the last example of how we will use `file` key to 
upload files using form data and postman.

For accepting multiple files change above line to 

const processFile = multer({ storage: storage }).array('file', 12);
Where 12 is the number of files you want to accept.

*/

module.exports = processFile;

Create a POST route to accept file.

Paste below code in server.js file

For uploading single file

const processFile = require("./processFile");

app.post("/api/upload", processFile, (req, res, next) => {

  const url = req.protocol + "://" + req.get("host");

  const file = url + "/files/" + req.file.filename;

  res.status(201).json({
    message: "Success",
    file: file,
  });
});

For uploading multiple files

const processFile = require("./processFile");

app.post("/api/upload", processFile, (req, res, next) => {
  const files = []
  const url = req.protocol + "://" + req.get("host");
  req.files.forEach(file=>{
    const file_url = url + "/files/" + file.filename;
    files.push({
      url: file_url,
    });
  })

  res.status(201).json({
    message: "files saved successfully!",
    files,
  });
});

So far you would be able to store files in your upload folder but you can't access files using links you are receiving in the response and for that, we need to serve those files.

Serve uploaded files

Add below code in server.js file and restart the server.

const path = require("path");

app.use("/files", express.static(path.join(__dirname, "upload")));

Now you should be able to see the files if you visit the links.

CORS (Cross-Origin Resource Sharing)

Note: You won't face this issue in the postman but in your client-side app you will face this issue.

To resolve the CORS issue

• Create a cors middleware.
• Apply cors middleware at the top of your file

const cors = (req, res, next) => {
  const origin = "*"; // <-- change this in production
  res.setHeader("Access-Control-Allow-Origin", origin);
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content, Accept, Content-Type, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
  );
  next();
};

app.use(cors); // <-- Should be at the top

Upload file from client

  const data = new FormData();
  data.append("file", FILE_URI);

  fetch("http://localhost:5000/api/upload", {
    method: "post",
    body: data,
  })
  .then((res) => res.json())
  .catch((err) => {
     console.log(err);
  });

And That's how I solved this issue. Let me know if you have any doubt.

follow me for more such blog posts.

Twitter || Linkedin

Yes, You read that correctly.

Let's deep dive into this topic.

Before we get into a serious drill, Let's quickly revise objects and functions in JavaScript.

Object:

Objects in JavaScript are nothing but a non-primitive type data structure. We can define an object using curly brackets and put key-value pairs separated by a comma in it.

const user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
}

user.city = "Bhilwara" // add new value in existing object

user.city = "Jaipur" // update new value in existing object

console.log(user.name);
/*
output

Hemendra

*/
console.log(user);

/*
output

{
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
   city:"Jaipur"
}
*/

Read more about objects in depth.

Function

Unlike other programming languages, JavaScript has implemented the functions very differently.

Let's have a look

Definition:

A function is a block of organized code that performs a specific task.

Advantages of functions

• Functions make your program easier to read, understand, and debug.
• Functions can make a program smaller by eliminating repetitive code.

Now you would be wondering, What's the difference then?

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. Every JavaScript function is actually a Function object.

Let's see how we define functions in JavaScript first

function sum(a,b){
 return a+b;
}

const res = sum(2,4);

console.log(res); // outputs -> 6

Above we have created a function named sum which adds two numbers.

But as I said earlier, is the sum function created above also an object? can we add properties and values to the sum function as we did in the user object above?

let's see this in action

function sum(a,b){
 return a+b;
}

sum.help = "use this function to add two numbers";
// like an object we have added help key and it's value to the above function.

// will work as before
const res = sum(3,6);
console.log(res) // outputs --> 9

// but now 

console.log(sum.help) 
// outputs --> use this function to add two numbers

Let's verify if the sum function is an instance of an object or not

function sum(a,b){
 return a+b;
}

console.log(sum instanceof Function); // true
console.log(sum instanceof Object); // true

let name = "Hemendra"
console.log(name instanceof Object); // false

And Voila, It proves that the functions are objects in JavaScript.

follow me for more such blog posts.

Let me know if this blog was helpful.

It's nothing but a simple technique we use to prevent unnecessary function calls to improve app's performance.

Unlike Debouncing, here we block a function call for a particular time if it's been executed recently. Or we could also say that throttling ensures a function call regularly at a fixed rate.

Let's look at the below example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Throttling</title>
    </head>
    <body>
        <button class="btn">Click here</button>
        <script src="index.js"></script>
    </body>
</html>

let count = 0;
function submitData(query){
   // some api call
   console.log("result",count++)
}

document.querySelector(".btn").addEventListener("click",()=>{
submitData();
})

In the above example, if you click 10 times in 2000ms, Function will be called 10 times, as you can clearly see in the above example.

It's a very expensive operation, and as dev, our job is to make operations as cheap as possible.

Let's see how throttling helps us to make these operations cheaper.

function throttle(fn,delay){
  let last = 0;
 /*  
here ...args is optional I've used this in case, if you 
want to pass some parameters you can use ...args
*/ 
  return (...args)=>{
    const now = new Date().getTime();
    if(now - last < delay){
      return;
    }
   last = now;
   return fn(...args)
  }

}

const magicFunction = throttle(submitData,1000);

let count = 0;
function submitData(){
   // some api call
   console.log("result",count++)
}

document.querySelector(".btn").addEventListener("click",magicFunction);

Now, if you click 10 times in 2000ms, Function will be called 2 times only, as you can see in the code. We have blocked the function call for 1000ms.

That's how we can implement the throttling technique to improve our app's performance

follow me for more such blog posts.

Let me know if this blog was helpful.

Twitter || Linkedin

Some examples are

• While scrolling or resizing the screen you would want to compute something.
• Sometimes we may need to display quick results as user types in the input field.

Let's see, how we usually write code to achieve the desired result.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Debouncing</title>
    </head>
    <body>
        <input class="search" type="text" placeholder="search"/>
        <script src="index.js"></script>
    </body>
</html>

let count = 0;
function search(query){
   // some api call
   console.log("result",count++)
}

document.querySelector(".search").addEventListener("input",(e)=>{
search(e.target.value);
})

In the above example, If I search for a laptop, The function search will be called 6 times. Which is an inefficient way of calling a function. And it is very expensive for JavaScript.

You must be wondering what do you mean by expensive for JavaScript?

JavaScript is a synchronous single-threaded language. Which means we have a single callstack to execute everything. And because it is single-threaded, we should not block the thread by calling functions unnecessary.

But wait ...

How do we prevent unnecessary function calls to improve performance?

Here, the concept of debouncing kicks into the picture.

Debouncing is a technique used to improve the browser's performance. It ensures that time-consuming tasks do not fire so often, In other words, it limits the rate at which a function gets invoked.

Let's re-write the above code using Debouncing technique.

let count = 0;
function search(query){
   // some api call
   console.log("result",count++)

}

const magicFunction = debounce(search,300);

function debounce(func, delay){
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

document.querySelector(".search").addEventListener("input",(e)=>{
  magicFunction(e.target.value);
});

The idea behind debouncing technique is that we do not call function during the event but after the event.

In the above example, We can clearly see.

debounce is a higher order function(HOF). Which takes two parameters the first parameter will be a function and the second will be a delay.

If the delay between two keystrokes is less than 300ms, function will not execute and setTimeout will be destroyed. And if the delay is more than 300ms, then only function will execute.

That's how we can implement the debouncing technique to improve our app's performance

follow me for more such blog posts.

Let me know if this blog was helpful.

Twitter || Linkedin

JavaScript is a synchronous single-threaded scripting language that was initially meant to run on the client-side(web browsers). But nowadays, we can run JavaScript on the server-side as well.

But wait, What does it mean by synchronous and single-threaded?

Let's deep dive into it

Synchronous

In English, it simply means that something is happening at the same time. And in terms of programming language, it simply means the code will execute in order line by line.

EG:

console.log("one");
console.log("two");
console.log("three");

/*
The above code will execute in below order

one
two
three

*/

But, sometimes you might encounter some code that will run asynchronously in JavaScript.

EG:

console.log("one");

function magicFunction(){
  console.log("It's magic");
}

setTimeout(magicFunction,5000);

console.log("two");

/*
The above code will output the below result

one
two
undefined
It's magic --> will display this after 5000ms.

*/

Now you would be wondering what the hell is happening, you just have read that JavaScript is a synchronous language??

Let's understand this more deeply why and how.

In the above example, setTimeout will execute asynchronously.

But what if I tell you that -  setTimeout is not a part of the JavaScript language itself instead it's a part of the browser's web API.

Some examples of browser APIs are fetch, setInterval, DOM methods etc.

To make JavaScript more powerful on the client-side, browser JS-Engine attaches browser APIs with JavaScript and it will work like normal JavaScript.

So it means JavaScript is a synchronous language only. There are some other wrappers around it that make JavaScript run asynchronously.

Okay, but what does it mean by single-threaded?

Single-thread

It simply means we have a single-thread or a callstack to execute a JavaScript code. And we should not block this thread or else your app will crash and you won't be able to perform another task while one task is executing.

In the above example, we saw that setTimeout was running asynchronously.

But here it won't block the main thread. It will execute outside the callstack.

After timeout, callback function inside the seTimeout will wait in callback queue till the callstack gets empty.

An Event loop constantly keeps checking whether the callstack is empty or not. As soon as it gets empty event loop put callback function from callback queue to callstack and it gets executed.

And there you go ... 🤗🤗🤗

Now you know what exactly JavaScript is.

follow me for more such blog posts.

Let me know if this blog was helpful.

Twitter || Linkedin

Dependencies

1. react-native-view-shot for taking screenshots.
2. @react-native-community/cameraroll for saving the screenshot.

Install the dependency

For npm -> npm install react-native-view-shot @react-native-community/cameraroll

For yarn -> yarn add react-native-view-shot @react-native-community/cameraroll

After installing the dependencies

• Import the ViewShot and CameraRoll

import ViewShot from 'react-native-view-shot';
import CameraRoll from '@react-native-community/cameraroll';

• After importing ViewShot wrap the area we want to take screenshot using ViewShot.

• Now we will use useRef hook to create ref.

  import React, {useRef} from 'react'; // should be outside the component
  

  const ref = useRef(); // should be inside the component
  

• Pass the required props in ViewShot as mentioned below.

 <ViewShot
    ref={ref}
    options={{
    fileName: 'file-name', // screenshot image name
    format: 'jpg', // image extension
    quality: 0.9 // image quality
   }} >

....some amazing content ....
<ViewShot/>

• Create a function to take screenshots and paste the below code.

 const takeScreenShot = () => {
   // to take a screenshot
    ref.current.capture().then(uri => {
      // to save screenshot in local memory
      CameraRoll.save(uri,{type:"photo",album:"Album codes"});
      alert("Took screenshot");
    });
  };

• Call the above function to take the screenshot.

And Voila, We're done easy peasy :)

Complete code

import React, {useRef} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import ViewShot from 'react-native-view-shot';
import CameraRoll from '@react-native-community/cameraroll';

const SomeComponent =() => {

  const ref = useRef();
  const takeScreenShot = () => {
    ref.current.capture().then(uri => {
      CameraRoll.save(uri,{type:"photo",album:"QR codes"});
      alert("Took screenshot");
    });
  };

  return (
    <View style={styles.container}>
      <ViewShot
        ref={ref}
        options={{
        fileName: 'file-name', // screenshot image name
        format: 'jpg', // image extention
        quality: 0.9 // image quality
        }} >
        <Text> Some awesome content</Text>
      </ViewShot>
      <Button title="Share QR Code" onPress={takeScreenShot}/>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#171821',
  }

});

1. Download the fonts
2. Create fonts folder inside the assets folder src/assets/fonts.
3. Put all the font files inside the fonts folder.

4.Now create react-native.config.js file in your app's root folder and paste below code in it.

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'], // <---- fonts folder path
};

Run the below command

npx react-native link

And voila, it's done now you can use the file name as your fontFamily name(don't put extension name after file name) and it will work like a charm.

1. Pass by value.
2. Pass by reference.

Pass by value

It simply means, While calling a function. You are passing values directly inside a function as an argument.

EG:

// function declaration
function greet(name){
    console.log(`hello ${name}!`);
}

// function calling
greet("Hemendra");// <- we're passing value as an argument

// prints --> hello Hemendra!

Pass by reference

It simply means, While calling a function, You will pass a reference of a constant or a variable instead of a value directly inside a function as an argument.

EG:

// function declaration
function greet(name){
    console.log(`hello ${name}!`);
}

const name = "Hemendra";

// function calling
greet(name); // <-- we're passing a reference of a constant called name  

// prints --> hello Hemendra!

Pretty simple right?

Yes, it's that simple!

But, there is more to understand here. Let's understand this by an example.

EG:1

// You might have written something like this before

let score = 10;
let temp = score;
temp = temp + 2;

console.log(`score is ${score}`); // prints-> score is 10
console.log(`temp is ${temp}`); // prints-> temp is 12

EG: 2

// You might have done something like this as well

let todos = ["T1", "T2];
let tempTodos = todos;
tempTodos.push("T3");

console.log(`old todos are ${todos}`); 
// prints-> old todos are T1, T2, T3
console.log(`temp todos are ${tempTodos}`); 
// prints-> temp todos are T1, T2, T3

Wait whatttttt??

Yes, I was also like this when I was a beginner. Let's understand what just happened in the above example.

Remember this

• While working with primitive data type in JavaScript we copy its value.

EG: string, number, boolean, symbol, undefined, null.

• While working with non-primitive data type in JavaScript we copy its reference.

EG: arrays, objects, functions

Explanation

In the first example, we used the primitive data type which is why the score and temp variable's value was different.

But, In the second example, we used an array that was a non-primitive data type, and while copying the variable, we have reference of it instead of its value. Hence both the variables todos and tempTodos were pointing to the same value in the memory.

Thus, while changing the tempTodos variable todos variable was also changing.

Tip:

We often encounter an array of objects while building any application. We create multiple functions to modify the array of objects.

But do remember this concept,

How array or objects are copied in JavaScript. Else you will end up facing a lot of bugs in your app.

follow me for more such blog posts.

Let me know if this blog was helpful.

In JavaScript, Everything is an Object.

Lets, Deep dive into JavaScript Objects.

Object: Objects in JavaScript are nothing but a non-primitive type data structure. We can define an object using curly brackets and put key-value pairs separated by a comma in it.

EG:

const user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
   city:"bhilwara"
}

CRUD operations on an object

Create

let student = {}; // an empty array

student.name = "Hemendra Khatik"; 
//important -> student["name"]="Hemendra Khatik" is also valid

student.branch = "CSE";
student.age = 25;

console.log(student); // will print the below structure
/*
{
   name:"Hemendra Khatik",
   branch:"CSE",
   age:25
}
*/

or all key values at once

let user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
   city:"bhilwara"
}

Read

We use . operator to access the values of an object.

user.name; // to access the "Hemendra".
user.city; // to access the "bhilwara".
user.username; // will be undefined because it is not present in the user object.

We can also access properties of an object using square brackets.

user["name"];    // to access the "Hemendra".
user["city"];    // to access the "bhilwara".

Update

Update an object .

student.age = 21; // now age is changed from 25 to 21

Delete

Delete key from an object.

delete student.name; // to delete the name key from student object

Other Helpful methods

print the keys only from an object.

const user = {
   username:"aamchora",
   email:"hi@aamchora.space",
};

Object.keys(user);
/* 
Above expression returns an array containing 
keys only from an object ["username", "email"]
*/

print the values only from an object.

const user = {
   username:"aamchora",
   email:"hi@aamchora.space",
};

Object.values(user);
/* 
Above expression returns an array containing 
values only from an object ["aamchora", "hi@aamchora.space"]
*/

Freeze the JavaScript Object

const user = {
   username:"aamchora",
   email:"hi@aamchora.space",
};

Object.freeze(user);
/* 
Above expression freezes the object. 
It means we cannot add, remove or update its properties.
It will not throw any error unless you are in strict mode but
there will be no effect of value change on your object.
*/

user.username = "NewUserName"; // --> will not work
user.newKey = "xyz"; // --> will not work
delete user.email; // --> will not work

console.log(user);
/*
{
  username:"aamchora",
  email:"hi@aamchora.space",
}
*/

Cloning an object

You can not copy non-primitive type data structure as you copy primitive type data structure.

EG: Primitive type data structure.

let a = 10;
let b = a;
b= b + 1;
console.log(a) // 10
console.log(b) // 11

EG: Non-Primitive type data structure.

let obj = {
 a:10;
};
let obj2 = obj;
obj2.a = 12;

if(obj === obj2){
   console.log("obj and obj2 are same");
};
// above condition will be true 

console.log(obj) // {a:12}
console.log(obj2) // {a:12}

To understand this weird behavior of JavaScript, you can read below blog.

Click here to read

We can use Object.assign(targetObject, sourceObject) to clone an object.

const obj = { a: 1 };
const obj2 = Object.assign({}, obj);
obj2.a = 2;

if(obj === obj2){
   console.log("obj and obj2 are same");
}else{
 console.log("obj and obj2 are different");
};

// above condition will be false here 

console.log(obj); // { a: 1 }
console.log(obj2); // { a: 2 }

Shallow copy A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made.

Note: For Shallow copy we use Object.assign(targetObject, sourceObject).

Look at below example to understand Shallow copy.

const obj = {
 a:1
}

const obj2 = {
 b:2,
 c:obj // here c's value is a reference to the other object called obj
}

const copy = Object.assign({},obj2); // here obj2 is a source object 

// changing the copied object's value 
copy.c.a = 1111;


if(copy.c.a === obj.a){
   console.log("obj and obj2 are same");
}
// above condition will be true

Deep copy

A deep copy of an object is a copy whose properties do not share the same references(point to the same underlying values) as those of the source object from which the copy was made.

Note: For Deep copy we use JSON.parse(JSON.stringify(sourceObject)).

Look at below example to understand Deep copy.

const obj = {
 a:1
}

const obj2 = {
 b:2,
 c:obj // here c's value is a reference to the other object called obj
}

const copy = JSON.parse(JSON.stringify(obj2)) // here obj2 is a source object 

// changing the copied object's value 
copy.c.a = 1111;


if(copy.c.a === obj.a){
   console.log("obj and obj2 are same");
}else{
  console.log("obj and obj2 are not same");
}
// above condition will be false

follow me for more such blog posts.

Let me know if this blog was helpful.

Remember - we cannot build scalable tech in a jiffy.

We all know it is important to ship fast features when a product needs to thrive and live up to the expectations of users and stakeholders.

But in most startups, it doesn’t work that way.

Founders often assume that

• Hiring a bigger team of developers will ship features faster.
• Code is perfect as long as the feature functions well.
• It’s not important to create a scalable tech or clean code.

These assumptions backfire as slow progress when they wish to scale. On top of it, they end up paying high costs for building tiny features which takes more time and effort.

But, what if? I tell you there is a way

You can add any feature and functionality at very minimal cost & effort in no time.

Yes, it's possible!

Things to keep in mind while building a scalable tech.

1. Code scalability.
2. Server scalability.

Code scalability

Writing scalable code is super important for large-scale apps.

Because -

1. It helps multiple teams work together in a single codebase conveniently.
2. It gets easier to add new features.
3. It takes less time to understand the code and focus more on the building.

Your code should be clean and maintainable.

• Components, functions, and variable names should be meaningful.
• Use comments to explain the code logic.
• Use DRY and KISS rules while writing code but don’t abuse these rules.

Code navigation.

• Navigating through your code should be easy.
• Create a good folder structure and group similar files altogether.

Well-documented code.

• Reading documentation is fun but writing one is painful. Have some empathy, and don’t be lazy.
• Don’t keep flowcharts and algorithms in your mind. Spit it out in the documentation.

Server scalability.

At any stage, your app users can drastically increase which means increased API requests. In most cases, single server can’t handle it well.

In such conditions, you don’t want your app to crash. To prevent your app from crashing you can do the following -

1. Horizontal scaling.
   1. Buy more servers.
   2. Setup load-balancer.
2. Vertical scaling.
   1. Buy bigger server.
3. Hybrid scaling(Horizontal + Vertical).
   1. Buy more bigger servers.

follow me for more such blog posts.

Let me know if this blog was helpful.