Day 2 of Learning JavaScript 🚀 Today I stopped memorizing syntax and focused on actual logic. What I learned (and actually understood, not just “seen”): How arrays of objects work in real use cases Using find() to locate a specific item Using filter() to remove unwanted data Using reduce() to calculate values like total price Writing simple functions instead of messy code I built a basic cart logic: Increase product quantity Remove items with zero quantity Calculate total price dynamically No frameworks. No shortcuts. Just pure JavaScript and logic. I realized one thing today: 👉 If logic is weak, frameworks won’t save you. Tomorrow: more practice, cleaner code, fewer mistakes. #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment #Consistency #Day2 #code // Day 2 JavaScript Practice // Topic: Array methods + basic logic let cart = [ { name: "Shoes", price: 1000, qty: 2 }, { name: "Bag", price: 500, qty: 1 }, { name: "Bottle", price: 500, qty: 0 } ]; // Increase quantity of a product function increaseQty(productName) { const item = cart.find(p => p.name === productName); if (item) { item.qty++; } } // Remove items with quantity 0 function removeZeroQtyItems() { cart = cart.filter(item => item.qty > 0); } // Calculate total price function calculateTotal(cartItems) { return cartItems.reduce((total, item) => { return total + item.price * item.qty; }, 0); } // ---- Execution ---- increaseQty("Shoes"); // Shoes qty becomes 3 removeZeroQtyItems(); // Bottle removed const totalPrice = calculateTotal(cart); console.log("Final Cart:", cart); console.log("Total Price:", totalPrice);
Learning JavaScript Logic with Arrays and Functions
More Relevant Posts
-
𝐃𝐚𝐲 𝟐𝟐 – 𝐌𝐲 𝐖𝐞𝐛 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐉𝐨𝐮𝐫𝐧𝐞𝐲 🚀 📘 JavaScript – #Lecture 7 Completed: Arrays (Basics → Advanced) Today’s lecture was all about Arrays — one of the most used (and misunderstood) data structures in JavaScript. Arrays look simple, but once you go deeper, you realize how powerful they actually are 💡 𝐇𝐞𝐫𝐞’𝐬 𝐰𝐡𝐚𝐭 𝐈 𝐥𝐞𝐚𝐫𝐧𝐞𝐝 𝐭𝐨𝐝𝐚𝐲👇 ✅ What is an Array in JavaScript → Used to store multiple values in a single variable → In JavaScript, arrays are objects, not a separate data type 🤯 ✅ Creating Arrays → Using square brackets [] → Using the Array() constructor ✅ Length Property → .length gives the total number of elements → Also helps while iterating through arrays ✅ Accessing & Modifying Elements → Access elements using index (0-based) → Elements can be updated directly using index ✅ Adding & Removing Elements → push() & pop() → end of array → unshift() & shift() → start of array ✅ Iterating Over Arrays → Looping through arrays to process each element → Essential for real-world logic ✅ slice() vs splice() (Very Important 🔥) → slice() → does not change original array → splice() → modifies the original array ✅ Spread Operator (...) → Copy arrays → Merge multiple arrays → Prevent unintended reference bugs ✅ Converting & Searching → Converting arrays to strings and vice versa → Searching elements efficiently ✅ Advanced Array Concepts → Sorting arrays → Flattening nested arrays → Deleting elements carefully ❓𝐖𝐡𝐲 “𝐀𝐫𝐫𝐚𝐲 𝐢𝐬 𝐧𝐨𝐭 𝐀𝐫𝐫𝐚𝐲” 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 → typeof array returns "object" → Important interview concept that explains JS internals Big thanks to Rohit Negi bhaiya for explaining arrays in such a practical and beginner-friendly way 🙌 Grateful to be learning with #CoderArmy ❤️ Consistency over motivation. Learning JavaScript step by step, the right way 🚀 #Day22 #WebDevelopmentJourney #JavaScript #ArraysInJavaScript #FrontendDevelopment #LearningJourney #CoderArmy #Consistency
To view or add a comment, sign in
-
-
#Day18 of #javascript leaning Journey ! ✅ JS Modules: A module is a file that making it reusable and organized by containing functions, classes, variables or objects. 👉 Here we use two keywords: ->import : is used to retriving the data ->export : is used to send the data ->we have script : module option surely we write type=”module” in script tag if we have more than one function you should pass in {} ex: export { fun1, fun2} import {fun1, fun2} from “./path” you can also write directly export for the function export fun add(a,b){ console.log(a+b); } -------------------------------------------------------------------------------- ✅ Destructuring: In Js, Destructuring is a covenient syntax that allows to extract the properties from objects, or elements from the arrays and assign them to variables NOTE: Variables must be match with keys in the object ✅ Inversion of control: Loosing control of our program called inversion of control 💠 #performed a task using mudule concept 🔓 #journey #day18 #post #module #practice #js #webdev #consistency 10000 Coders
To view or add a comment, sign in
-
📘 Day 62: JavaScript Basics & Variables 🔹 JavaScript Introduction • JavaScript is a programming language used to make webpages interactive • Helps in animations, hiding/showing elements, and form validation • Mainly used in front-end development 🔹 Linking JavaScript with HTML 💡 Internal Linking • Can be added inside <head> or at the end of <body> • End of <body> is preferred to avoid loading delays 💡 External Linking • Create a .js file and link it using <script src="file.js"></script> 🔹 Variable Declarations • var, let, and const are used to declare variables ✅ var • Globally scoped • Allows recreation and reassignment ✅ let • Block scoped • No recreation allowed • Reassignment allowed ✅ const • Block scoped • No recreation or reassignment 🔹 Primitive Data Types in JavaScript • Number • String • Boolean • Undefined • Null • BigInt • Symbol 💡 Key Notes • JS treats integers and decimals both as Number • Strings are text inside quotes • Boolean → true/false • Undefined → variable declared but no value • Null → intentionally empty value • BigInt → large numbers ending with n • Symbol → unique and private values 🚀 Building strong JavaScript fundamentals step by step! #Day62 #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearnJS #ProgrammingBasics #WebDevJourney #TechSkills
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
-
-
🚀 Full Stack Journey Day 65: Entering the Frontend World with JavaScript! 💻✨ Day 65 of my #FullStackDevelopment series marks the beginning of a new chapter! After mastering the backend with Python, I’m now diving into the language of the browser: JavaScript. 🌍 If HTML is the skeleton and CSS is the skin, JavaScript is the brain that makes a website interactive. Here is why it’s a game-changer: Why JavaScript? It’s the only language that runs natively in every browser. It allows us to create dynamic content, handle user events (like clicks and scrolls), and build modern web apps that feel fast and responsive. Without JS, the web would be static and boring! 🧠💡 The 3 Ways to Implement JS: Inside the <body> tag: Using <script> at the bottom of the body. This is great for performance as it allows the HTML to load first! 📂 Inside the <head> tag: Useful for scripts that need to load before the page renders, though it can sometimes slow down the initial view. 🏗️ External JS (.js files): The professional way! Keeping your logic in a separate file makes your code clean, reusable, and easy to maintain. Just like we modularize in Python! 🛠️ I’m excited to see how my backend logic translates into frontend interactivity. The Full Stack picture is finally coming together! 🧩 📂 Access my detailed notes here: 👉 GitHub: https://lnkd.in/g4GZi2kV #JavaScript #WebDevelopment #Frontend #FullStackDeveloper #CodingJourney #SoftwareEngineering #HTML5 #Programming #TechLearning #Day65 LinkedIn Samruddhi Patil
To view or add a comment, sign in
-
-
Today I solved a Codewars #JavaScript challenge that looks simple on the surface but reinforces some really important fundamentals. The challenge: Write a function that takes an array of 10 digits (0–9) and returns them formatted as a phone number: (123) 456-7890 💡 My Approach I broke the problem down into three logical parts, just like an actual phone number: Area code -> first 3 digits Prefix -> next 3 digits Line number -> last 4 digits Using JavaScript’s slice() method, I extracted each segment from the array, converted them to strings using join(''), and then combined everything with a template literal to match the required format. This made the solution: 1. Readable 2. Easy to debug 3. Logically aligned with the problem statement ✅ Was this the best approach? For this specific challenge — yes. Why? The input size is fixed (always 10 digits), so performance concerns are minimal. slice() and join() are clear and expressive, which matters in real-world codebases. The solution prioritizes clarity over cleverness, something I’m learning to value more as I grow as an engineer. That said, in scenarios involving very large datasets, repeatedly slicing arrays could be inefficient. In those cases, approaches like iterating once or using string builders may scale better. Context always matters. 📚 What I learned Simple problems are great opportunities to practice clean thinking Readability is just as important as correctness. Knowing why an approach works is more valuable than just making it pass I’m consistently using Codewars to sharpen my JavaScript fundamentals and improve how I think about problem-solving. #JavaScript #Codewars #ProblemSolving #LearningInPublic #SoftwareEngineering #CleanCode #Developers
To view or add a comment, sign in
-
-
Day #1 – Understanding how .sort() works in JavaScript I used to hate JavaScript sorting. It always felt unpredictable. Sometimes it worked. Sometimes it silently failed. . Today that changed. . Because of Devendra Dhote, at Sheryians Coding School I stopped using .sort() blindly and started understanding how it actually works. . The confusion usually starts here: . ["10", "2", "1"].sort() // ["1", "10", "2"] . Looks wrong. Feels like a bug. But JavaScript is doing exactly what it is designed to do. . How .sort() really works . JavaScript picks two elements. Calls the compare function. Checks the return value. Decides whether to swap or not. Repeats this until sorted. . Why default sorting fails for numbers . JavaScript converts numbers to strings. Compares them character by character. So "10" is compared as "1" vs "2". Not as 10 vs 2. . Correct way to sort numbers . arr.sort((a, b) => a - b); . Now JavaScript compares numeric values. . Strings with numbers . ["item2", "item10", "item1"] . Default sorting fails. Human expectation fails. . Language-aware sorting . arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }) ); . Important warning . .sort() mutates the original array. . Final takeaway . .sort() is not broken. It just follows the rules you give it.
To view or add a comment, sign in
-
This one small JavaScript habit changed how clean my code looks. Nested destructuring + destructuring in function params. At first, it feels “advanced.” Then one day it just clicks… and you never go back. No more: user.data.username props.user.profile.name options.config.settings.theme Just clean, readable variables exactly what you need. And the best part? Your function signatures start telling a story. You know what a function expects just by reading the parameters. That’s not syntax sugar. That’s developer experience. If your code feels messy, slow to read, or hard to maintain sometimes the fix isn’t a new framework… …it’s just better JavaScript. Simple things. Deep impact. If you’re learning JS, don’t skip destructuring. (And yes — once you get used to it, you’ll start destructuring everything 😅)
To view or add a comment, sign in
-
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
Ranjit, the content is good, but adding proper spacing would significantly improve readability.