📘 JavaScript Basics and Cheat Sheet — A Guide for Beginners

Whether you're just starting your journey into web development or brushing up your knowledge, mastering the basics of JavaScript is essential. This post covers fundamental concepts and includes a handy cheat sheet you can refer to as you code.

---

🧠 What is JavaScript?

JavaScript is a high-level, interpreted programming language that runs in the browser and powers interactivity on websites. It’s part of the core web trio: HTML, CSS, and JavaScript.

---

📚 JavaScript Basics

✅ 1. Variables

let name = "Alice";
const age = 25;
var city = "New York"; // older syntax

• Use let for variables that will change.

• Use const for variables that shouldn’t change.

• Avoid var unless you're dealing with legacy code.

---

✅ 2. Data Types

// Primitive Types
const name = "John";       // String
const age = 30;            // Number
const isOnline = true;     // Boolean
const nothing = null;      // Null
let notDefined;            // Undefined
const id = Symbol("id");   // Symbol

// Reference Types
const hobbies = ["reading", "sports"]; // Array
const person = { name: "John", age: 30 }; // Object

---

✅ 3. Functions

function greet(name) {
  return `Hello, ${name}!`;
}

const greetArrow = (name) => `Hi, ${name}!`;

---

✅ 4. Conditionals

if (age > 18) {
  console.log("Adult");
} else if (age > 12) {
  console.log("Teen");
} else {
  console.log("Child");
}

Use ternary operator for short conditions:

const status = age >= 18 ? "Adult" : "Minor";

---

✅ 5. Loops

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

const fruits = ["apple", "banana"];
for (const fruit of fruits) {
  console.log(fruit);
}

---

✅ 6. Arrays

const colors = ["red", "green", "blue"];

colors.push("yellow");   // Add
colors.pop();            // Remove last
colors.shift();          // Remove first
colors.unshift("pink");  // Add to start

colors.forEach(color => console.log(color));

---

✅ 7. Objects

const user = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hi!");
  },
};

console.log(user.name); // Access property
user.greet(); // Call method

---

✅ 8. ES6 Features

// Destructuring
const { name, age } = user;

// Spread
const newUser = { ...user, location: "NY" };

// Template literals
console.log(`My name is ${name} and I'm ${age}`);

---

📋 JavaScript Cheat Sheet (Copy & Save)

---

🛠 Quick Practice Challenge

Write a function that takes a number and returns whether it’s even or odd:

function isEven(num) {
  return num % 2 === 0 ? "Even" : "Odd";
}

---

✅ Final Thoughts

This cheat sheet is just the beginning. JavaScript is deep, quirky, and incredibly powerful once you master the basics. Keep practicing, build small projects, and reference cheat sheets like this when you feel stuck.

Want a printable PDF version of this cheat sheet? Let me know, and I’ll generate one for you!