JavaScript Core Concepts: Type Coercion and Equality

Do you know how the JavaScript Array sort method works? There are two things you need to keep in mind when using the array sort method. ✅ The array sort method does not return a new sorted array but it changes the original array ✅ The array sort method by default sorts numbers array as strings Take a look at the below code: const numbers = [20, 55, 45, 30, 95 ]; const sorted = numbers.sort(); console.log(sorted); // [20, 30, 45, 55, 95] console.log(numbers); // [20, 30, 45, 55, 95] As you can see, the sort method changes the original array and returns a reference of the sorted array which we're storing in the 𝘀𝗼𝗿𝘁𝗲𝗱 variable. so numbers and sorted will print the same result. Now, take a look at the below code: const numbers = [100, 25, 1, 5 ]; numbers.sort(); console.log(numbers); what do you think the output of the above code will be? it's not [1, 5, 25, 100] but it's [1, 100, 25, 5] This is because when sorting numbers, each number is converted to a string. The sort method compares character by character, so the "1" in "100" is smaller than the "2" in "25" so while sorting in ascending order, 100 comes before 25. Sorting an array of objects is also a popular interview question. 𝗖𝗵𝗲𝗰𝗸 𝗼𝘂𝘁 𝘁𝗵𝗲 𝗮𝗿𝘁𝗶𝗰𝗹𝗲 𝗹𝗶𝗻𝗸 𝗶𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁 𝘁𝗼 𝗹𝗲𝗮𝗿𝗻 𝗵𝗼𝘄 𝘁𝗼 𝗳𝗶𝘅 𝘁𝗵𝗲 𝗮𝗯𝗼𝘃𝗲 𝗶𝘀𝘀𝘂𝗲𝘀 𝗮𝗻𝗱 𝗮𝗹𝘀𝗼 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴 𝗮𝗯𝗼𝘂𝘁 𝘀𝗼𝗿𝘁𝗶𝗻𝗴 𝗻𝘂𝗺𝗯𝗲𝗿𝘀, 𝗮𝗿𝗿𝗮𝘆𝘀, 𝗮𝗿𝗿𝗮𝘆 𝗼𝗳 𝗼𝗯𝗷𝗲𝗰𝘁𝘀 𝗲𝘁𝗰. 𝘍𝘰𝘳 𝘮𝘰𝘳𝘦 𝘴𝘶𝘤𝘩 𝘶𝘴𝘦𝘧𝘶𝘭 𝘤𝘰𝘯𝘵𝘦𝘯𝘵, 𝘥𝘰𝘯'𝘵 𝘧𝘰𝘳𝘨𝘦𝘵 𝘵𝘰 𝘧𝘰𝘭𝘭𝘰𝘸 𝘮𝘦. #javascript #reactjs #nextjs #webdevelopment

JavaScript Trick You Should Know! Ever thought Object.freeze() makes everything immutable? Think again 👇 const user = Object.freeze({  name: "John",  skills: ["JS"] }); user.skills.push("React"); console.log(user.skills); 🤔 What will be the output? 👉 ["JS"] 👉 ["JS", "React"] 👉 Error 👉 undefined ✅ Answer: ["JS", "React"] 💡 Why? Object.freeze() is shallow, not deep. It prevents changes to the top-level object But nested objects/arrays (like skills) are still mutable So this works 👇 user.skills.push("React"); // ✅ Allowed 🔥 Pro Tip If you need full immutability, you must use a deep freeze approach or libraries like: Immer Lodash (cloneDeep + freeze) Custom recursive freeze function #JavaScript #WebDevelopment #Frontend #CodingTips #Developers #JS #Programming #TechInterview

The React pattern that eliminated 80% of my useEffect calls Most useEffect calls are just bad data derivation. Here is the derived state pattern that cleaned up years of accumulated complexity in my React components. Full breakdown (6 min read) → https://lnkd.in/gsS5RKC4 #ReactJS #Frontend #JavaScript #TypeScript #WebDev #UIEngineering

🔍 JavaScript Quirk: == vs === (this will surprise you) Most devs say: 👉 “Always use ===” But do you know WHY? 👇 console.log(0 == false); console.log("" == false); console.log(null == undefined); 💥 Output: true true true Wait… WHAT? 😳 Why this happens? Because == does type coercion 👉 It converts values before comparing Step by step: ✔ false → 0 ✔ "" → 0 So internally: 0 == 0 // true 👉 Special case: null == undefined → true (but NOT equal to anything else) Now compare with === 👇 console.log(0 === false); console.log("" === false); 💥 Output: false false Because === checks: ✔ Value ✔ Type No conversion. No surprises. Now the WEIRDEST one 🤯 console.log([] == false); 💥 Output: true Why? [] → "" → 0 false → 0 👉 0 == 0 Yes… JavaScript really did that 😅 💡 Takeaway: ✔ == tries to be “smart” (and fails) ✔ === is strict and predictable ✔ Use === by default 👉 "Always use ===" is not a rule… It’s survival advice. 🔁 Save this (you’ll forget this later) 💬 Comment "===" if this clicked ❤️ Like for more JS quirks #javascript #frontend #codingtips #webdevelopment #js #developer

🚀 JavaScript Array Methods Cheat Sheet 🚀 Level up your JS game (especially in React!) with these essentials. Simple explanations + examples: • filter() 🔍: New array of matching items. numbers.filter(n => n > 5) → • map() ✨: Transform every item. names.map(name => name.toUpperCase()) → ["ALICE", "BOB"] • find() 🕵️: First match only. users.find(u => u.id === 1) • findIndex() 📍: Index of first match. • every() ✅: All true? scores.every(s => s > 60) → true/false • some() ➕: At least one true? • fill() 🧱: Fill with a value (mutates!). • concat() 🔗: Merge arrays safely. Pro Tip: Chain filter + map in React for clean lists! data.filter(item => item.active).map(item => <Item key={item.id} />) Master these = faster code + happier teams. 💪 #JavaScript #React #WebDev #CodingTips #Frontend #ArrayMethods #Developers #Programming #ReactJS #30DaysOfCode

🚀 Day 23 - Poll answer & Explanation 💡 **JavaScript Event Loop Explained (Simple & Clear)** ```javascript console.log('S'); Promise.resolve().then(() => console.log('P1')); setTimeout(() => console.log('T1'), 0); Promise.resolve().then(() => console.log('P2')); setTimeout(() => console.log('T2'), 0); console.log('E'); Output: S E P1 P2 T1 T2 ``` 🔹 **Explanation:** * `S` and `E` run first → synchronous code (call stack) * `P1`, `P2` → microtasks (Promises) → run next * `T1`, `T2` → macrotasks (setTimeout) → run last 👉 Microtasks always execute before macrotasks in the event loop. #JavaScript #ReactJS #WebDevelopment #Coding #FrontendDeveloper #InterviewPrep

"JavaScript is single-threaded… but still handles async tasks?" 🤯 This is where the Event Loop comes in 🔥 Let’s understand it simply 👇 🔹 JavaScript is single-threaded It can do one task at a time using the Call Stack. 🔹 So how does async work? Thanks to: - Web APIs 🌐 - Callback Queue 📥 - Event Loop 🔁 💻 Example: console.log("Start"); setTimeout(() => { console.log("Async Task"); }, 0); console.log("End"); 👉 Output: Start End Async Task 🔹 Why this happens? - "setTimeout" goes to Web APIs - Then moves to Callback Queue - Event Loop waits for Call Stack to be empty - Then executes it 🚀 Pro Tip: Even "setTimeout(..., 0)" is NOT immediate. 💬 Did this surprise you the first time you learned it? 😄 #javascript #webdevelopment #mern #coding #developers

What will be the output of the following JavaScript code? let x = 0; async function test() {  x = 9 + await 6;  console.log("Inside test:", x); } test(); x = 0 + 22; console.log("Outside test:", x); #JavaScript #NodeJS #Frontend #Backend #AsyncAwait #InterviewQuestion #WebDevelopment #MERN #JavaScriptInterview #Developers #TechQuestion #CodingChallenge

🚨 JavaScript Challenge — 90% Get This Wrong No long questions. Just pure JavaScript. 👇 Answer before checking comments. 🧠 𝟭. 𝗪𝗵𝗮𝘁 𝘄𝗶𝗹𝗹 𝘁𝗵𝗶𝘀 𝗹𝗼𝗴? console.log(0.1 + 0.2 === 0.3); Yes or No? And why? ⚡ 𝟮. 𝗣𝗿𝗲𝗱𝗶𝗰𝘁 𝘁𝗵𝗲 𝗼𝘂𝘁𝗽𝘂𝘁 console.log("5" - 3); console.log("5" + 3); Same inputs. Different results. Explain. 🔥 𝟯. 𝗧𝗵𝗶𝘀 𝗼𝗻𝗲 𝗯𝗿𝗲𝗮𝗸𝘀 𝗯𝗿𝗮𝗶𝗻𝘀 console.log([] == ![]); True or False? (No guessing — explain it.) 🧩 𝟰. 𝗢𝘂𝘁𝗽𝘂𝘁? const obj = { a: 1 }; Object.freeze(obj); obj.a = 2; console.log(obj.a); Does it change or not? 🚀 𝟱. 𝗙𝗶𝗻𝗮𝗹 𝘁𝗿𝗮𝗽 console.log(typeof undefined); console.log(typeof null); Why is JavaScript like this? 😄 💬 Be honest — how many did you get 100% correct without Googling? Drop your answers below 👇 Let’s see who actually understands JS fundamentals. I’ll post detailed explanations in the next post. Follow if you don’t want to miss it 🔥 #javascript #frontend #codingchallenge #webdevelopment #techinterview #DAY86

🚀 Question of the day - JavaScript Event Loop – Can You Predict the Output? console.log("1"); setTimeout(() => console.log("2"), 0); Promise.resolve() .then(() => { console.log("3"); setTimeout(() => console.log("4"), 0); }) .then(() => console.log("5")); console.log("6"); 🧠 What will be the output? Drop your answer in the comments before scrolling 👇 ✅ Follow Chinmay Kulkarni for more . #JavaScript #Frontend #WebDevelopment #AsyncJavaScript #EventLoop #CodingInterview #ReactJS #SoftwareEngineering #TechInterview #Developers #100DaysOfCode #Interview