JavaScript this binding in arrow functions vs regular functions

🚨 JavaScript Interview Question What will be the output? const obj = { name: "Frontend", regularFunc: function () { console.log(this.name); }, arrowFunc: () => { console.log(this.name); } }; obj.regularFunc(); obj.arrowFunc(); Both functions are inside the same object. But the output is different. This question tests understanding of: • this binding • Arrow functions vs regular functions • Execution context in JavaScript Many developers assume both will print the same value. What do you think the output will be? #JavaScript #FrontendInterview #ReactJS #FrontendDeveloper #JavaScriptConcepts #ProductBasedCompany

🚨 JavaScript Interview Question What will be the output? const obj = { name: "Frontend", greet: function () { console.log(this.name); } }; const greet = obj.greet; greet(); greet.call(obj); greet.bind(obj)(); This question tests understanding of: • this binding • call() • bind() • Function invocation context Many developers expect all three calls to behave the same. But JavaScript handles this differently depending on how the function is invoked. What do you think the output will be? #JavaScript #FrontendInterview #ReactJS #FrontendDeveloper #JavaScriptConcepts #ProductBasedCompany

🚀 **JavaScript Interview Question** What will be the output of this code? ```js const obj = { a: { b: 0 } }; const v1 = obj?.a?.b || 42; const v2 = obj?.a?.b ?? 42; console.log(v1, v2); ``` 🤔 **Think before you scroll...** --- #JavaScript #Frontend #WebDevelopment #CodingInterview #ReactJS

🚨 JavaScript Async Interview Question What will be the output? async function test() { console.log("1"); setTimeout(() => { console.log("2"); }, 0); await Promise.resolve(); console.log("3"); } console.log("4"); test(); console.log("5"); This question tests understanding of: • Call Stack • Async/Await behavior • Microtask queue (Promises) • Macrotask queue (setTimeout) • JavaScript Event Loop Many developers get the order wrong the first time. What do you think the output will be? #JavaScript #FrontendInterview #AsyncJavaScript #EventLoop #ReactJS #FrontendDeveloper #ProductBasedCompany

🚀 Day 6 – Frontend Interview Series 🔥 Topic: Promises (Async JavaScript) 💡 What is a Promise? A Promise in JavaScript is an object that represents the result of an asynchronous operation (like API calls, timers, file reading). 👉 It has 3 states: Pending ⏳ Resolved (Fulfilled) ✅ Rejected ❌ 📦 Basic Example const myPromise = new Promise((resolve, reject) => { let success = true; if (success) { resolve("Task completed!"); } else { reject("Task failed!"); } }); myPromise .then((res) => console.log(res)) .catch((err) => console.log(err)); ⚡ Why Promises? 👉 To avoid callback hell 👉 To handle async code in a clean way 👉 Better readability & chaining #JavaScript #ReactJS #FrontendDeveloper #InterviewPrep #AsyncJS

🔥 Tricky JavaScript Async/Await Interview Question 🔥 What will be the output of this code? 👇 async function test() { try { console.log("1"); await Promise.reject("Error"); console.log("2"); } catch (e) { console.log("3"); } finally { console.log("4"); } } test(); console.log("5"); 💬 Drop your answer before checking 👇 #JavaScript #FrontendDevelopment #AsyncAwait #Promises #WebDevelopment #InterviewPreparation #ReactJS #CodingInterview #EventLoop #JavaScriptTips #SoftwareEngineering

💻 JavaScript Interview Question You will be given a string and two indexes (a and b). Your task is to reverse the portion of that string between those two indices inclusive. str = "javascript", a = 1, b = 5 --> "jcsavaript" East right ? But rather than traversing the string and using 2-pointer technique, you have to use the inbuilt functions of javascript. This tests your understanding of the language and how it works internally. function solve(st, a, b){ return st.slice(0,a)+(st.slice(a, b+1).split("").reverse().join(""))+st.slice(b+1); } Feel free to discuss more in comments 🖐 #javaScript #CodingInterview #WebDevelopment #Frontend #React

JavaScript Interview Question (Confusing but Important 🤯) What will be the output? console.log([] == []); console.log([] === []); console.log({} == {}); console.log({} === {}); 👉 Answer: All will be false Why? Arrays and objects in JavaScript are stored in memory by reference, not by value. Each [] or {} creates a new object with a different memory address, and JavaScript compares references — not structure or content. Same shape ≠ same reference 📌 This is one of the most common JavaScript interview traps. #JavaScript #InterviewQuestions #WebDevelopment #Frontend #Backend #CodingTips

🚨JavaScript Interview Question What will be the output? function greet(name) { if (name === undefined) { console.log("Hello, guest!"); } else { console.log("Hello, "+ name); } greet(); greet("Anas"); greet("Anas", "How are you?"); Looks simple... but there's a twist What will be the output? Why does the last call behave differently? Bonus: How does JavaScript handle extra arguments? #JavaScript #FrontendInterview #WebDevelopment #CodingInterview #ProductBasedCompany

A few weeks ago, I talked about closures in JavaScript because it’s a concept that is frequently asked in technical interviews. But closures are not just an interview topic. They are used all the time in real applications — including React. A good example is React’s useState hook. In the simplified example in the image, both functions returned from the outer function still have access to the same `state` variable. Even though the outer function has already finished executing, those inner functions "remember" the environment where they were created. That’s exactly what a closure is. This is the core idea React relies on to preserve state between renders: functions that still have access to values created earlier. Of course, React’s real implementation is more complex, but the underlying concept is the same. Understanding these fundamentals makes React hooks feel much less like magic, and shows how many of the frameworks and libraries we use every day are built on top of simple JavaScript concepts. #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering