Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

Day 32 : Arrays & Array Methods

📘 Day 32 — Arrays & Array Methods (Comprehensive)

Arrays are ordered lists of values and are essential for working with collections of data in JavaScript. Today we’ll explore creation, indexing, iteration, and the most useful built-in array methods (mutating and non-mutating), plus performance tips and real-world examples.

1 — Creating Arrays

let empty = [];
let nums = [1, 2, 3];
let mixed = ['text', 5, true, {name:'A'}, [1,2]];
let fromArray = Array.from('hello'); // ['h','e','l','l','o']

2 — Access & Length

Arrays are zero-indexed. The length property gives item count.

console.log(nums[0]); // 1
console.log(nums[nums.length - 1]); // last item

3 — Mutating Methods (change original array)

  • push(...items) — add to end
  • pop() — remove last
  • shift() — remove first
  • unshift(...items) — add to start
  • splice(start, deleteCount, ...items) — insert/remove at arbitrary position
let arr = [1,2,3];
arr.push(4); // [1,2,3,4]
arr.splice(1,1,'a'); // [1,'a',3,4]

4 — Non-Mutating Methods (return new arrays)

  • map(fn) — transform each element
  • filter(fn) — keep elements that pass test
  • reduce((acc, cur) => ... , initial) — reduce to single value
  • slice(start, end) — shallow copy portion
  • concat(...arrays) — merge arrays
const nums2 = [1,2,3,4];
const doubled = nums2.map(n => n*2); // [2,4,6,8]
const even = nums2.filter(n => n%2===0); // [2,4]
const sum = nums2.reduce((acc,n) => acc + n, 0); // 10

5 — Iteration Patterns

Choose the right loop:

  • for — classic index loop
  • for...of — readable for arrays
  • forEach — functional but cannot break early
for(let i=0;i console.log(item));

6 — Real-World Examples

A. Transform list of users to names

const users = [{name:'Rahul',age:22},{name:'Maya',age:24}];
const names = users.map(u => u.name); // ['Rahul','Maya']

B. Filter active items and return count

const items = [{id:1,active:true},{id:2,active:false}];
const activeCount = items.filter(i => i.active).length;

Performance Tips

  • Avoid repeated arr.length checks inside very hot loops (cache length if needed).
  • Prefer non-mutating methods (map/filter) for clarity — but aware of memory (they create new arrays).
  • For large arrays, use indexed loops for micro-optimizations.

🧠 Live Editor — Arrays Playground

Edit examples and run to see results. Try map/filter/reduce on the sample data.


Practice Tasks

  1. Write unique(arr) that returns array with unique values.
  2. Create groupBy(arr, key) to group array of objects by a key.
  3. Given array of numbers, return top 3 largest using array methods.

Comments

Post a Comment