Mastering JavaScript Functions and Objects

𝗪𝗵𝘆 𝗗𝗼𝗲𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗡𝗲𝗲𝗱 𝗔𝘀𝘆𝗻𝗰 𝗖𝗼𝗱𝗲? JavaScript runs on a single thread. This means it can do one task at a time. You might wonder: if JavaScript can only do one thing at a time, why do we need async code? The answer is simple: to avoid waiting and freezing. - Async code helps JavaScript start a task and continue doing other work. - It comes back when the task is finished. Think of it like cooking rice. You put the rice on the stove and let it cook. While waiting, you can use your phone, clean your room, or drink water. When the rice is ready, you come back. If JavaScript was not async, it would start a long task and wait. During that time, buttons would not work, and the page would feel frozen. Async code tells JavaScript to start a task and handle the result later. For example, you can use setTimeout to log a message after some time: console.log("Start"); setTimeout(() => { console.log("Doing other work"); } JavaScript needs async code so it does not sit idle while waiting for slow tasks. Source: https://lnkd.in/dQHSk38w

𝗛𝗼𝘄 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 𝗪𝗼𝗿𝗸𝘀 𝗜𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝗹𝘆 You want to know how hoisting works in JavaScript. Hoisting is when JavaScript moves declarations to the top of their scope. This happens during the memory creation phase, before code execution. JavaScript runs in two phases: - Memory Creation Phase: JavaScript parses the code and allocates memory for variable and function declarations. - Execution Phase: Code runs line by line, and assignments happen. There are different types of hoisting in JavaScript: - var hoisting: fully hoisted - let and const hoisting: hoisted but not initialized - function declaration hoisting: fully hoisted - function expression hoisting: not fully hoisted For example, with var hoisting: ``` console.log(a); var a = 10; ``` Internally, it becomes: ``` var a; console.log(a); a = 10; ``` But with let and const hoisting, you get a ReferenceError if you try to access the variable before declaration. When JavaScript runs your code, it creates an execution context. This context has two main things: memory and code. Memory stores variables and functions, and code executes line by line. Source: https://lnkd.in/d9Zen2Dc

𝗛𝗼𝘄 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 𝗪𝗼𝗿𝗸𝘀 𝗜𝗻𝘁𝗲𝗿𝗻𝗮𝗹𝗹𝘆 You want to know how hoisting works in JavaScript. Hoisting is when JavaScript moves declarations to the top of their scope. This happens before the code is executed. JavaScript runs in two phases: - Memory Creation Phase: JavaScript parses the code and allocates memory for variables and functions. - Execution Phase: The code runs line by line. There are different types of hoisting in JavaScript: - var hoisting: Variables declared with var are fully hoisted. - let and const hoisting: Variables declared with let and const are hoisted but not initialized. - Function declaration hoisting: Function declarations are fully hoisted. - Function expression hoisting: Function expressions are not fully hoisted. When you run your code, JavaScript creates an execution context. This context has two main things: - Memory: Where variables and functions are stored. - Code: Where the code is executed line by line. Source: https://lnkd.in/d9Zen2Dc

So, JavaScript is all about functions and objects. It's like the foundation of the whole language. You gotta understand how they work. A function is basically a block of code that does something - and you can use it over and over. Simple. But here's the thing: there are a few ways to create functions in JavaScript. You've got your function declaration, function expression, and arrow function - each with its own twist. For example, you can do something like console.log(greet("Ajmal")) - and that's a function in action. Or, you can create a function like const add = function (a, b) { return a + b; } - and that's another way to do it. And then there's the arrow function, like const multiply = (a, b) => a * b - which is pretty cool. Now, objects are a different story. They're like containers that store data in key-value pairs - which is really useful for managing state and behavior. You can think of an object like a person - it's got characteristics (like name, age, etc.) and actions (like walking, talking, etc.). So, objects are all about combining state and behavior in a neat little package. And that's why you can use them to store and manage data in a really efficient way. Check out this article for more info: https://lnkd.in/gTMkkSGP #JavaScript #Functions #Objects

🤔 Quick question: When JavaScript runs async code, where does everything actually go? After learning about the Call Stack and Event Loop, I realized something important: JavaScript doesn’t work alone — it collaborates with Web APIs and queues 👇 --------------------------- console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); console.log("End"); ---------------------------- Output: - Start - End - Timeout 💡 What happens behind the scenes? - console.log("Start") → pushed to the Call Stack - setTimeout → handed off to Web APIs - console.log("End") → runs immediately Once the Call Stack is empty: - Event Loop checks the Task Queue - setTimeout callback is pushed back to the stack - Callback executes How the pieces fit together Call Stack → executes JavaScript Web APIs → handle timers, DOM events, network calls Queues → hold callbacks waiting to run Event Loop → coordinates everything Takeaway JavaScript executes code using the Call Stack, offloads async work to Web APIs, and uses the Event Loop to decide when callbacks can run. #JavaScript #WebDevelopment #FullStack #LearningInPublic

🥇Mastering JavaScript — One Concept at a Time (1/32) What are Variables & why var, let, const really matter. As part of my journey to master JavaScript, I decided to revisit the very basics starting with variables. And honestly, understanding this properly explains so many mistakes I made earlier. 📦What are variables? Variables are like containers that store data. They help us store, reuse, and update information from simple numbers to complex objects and arrays. Think of a variable as a box with a name on it: -The name is the variable identifier -The value is whatever data we put inside In JavaScript, we create these boxes using: 👉 var, let, and const 🧓 var — Old and risky 1️⃣Function scoped (not block scoped) 2️⃣Can be redeclared and reassigned 3️⃣Hoisted and initialised with undefined 🧑💻 let — Modern and safer 1️⃣Block scoped { } 2️⃣Can be reassigned, but not redeclared 3️⃣Hoisted, but stays in the Temporal Dead Zone (TDZ) 🔐 const — Predictable by default 1️⃣Must be assigned at declaration 2️⃣Cannot be reassigned or redeclared 3️⃣Block scoped 4️⃣Also affected by TDZ 🧠 Mindset Revisiting fundamentals is not about “going backwards”, it’s about building stronger foundations. My current approach: - Prefer const by default - Use let only when reassignment is necessary - Avoid var in modern JavaScript - Understanding why these rules exist makes the language feel far more predictable and reliable. 📌 Note: I intentionally didn’t go deep into HOISTING and the TDZ, I will break those down clearly in the next post in this series. This is just the beginning of my journey to master JavaScript — one concept at a time. 💬 How did you first understand the difference between var, let, and const? #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment

✅ Why JavaScript Sorted These Numbers WRONG (But Correctly 😄) This morning’s code was: const nums = [1, 10, 2, 21]; nums.sort(); console.log(nums); 💡 Correct Output [1, 10, 2, 21] Yes — not numerically sorted 👀 Let’s understand why. 🧠 Deep but Simple Explanation 🔹 How sort() works by default 👉 JavaScript converts elements to strings first 👉 Then sorts them lexicographically (dictionary order) So the numbers become strings internally: ["1", "10", "2", "21"] Now JS sorts them like words: "1" "10" "2" "21" Which gives: [1, 10, 2, 21] 🔹 Why this is dangerous Developers expect numeric sorting: [1, 2, 10, 21] But JavaScript does string comparison by default. That’s why this bug appears in: scores prices rankings pagination 🔹 Correct way to sort numbers nums.sort((a, b) => a - b); Now JavaScript compares numbers, not strings. 🎯 Key Takeaways : sort() mutates the original array Default sort() = string comparison Numbers must use a compare function This is one of the most common JS bugs 📌 If you remember only one thing: Never trust sort() without a comparator. 💬 Your Turn Did this ever break your code? 😄 Comment “Yes 😅” or “Learned today 🤯” #JavaScript #LearnJS #FrontendDevelopment #CodingInterview #ArrayMethods #TechWithVeera #WebDevelopment

Ever Wonder How JavaScript Runs in Your Browser? 🚀 Let’s peek under the hood: 1️⃣ JS Arrives in the Browser Your browser downloads HTML, CSS, and JavaScript from the server. JS is just text, but it needs to be understood by the browser to run. 2️⃣ Parsing & Compiling The JavaScript engine (like V8 in Chrome) reads your JS line by line and converts it into machine code your computer can execute. 3️⃣ The Call Stack JS is single-threaded, meaning it runs one task at a time. Functions are added to the call stack when called and removed when finished. 4️⃣ Event Loop & Async Magic JS handles asynchronous tasks (like setTimeout or API calls) with the event loop. Tasks wait in the task queue and are executed when the call stack is empty. 5️⃣ Interaction with the DOM JS manipulates the DOM to update the page dynamically. Changing elements triggers reflows and repaints, so what you see on screen updates instantly. 💡 In a Nutshell: Load JS Parse & Compile Run in Call Stack Handle Async Tasks Update the DOM Understanding this makes debugging and writing efficient JS much easier. #JavaScript #WebDevelopment #Coding #Programming #FrontendDevelopment #WebDevTips #TechInsights #SoftwareEngineering #DeveloperLife #LearnToCode #CodeNewbie #JavaScriptTips #Browser #WebPerformance #AsyncJS

Day 8: Higher Order Functions in JavaScript If you understand Higher Order Functions, you understand real JavaScript. 💡 Because in JavaScript, functions are first-class citizens. 🔹 What is a Higher Order Function? A function that: ✅ Takes another function as an argument OR ✅ Returns another function 🔹 Example 1: Function as Argument function greet(name) { return "Hello " + name; } function processUserInput(callback) { const name = "Shiv"; console.log(callback(name)); } processUserInput(greet); Here, processUserInput is a Higher Order Function because it accepts another function as a parameter. 🔹 Example 2: Function Returning Function function multiplier(x) { return function(y) { return x * y; }; } const double = multiplier(2); console.log(double(5)); // 10 This is the foundation of: ✔️ Closures ✔️ Currying ✔️ Functional programming 🔥 Real-Life Examples in JavaScript You already use Higher Order Functions daily: array.map() array.filter() array.reduce() All of them take a function as input. #Javascript #HigherOrderFunction #WebDevelopment #LearnInPublic

Day-4 var vs let vs const (JavaScript) Why did JavaScript introduce let and const? 🤔 Because var had some serious problems. 🔹 1️⃣ Scope if (true) {   var x = 10;   let y = 20;   const z = 30; } console.log(x); // ✅ 10 console.log(y); // ❌ ReferenceError console.log(z); // ❌ ReferenceError 👉 var → function scoped 👉 let & const → block scoped 🔹 2️⃣ Hoisting Behavior console.log(a); // undefined var a = 10; console.log(b); // ❌ ReferenceError let b = 20; 👉 var is hoisted & initialized as undefined 👉 let / const are hoisted but in Temporal Dead Zone 🔹 3️⃣ Re-declaration & Re-assignment var p = 1; var p = 2; // ✅ allowed let q = 1; // let q = 2; ❌ not allowed const r = 1; // r = 2; ❌ not allowed 👉 var → re-declare & re-assign 👉 let → re-assign only 👉 const → neither 🔹 4️⃣ Best Practices ✅ Use const by default ✅ Use let when value changes ❌ Avoid var in modern JavaScript #WebDevelopment #JavaScript #VarLetConst #FrontendDevelopement #BestPractices