🤯 𝐓𝐡𝐞 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧 𝐓𝐡𝐚𝐭 𝐓𝐮𝐫𝐧𝐬 𝟏𝟎 𝐢𝐧𝐭𝐨 𝐍𝐚𝐍 ['1', '10', '100'].map(parseInt) If you are like most developers, your intuition probably tells you the output will be [𝟏, 𝟏𝟎, 𝟏𝟎𝟎]. It looks like it should just convert the strings to numbers, right? But if you run it, JavaScript gives you a shock: [𝟏, 𝐍𝐚𝐍, 𝟒]. Why does this happen? The confusion stems from how 𝐦𝐚𝐩 and 𝐩𝐚𝐫𝐬𝐞𝐈𝐧𝐭 interact. When you use map(parseInt), the map function passes three arguments to the callback: the element, the index, and the array. However, parseInt accepts two arguments: the string to parse and the 𝐫𝐚𝐝𝐢𝐱 (the number system base). Here is the step-by-step breakdown of what really happens: 1️⃣ 𝐈𝐭𝐞𝐫𝐚𝐭𝐢𝐨𝐧 𝟏: parseInt('1', 0) The index is 0. For parseInt, a radix of 0 defaults to the decimal number system. Result: 𝟏 2️⃣ 𝐈𝐭𝐞𝐫𝐚𝐭𝐢𝐨𝐧 𝟐: parseInt('10', 1) The index is 1. A radix of 1 is an 𝐢𝐧𝐯𝐚𝐥𝐢𝐝 𝐫𝐚𝐧𝐠𝐞 for number systems (which typically start at 2). Because the base is invalid, the function fails. Result: 𝐍𝐚𝐍 3️⃣ 𝐈𝐭𝐞𝐫𝐚𝐭𝐢𝐨𝐧 𝟑: parseInt('100', 2) The index is 2. parseInt treats the number 2 as the binary number system. In binary, "100" equals the decimal number 4. Result: 𝟒 It’s a classic example of why understanding the arguments your functions accept—and what callbacks provide—is crucial in 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭. #JavaScript #CodingInterview #WebDevelopment #ProgrammingHumor #TechTips
JavaScript parseInt() function quirks in coding interview
More Relevant Posts
-
Most developers don’t struggle with JavaScript. They struggle with this. Same function. Different call. Completely different value. That’s why: Code works in one place Breaks in another And interviews get awkward 😅 In Part 8 of the JavaScript Confusion Series, I break down this into 3 simple rules you’ll never forget. No textbook theory. Just a clean mental model. 👉 Read it here: https://lnkd.in/gvc_nG37 💬 Comment THIS if you’ve ever been confused by it. 🔖 Save it for interviews. 🔁 Share with a developer who still avoids this. #javascript #webdevelopment #frontend #programming #reactjs #learnjavascript
To view or add a comment, sign in
-
⚡ JavaScript Event Loop — The Concept That Makes JS Feel “Fast.” Ever wondered how JavaScript handles multiple tasks even though it’s single-threaded? Here are the key things to understand: 🧩 Call Stack Runs your code line by line (one task at a time). 🌐 Web APIs (Browser) Handles slow tasks like setTimeout, fetch, DOM events, etc. 📥 Callback Queue (Task Queue) Stores callbacks waiting to run after the stack is empty. ⚡ Job Queue (Microtask Queue) Promises go here — and it runs before the callback queue ✅ 🔁 Event Loop Continuously checks if the call stack is empty, then pushes queued tasks back to execution. Understanding this helps you: ✅ predict async output order ✅ fix “why is this logging first?” confusion ✅ write better Promise/async-await code ✅ understand sequence vs parallel vs race I wrote a beginner-friendly breakdown with examples. Link in the comments 👇 #JavaScript #WebDevelopment #Frontend #Programming #LearnJavaScript #SoftwareEngineering #Async #EventLoop
To view or add a comment, sign in
-
-
🧩 JavaScript Output-Based Question (`this` + destructuring) ❓ What will be logged? 👉 Comment your answer below (Don’t run the code ❌) Correct Output : undefined 🧠 Why this output comes? (Step-by-Step) 1️⃣ Method works only when called on the object user.getName(); // "Jyoti" 2️⃣ Destructuring extracts the function, not the context const { getName } = user; Here, getName becomes a plain function reference. 3️⃣ Function is called without an object getName(); So: • this is lost • this → global object / undefined (strict mode) • this.name → undefined That’s why nothing is printed. 🔑 Key Takeaways ✔️ this depends on how a function is called ✔️ Destructuring methods breaks their context ✔️ Methods should be bound before destructuring if this is used Extracting a method ≠ calling it as a method #JavaScript #ThisKeyword #InterviewQuestions #FrontendDeveloper #MERNStack #WebDevelopment
To view or add a comment, sign in
-
-
🚀 **Scope in JavaScript (Every Developer Must Understand This)** Scope determines **where a variable is accessible** in your code. If you don’t understand scope, you’ll eventually face unexpected bugs. Let’s break it down 👇 --- ## 🌍 1️⃣ Global Scope Variables declared outside any function are accessible everywhere. ```js let name = "Abhishek"; function greet() { console.log(name); } ``` ✔ Accessible inside functions ✔ Accessible across the file --- ## 🧠 2️⃣ Function Scope (`var`) `var` is function-scoped. ```js function test() { var message = "Hello"; } console.log(message); // ❌ Error ``` It exists only inside the function. --- ## 📦 3️⃣ Block Scope (`let` / `const`) `let` and `const` are block-scoped. ```js if (true) { let age = 25; } console.log(age); // ❌ Error ``` Accessible only inside `{ }` --- ## ⚠ Common Mistake with `var` ```js if (true) { var age = 25; } console.log(age); // 25 😱 ``` Why? Because `var` ignores block scope and leaks outside the block. --- ## 🎯 Best Practice ✅ Use `const` by default ✅ Use `let` when value needs to change ❌ Avoid `var` in modern JavaScript --- Mastering scope makes you stronger in: ✔ Closures ✔ Event Loop ✔ Asynchronous JavaScript ✔ Interviews --- 💬 What should I explain next? 1️⃣ Closures 2️⃣ Event Loop #JavaScript #FrontendDevelopment #WebDevelopment #Programming #CodingInterview #JSConcepts #SoftwareEngineering #FullStackDeveloper #LearnToCode #DeveloperTips #100DaysOfCode #TechCommunity
To view or add a comment, sign in
-
-
𝗪𝗲𝗹𝗰𝗼𝗺𝗲 𝘁𝗼 𝗗𝗮𝘆 𝟴 Have you ever seen JavaScript behave correctly… but still give the wrong output? 🤔 𝘉𝘦𝘧𝘰𝘳𝘦 𝘴𝘤𝘳𝘰𝘭𝘭𝘪𝘯𝘨, 𝘨𝘶𝘦𝘴𝘴 𝘵𝘩𝘦 𝘰𝘶𝘵𝘱𝘶𝘵 𝘰𝘧 𝘵𝘩𝘪𝘴 𝘴𝘪𝘮𝘱𝘭𝘦 𝘤𝘰𝘥𝘦 𝚏𝚘𝚛 (𝚟𝚊𝚛 𝚒 = 𝟷; 𝚒 <= 𝟹; 𝚒++) { 𝚜𝚎𝚝𝚃𝚒𝚖𝚎𝚘𝚞𝚝(() => { 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐(𝚒); }, 𝟷𝟶𝟶𝟶); } 𝗘𝘅𝗽𝗹𝗲𝗰𝘁𝗲𝗱 1, 2, 3 𝗔𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗿𝗲𝘀𝘂𝗹𝘁 4,4,4 𝗧𝗵𝗶𝘀 𝗶𝘀 𝗮 𝗰𝗹𝗼𝘀𝘂𝗿𝗲 𝗯𝘂𝗴 — 𝗼𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗰𝗼𝗺𝗺𝗼𝗻 (𝗮𝗻𝗱 𝗰𝗼𝗻𝗳𝘂𝘀𝗶𝗻𝗴) 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗽𝗶𝘁𝗳𝗮𝗹𝗹𝘀. 𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 • var is function-scoped • setTimeout creates a closure • All callbacks reference the same variable i • When they execute, the loop has already finished Closures don’t capture values — they capture references. 𝗧𝗵𝗲 𝗙𝗶𝘅 𝚏𝚘𝚛 (𝚕𝚎𝚝 𝚒 = 𝟷; 𝚒 <= 𝟹; 𝚒++) { 𝚜𝚎𝚝𝚃𝚒𝚖𝚎𝚘𝚞𝚝(() => { 𝚌𝚘𝚗𝚜𝚘𝚕𝚎.𝚕𝚘𝚐(𝚒); }, 𝟷𝟶𝟶𝟶); } 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝘄𝗼𝗿𝗸𝘀: • let is block-scoped • Each iteration gets its own binding • Each closure remembers a different i 𝗬𝗼𝘂’𝗹𝗹 𝘀𝗲𝗲 𝘁𝗵𝗶𝘀 𝗽𝗮𝘁𝘁𝗲𝗿𝗻 𝗶𝗻: • Event handlers • Async loops • API callbacks • Timers • React effects If you don’t understand closures, You don’t see the bug — you just debug longer. #JavaScript #JSFundamentals #Closures #FrontendDevelopment #WebDevelopment #BugFixing #ReactJS #LearningInPublic
To view or add a comment, sign in
-
-
⚡ There’s an invisible engine inside JavaScript Quietly deciding what runs first and what has to wait. That engine is the Event Loop. Most developers use promises, async/await, and setTimeout every day. But very few actually understand how the execution order is decided. That’s why: Logs appear in the “wrong” order Async bugs feel random Event loop questions confuse even experienced devs In Part 6 of the JavaScript Confusion Series, I break down the Event Loop with a simple visual mental model— so you understand it once, and never forget it. Read it here: https://lnkd.in/d_KnvPeV 💬 Comment “LOOP” and I’ll send the next part. 🔖 Save it for interview prep. 🔁 Share with a developer who still fears async code. #javascript #webdevelopment #frontend #programming #reactjs #learnjavascript #softwareengineering
To view or add a comment, sign in
-
𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭'𝐬 "𝐇𝐢𝐝𝐝𝐞𝐧 𝐂𝐡𝐚𝐢𝐧": 𝐔𝐧𝐥𝐨𝐜𝐤𝐢𝐧𝐠 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐞𝐬 & 𝐈𝐧𝐡𝐞𝐫𝐢𝐭𝐚𝐧𝐜𝐞 🔗🧬 Ever wonder why you can do `"hello".toUpperCase()` even though strings are just simple text (primitives)? Or why JavaScript Classes feel... distinct from other languages? It is all because of 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐚𝐥 𝐈𝐧𝐡𝐞𝐫𝐢𝐭𝐚𝐧𝐜𝐞, the engine running under the hood. 1️⃣𝐏𝐫𝐢𝐦𝐢𝐭𝐢𝐯𝐞𝐬 𝐚𝐫𝐞 "𝐒𝐞𝐜𝐫𝐞𝐭" 𝐎𝐛𝐣𝐞𝐜𝐭𝐬 🕵️♂️ Strings, Numbers, and Booleans are primitives. But when you access a property like `.length`, JS temporarily wraps them in an object (e.g., `new String("Nidhi")`) so they can borrow methods from their prototype. 2️⃣𝐓𝐡𝐞 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐞 𝐂𝐡𝐚𝐢𝐧 ⛓️ When you ask for a property, JS checks the object. If it's not there, it travels up the `__proto__` chain to the parent, then the grandparent, all the way until it hits `null`. • `str.__proto__` ➔ `String` • `String.__proto__` ➔ `Object` • `Object.__proto__` ➔ `null` (The End) 3️⃣𝐂𝐥𝐚𝐬𝐬𝐞𝐬 𝐚𝐫𝐞 "𝐒𝐮𝐠𝐚𝐫" 🍬 The `class` keyword (ES6) is just a friendly syntax wrapper. Internally, `class Student` still creates a function, and `new Student()` still links `__proto__` to `Student.prototype`. 4️⃣𝐓𝐡𝐞 𝐆𝐨𝐥𝐝𝐞𝐧 𝐑𝐮𝐥𝐞: • `prototype`: Belongs to the 𝐂𝐥𝐚𝐬𝐬/𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧 (The Blueprint). • `__proto__`: Belongs to the 𝐈𝐧𝐬𝐭𝐚𝐧𝐜𝐞 (The Link back to the blueprint). Check out the visual guide below to see the chain in action! 👇 How long did it take you to fully grasp the difference between `prototype` and `__proto__`? #JavaScript #WebDevelopment #CodingDeepDive #Prototypes #SoftwareEngineering #Frontend
To view or add a comment, sign in
-
-
🔄 Understanding the sort() Method in JavaScript Sorting is one of the most common operations in programming — whether you're organizing user data, ranking products, or displaying results. JavaScript provides a built-in sort() method that makes this task simple and efficient. 💡 What is sort()? The sort() method is used to arrange elements of an array in place, meaning it modifies the original array. ⚠️ Key Things Every Developer Should Know ✅ sort() mutates the original array ✅ Default sorting treats elements as strings ✅ Always use a compare function for numbers ✅ Efficient for quick data organization 🎯 When Should You Use sort()? 🔹 Displaying ranked data 🔹 Ordering prices or scores 🔹 Alphabetizing lists 🔹 Preparing structured UI data The real power of sort() lies in the compare function — once you master it, you can sort almost anything in JavaScript. #JavaScript #WebDevelopment #Frontend #CodingTips #LearnJavaScript #SoftwareDevelopment
To view or add a comment, sign in
-
-
Why does foo() sometimes log "B" and other times "A"? Understanding JavaScript Hoisting with var and Function Declarations 🚀 If you've ever encountered this code snippet and wondered why the first call logs "B" and the later call logs "A", you’re not alone: What’s going on here? At first glance, one might expect foo to be undefined before the variable assignment line, because of var foo, causing foo() to throw an error on the first call. But JavaScript behaves a bit differently. Here’s why: Key points about hoisting: 1️⃣ Function declarations are fully hoisted — their binding and body are available before execution starts. 2️⃣ Variable declarations (var) are hoisted too but only their names — NOT their assignments. 3️⃣ If a function declaration and a variable declaration share the same name, the function declaration takes priority during hoisting. How execution unfolds step-by-step: The function foo that logs "B" is hoisted — so at runtime, before any code executes, foo points to this function. The variable declaration var foo; is also hoisted, but does not overwrite the function at this stage. When foo(); executes the first time, it calls the hoisted function and logs "B". Then the assignment foo = function() { console.log("A") } runs, overwriting the original function. The second foo(); call then logs "A". Why doesn’t var foo reset foo to undefined before assignment? Because hoisting only lifts the declaration name, not the initialization. The function declaration’s initialization happens before variable declarations. Only when the interpreter reaches the line with the assignment, does foo get assigned the new function expression — and that replaces the original function. Function declarations hoist their definitions first — foo exists as a function at the start. var declarations hoist the variable name but do not initialize it until runtime. The assignment to foo happens in order and overwrites the hoisted function later. Understanding these nuances helps avoid confusions and tricky bugs! Remember: hoisting is about declarations only, not assignments. If this cleared up a mystery for you, or if you have other JavaScript hoisting quirks you want to discuss, drop a comment below! 👇✨ #JavaScript #WebDevelopment #CodingTips #Programming #JavaScriptTips #Hoisting #CodeUnderstanding
To view or add a comment, sign in
-
-
Follow-up to yesterday’s JavaScript `this` question 👇 Yesterday’s output was: 10 2 undefined undefined The issue was: • lost `this` context • accidental global variable usage So what if we want **ALL calls to always print 10**? Here’s a clean and correct solution 👇 Output: 10 10 10 10 🧠Why this works • We always access a through this.a • No accidental mutation of global variables • bind(obj) permanently fixes the context • call(obj) explicitly sets the correct context No matter how the function is invoked, this always points to obj. 🔑 Key Takeaway If a function depends on `this`, make the binding explicit. #JavaScript #ThisKeyword #CallBindApply #InterviewQuestions #FrontendDeveloper #MERNStack
To view or add a comment, sign in
-
More from this author
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development