Rutik Phatak’s Post

🧠 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

#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

Day 02: Variables and DataTypes Variables: Variables are used to store data in Javascript. var: can be re-declared and re-assigned. let: can be re-assigned but not re-declared. const: cannot be re-assigned or not re-declared. Examples: //var var address = "Bangalore"; var address = "USA"; //let let address = "Bangalore"; if we re-declare the variable again using let let address = "USA"; we get this error if we console this variable: SyntaxError: Identifier 'address' has already been declared //const const address; if we declare a variable using const but not initialize it will give the following error: SyntaxError: Missing initializer in const declaration const address = "Bangalore"; const address = "USA"; getting same error SyntaxError: Identifier 'address' has already been declared with this we can easily judge which variable can be used in which scenario. Data Types: a) Primitive Data Types -`String` - Text values ("Hello")   - `Number` - Numeric values (25, 3.14)   - `Boolean` - True/False (true, false)   - `Undefined` - A variable declared but not assigned (let x;)   - `Null` - Represents "nothing" (let y = null;)   - `BigInt` - Large numbers (BigInt(12345678901234567890))   - `Symbol` - Unique identifiers (Symbol("id")) b) Non-Primitive Data Types (Reference Data Types):  - `Object` - Collection of key-value pairs   - `Array` - Ordered list of values   - `Function` - Code that can be executed These are the datatypes we usually use in JavaScript programming.

JavaScript Gems 💎: Unlocking the Power of WeakMap & WeakSet Body: Ever wondered how to manage memory efficiently in your JavaScript applications or create truly private object properties? Let's talk about two advanced but incredibly useful data structures: WeakMap and WeakSet. They are the more discreet cousins of Map and Set, but with a key superpower: they hold "weak" references to their keys. What does that mean? 🤔 In a nutshell, if an object is only referenced as a key in a WeakMap or a value in a WeakSet, the JavaScript engine's garbage collector can automatically remove it and free up memory. This prevents memory leaks! 🧹 Let's break them down: ➡️ WeakMap: The Key-Value Store with a Secret · Keys MUST be objects (not primitives). · Values can be anything. · Perfect for storing private data or metadata associated with an object. Example: Attaching Private Data ```javascript const privateData = new WeakMap(); class User { constructor(name) { // `this` (the instance) is the key, the object is the value. privateData.set(this, { internalId: Math.random() }); this.name = name; } getSecret() { // We can retrieve the data only if we have the instance. return privateData.get(this); } } const alice = new User('Alice'); console.log(alice.getSecret()); // { internalId: 0.123... } // When `alice` goes out of scope, the entry in `privateData` becomes eligible for garbage collection! ``` ➡️ WeakSet: The Exclusive Object Club · Values MUST be objects. · You can only check if an object is present (no getting it back out). · Ideal for tagging or tracking objects without worrying about memory management. Example: Tracking Processed Items ```javascript const processedItems = new WeakSet(); function processItem(item) { if (processedItems.has(item)) { console.log('Item already processed, skipping...'); return; } // ... do some processing ... processedItems.add(item); console.log('Item processed!'); } let item1 = { id: 1 }; processItem(item1); // "Item processed!" processItem(item1); // "Item already processed, skipping..." // No need to manually remove `item1` from the set. When the item itself is gone, the WeakSet entry vanishes. ``` Key Takeaway: UseWeakMap and WeakSet when you need to associate data with objects or track groups of objects, and you want the JavaScript engine to handle the cleanup for you. It's a powerful pattern for building robust, memory-efficient applications. #JavaScript #WebDevelopment #Programming #Coding #SoftwareEngineering #MemoryManagement #Frontend #AdvancedJavaScript

JSX කියන්නේ මොකද්ද? JSX කියන්නේ JavaScript code එක තුළ HTML වගේ syntax එක ලියන්න පුලුවන් ක්රමයක්. Ex: function Welcome() {  return <h1>හෙලෝ React!</h1>; } මේකේ <h1> tag එකක් තියනාවා, ඒත් මේක pure HTML එකක් නෙවේ, JavaScript object එකකට compile වෙන JSX එකක්. JSX වැඩ කරන්නේ කොහොමද? JSX browser එකට direct තේරුම් ගන්න බෑ. ඒ නිසා Babel compiler එකක් මඟින් JSX code එක React.createElement function call එකකට transform කරනවා. Ex: const element = <h1>Welcome, Saveen!</h1>; Compile වුනොට පස්සේ: const element = React.createElement("h1", null, "Welcome, Saveen!"); ඒ වගේ, JSX කියන්නේ HTML වගේ syntax එකක් JavaScript object එකකට translate වෙන එකට. JSX විශේෂ ලක්ෂණ 1. JavaScript expressions {} තුළ යොදා ගන්න පුළුවන් const name = "Saveen"; const element = <h1>Hello, {name}!</h1>; 2. Attributes JSX එකේ HTML වගේ use කරන්න පුළුවන් const element = <img src="logo.png" alt="Logo" />; 3. Components nesting JSX තුළ nested components create කරන්න පුළුවන් function App() { return (    <div>     <Welcome />     <Footer />    </div>   ); } JSX භාවිතයේ වාසි UI code එක කියවන්න ලේසී. JavaScript සහ HTML එකම තැන ලියන නිසා development efficiency වැඩි වෙයි. React components create කිරීම modular හා reusable වේ. ඒ නිසා JSX කියන්නේ React development වල core foundation එක. HTML වගේ syntax එක JavaScript code එකේ use කරන්න ලැබීමෙන්, UI development වැඩේ clean, maintainable, සහ scalable වෙනවා. #ReactJS #JSX #WebDevelopment #FrontendDevelopment #SaveenMaduranga

🚀✨ JavaScript BASICS:: Objects & Prototypes:- What, Why, and How 🚀✨ 🤔 What are They? 🤔 - Objects Think of objects as boxes 📦 that hold related info (data) and actions (functions). Example: a person with name and age stored as properties. - Prototypes Prototypes are “blueprints” 🏗️ or hidden links objects use to share methods and properties. They let objects borrow functionality instead of copying it everywhere. 💡Why Do We Need Them? 💡 - Objects They organize your code by grouping related data and functions together. Imagine grouping your contacts with their phone numbers and emails neatly in one place! - Prototypes They save memory and avoid repetition by sharing common methods across many objects. Instead of rewriting the same function in every object, just write it once on the prototype! 🔨 How to Use Them? 🔨 - Objects Create with simple syntax using {} or constructor functions: /*___________Code_Start___________*/ const person = { name: "Anna", age: 25 }; function Person(name) { this.name = name; } const bob = new Person("Bob"); /*___________Code_End___________*/ - Prototypes Add shared methods to prototypes so every object can use them: /*___________Code_Start___________*/ Person.prototype.greet = function() { console.log(`Hello, I am ${this.name}`); }; bob.greet(); // Hello, I am Bob /*___________Code_End___________*/ Or create objects linked to prototypes: /*___________Code_Start___________*/ const animal = { speak() { console.log("Animal sound"); } }; const dog = Object.create(animal); dog.speak(); // Animal sound /*___________Code_End___________*/ In short: - Objects = your data containers 📦 - Prototypes = shared blueprints 🏗️ Together they make your JavaScript code smarter, cleaner, and faster! ⚡ ⚠️ Note:- This post is for #interview preparation purposes only. Avoid using prototype manipulation techniques like Object.setPrototypeOf() in real-time production code due to performance and maintainability issues. #JavaScript #CodingBasics #Objects #Prototypes #BeginnerFriendly #ReactJS #ReactNative #LearnToCode #DevTips

👏hello everyone #10000coders #harish sir #meghana madam #java script JavaScript functions conceptually and represent them in diagram format (as text-based flow diagrams). 🧩 What is a Function in JavaScript? A function is a reusable block of code that performs a specific task. It helps you avoid repeating code and improves readability and maintainability 📘 Basic Syntax function functionName(parameter1, parameter2) { // Code to be executed return result; } 🧠 Function Execution Flow (Diagram) +-------------------------+ | Function Declaration | | function add(a, b) { | | return a + b; | | } | +-----------+-------------+ | v +-------------------------+ | Function Call: add(5, 3)| +-----------+-------------+ | v +-------------------------+ | Arguments passed: a=5, | | b=3 | +-----------+-------------+ | v +-------------------------+ | Function executes code | | return a + b => 8 | +-----------+-------------+ | v +-------------------------+ | Result returned: 8 | +-------------------------+ --- 🧩 Types of Functions in JavaScript Type Example Diagram Explanation 1. Named Function function greet() { console.log("Hello"); } Defined with a name → Can be called later. 2. Anonymous Function const greet = function() { console.log("Hi"); } No name, assigned to a variable. 3. Arrow Function const sum = (a, b) => a + b; Shorter syntax, auto return for one-liners. 4. Function Expression let x = function(y) { return y * y; }; Created at runtime, stored in a variable. 5. Callback Function setTimeout(() => console.log("Done"), 1000); Passed as an argument to another function. 6. Immediately Invoked Function (IIFE) (function(){ console.log("Run immediately"); })(); Runs as soon as it’s defined. 🔁 Function Lifecycle Diagram [ Define Function ] | v [ Call Function ] | v [ Pass Arguments ] | v [ Execute Function Body ] | v [ Return Value ] | v [ Use Returned Result ] --- 🧩 Example with Return Value function multiply(x, y) { return x * y; } let result = multiply(4, 5); console.log(result); // Output: 20 Diagram +---------------------+ | multiply(4, 5) | +----------+----------+ | v +---------------------+ | x = 4, y = 5 | | return 4 * 5 = 20 | +----------+----------+ | v +---------------------+ | result = 20 | +---------------------

If you call yourself a JavaScript developer,then these are the concepts you must be aware of Knowing just the basics won't cut it anymore. Here’s a roadmap of concepts I believe every developer should master: 1. Array Buffer & Typed Arrays 2. Array Destructuring 3. Array Methods (map, filter & more) 4. Arrow Functions Vs. Regular Functions 5. Async / Await 6. Bitwise Operators 7. call(), apply(), bind() 8. Callbacks 9. Canvas API 10. Clean Code Practices in JavaScript 11. Client-Side Routing 12. Closures 13. Code Splitting 14. Cross-Browser Compatibility 15. Cross-Origin Resource Sharing (CORS) 16. Currying 17. Custom Events 18. Debounce vs Throttle 19. Debouncing and Throttling 20. Deep vs. Shallow Copy 21. Design Patterns (Observer, Singleton, Factory, etc.) 22. Destructuring 23. Destructuring Assignment 24. Destructuring Nested Objects/Arrays 25. DOM Manipulation 26. Dynamic Imports 27. Dynamic Typing 28. Equality Operators (== vs ===) 29. Error Boundaries (in React.js) 30. Error Handling (Try/Catch/Throw) 31. ES6 Features (Arrow Functions, Classes, Modules, Destructuring) 32. Event Bubbling and Capturing 33. Event Delegation 34. Event Handling (addEventListener) 35. Event Loop 36. Fetch API 37. Functions 38. Generator Functions 39. Geolocation API 40. Geolocation vs Location Services 41. Global and Local Object (window, globalThis) 42. Hoisting 43. IIFE (Immediately Invoked Function Expression) 44. Inheritance (Class-based) 45. Intersection Observer API 46. JavaScript Memory Management (Garbage Collection) 47. JavaScript vs ECMAScript 48. JSON 49. Lazy Loading 50. Map and Set 51. Memoization 52. Methods 53. Module Pattern 54. Modules (Import/Export) 55. MutationObserver 56. NaN (Not a Number) 57. Object 58. Object Literal Shorthand 59. Object.assign() 60. Performance Optimization 61. Polyfills 62. Promise.all() 63. Promises 64. Prototypal Inheritance 65. RegEx (Regular Expressions) 66. Scope (Function vs Block Scope) 67. Service Workers 68. Set and Map Iteration 69. Set vs Map 70. SetTimeout and SetInterval 71. Shadow DOM 72. Template Literals 73. Shadowing 74. Spread & Rest Operators 75. Strict Mode 76. SVG Manipulation 77. Web Workers & WebSockets 78. This Keyword 79. Boolean Values 80. let, var & const 81. Type Coercion vs Type Conversion 82. URL API (URLSearchParams, URL objects) 83. WeakMap & WeakSet 84. Web Animations 85. localStorage & sessionStorage Built for you: For DSA Prep: ✅ Notes that are concise and clear ✅ Most-asked questions per topic ✅ Real patterns + approaches 👉 Grab the DSA Guide → https://lnkd.in/d8fbNtNv For ReactJS Prep: ✅ Handwritten notes ✅ Interview-focused ✅ Covers fundamentals 👉 Grab the React Guide → https://lnkd.in/dpDy_i2W 𝐅𝐨𝐫 𝐌𝐨𝐫𝐞 𝐃𝐞𝐯 𝐈𝐧𝐬𝐢𝐠𝐡𝐭𝐬 𝐉𝐨𝐢𝐧 𝐌𝐲 𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐭𝐲: Telegram → https://lnkd.in/d_PjD86B Whatsapp → https://lnkd.in/dvk8prj5 Built for devs who want to crack interviews