JavaScript notes for beginners

// two slashes start a comment
console.log("Hello, Study Hub!");
console.log(2 + 3);                 // 5
console.log("Hi", "there");         // Hi there
console.warn("this one is orange");
console.error("this one is red");

const name = "Ayush";     // string
let marks = 87;           // number
const percent = 87.5;     // number (no separate decimal type)
const passed = true;      // boolean
let notYet;               // undefined - declared, no value

console.log(typeof marks);      // "number"
console.log(typeof name);       // "string"

marks = marks + 5;              // allowed - let
console.log(`Now ${marks}`);    // Now 92

// prompt() always returns TEXT - convert before maths
const age = Number(prompt("Your age?"));
console.log(age + 1);

// numbers and text add up strangely
console.log("5" + 5);           // "55"  (text wins)
console.log("5" - 5);           // 0     (minus forces maths)
console.log(Number("5") + 5);   // 10    (convert first!)

const price = 499;
const qty = 2;
const gst = 0.18;

const subtotal = price * qty;
const total = subtotal + subtotal * gst;

console.log(`Total: ₹${total.toFixed(2)}`);   // ₹1177.64

// --- always use === and !== , never == and != ---
console.log("5" == 5);       // true   (JS silently converts - dangerous)
console.log("5" === 5);      // false  (compares type too - correct)
console.log(0 == "");        // true   😬
console.log(0 === "");       // false  ✅

// --- short-circuit: && returns the first falsy, || the first truthy ---
const user = { name: "" };
const shown = user.name || "Guest";
console.log(shown);          // Guest

const count = 0;
console.log(count ?? 99);    // 0    (only null/undefined trigger ??)

const marks = 78;
let grade;

if (marks >= 90) {
  grade = "A+";
} else if (marks >= 75) {
  grade = "A";
} else if (marks >= 33) {
  grade = "B";
} else {
  grade = "F";
}

console.log(grade);                  // A

// ternary - a compact if / else
const label = marks >= 33 ? "Pass" : "Fail";

// switch - many exact matches on one value
switch (grade) {
  case "A+": console.log("Outstanding"); break;
  case "A":  console.log("Excellent");   break;
  default:   console.log("Keep going");
}

// classic for
for (let i = 1; i <= 5; i++) {
  console.log(i);                    // 1 2 3 4 5
}

// while
let count = 1;
while (count <= 3) {
  console.log("Round", count);
  count++;                           // forgetting this = infinite loop
}

// for...of - walk through a list (most readable)
const subjects = ["Maths", "Science", "English"];
for (const subject of subjects) {
  console.log("I study", subject);
}

// also gives you the position
for (const [i, subject] of subjects.entries()) {
  console.log(`${i + 1}. ${subject}`);
}

// there is also for...in (for object keys) and .forEach() on arrays
subjects.forEach((s) => console.log("Again:", s));

// 1. function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// 2. arrow function - the modern short form
const average = (a, b) => (a + b) / 2;

// 3. default parameters
const power = (base, exponent = 2) => base ** exponent;

console.log(greet("Ayush"));      // Hello, Ayush!
console.log(average(80, 90));     // 85
console.log(power(5));            // 25

// arrow with a block body needs an explicit return
const gradeOf = (marks) => {
  if (marks >= 90) return "A+";
  if (marks >= 75) return "A";
  return "B";
};

// functions are values - you can pass them around
function runTwice(fn) {
  fn();
  fn();
}
runTwice(() => console.log("called"));

const marks = [78, 91, 66];
marks.push(88);                     // add to the end
console.log(marks.length);          // 4
console.log(marks[0], marks.at(-1));// 78 88  (at(-1) is the last item)
console.log(marks.slice(0, 2));     // [78, 91]

// --- the four methods you will use every single day ---
const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);        // transform each item
const evens   = nums.filter(n => n % 2 === 0); // keep some items
const total   = nums.reduce((sum, n) => sum + n, 0); // boil down to one
const found   = nums.find(n => n > 3);       // first match

console.log(doubled, evens, total, found);
// [2,4,6,8,10]  [2,4]  15  4

// --- objects hold labelled values ---
const student = {
  name: "Ayush",
  marks: { Maths: 78, Science: 91 },
  city: "Shimla",
  greet() { return `Hi, I am ${this.name}`; },
};

console.log(student.name);              // dot for known keys
console.log(student["marks"]["Science"]); // brackets for dynamic keys
student.phone = "99999-00000";          // add a key any time
console.log(student.greet());

// a list of objects - the shape almost every real app uses
const classMarks = [
  { name: "Ayush", marks: [78, 91, 66] },
  { name: "Riya",  marks: [92, 88, 95] },
];

classMarks.forEach((s) => {
  const avg = s.marks.reduce((a, b) => a + b, 0) / s.marks.length;
  console.log(`${s.name}: ${avg.toFixed(1)}`);
});

// spread makes short copies instead of editing the original
const withExtra = [...marks, 100];       // new array
const renamed = { ...student, name: "Riya" }; // new object

<h1 id="title">Study Hub</h1>
<button id="likeBtn">Like (0)</button>
<input id="nameInput" placeholder="Your name">
<ul id="list"></ul>

// 1. find elements
const title  = document.querySelector("#title");
const btn    = document.querySelector("#likeBtn");
const input  = document.querySelector("#nameInput");
const list   = document.querySelector("#list");

// 2. read and change content
console.log(title.textContent);
title.textContent = "Study Hub — Learn Code";

// 3. change style and classes
title.style.color = "#38bdf8";
title.classList.add("highlight");

// 4. listen for a click
let likes = 0;
btn.addEventListener("click", () => {
  likes++;
  btn.textContent = `Like (${likes})`;
});

// 5. listen for typing, and build list items from user input
input.addEventListener("input", (event) => {
  list.innerHTML = "";
  if (!event.target.value.trim()) return;

  ["Maths", "Science", "English"]
    .filter((s) => s.toLowerCase().includes(event.target.value.toLowerCase()))
    .forEach((s) => {
      const li = document.createElement("li");
      li.textContent = s;
      list.appendChild(li);
    });
});

Uncaught TypeError: Cannot read properties of null (reading 'textContent')
    at app.js:4:15

# meaning, line by line:
# 1. TypeError ... null   -> you used something that does not exist
# 2. reading 'textContent'-> the property you tried to use
# 3. at app.js:4:15       -> file, line, column - click it in DevTools

// stop a crash before it happens
function toNumber(raw, fallback = 0) {
  const n = Number(raw);
  return Number.isFinite(n) ? n : fallback;
}

console.log(toNumber("42"));       // 42
console.log(toNumber("hello"));    // 0  - no crash
console.log(toNumber("", 99));     // 99

// try / catch when something can genuinely fail
try {
  const data = JSON.parse('{ broken json }');
  console.log(data);
} catch (error) {
  console.warn("Bad data received:", error.message);
} finally {
  console.log("this always runs");
}

// debug like a professional
const before = [1, 2, 3];
console.table(before);
console.log({ before, doubled: before.map((n) => n * 2) });

const students = [
  { name: "Ayush", marks: [78, 91, 66] },
  { name: "Riya",  marks: [92, 88, 95] },
  { name: "Karan", marks: [45, 52, 60] },
];

const average = (nums) =>
  nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;

const gradeOf = (avg) => {
  if (avg >= 85) return "A";
  if (avg >= 70) return "B";
  if (avg >= 50) return "C";
  return "D";
};

console.table(
  students.map((s) => {
    const avg = average(s.marks);
    return { name: s.name, average: avg.toFixed(1), grade: gradeOf(avg) };
  })
);

const classAvg = average(students.map((s) => average(s.marks)));
console.log(`Class average: ${classAvg.toFixed(1)}`);