Method: Array.from() In JavaScript, Array.from() is one of the most underrated yet powerful methods that can make code cleaner, smarter, and more efficient. What is Array.from()? In simple words, Array.from() is a built-in JavaScript method that creates a new array from: ✅ Arrays ✅Array-like objects (like arguments or NodeList) ✅ Iterable objects like Maps and Sets Basic Syntax: Array.from(arrayLike, mapFunction) Example 1: const str = 'Hello' const array = Array.from(str) console.log(array); output: ['H', 'e', 'l', 'l', 'o '] Example 2: const numbers = [1, 2, 3, 4] const result = Array.from(numbers, number => number * 2) console.log(result); output: [2, 4, 6, 8] Example 2: const nums = Array.from({ length:10 },(value, i )=> i + 1) console.log(nums); output : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] #120DaysOfCode #JavaScript #WebDevelopment #Networking #API #JSON #AsyncAwait #FullStackDeveloper #MERNStackDeveloper #ReactDeveloper #BackendEngineer
Mastering Array.from() in JavaScript
More Relevant Posts
-
🚀 **JavaScript: var vs let vs const (Every Developer Should Know This)** Understanding the difference between `var`, `let`, and `const` is one of the most important fundamentals in JavaScript. Let’s simplify it 👇 --- 🔴 **var** • Function scoped • Can be **reassigned** • Can be **redeclared** • Hoisted and initialized as `undefined` ```javascript var x = 10; x = 20; // ✅ allowed var x = 30; // ✅ allowed ``` ⚠️ Old JavaScript way. Avoid using `var` in modern code. --- 🟢 **let** • Block scoped `{ }` • Can be **reassigned** • ❌ Cannot be redeclared in the same scope • Hoisted but in **Temporal Dead Zone (TDZ)** ```javascript let y = 10; y = 20; // ✅ allowed let y = 30; // ❌ Error ``` ✔ Best for variables that will change. --- 🟣 **const** • Block scoped • ❌ Cannot be reassigned • ❌ Cannot be redeclared • Hoisted with **Temporal Dead Zone** ```javascript const z = 10; z = 20; // ❌ Error ``` ✔ Best for constants. --- 🎯 **Best Practice** ✔ Use **const by default** ✔ Use **let when value changes** ❌ Avoid **var** This makes your code **cleaner, safer, and predictable.** --- 💬 Interview Question: What is **Temporal Dead Zone (TDZ)** in JavaScript? Comment your answer 👇 --- #JavaScript #WebDevelopment #FrontendDevelopment #Coding #Programming #SoftwareEngineering #LearnToCode #DeveloperTips #JS #TechCommunity
To view or add a comment, sign in
-
-
But I can still change const even though it is immutable, Const a = [] a.push(7) Above code is completely valid. Can anyone explain that .. comment below 👇
Immediate Joiner - Software Developer | Full Stack Web Developer | NODE JS | REACT JS | PHP | JS | GITHUB | PYTHON | DJANGO | REST API | MYSQL | MONGO DB | FLASK | WORDPRESS
🚀 **JavaScript: var vs let vs const (Every Developer Should Know This)** Understanding the difference between `var`, `let`, and `const` is one of the most important fundamentals in JavaScript. Let’s simplify it 👇 --- 🔴 **var** • Function scoped • Can be **reassigned** • Can be **redeclared** • Hoisted and initialized as `undefined` ```javascript var x = 10; x = 20; // ✅ allowed var x = 30; // ✅ allowed ``` ⚠️ Old JavaScript way. Avoid using `var` in modern code. --- 🟢 **let** • Block scoped `{ }` • Can be **reassigned** • ❌ Cannot be redeclared in the same scope • Hoisted but in **Temporal Dead Zone (TDZ)** ```javascript let y = 10; y = 20; // ✅ allowed let y = 30; // ❌ Error ``` ✔ Best for variables that will change. --- 🟣 **const** • Block scoped • ❌ Cannot be reassigned • ❌ Cannot be redeclared • Hoisted with **Temporal Dead Zone** ```javascript const z = 10; z = 20; // ❌ Error ``` ✔ Best for constants. --- 🎯 **Best Practice** ✔ Use **const by default** ✔ Use **let when value changes** ❌ Avoid **var** This makes your code **cleaner, safer, and predictable.** --- 💬 Interview Question: What is **Temporal Dead Zone (TDZ)** in JavaScript? Comment your answer 👇 --- #JavaScript #WebDevelopment #FrontendDevelopment #Coding #Programming #SoftwareEngineering #LearnToCode #DeveloperTips #JS #TechCommunity
To view or add a comment, sign in
-
-
🚀 **Understanding JavaScript Variables Like a Pro (var vs let vs const)** If you're working with JavaScript, choosing the right keyword — `var`, `let`, or `const` — is more important than you think. Here’s a simple breakdown 👇 🔸 **var** * Function scoped * Can be re-declared * Can be re-assigned * Hoisted with `undefined` 👉 Mostly avoided in modern JavaScript due to unexpected behavior. --- 🔹 **let** * Block scoped * Cannot be re-declared in same scope * Can be re-assigned * Hoisted but in Temporal Dead Zone (TDZ) 👉 Best for variables that will change. --- 🔒 **const** * Block scoped * Cannot be re-declared * Cannot be re-assigned * Must be initialized at declaration 👉 Best for constants and safer code. --- 💡 **Pro Tip:** Always prefer `const` by default → use `let` when needed → avoid `var`. --- 📊 The attached diagram explains: * Scope hierarchy (Global → Function → Block) * Memory behavior * Key differences visually --- 🔥 Mastering these fundamentals helps you: ✔ Write cleaner code ✔ Avoid bugs ✔ Crack interviews easily --- #JavaScript #WebDevelopment #Frontend #Coding #Programming #Developers #LearnToCode #Tech #SoftwareEngineering #NodeJs #Json
To view or add a comment, sign in
-
-
⚠️ JavaScript Function Expression — A Common Corner Case That Trips Developers 🔍 The Corner Case: Hoisting Behavior console.log(add(2, 3)); // ❌ TypeError: add is not a function var add = function(a, b) { return a + b; }; 👉 Why does this fail? Because only the variable declaration (var add) is hoisted, not the function itself. So internally, JavaScript sees this as: var add; console.log(add(2, 3)); // ❌ add is undefined add = function(a, b) { return a + b; }; ✅ Now Compare with Function Declaration console.log(add(2, 3)); // ✅ 5 function add(a, b) { return a + b; } 👉 Entire function is hoisted — so it works! 💥 Another Tricky Case (Named Function Expression) const foo = function bar() { console.log(typeof bar); }; foo(); // ✅ function bar(); // ❌ ReferenceError: bar is not defined 👉 bar is only accessible inside the function, not outside! 🎯 Key Takeaways ✔ Function expressions are NOT fully hoisted ✔ Only variable declarations are hoisted (var, let, const behave differently) ✔ Named function expressions have limited scope ✔ Always define function expressions before using them #JavaScript #Frontend #CodingInterview #WebDevelopment #JSConcepts #100DaysOfCode
To view or add a comment, sign in
-
🚨 JavaScript Gotcha: Objects as Keys?! Take a look at this 👇 const a = {}; const b = { key: 'b' }; const c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); // ❓ 👉 What would you expect? 123 or 456? 💡 Actual Output: 456 🤯 Why does this happen? In JavaScript, object keys are always strings or symbols. So when you use an object as a key: a[b] → a["[object Object]"] a[c] → a["[object Object]"] Both b and c are converted into the same string: "[object Object]" ⚠️ That means: a[b] = 123 sets " [object Object] " → 123 a[c] = 456 overwrites it → 456 So finally: console.log(a[b]); // 456 🧠 Key Takeaways ✅ JavaScript implicitly stringifies object keys ✅ Different objects can collide into the same key ❌ Using objects as keys in plain objects is unsafe 🔥 Pro Tip If you want to use objects as keys, use a Map instead: const map = new Map(); map.set(b, 123); map.set(c, 456); console.log(map.get(b)); // 123 ✅ ✔️ Map preserves object identity ✔️ No unexpected overwrites 💬 Final Thought JavaScript often hides complexity behind simplicity. Understanding these small quirks is what separates a developer from an expert. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #Coding #JavaScriptTips #JSConfusingParts #DevelopersLife #CodeNewbie #LearnToCode #SoftwareEngineering #TechTips #CodeQuality #CleanCode #100DaysOfCode #ProgrammingTips #DevCommunity #CodeChallenge #Debugging #JavaScriptDeveloper #MERNStack #FullStackDeveloper #ReactJS #NodeJS #WebDevTips #CodingLife
To view or add a comment, sign in
-
-
🚀 JavaScript Scope Explained (Global, Function & Block Scope) One of the most important concepts every JavaScript developer must understand is **Scope**. Scope defines **where a variable can be accessed in your code**. Let’s break it down 👇 1️⃣ Global Scope Variables declared outside any function are accessible everywhere. ```javascript let name = "Abhishek"; function greet() { console.log(name); } ``` 2️⃣ Function Scope (var) Variables declared with `var` inside a function are only accessible within that function. ```javascript function test() { var message = "Hello"; } console.log(message); // Error ``` 3️⃣ Block Scope (let / const) `let` and `const` are block scoped, meaning they only exist inside `{ }`. ```javascript if(true){ let age = 25; } console.log(age); // Error ``` ⚠️ Common Mistake with `var` ```javascript if(true){ var age = 25; } console.log(age); // 25 (unexpected) ``` ✔ Best Practice Use **const by default** Use **let when value changes** Avoid **var** in modern JavaScript. 💬 Interview Question: What is the **Temporal Dead Zone (TDZ)** in JavaScript? #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering
To view or add a comment, sign in
-
-
🔥 Understanding this keyword in JavaScript The value of this depends on how a function is called, not where it is written. >> In the global scope console.log(this); this → refers to the global object (window in browsers) >> Inside an object method const user = { name: "Javascript", greet() { console.log(this.name); } }; user.greet(); // Javascript this → refers to the object calling the method ✔️ user.greet() → this is user >> In a regular function function show() { console.log(this);} show(); this → undefined (in strict mode) or → global object (non-strict mode) >> In arrow functions const obj = { name: "Javascript", greet: () => { console.log(this.name);}}; obj.greet(); // undefined this → does NOT have its own value It borrows from the surrounding scope 👉 That’s why arrow functions can surprise you! >> In event handlers button.addEventListener("click", function() { console.log(this);}); this → refers to the element that triggered the event #JavaScript #FrontendDevelopment #WebDevelopment #Coding #LearnToCode
To view or add a comment, sign in
-
🚀 Just published a new blog on Understanding Objects in JavaScript. In this article, I explain what objects are, why they are important in JavaScript, and how they store data using key–value pairs. I also covered creating objects, accessing properties using dot and bracket notation, updating values, adding or deleting properties, and looping through object keys. 📖 Read the full article here: https://lnkd.in/gbxx6N2G Inspired by the amazing teaching of Hitesh Choudhary Sir and Piyush Garg Sir from Chai Aur Code. ☕💻 #javascript #webdevelopment #learninginpublic #chaiAurCode
To view or add a comment, sign in
-
A tale of two JavaScript patterns and the bugs that catch you out 🐛 I've been revisiting the two main ways to create custom objects in JavaScript. Both achieve the same goal. Both have traps. Here's what I found: ES6 Class class Character { constructor(name) { this.name = name this.powers = [] } addPowers(power) { this.powers.push(power) console.log(`${this.name} has ${this.powers} Powers!`) } } Methods live outside the constructor, inside the class body. They land on the prototype automatically so every instance shares one copy rather than each carrying its own. Constructor Function function Character(name) { this.name = name this.powers = [] this.addPowers = function(power) { this.powers.push(power) console.log(`${this.name} has ${this.powers} Powers!`) } } Easy gotcha: write function addPowers() instead of this.addPowers = and the method becomes a private inner function completely invisible outside the constructor. Your code won't error on creation, it'll just silently fail when you try to call it. The class syntax is cleaner and harder to get wrong. But understanding constructor functions teaches you what's actually happening under the hood and makes legacy codebases far less scary. Worth noting: there is a third way Object.create() but I've not covered it here. It gives you very fine-grained control over the prototype chain, but it's significantly more verbose and rarely the first tool you'd reach for. Both patterns. Both worth knowing. Have you been caught out by either of these? Let me know below 👇 #JavaScript #WebDevelopment #CodingTips #OOP #LearnToCode #JSDevs #SoftwareEngineering
To view or add a comment, sign in
-
Just published a new article: Array Flatten in JavaScript 🚀 Learn how to tame nested arrays with practical examples, visual diagrams, and multiple approaches—from recursion to the modern flat() method. Perfect for interview prep or leveling up your JS skills. Check it out here: [ https://lnkd.in/gxRkDnUf ] Chai Code Hitesh Choudhary Piyush Garg #chaicode #javascript #webdevcohort2026
To view or add a comment, sign in
Explore related topics
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
Thank you very much for the helpful explanation.