Convert String to Numbers with JavaScript's map() Function

#coder #javascript 🧩 JavaScript Function — easy description A JavaScript function is a block of reusable code that performs a specific task. You write it once, and you can use (call) it many times whenever you need. 📌 Why we use functions ♻️ Reuse code (no repetition) 🧹 Keep code clean & organized 🧠 Make programs easier to understand 🔧 Fix or update logic in one place 🧱 Basic structure of a function function functionName() { // code to run } ▶️ Example function sayHello() { console.log("Hello, JavaScript!"); } sayHello(); // calling the function 🟢 Output: Hello, JavaScript! 📥 Function with parameters function add(a, b) { return a + b; } add(5, 3); // 8 a and b → parameters return → sends result back 🧠 Types of functions in JavaScript Normal Function Arrow Function const greet = () => { console.log("Hi!"); }; Function with return Anonymous Function

Why does 0 == false return true in JavaScript? 😵 If this confuses you, you're not alone. I wrote a guide explaining == vs === and how to avoid common pitfalls that trip up even experienced developers. Link below 👇 https://lnkd.in/dGP2aJZr #JavaScript #CodingTips #WebDev

So, you're building something with JavaScript - and it's getting big. One file just isn't cutting it anymore. JavaScript module system to the rescue. It's like a librarian for your code, helping you keep things tidy and organized. You can break up your code into smaller, reusable files - and control what's visible, what's not. Only load what you need, when you need it. Modern JavaScript is all about ES Modules (ESM), by the way. They're the way to go. Here's the lowdown: - You can have named exports and imports, which is super useful. - Default exports and imports are a thing too. - And then there's aliasing - which helps you avoid naming conflicts, like when you're working with multiple modules that have the same variable names. - Namespace imports are another cool feature - you can import all values from a module as an object. - Combined imports are also possible - you can import both default and named exports at the same time. - And let's not forget dynamic imports - which load modules at runtime, like when you need to load a big library, but only when the user interacts with a certain part of your app. A JavaScript module is basically a file with its own scope - it's like a little box that can export variables, functions, or classes, and import values from other modules. To use modules in the browser, just add type="module" to your script tag. Easy peasy. You can export multiple values from one file, no problem. Just remember, when you import them, the names have to match. And you can only have one default export per module - but you can import it with any name you want, which is nice. Aliasing is also super helpful - it lets you rename imports to avoid conflicts. Dynamic imports are pretty cool too - they load modules at runtime, which is great for code splitting, lazy loading, and performance optimization. They always return a Promise, so you can use Promise.all to load multiple modules in parallel. So, what's the big deal about the JavaScript module system? It makes your code easier to maintain, more scalable, and better organized - which is a win-win-win. Check out this article for more info: https://lnkd.in/gBPF8NUr #JavaScript #ESModules #CodeOrganization

Today I learned about Functions in JavaScript! A Function is a reusable block of code designed to perform a specific task. It executes when it is "invoked" or called, helping developers follow the DRY (Don't Repeat Yourself) principle. There are four key types of functions in JavaScript: 1. Function Declaration These are hoisted, meaning they can be called before they are defined in the code. ex. console.log(greet("Vaseem")); function greet(name) { return `Hello, ${name}!`; } 2. Function Expression: A function assigned to a variable. Unlike declarations, these are not hoisted. ex. const add = function(a, b) { return a + b; }; 3. Arrow Functions (ES6+) A concise syntax introduced in modern JavaScript. They do not have their own this binding, making them ideal for callbacks. ex. const multiply = (x, y) => x * y; 4. Immediately Invoked Function Expression (IIFE) A function that runs as soon as it is defined. It is commonly used to create a private scope. ex. (function() { console.log("Programming started.."); })(); #JavaScript #WebDevelopment #Programming #CodingTips #SoftwareEngineering #Frontend #JSFunctions #TechLearning

So, you're writing JavaScript code across multiple files - it's a mess. Three files, to be exact: user.js, admin.js, and main.js. It's simple. You've got variables flying around, and they're all overwriting each other - not good. This happens because, by default, you're loading scripts into the global scope, which is like trying to have a conversation in a loud bar - everything gets lost in the noise. To fix this, you need to think about Modules - they're like little containers that keep your code organized. You enable Modules by adding type="module" to your script tag, like this: <script type="module" src="main.js"></script>. And just like that, you've got three strict rules in place: - File-Level Scope, which means variables aren't global by default - they're more like secrets shared among friends. - Strict Mode, which is like having a code reviewer who's always on your case - it's a good thing, trust me. - Deferred Execution, which means your code waits patiently until the HTML is parsed - it's like waiting for your coffee to brew before you start your day. Think of a Module like a private club - nothing gets in or out unless you explicitly allow it. You export what you want to share, and you import what you need - it's like trading secrets with your friends. And when you import a Module, you get a Live Reference, which is like having a direct hotline to the variable inside the Module - if something changes, you'll know instantly. Modules are also Singletons, which means the Engine evaluates them only once, and every subsequent import is like getting a reference to the same old friend - you're not starting from scratch every time. Using Modules gives you boundaries, and that's a beautiful thing - you can build complex systems without everything collapsing into the global scope. It's like having a clean and organized desk - you can focus on what matters. Source: https://lnkd.in/gD78hVjr #JavaScript #Modules #CodingBestPractices

So JavaScript has this thing called hoisting. It's like a behind-the-scenes magic trick. Variables and functions get moved to the top of their scope. This happens way before the code actually runs, during the memory creation phase. Only the declarations get hoisted, not the actual values. Think of it like setting up a stage - you're just putting the props in place, but not actually using them yet. JavaScript runs in two phases: memory creation and code execution. During the memory creation phase, variables declared with var are like empty boxes - they're initialized with undefined. Function declarations, on the other hand, are like fully formed actors - they're stored in memory, ready to go. This means you can access variables before you've even assigned a value to them. It's like trying to open an empty box - you'll just get undefined. But if you try to access a variable that doesn't exist at all, JavaScript will throw a ReferenceError - it's like trying to open a box that's not even there. Here's the thing: function declarations are fully hoisted, so you can call them before they're even declared. But function expressions are like variables - they're hoisted as undefined, so trying to call them as a function will throw a TypeError. For example, consider this code: var x = 7; function getName() {...}. You can call getName() before it's declared, and it'll work just fine. But if you try to access x before it's assigned a value, you'll just get undefined. It's all about understanding how hoisting works in JavaScript. Check out this article for more info: https://lnkd.in/g_Jh4Vd8 #JavaScript #Hoisting #Coding

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝗶𝗽: 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗗𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝗼𝗻 𝘃𝘀 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻 Both are common ways to write functions in JavaScript, but they behave differently under the hood 👇 // 𝘍𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘋𝘦𝘤𝘭𝘢𝘳𝘢𝘵𝘪𝘰𝘯 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘨𝘳𝘦𝘦𝘵() {  𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨("𝘏𝘦𝘭𝘭𝘰"); } // 𝘍𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘌𝘹𝘱𝘳𝘦𝘴𝘴𝘪𝘰𝘯 𝘤𝘰𝘯𝘴𝘵 𝘨𝘳𝘦𝘦𝘵 = 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 () {  𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨("𝘏𝘦𝘭𝘭𝘰"); }; 𝗞𝗲𝘆 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴  • Function declarations are available before they appear in the code  • Function expressions are not 𝘨𝘳𝘦𝘦𝘵(); // 𝘸𝘰𝘳𝘬𝘴 𝘰𝘯𝘭𝘺 𝘸𝘪𝘵𝘩 𝘥𝘦𝘤𝘭𝘢𝘳𝘢𝘵𝘪𝘰𝘯 𝗦𝗰𝗼𝗽𝗲 & 𝗙𝗹𝗲𝘅𝗶𝗯𝗶𝗹𝗶𝘁𝘆  • Declarations are great for defining reusable, top-level logic  • Expressions work well for callbacks, closures, and conditional behaviour 𝘤𝘰𝘯𝘴𝘵 𝘩𝘢𝘯𝘥𝘭𝘦𝘳 = 𝘪𝘴𝘔𝘰𝘣𝘪𝘭𝘦  ? 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘮𝘰𝘣𝘪𝘭𝘦𝘏𝘢𝘯𝘥𝘭𝘦𝘳() {}  : 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘥𝘦𝘴𝘬𝘵𝘰𝘱𝘏𝘢𝘯𝘥𝘭𝘦𝘳() {}; 𝗡𝗮𝗺𝗲𝗱 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀 (𝗹𝗲𝘀𝘀 𝗸𝗻𝗼𝘄𝗻) 𝘤𝘰𝘯𝘴𝘵 𝘨𝘳𝘦𝘦𝘵 = 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘴𝘢𝘺𝘏𝘦𝘭𝘭𝘰() {  𝘴𝘢𝘺𝘏𝘦𝘭𝘭𝘰(); // 𝘢𝘤𝘤𝘦𝘴𝘴𝘪𝘣𝘭𝘦 𝘩𝘦𝘳𝘦 }; 𝘴𝘢𝘺𝘏𝘦𝘭𝘭𝘰(); // 𝘯𝘰𝘵 𝘢𝘤𝘤𝘦𝘴𝘴𝘪𝘣𝘭𝘦 𝘩𝘦𝘳𝘦 👉 In named function expressions, the function name exists 𝗼𝗻𝗹𝘆 𝗶𝗻𝘀𝗶𝗱𝗲 𝘁𝗵𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝘁𝘀𝗲𝗹𝗳. This keeps the outer scope clean while still allowing recursion and better debugging. 𝗪𝗵𝗲𝗻 𝘁𝗼 𝘂𝘀𝗲 𝘄𝗵𝗮𝘁? Function Declarations → shared utilities, clearer structure Function Expressions → dynamic logic, event handlers Arrow Functions → concise syntax for simple callbacks 📌 Small details like these make your JavaScript more predictable and maintainable. If this helped, feel free to share or add your thoughts 👇 #JavaScript #WebDevelopment #Frontend #ProgrammingTips #Learning

So, you're trying to wrap your head around this weird thing in JavaScript. It's like, you write a function inside an object, and it's all good - it knows who it is. But then you pass it to another function, and suddenly it's like, "Wait, who am I again?" It's because "this" in JavaScript isn't a fixed label, it's more like a question. When the code runs, the function looks around and asks, "Who called me?" - and the answer is pretty simple, really. Just look to the left of the dot. If you see an object, that's who "this" is. No object? Thenthis is undefined. Here's the thing: if you call a function through an object, "this" is that object - makes sense, right? But if you call a function without an object,this is undefined. And then there are these two methods, .call() and .bind(), that can kind of forcethis to be a specific object. Use .call(), and it's like you're telling the function, "For this one time, you're this object" - it's a temporary thing. But use .bind(), and you're creating a new function that remembers its owner forever - it's like giving it a permanent identity. It's all about context, really. In JavaScript, your identity isn't about who you are, it's about who's holding you at the moment you speak - it's a pretty fluid thing. Check out this article for more on the secret life of JavaScript: https://lnkd.in/grANWBg6 #JavaScript #Identity #Coding

JavaScript Fundamentals - Part 3 Hoisting It is behavior of processing declarations before executing code. In simple terms: - JavaScript knows about variables and functions before running the code - This happens during the memory creation phase of an execution context So, hoisting is not moving code upward rather its preparing memory upfront. Why hoisting exists - its is side effect of how JS creates execution contexts. Before execution: - memory is allocated - identifiers are registered - scope is set up This allows: - function calls before their definition - predictable scope resolution Hoisting by Declaration Type var hoisting console.log(a); var a = 10; What happens: - a is hoisted - initialized with undefined - assigned 10 during execution So, console.log(a); // undefined Function Declaration Hoisting sayHi(); function sayHi(){ console.log("Hi"); } What happens: - entire function is hoisted - function can be called before declaration let and const Hoisting console.log(b); let b = 20; // ReferenceError: Cannot access 'b' before initialization What happens: - b is hoisted - but not initialized - exists in TDZ - Function Expressions sayHello(); var sayHello = function() { console.log("Hello"); }; What happens; - sayHello is hoisted as undefined - function body is not hoisted Result: TypeError: sayHello is not a function TDZ -it is the time between entering a scope and initializing let or const variable - variable exists - but cannot be accessed - prevents accidental usage before declaration TDZ is not special zone in memory, it is a state of a binding between hoisting and initialization { // TDZ starts console.log(a); //ReferenceErrror let a = 10; // TDZ ends } So, based on our above details, how can you describe Hoisting in one line ? Please follow for Part 4 updates. 👍 #javascriptfundamentals #uideveloper #corejs

So, keywords are a big deal in JavaScript. They're like the secret language that JavaScript uses to get things done. You can't just use them for anything, or it's like trying to sit at a table that's already reserved for someone else - it's just not gonna work. Think about it, when you're coding, you're basically giving the computer a set of instructions, and keywords are like the commands that make it all happen. For instance, you useconst to create a constant value, like a fixed price that never changes - it's like setting a price tag that says "this is what it costs, no negotiations." And then there's "let", which creates a variable, like a price that can fluctuate based on demand - it's like a price tag that says "make an offer." And don't even get me started on decision making - that's where "if" and "else" come in, like a flowchart that helps the computer figure out what to do next. It's like, "if it's sunny, then go to the beach, else stay home and watch Netflix." Some other key keywords to keep in mind: - "function" creates a block of code that can be used again and again, like a recipe that you can follow to make your favorite dish. - "return" gives the result of a function, like the final answer to a math problem. The thing is, these keywords can be a bit tricky to use, and they can behave differently in different situations - it's like trying to navigate a maze, you gotta know the right turns to take. So, use them carefully, and make sure you understand how they work. Check out this article for more info: https://lnkd.in/d4s9vnnv #JavaScript #Coding #WebDevelopment