JavaScript Functions, Arrays and Objects — map, filter, reduce, Destructuring

Functions, arrays and objects are 80% of everyday JavaScript — especially in React and Node.

1. Functions

function add(a, b = 0) {        // default parameter
  return a + b;
}
const square = (x) => x * x;     // arrow function, implicit return
const greet = (name) => {
  const msg = `Hello, ${name}!`;
  return msg;
};
console.log(add(2, 3), add(7), square(9), greet("Ravi"));

5 7 81 Hello, Ravi!

Functions are values: you can store them in variables and pass them to other functions (callbacks).

Closures

A function remembers the variables from where it was created:

function makeCounter() {
  let count = 0;
  return () => ++count;
}
const next = makeCounter();
next(); next();
console.log(next());

3

2. Array methods you'll use daily

const students = [
  { name: "Asha", marks: 92, city: "Jaipur" },
  { name: "Ravi", marks: 74, city: "Pune" },
  { name: "Neha", marks: 85, city: "Jaipur" },
];

const names = students.map((s) => s.name);
const toppers = students.filter((s) => s.marks >= 80).map((s) => s.name);
const total = students.reduce((sum, s) => sum + s.marks, 0);
const ravi = students.find((s) => s.name === "Ravi");
const fromJaipur = students.some((s) => s.city === "Jaipur");
const sorted = [...students].sort((a, b) => b.marks - a.marks).map((s) => s.name);

console.log(names, toppers, total, ravi.marks, fromJaipur, sorted);

[ 'Asha', 'Ravi', 'Neha' ] [ 'Asha', 'Neha' ] 251 74 true [ 'Asha', 'Neha', 'Ravi' ]

sort() without a function sorts as text: [10, 9, 2].sort() gives [10, 2, 9]. Use sort((a, b) => a - b) for numbers.

3. Objects

const course = { title: "SQL", price: 999, tags: ["db", "interview"] };
course.price = 799;                 // change
course.level = "beginner";          // add
delete course.tags;                 // remove
console.log(course, Object.keys(course).length, "title" in course);

{ title: 'SQL', price: 799, level: 'beginner' } 3 true

4. Destructuring and spread

const user = { name: "Neha", city: "Indore", skills: ["js", "css"] };
const { name, city: hometown } = user;     // pull out properties
const [first, ...rest] = [10, 20, 30];       // pull out array items
const updated = { ...user, city: "Pune" };   // copy + change (original untouched)
const all = [...user.skills, "react"];
console.log(name, hometown, first, rest, updated.city, user.city, all);

Neha Indore 10 [ 20, 30 ] Pune Indore [ 'js', 'css', 'react' ]

Spread (...) makes shallow copies — the React way to update state without changing the original.

5. JSON

JSON is how data travels between frontend and backend.

const data = { id: 7, title: "DSA", free: false };
const text = JSON.stringify(data);
const back = JSON.parse(text);
console.log(text, back.title);

{"id":7,"title":"DSA","free":false} DSA

Common mistakes

• Forgetting return in arrow functions with braces { }.
• Sorting numbers without a compare function.
• Mutating state objects directly instead of copying with spread.

Quick recap

• Functions, arrow functions, default parameters, closures.
• map / filter / reduce / find / some / sort / includes.
• Objects: dot access, add, delete, Object.keys.
• Destructuring and spread for clean copies; JSON.stringify / parse.