Sanjay Mishra’s Post

#2: JavaScript Data Types & Quirks You Should Know! 🔥 Just wrapped up #2 of deep diving into JavaScript fundamentals! Here are the key concepts about Data Types that every developer should understand: 📊 JavaScript Data Types Breakdown Primitive Types (7): Number - Integers & floating points String - Text data "" Boolean - true or false Undefined - Declared but not assigned Null - Intentional absence of value Symbol - Unique identifiers (ES6) BigInt - Large numbers beyond Number limit (ES6) Reference Types: Object - {key: value} Array - [1, 2, 3] Function - Callable objects Date, RegExp, Error 🔄 Type Conversion Gotchas // The surprising ones: console.log(typeof null); // "object" 😮 console.log(typeof NaN); // "number" 😮 console.log(typeof undefined); // "undefined" let score = "33abc"; let converted = Number(score); // NaN console.log(typeof converted); // "number" (but value is NaN!) Conversion Rules: "33" → 33 (number) "33abc" → NaN (type: number!) null → 0 undefined → NaN true → 1, false → 0 🎯 The Null vs Undefined Mystery console.log(null == undefined); // true ⚡ console.log(null === undefined); // false ⚡ console.log(null >= 0); // true ⚡ console.log(null > 0); // false ⚡ Why? Relational operators convert null to 0, but == has special rules! 💡 Memory Management // Stack (Primitive) - Copy value let name = "Alex"; let newName = name; // Copy created newName = "John"; console.log(name); // "Alex" ✅ // Heap (Reference) - Share reference let user1 = {email: "alex@test.com"}; let user2 = user1; // Reference shared user2.email = "john@test.com"; console.log(user1.email); // "john@test.com" ⚡ 🚀 Key Takeaways: Always use === for predictable comparisons Understand type coercion - it can cause subtle bugs Primitive types are immutable, Reference types are mutable Memory matters - stack vs heap behavior affects your code Pro Tip: Use console.table() for clean object/array inspection! What's the most surprising JavaScript type coercion you've encountered? Share your stories below! 👇 #JavaScript #Programming #WebDevelopment #Coding #SoftwareEngineering #LearnToCode #Tech

💻 Understanding JavaScript Typed Arrays — Speed Up Your Data Handling! If you’ve ever worked with large sets of numbers or binary data in JavaScript (like images, audio, or network data), you’ll love Typed Arrays! 🚀 They’re not your regular arrays — they’re built for performance and efficiency. Let’s break it down 👇 --- 🧠 What Are Typed Arrays? Typed Arrays are special objects in JavaScript that let you work directly with raw binary data. They’re called “typed” because each array can hold only one specific data type — like 8-bit integers, 16-bit floats, etc. Example 👇 let scores = new Int16Array([100, 200, 300]); console.log(scores[1]); // Output: 200 Here, Int16Array means each element is a 16-bit integer, giving you compact and fast numeric storage. --- ⚙️ Why Use Typed Arrays? Regular JavaScript arrays are flexible but slower, since they can mix types (strings, numbers, etc.). Typed Arrays, on the other hand: Use less memory 🧩 Are faster for numerical operations ⚡ Are perfect for graphics, games, and media processing Example: let data = new Float32Array(4); data[0] = 3.14; console.log(data); // Float32Array [3.14, 0, 0, 0] --- 🧩 Types of Typed Arrays JavaScript provides several types — each representing a different kind of numeric data: Type Description Int8Array 8-bit signed integers Uint8Array 8-bit unsigned integers Int16Array 16-bit signed integers Uint16Array 16-bit unsigned integers Int32Array 32-bit signed integers Float32Array 32-bit floating point numbers Float64Array 64-bit floating point numbers Choose the one that best fits your data’s size and precision needs. --- 🧰 How Typed Arrays Work Typed Arrays are built on top of ArrayBuffers — a chunk of raw binary data in memory. You can think of an ArrayBuffer as a storage box, and a Typed Array as the lens through which you view and manipulate that data. Example: let buffer = new ArrayBuffer(8); // 8 bytes let view = new Uint8Array(buffer); view[0] = 255; console.log(view); // Uint8Array [255, 0, 0, 0, 0, 0, 0, 0] --- 🎯 When Should You Use Typed Arrays? Use them when working with: WebGL or Canvas (graphics rendering) Audio processing Binary files (like images or PDFs) Performance-critical data manipulation --- ⚡ Quick Recap ✅ Typed Arrays = Fixed-size, fast, and memory-efficient ✅ Great for working with binary or numeric data ✅ Built on top of ArrayBuffers for raw data access --- So next time you need to crunch big data or render cool graphics, remember — Typed Arrays are your best friend in JavaScript! 🧠💪 #JavaScript #WebDevelopment #CodingTips #Frontend #JSBeginners #LearnToCode #TypedArrays

Let's have a brief refresher on JavaScript data structures. I believe Maps and Sets are the most underrated data structures in JavaScript/TypeScript. In my opinion, they are massively useful in many cases and can reduce headaches. Let's go over the new Map() for this one: Based on the official MDN definition, which I bring here, the Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. Map objects are collections of key-value pairs. A key in the Map may only occur once; it is unique in the Map's collection. A Map object is iterated by key-value pairs — a for...of loop returns a 2-member array of [key, value] for each iteration. Iteration happens in insertion order, which corresponds to the order in which each key-value pair was first inserted into the map by the set() method (that is, there wasn't a key with the same value already in the map when set() was called). The specification requires maps to be implemented "that, on average, provide access times that are sublinear on the number of elements in the collection". Therefore, it could be represented internally as a hash table (with O(1) lookup), a search tree (with O(log(N)) lookup), or any other data structure, as long as the complexity is better than O(N). Key equality: Value equality is based on the SameValueZero algorithm. (It used to use SameValue, which treated 0 and -0 as different. Check browser compatibility.) This means NaN is considered the same as NaN (even though NaN !== NaN) and all other values are considered equal according to the semantics of the === operator. Also, for object keys, equality is based on object identity. They are compared by reference, not by value. See Using the Map object for examples. Objects vs. Maps: Object is similar to Map—both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. For this reason (and because there were no built-in alternatives), Object has been used as Map historically. One of the common use cases of a Map can be to build an LRU data structure or cache mechanism. We have the inserted items in an ordered list, and we can have a size limit and store/read data from the cache. Official Mozilla MDN: https://lnkd.in/dyyc_cPP). Hackr io for more info: https://lnkd.in/dR-hfD8r #javascript #datastructure #algorithm #map #typescript #frontend #backend #nodejs #javascriptengineer #frontendengineer

Day 69 of #100DaysOfCode Understanding JavaScript Collections: Sets, WeakSets, Maps & WeakMaps Today I explored how JavaScript handles unique data and key-value pairs through its collection objects Set, WeakSet, Map, and WeakMap. Let’s break it down 👇 🌿 Set A Set stores unique values of any type — numbers, strings, or objects. Duplicates are ignored, and each value appears only once. const trees = new Set(['Baobab', 'Jackalberry', 'Mopane Tree']); trees.add('Breadfruit'); console.log(trees.size); // 4 Common methods: add(), delete(), has(), clear(), forEach(), keys(), values() 🌱 WeakSet A WeakSet only stores objects (no primitives). Its references are “weak,” meaning if the object is no longer used anywhere else, it’s automatically garbage-collected — helping free memory. const treeWeakSet = new WeakSet(); treeWeakSet.add({ name: 'Baobab' }); Key difference: WeakSets are not iterable and don’t expose their contents. FeatureSetWeakSet Type of ValuesAny data typeOnly objects ReferencingStrongWeak IterationIterableNot iterable Use CaseUnique data trackingEfficient memory management 🗺️ Map A Map stores key-value pairs like an object — but with extra powers. Unlike plain objects, keys can be of any type, including objects, arrays, and functions. const myTreesMap = new Map(); myTreesMap.set({ type: 'deciduous' }, 'Maple tree'); myTreesMap.set(42, 'Oak tree'); myTreesMap.set(true, 'Birch tree'); Common methods: set(), get(), has(), delete(), clear(), forEach() ✅ Maps are iterable and have a .size property. 🍃 WeakMap A WeakMap is similar to a Map — but its keys must be objects. It holds weak references, meaning once an object key is no longer used elsewhere, it gets garbage-collected automatically. const myTreeWeakMap = new WeakMap(); myTreeWeakMap.set({ id: 1 }, 'Maple tree'); WeakMap methods: set(), get(), has(), delete() FeatureMapWeakMap Key TypeAny data typeOnly objects Use CaseAssociate data with any keyTrack object-related data IterationIterableNot iterable Size PropertyHas .sizeNo .size 💡 TL;DR: Set → Unique values WeakSet → Unique objects (memory-safe) Map → Key-value pairs of any type WeakMap → Object keys only (memory-safe) 🧩 Each structure has a unique use case. Choose based on what you need: data uniqueness, key-value pairing, or efficient memory management.

Web Development with vibe coding: JavaScript : Day-2: What are Data Types in JavaScript? Data types define the kind of value a variable can hold. JavaScript is a dynamically typed language, meaning you don’t need to declare the type of variable — it is determined automatically based on the value. data types are divided into two categories: 👉 Primitive Data Types 👉 Non-Primitive (Reference) Data Types 🔹 Primitive Data Types Primitive data types are basic and immutable — they store a single value. There are 7 primitive types in JavaScript. 🟢 1. String Definition: Represents a sequence of characters (text). Strings are enclosed in single (' '), double (" ") or backticks (` `). Example: let name = "Sree"; let message = 'Welcome to JavaScript'; let greeting = `Hello, ${name}!`; 🟢 2. Number Definition: Represents numeric values — integers, decimals, and negatives. Example: let age = 23; let price = 199.99; let temperature = -10; 🟢 3. Boolean Definition: Represents true or false — mainly used in conditions or comparisons. Example: let isStudent = true; let isCompleted = false; 🟢 4. Undefined Definition: A variable that has been declared but not assigned a value automatically gets the value undefined. Example: let city; console.log(city); // Output: undefined 🟢 5. Null Definition: Represents no value or an empty value. It must be assigned manually. Example: let car = null; console.log(car); // Output: null 🟢 6. BigInt (ES2020) Definition: Used to represent very large integers that exceed the Number limit. Example: let bigNum = 123456789012345678901234567890n; console.log(bigNum); 🟢 7. Symbol (ES6) Definition: Used to create unique identifiers for objects. Even if two symbols have the same description, they are always unique. Example: let id1 = Symbol("id"); let id2 = Symbol("id"); console.log(id1 === id2); // Output: false 🔸 Non-Primitive (Reference) Data Types: Non-primitive data types are mutable and store collections or complex data. They are stored by reference, not by value. There’s 1 main non-primitive type in JavaScript: Object (which includes arrays and functions). 🟠 1. Object Definition: An object stores data in key-value pairs. Example: let person = { name: "Usha", city: "Bangalore", isStudent: true }; console.log(person.name); // Output: Usha 🟠 2. Array (a type of Object) Definition: Used to store multiple values in a single variable. Example: let fruits = ["Apple", "Mango", "Banana"]; console.log(fruits[1]); // Output: Mango 🟠 3. Function (a type of Object) Definition: A block of code designed to perform a specific task and can be reused. Example: function greet() { console.log("Hello, welcome!"); } greet(); // Output: Hello, welcome! A big thank you to #SrujanaVattamwar for teaching in such a clear and engaging way. Your explanations made JavaScript concepts so easy to grasp. Grateful for your guidance and support in my learning journey! #flm #frontlinesmedia #frontlinesedutech

✅ Day 5 – JavaScript Fundamentals (Part 3) ⚡ Wrapping up my JavaScript Fundamentals revision today with some powerful concepts — Methods, String Methods, JSON, Local & Session Storage 💡 --- 🔹 1️⃣ Methods: Functions defined inside objects 🧩 → const user = { name: "Rutik", greet(){ console.log("Hello 👋 " + this.name); } }; user.greet(); --- 🔹 2️⃣ String Methods: Help manipulate and format text ✍️ → let text = "JavaScript"; text.length 📏 → gives 10 text.toUpperCase() 🔠 → JAVASCRIPT text.toLowerCase() 🔡 → javascript text.slice(0,4) ✂️ → Java text.replace("Java","JS") 🔁 → JSScript text.concat(" Rocks!") 💬 → JavaScript Rocks! --- 🔹 3️⃣ JSON (JavaScript Object Notation): Used to store & exchange data 📦 → let obj = {name:"Rutik",age:22}; let jsonStr = JSON.stringify(obj); ➡ Object → String let newObj = JSON.parse(jsonStr); ➡ String → Object --- 🔹 4️⃣ Local & Session Storage: For storing data in browser 🖥️ Local Storage 🧱 → Permanent until cleared localStorage.setItem("name","Rutik"); localStorage.getItem("name"); Session Storage 🔒 → Cleared after tab closes sessionStorage.setItem("city","Mumbai"); sessionStorage.getItem("city"); 💻 Mini Example: let person={name:"Rutik",skill:"JS"}; localStorage.setItem("data",JSON.stringify(person)); let getData=JSON.parse(localStorage.getItem("data")); console.log("Hello "+getData.name+" 👋 skilled in "+getData.skill+" ⚡"); --- ✨ Key Takeaway: Methods organize logic 🧩 | Strings handle text 📝 | JSON connects frontend & backend 🌐 | Storage keeps data alive 💾 #JavaScript #WebDevelopment #FullStackDeveloper #LearningInPublic #CareerGrowth #KeepGrowing

#4 Just wrapped up an intense session on the backbone of JavaScript: Arrays and Objects. These aren't just data structures; they're the building blocks for everything we do. Here’s a quick rundown of my key takeaways: JavaScript Deep Dive: Taming Arrays & Objects! 🚀 📌 Arrays: The Ordered Lists More than just [1, 2, 3], arrays are powerhouses with methods that can make or break your code. The Mutable vs. Immutable Showdown: slice(): The polite one. It takes a copy of a section without disturbing the original. splice(): The disruptive one. It removes/replaces elements in the original array. (A classic interview question! ✅) Combining Arrays: Forget push(array) which creates nested arrays! Use concat() or the more modern Spread Operator ... to cleanly merge arrays. Powerful Prototypes: Methods like Array.from() to create arrays from array-like objects (like a string) and flat() to flatten nested arrays are game-changers. 📌 Objects: The Key-Value Kings Objects store structured data, and mastering them is non-negotiable. Two Ways to Create: Object Literals: const obj = { key: 'value' } (Most common) Constructor: Object.create() (Creates a singleton) Constructor method with new Object() Accessing Properties: You can use dot notation (obj.key) or bracket notation (obj["key"]). Bracket notation is essential for keys with spaces or dynamically generated keys. Symbol as a Key: You can use a Symbol for a unique, non-enumerable property key. A hidden gem for defining special properties. Object.freeze() vs. Object.seal(): - freeze(): Makes an object immutable. No changes, additions, or deletions. - seal(): Allows modification of existing properties, but prevents adding or removing new ones. 🔥 Leveling Up: Higher-Order Functions & Destructuring Array Methods that Shine: - map(): Transform each element. (Create a new array of doubled values). - filter(): Select elements based on a condition. - reduce(): Boil down the array to a single value (like a sum). - forEach(): Execute a function for each element (but doesn't return a new array like map). Destructuring Magic: This is a syntax superpower! - Arrays: const [first, second] = myArray - Objects: const { name, email } = userObject It makes code incredibly clean and readable, especially in function parameters and React props. 💡 The Big Revelation: Understanding the difference between shallow copy and deep copy is crucial when working with these structures to avoid unintended side effects. It's amazing how much power is packed into these fundamentals. The more you learn, the more you realize how elegant and powerful JavaScript can be. What's your favorite JavaScript array or object method? Any "aha!" moments when you first understood destructuring? Share below! 👇 #JavaScript #Programming #WebDevelopment #Coding #LearnToCode #SoftwareEngineering #Arrays #Objects #Destructuring #LinkedInLearning #Tech

🧠 Chapter 2: Data Types + Type System 💻 JavaScript – Learn Everything Series #JavaScript #Coding #Cognothink Every value in JavaScript has a type. The type tells us what kind of data it is — a number, text, boolean, object, etc. There are two main types of data 👇 🔹 Primitive Types (stored directly) 1️⃣ String → Text "Hello", 'World' 2️⃣ Number → Any numeric value 5, -10, 3.14 3️⃣ Boolean → True or False true, false 4️⃣ Undefined → Declared but not assigned let x; // undefined 5️⃣ Null → Empty value on purpose let y = null; 6️⃣ Symbol → Unique identifier 7️⃣ BigInt → Very large number 12345678901234567890n 🔹 Reference Types (stored by reference) 📦 Object { name: "Harsh", age: 26 } 📦 Array [10, 20, 30] 📦 Function function greet() {} 🧩 These are stored in memory as references, not copied directly. 🔍 typeof Operator Check what type a value is: typeof "Hi" // "string" typeof 99 // "number" typeof true // "boolean" typeof undefined // "undefined" typeof null // "object" ❗ (old JS bug) typeof [] // "object" typeof {} // "object" typeof function(){}// "function" 🔁 Type Conversion (Coercion) JavaScript sometimes changes types automatically: "5" + 1 // "51" → number to string "5" - 1 // 4 → string to number true + 1 // 2 null + 1 // 1 undefined + 1 // NaN ⚠️ Be careful! It can be confusing. ⚖️ == vs === 5 == "5" // true (checks value only) 5 === "5" // false (checks value + type) ✅ Always use === for clear and correct results. 🧪 NaN – Not a Number typeof NaN // "number" Funny but true — “Not a Number” is actually a number 😄 💡 Truthy and Falsy Falsy values → false, 0, "", null, undefined, NaN Everything else is truthy — even "0", "false", [], {} if ("0") console.log("Runs"); // "0" is truthy ✨ In Short ✅ 7 Primitive Types ✅ 3 Reference Types ✅ Use typeof to check ✅ Use === for safety ✅ Watch out for coercion 💬 Which data type or bug confused you the most when you started learning JavaScript? Share in the comments 👇 #JavaScript #WebDevelopment #Coding #LearnJS #Cognothink #Frontend #Backend #FullStack #JSBasics

👉 JavaScript Deep Dive: Mastering the Singly Linked List Hey Let's dive into a foundational Data Structure that every developer should master: the Singly Linked List (SLL). While arrays are native to JS, understanding and implementing an SLL is crucial for technical interviews and a deeper understanding of how data can be organized efficiently. What is a Singly Linked List? An SLL is a linear data structure where elements are not stored in contiguous memory locations. Instead, it's a collection of individual units called Nodes, where each node: Holds a piece of Data (or value). Contains a Pointer (or reference) to the next node in the sequence. The list is traversed from the Head (the first node) in a single direction until it reaches the end, indicated by a node whose pointer is null. Implementation in JavaScript (The Core) We typically implement an SLL using two classes: Node and SinglyLinkedList. 1. The Node Class This is the building block. JavaScript class Node {     constructor(value) {         this.value = value;         this.next = null;     } } 2. The SinglyLinkedList Class This manages the list structure. It usually tracks the head, tail, and length. JavaScript class SinglyLinkedList { constructor() { this.head = null; this.tail = null; this.length = 0; } } Key Operations & Why SLLs Shine The real power of SLLs lies in their performance for certain operations: OperationDescriptionTime ComplexityArray ComparisoninsertAtHeadAdding a node to the beginning of the list.O(1)Arrays require shifting all elements (O(n)).insertAtTailAdding a node to the end of the list.O(1)If you track the tail pointer, it's a simple update.deleteAtHeadRemoving the first node.O(1)Arrays require shifting all elements (O(n)).searchFinding a specific node by its value.O(n)Similar to arrays, you must traverse element by element. The takeaway: If your application frequently requires insertion or deletion at the beginning of a large collection (like implementing a simple Stack or Queue), a Singly Linked List offers superior O(1) performance compared to an array's O(n). Practical Application Singly Linked Lists are often used as the underlying structure for: Stacks (LIFO): Adding/Removing from the head is O(1). Queues (FIFO): Adding to the tail and removing from the head is efficient. Implementing an "Undo" feature in an application. Mastering this fundamental structure will give you a significant edge in building robust and scalable applications. What are your favorite data structures to implement in JavaScript? Share your thoughts below!

🔍 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸? The Call Stack is a LIFO (Last In, First Out) data structure that JavaScript uses to track function execution. Every time a function is called, it’s pushed onto the stack, and once executed, it’s popped off. 📘 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: function first() {   console.log("First");   second(); } function second() {   console.log("Second"); } first(); 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗙𝗹𝗼𝘄: 1️⃣ first() is pushed to the stack 2️⃣ console.log("First") runs 3️⃣ second() is called → pushed to stack 4️⃣ console.log("Second") runs → popped from stack 5️⃣ first() finishes → popped from stack ⚡ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽? JavaScript is single-threaded, meaning it executes one task at a time. The Event Loop allows JS to handle asynchronous tasks like setTimeout, fetch, or DOM events without blocking the main thread. 𝗜𝘁 𝘄𝗼𝗿𝗸𝘀 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀: 1. JS executes synchronous code in the Call Stack. 2. Asynchronous tasks are sent to Web APIs (like timers, HTTP requests). 3. Once ready, callbacks are queued in the Callback/Task Queue. 4. The Event Loop continuously checks if the Call Stack is empty — if yes, it pushes the next callback from the queue. 📘 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: console.log("Start"); setTimeout(() => {   console.log("Inside Timeout"); }, 0); console.log("End"); 𝗢𝘂𝘁𝗽𝘂𝘁: Start   End   Inside Timeout Even with 0ms, setTimeout runs after the current stack is empty — that’s the Event Loop in action! 💡 𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗠𝗮𝘁𝘁𝗲𝗿𝘀 ✅ Helps you write non-blocking, performant code ✅ Explains tricky behaviors like async/await, promises, and timers ✅ Essential for interview questions — every JS developer should master it 🧠 𝗧𝗼𝗽 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 #𝟯: Q: Explain the Event Loop in JavaScript. A: The Event Loop is a mechanism that allows JS to handle asynchronous operations. It monitors the Call Stack and Callback Queue, ensuring that async callbacks are executed only when the stack is empty. 🎯 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀: 1. JS is single-threaded, but async tasks are handled via the Event Loop. 2. The Call Stack manages execution context in LIFO order. 3. Understanding this prevents bugs related to timers, async code, and promise chaining. Comment if you’ve ever been confused why setTimeout(..., 0) doesn’t run immediately! #JavaScript #EventLoop #CallStack #AsyncJS #WebDevelopment #NodeJS #InterviewPreparation #TechTips #JavaScriptInterviewQuestions #FrontendDevelopment #CodingTips #AsyncProgramming