Arrays vs Objects in JavaScript: Key Differences

Did you know that when you use an array inside a JavaScript template literal, it doesn’t behave like an array at all? If you write something like: `Stack: ${['React', 'Node', 'TypeScript']}` you might expect JSON-style output or the array structure. But JavaScript actually produces: "Stack: React,Node,TypeScript" That’s because template literal interpolation triggers implicit coercion: .toString() → .join(',') This isn’t a quirk — it’s part of the language design, and arrays have always been stringified using commas. Where this is useful There are a few scenarios where this implicit join is convenient: 1 - quick logging or debugging 2 - passing arrays into string-based utilities 3 - small helper functions where formatting doesn’t matter, etc. Where it becomes risky In more sensitive areas — UI text, error messages, URLs, file paths, nested arrays — this implicit join can lead to subtle formatting bugs or unreadable output, especially if you didn’t intend commas. My recommendation For clarity and predictability in production code, being explicit is usually the better choice: `Technologies: ${tech.join(', ')}` Making the formatting intentional helps avoid surprises and keeps code easier to understand for everyone reading it. #JavaScript #React #WebDevelopment #FrontendEngineering

Why does subtracting two Date objects work in JavaScript? 🤔 At first glance, this feels wrong: const d1 = new Date(); const d2 = new Date("2024-01-10"); console.log(d2 - d1); // milliseconds Date is an object, and normally arithmetic doesn’t work on objects. Yet JavaScript returns a number. So what’s going on? JavaScript isn’t doing math on objects. Before any calculation, it converts objects into primitive values (numbers or strings). What actually happens When you use an operator like -, JavaScript needs numbers. So it asks each object: 👉 “Give me your numeric value.” Every object can decide how to answer that. For Date, the numeric value is its timestamp: date.valueOf() === date.getTime() So this: d2 - d1 Effectively becomes: d2.getTime() - d1.getTime() You can control this behavior yourself Your own objects can decide what their “numeric value” is: const price = { amount: 100, valueOf() { return this.amount; } }; console.log(price + 50); // 150 Now JavaScript treats price like a number in math expressions. Takeaway JavaScript isn’t subtracting objects. It’s converting them into primitives first and Date exposes its timestamp for numeric operations. Once you understand this, I think some of JavaScript’s “weird” kind of behavior starts to make sense.

📌 Understanding JSON.parse() in JavaScript In JavaScript, data often travels between systems in JSON (JavaScript Object Notation) format — especially when working with APIs. To use that data inside your application, JavaScript provides the JSON.parse() method. 👉 What does JSON.parse() do? 🔹 JSON.parse() converts a JSON string into a JavaScript object. 👉 In simple terms: 🔹 It helps JavaScript understand and work with JSON data. 👉 Example Explanation: 🔹 The API response is a string 🔹 JSON.parse() converts it into an object 🔹 Now we can access properties using dot notation 👉 Why is JSON.parse() important? 🌐 Used when handling API responses 💾 Converts data from localStorage / sessionStorage 🔄 Helps transform string data into usable objects 🚀 Essential for backend–frontend communication 💠 Common Error to Watch Out For 🔹 JSON.parse() only works on valid JSON. 🔹 Invalid JSON will throw an error. 🔹 JSON.parse("{name: 'Hari'}"); // ❌ Error ✔ Correct JSON format: JSON.parse('{"name":"Hari"}'); // ✅ JSON.parse() is a fundamental JavaScript method that plays a key role in real-world applications, especially while working with APIs and stored data. #JavaScript #WebDevelopment #Frontend #JSON #CodingTips #LearnJavaScript

✅ 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

🎓 Just published two new articles on Medium diving deeper into JavaScript! I explored some of the most important yet often misunderstood parts of the language: 🔑 The Mysterious Key “this” – Understanding how this behaves in different contexts, from object methods to classes, with practical examples to avoid common pitfalls. Read here https://lnkd.in/dwHdN6K9 🧱 Object-Oriented JavaScript – A hands-on look at objects, classes, constructors, static methods, inheritance, and how to work with getters, setters, and public/private fields. Read here https://lnkd.in/dSr_uSnP I will be happy if these posts help anyone strengthen their JavaScript and understand these concepts better! #JavaScript #OOP #WebDevelopment #Frontend #LearningJourney #ProgrammingTips #MediumArticles

𝗧𝗵𝗲 𝗖𝗹𝗼𝗻𝗲 𝗖𝗼𝗻𝘀𝗽𝗶𝗿𝗮𝗰𝘆 In JavaScript, objects and arrays work differently than numbers or strings. If you don't understand how they are copied, you'll end up with unexpected changes. Let's break it down: - When you copy a string or number, JavaScript gives you a real copy. - When you copy an object or array, JavaScript gives you a reference to the same memory address. Think of a shallow copy like sharing a folder. You create a new shortcut, but the files inside are the same. Example: const user = { id: 101, profile: { username: "dev_pro", theme: "dark" } }; const userDraft = { ...user }; userDraft.id = 102; userDraft.profile.theme = "light"; console.log(user.profile.theme); // "light" This happens because the spread operator only copies the first level. The profile property in both objects still points to the same memory address. A deep copy is like taking a blueprint and making a separate copy. Changes to the copy don't affect the original. Example: const templateOrder = { items: ["Laptop", "Mouse"], specs: { warranty: "2 years" } }; const customerOrder = structuredClone(templateOrder); customerOrder.specs.warranty = "1 year"; console.log(templateOrder.specs.warranty); // "2 years" Here are some methods: - {...obj} for shallow copies of single-level objects - {...arr} for shallow copies of simple lists - structuredClone() for deep copies of complex data - JSON.parse/stringify for deep copies in legacy code Use shallow copies when your object is flat and you want performance. Use deep copies when you deal with complex data structures. Source: https://lnkd.in/gvTQYXCQ

15 Uncommon but Very Important JavaScript Questions You Shouldn’t Ignore. Most candidates prepare the “famous 20”, closures, hoisting, event loop. But in real interviews, it’s often the less obvious questions that separate good from great. Here are 15 uncommon but critical ones: 1. Explain WeakMap vs Map and why WeakMap keys must be objects. 2. What are Symbols and where would you actually use them? 3. How does the new.target meta-property work? 4. Explain Proxy and give a real-world use case. 5. How does Reflect API differ from Object methods? 6. What is BigInt and when should you use it? 7. How does Intl API (for dates, numbers, currencies) work? 8. What are Tagged Template Literals and their use cases? 9. How does requestIdleCallback differ from requestAnimationFrame? 10. Explain Atomics and SharedArrayBuffer at a high level. 11. What’s the difference between structuredClone and JSON-based cloning? 12. How does the event loop differ between browser and Node.js? 13. What are Generator functions vs Async Generators? 14. Explain import() dynamic imports and when to use them. 15. What are Transferable Objects in postMessage (Web Workers)? 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ Reactjs Frequent Ques & Answers, 85+ frequently asked Javascript interview questions and answers, 25+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascriptdeveloper #reactjs #reactjsdeveloper #angular #angulardeveloper #vuejs #vuejsdeveloper #javascript

Most of us use objects in JavaScript every day, but not all objects are the same. There is an important difference between a regular object and what developers call a plain object. A plain object is just a simple key value container. It is created using curly braces {} or new Object(). These objects inherit directly from Object.prototype or sometimes have no prototype at all when created with Object.create(null). Other things like arrays, dates, maps, and class instances are also objects, but they are not plain objects. They come with special behavior and their own prototypes. For example, an array inherits from Array.prototype, which gives it methods like push and map. A date object inherits from Date.prototype, which gives it time related methods. So how do we tell them apart? A common way is to check the prototype: const proto = Object.getPrototypeOf(value); const isPlain = proto === null || proto === Object.prototype; If the object either has no prototype or directly inherits from Object.prototype, it is considered plain. That means it is just data, not something with built in behavior. Why does this matter? Plain objects are great for: • Configuration objects • JSON style data • Simple dictionaries They are predictable and safe to serialize. Non plain objects are better when you need structure and behavior, like working with dates, collections, or class based models. JavaScript calls them all objects, but as developers, knowing which kind you are dealing with makes a big difference.

𝗧𝗵𝗲 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗕𝗲𝘁𝘄𝗲𝗲𝗻 𝗗𝗮𝘁𝗲 𝗮𝗻𝗱 𝗡𝗲𝘄 𝗗𝗮𝘁𝗲 You use JavaScript to build things. But do you know the difference between Date and new Date()? Let's look at some code: - new Date() - new Array() - new Promise(() => {}) These are built-in objects in JavaScript. You can call them with or without the new keyword. When you use the new keyword, you are using a constructor signature. This means you must use the new keyword. - new Date() - new Promise(() => {}) When you don't use the new keyword, you are using a call signature. - dayjs() - logger() So what's the difference? When you use the new keyword, JavaScript creates an instance linked to a prototype. This instance is an object. When you call a function directly, it returns a primitive value. Here's an example: - console.log(typeof String) // function - console.log(typeof String.prototype) // object - console.log(typeof new String()) // object As you can see, using the new keyword returns an object, not a primitive value. Understanding this difference is useful when: - Reading built-in APIs - Designing flexible libraries - Modeling function behaviors in TypeScript - Understanding how JavaScript works under the hood Source: https://lnkd.in/dSZ97dEq