JavaScript Variables & Data Types Explained

Day 87 of me reading random and basic but important dev topicsss....... Today I read about the Blobs in JavaScript As a developer, we deal with file uploads or downloads in the browser. But what happens under the hood and how JS handles binary data? While ArrayBuffer is part of the core ECMA standard, the browser’s File API gives us a higher-level abstraction: The Blob (Binary Large Object). What exactly is a Blob? Unlike a raw ArrayBuffer, a Blob represents binary data with type. It consists of an optional string type (usually a MIME-type) and blobParts (a sequence of strings, BufferSources, or even other Blobs). Construction We construct them by passing an array of parts and an options object: let blob = new Blob( [new Uint8Array([72, 101, 108, 108, 111]), ' ', 'world'], { type: 'text/plain', endings: 'native' } ); Immutability Just like JavaScript strings, Blobs are entirely immutable. We cannot directly edit the data inside a Blob. However, we can create new Blobs from existing ones using the .slice() method: blob.slice([byteStart], [byteEnd], [contentType]); This allows us to chop up files for chunked uploads or assemble new files in memory without altering the original binary data. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #SoftwareEngineering #WebAPIs

🚀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝗶𝗽: 𝗝𝗦𝗢𝗡 vs 𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝗱𝗖𝗹𝗼𝗻𝗲() Most developers copy objects like this 👇 const copy = JSON.parse(JSON.stringify(obj)); 👉 Works… but only for simple data ❌ Removes undefined ❌ Converts Date → string ❌ Removes functions ❌ Breaks for Map, Set, circular refs ✅ 𝗠𝗼𝗱𝗲𝗿𝗻 𝘄𝗮𝘆: const copy = structuredClone(obj); ✔️ Real deep clone ✔️ Keeps Date, Map, Set ✔️ Handles circular references ✔️ Clean & safe 💡 𝗥𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯: Use structuredClone() in modern apps Use JSON method only for basic data #JavaScript #Frontend #WebDevelopment #CodingTips 🚀

Most beginners start JavaScript… but don’t understand variables & data types deeply. They declare variables. Store values. Write basic code. It feels easy — until logic gets complex. Then the real problems start: Confusion in data handling. Unexpected bugs. Weak logic building. Difficulty scaling code. In 2026, JavaScript isn’t about syntax. It’s about building strong logic foundations. This is where it starts: • Understanding var, let, const clearly • Knowing different data types (string, number, boolean, object, array) • Storing and managing data efficiently • Writing clean and predictable logic • Avoiding common beginner mistakes Because strong logic doesn’t come from frameworks — it comes from mastering the basics. Curious — are your fundamentals strong or just “working somehow”? #JavaScript #WebDevelopment #Coding #Programming #FrontendDevelopment #LearnToCode #DeveloperLife #JSBasics

Day 09 (Project) : Fetching Real-World Data with JavaScript! 🌐💾 I’m excited to share my latest project—a dynamic "User Data List" application built with HTML, CSS, and JavaScript! This project was a deep dive into how modern web applications communicate with external servers. Key features of this project: • 📡 Fetch API: Implemented asynchronous requests to retrieve user information from a REST API. • ⏳ Loading State: Added a "Loading..." indicator to improve user experience while data is being fetched. • 📊 Dynamic Table Generation: Used JavaScript to iterate through the retrieved data and populate a clean, organized HTML table. • 🎨 Responsive UI: Designed a simple and intuitive interface for seamless data viewing. Mastering the Fetch API is a major step in my journey toward building full-stack applications. It’s amazing to see how a few lines of code can connect a webpage to a world of data! #JavaScript #WebDevelopment #FetchAPI #CodingJourney #FrontendDeveloper #Programming #TechSkills #LearningByDoing #Amarjeet Sir Gravity Coding

📣 𝗡𝗲𝘅𝘁 𝗕𝗹𝗼𝗴 𝗶𝘀 𝗛𝗲𝗿𝗲! ⤵️ JavaScript Arrays 101 — Finally Managing Lists Like a Real Program 🧠📋 Storing values in separate variables works… until you need to handle real-world data. This beginner-friendly blog explains arrays in a simple, practical way — so you can start working with lists confidently. 🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/g2CXGSPW 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻: ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺ ⇢ What arrays actually are (simple list mental model) ⇢ Why arrays are needed in real programs ⇢ Creating arrays using square brackets ⇢ Indexing and why arrays start at 0 ⇢ Accessing and updating array elements ⇢ Using the length property ⇢ Looping with for and for...of ⇢ Arrays vs individual variables confusion cleared ⇢ Common beginner mistakes (off-by-one errors, dot notation, etc.) 💬 If JavaScript still feels limited to single values, this article helps you understand how arrays unlock real data handling and scalable logic. #ChaiAurCode #JavaScript #Arrays #ProgrammingBasics #WebDevelopment #Beginners #LearningInPublic #100DaysOfCoding

Non-primitive data types Most JavaScript beginners learn numbers and strings first… But real power starts with non-primitive data types. 🚀 If you want to build real applications, you must understand these. In JavaScript, non-primitive data types can store multiple values and complex data. Here are the most important ones: • Object – Stores data in key–value pairs. Perfect for real-world data like users, products, or settings. • Array – Stores a list of values in a single variable. Great for lists like items, users, or tasks. • Function – A reusable block of code that performs a task. Functions are also treated as objects in JavaScript. • Date, Map, Set – Special objects used for managing time, unique values, and key-value collections. ✨ Key idea: Unlike primitive types, non-primitive types are stored by reference, which changes how copying and comparison work. Master these and your JavaScript skills will level up quickly. #JavaScript #WebDevelopment #FrontendDevelopment #ProgrammingBasics #LearnToCode #SoftwareDevelopment #JavaScriptTips #CodingForBeginners #FullStackDevelopment #TechEducation

Array methods are built-in functions that make it easier to add, remove, search, or transform data in an array, without writing complex loops. If you’re learning JavaScript basics, this might be useful: https://lnkd.in/gDy7in5h Feedback is welcome. Hitesh Choudhary Piyush Garg Anirudh Jwala

📣 𝗡𝗲𝘅𝘁 𝗕𝗹𝗼𝗴 𝗶𝘀 𝗛𝗲𝗿𝗲! ⤵️ Understanding Objects in JavaScript — Finally Making Data Feel Organized 🧠📦 Storing values in separate variables works… until your program starts growing. This blog explains JavaScript objects in a simple, practical way — so beginners can understand how real applications manage structured data. 🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/gt_9TVF4 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻: ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺ ⇢ Why objects are needed in real programs ⇢ Key-value pair mental model ⇢ Creating objects (literal vs constructor way) ⇢ Dot notation vs bracket notation ⇢ Updating, adding, and deleting properties ⇢ Looping through objects using for...in ⇢ Object vs array — beginner confusion cleared ⇢ Array of objects (real-world data pattern) ⇢ Common mistakes beginners make 💬 If JavaScript data still feels scattered across variables, this article helps you understand how objects bring structure, clarity, and scalability to your code. #ChaiAurCode #JavaScript #Objects #ProgrammingBasics #WebDevelopment #Beginners #LearningInPublic #100DaysOfCoding

Javascript: typeof operator ⚡ JavaScript has a tiny operator that reveals BIG truths. It’s called typeof. If you’re new to JavaScript, this operator helps you understand what type of data you’re working with. That’s extremely helpful when debugging or writing safer code. Here’s why developers love using typeof: • It tells you the data type of a variable • It helps debug unexpected values • It works with numbers, strings, booleans, objects, functions, and more • It prevents logic errors in conditions Example: typeof "Hello" // "string" typeof 42 // "number" typeof true // "boolean" typeof undefined // "undefined" typeof {} // "object" 💡 Simple rule: When you're unsure about a value → use typeof. Small operator. Huge debugging power. #JavaScript #WebDevelopment #FrontendDevelopment #LearnToCode #ProgrammingBasics #JavaScriptTips #CodingForBeginners #SoftwareDevelopment #DeveloperCommunity #TechLearning

𝗪𝗵𝗮𝘁'𝘀 𝗗𝗧𝗢𝘀 𝗶𝗻 𝗡𝗲𝘀𝘁 𝗷𝘀 In NestJS, a 𝗗𝗧𝗢 (Data Transfer Object) is an object that defines how data is sent over the network. Think of it as a contract or a blueprint that specifies exactly what data a client (like a mobile app or a browser) must send to your server. While DTOs are a general software pattern, NestJS uses them powerfully to handle validation and type safety. 𝟭. 𝗪𝗵𝘆 𝗱𝗼 𝘄𝗲 𝘂𝘀𝗲 𝗗𝗧𝗢𝘀? Without a DTO, your application wouldn't know if the incoming data is correct. If a user tries to register but sends a "username" as a number instead of a string, your database might crash. DTOs help prevent this by: 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: Ensuring the data has the right format, length, and type. 𝗗𝗮𝘁𝗮 𝗧𝗿𝗮𝗻𝘀𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Stripping away unwanted data that the client shouldn't be sending (e.g., trying to set their own isAdmin status). 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: Providing IntelliSense and auto-completion in your code so you know exactly what properties exist on the request body. 𝟮. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝘃𝘀. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 In NestJS, it is highly recommended to use Classes for DTOs rather than Interfaces. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 are removed during JavaScript compilation, meaning NestJS cannot check them at runtime. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 are preserved in the final code, allowing NestJS to use Pipe validation to check data as it arrives. #Programming #BackendDevelopment #TypeScript #NestJS