Deep Dive into JavaScript, React, and Backend Development

JavaScript: Understanding Memory, Strings, Numbers, and Dates

1. Stack and Heap Memory in JavaScript

How JavaScript Manages Memory

JavaScript uses two main types of memory allocation:

1. Stack Memory (for primitive values and function calls)

2. Heap Memory (for objects, arrays, and functions)

Stack (Call Stack) – Stores Primitive Data

let a = 10;
let b = a;
b = 20;
console.log(a); // 10 (remains unchanged)
console.log(b); // 20

• When b is assigned a, it gets a copy, not the reference.

Heap – Stores Reference Types

let obj1 = { name: "John" };
let obj2 = obj1;
obj2.name = "Doe";
console.log(obj1.name); // "Doe" (Both reference the same memory)

• Objects are stored in the heap, and variables store references, not actual values.

2. Deep Dive into Strings in JavaScript

String Characteristics:

• Immutability: Strings cannot be changed after creation.

• Unicode Support: JavaScript strings are UTF-16 encoded.

• Escape Characters: \n, \t, \", \', \\.

Common String Functions:

let str = "  JavaScript is fun  ";
console.log(str.trim()); // "JavaScript is fun"
console.log(str.toUpperCase()); // "JAVASCRIPT IS FUN"
console.log(str.replace("fun", "awesome")); // "JavaScript is awesome"
console.log(str.split(" ")); // ["JavaScript", "is", "fun"]

String Template Literals:

let name = "Madhur";
console.log(`Hello, ${name}!`); // "Hello, Madhur!"

Searching Within Strings:

let sentence = "JavaScript is a powerful language";
console.log(sentence.indexOf("powerful")); // 15
console.log(sentence.includes("Java")); // true
console.log(sentence.startsWith("Java")); // true
console.log(sentence.endsWith("language")); // true

String Concatenation vs Template Literals:

let firstName = "John";
let lastName = "Doe";
console.log(firstName + " " + lastName); // Old way
console.log(`${firstName} ${lastName}`); // Modern way

---

React: Creating Your Own React Library & Tree Structure

1. Why Create a React Library?

• Reuse common UI components

• Maintain consistency across multiple projects

• Open-source contributions

2. Project Structure

/my-react-library
│── src
│   │── components
│   │   │── Button.js
│   │   │── Input.js
│   │── index.js
│── package.json
│── rollup.config.js
│── README.md

3. Evaluating Tree Structure in a React Library

React libraries follow a component-based tree structure:

App (root)
│── Layout
│   │── Header
│   │── Sidebar
│   │── Footer
│── Components
    │── Button
    │── Input
    │── Card

This hierarchical design allows easy reusability and composition.

4. Setting Up the Library

mkdir my-react-library && cd my-react-library
npm init -y
npm install react react-dom rollup @rollup/plugin-node-resolve

5. Writing a Simple Component

src/components/Button.js

import React from "react";

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

6. Exporting Components

src/index.js

export { default as Button } from "./components/Button";

7. Packaging with Rollup

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";

export default {
  input: "src/index.js",
  output: {
    file: "dist/index.js",
    format: "cjs",
  },
  plugins: [resolve(), babel({ babelHelpers: "bundled" })],
};

8. Publishing to NPM

npm login
npm publish

---

Backend: Data Modeling with Mongoose

1. Defining the Scope of a Backend Project

Before creating models, define:

• Entities: What objects exist (e.g., users, products, orders)?

• Relationships: How do they connect (one-to-many, many-to-many)?

• Operations: What CRUD operations are needed?

2. Creating Mongoose Models

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  age: { type: Number, min: 18 }
});

const User = mongoose.model("User", userSchema);
module.exports = User;

3. Major Use Cases of Mongoose Models

• Data validation

• Query building

• Schema design

• Middleware for pre/post-processing

4. Joining Models: Relationships in Mongoose

One-to-Many Relationship (User -> Posts)

const postSchema = new mongoose.Schema({
  title: String,
  content: String,
  user: { type: mongoose.Schema.Types.ObjectId, ref: "User" }
});

const Post = mongoose.model("Post", postSchema);

Fetching posts with user details:

Post.find().populate("user").then(console.log);

Many-to-Many Relationship (Users -> Courses)

const courseSchema = new mongoose.Schema({
  name: String,
  users: [{ type: mongoose.Schema.Types.ObjectId, ref: "User" }]
});

const Course = mongoose.model("Course", courseSchema);

5. Using One Model in Different Parts of the Codebase

const User = require("../models/user");
const createUser = async (req, res) => {
  const newUser = new User(req.body);
  await newUser.save();
  res.status(201).json(newUser);
};

---

Conclusion

Today’s deep dive covered JavaScript memory management, in-depth string operations, numbers, and dates, alongside building a React library and understanding tree structures in React components. Additionally, we explored Mongoose data modeling in detail. This knowledge will be crucial in building scalable and efficient applications. Next steps? Implementing these concepts in real-world projects!