JavaScript 101: JavaScript Fundamentals Tutorial

Today, JavaScript is the heartbeat of modern web development. Without JavaScript 101 basics, we cannot develop websites.

Whether you’re building interactive websites, web applications, or learning front-end frameworks like React or Angular, JavaScript is where it all begins. In this post, we’ll walk through the fundamental concepts of JavaScript.

And if you love WordPress and want to speed up your WordPress website, try this.

Let’s break down these concepts, walk through examples, and have JavaScript basics explained in detail!

---

🔰 Why Learn JavaScript?

JavaScript is a versatile, event-driven, and object-based language that powers the dynamic behavior you see in websites. Learning JavaScript will open many doors for you.

Without JavaScript 101, you will struggle with popular libraries like React.js, Next.js or Angular.js.

---

✅1. Variables & Data Types

JavaScript supports different ways of declaring variables:

var name = "John";      // function scoped
let age = 25;           // block scoped
const PI = 3.14;        // constant, can't be reassigned

Data Types in JS:

• String: "Hello"
• Number: 42
• Boolean: true/false
• Undefined: a variable declared but not assigned
• Null: assignment value denoting absence
• Object, Array: complex data structures

📌 Tip: As we go through JavaScript basics explained remember to use let and const. Avoid var in modern context.

---

🔄2. Operators in JS

While we learn JavaScript step by step. Operators are key.

• Arithmetic: +, -, *, /, %
• Assignment: =, +=, -=, etc.
• Comparison: ==, ===, !=, <, >=
• Logical: &&, ||, !
• Unary: typeof, !, ++, --

Example:

let x = 10;
let y = 5;
let sum = x + y;    // 15

---

🧪3. If/Else Statements

In this JavaScript fundamentals tutorial, we must discuss control flow or conditional statements.

These allow us as programmer to make decisions via code. For example:

let age = 18;

if (age >= 18) {
  console.log("Eligible to vote");
} else {
  console.log("Underage");
}

Also includes:

• else if
• switch statements

---

🔁4. Loops

In JavaScript 101, we use Loops for repeating a block of code or to do repetitive task.

for (let i = 1; i <= 5; i++) {
  console.log("Step:", i);
}

Also commonly used:

• while loop
• do...while loop
• for...in (object iteration)
• for...of (array iteration)

---

🧑‍💻5. Functions in JS

JavaScript functions allow us to reuse blocks of code. They are one of the core principle of JavaScript.

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

console.log(greet("Alice")); // Hello, Alice!

Also covered:

• Function expressions
• Arrow functions () => {}

Example:

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

---

📦6. Arrays and Methods

Arrays are collection-type data structures.

let fruits = ["apple", "banana", "mango"];
console.log(fruits[1]); // banana

Common array methods:

• push(), pop()
• shift(), unshift()
• forEach(), map(), filter(), reduce()

const doubled = [1, 2, 3].map(num => num * 2); // [2, 4, 6]

---

🗃️ 7. Objects in JavaScript

Objects are key-value pairs:

let person = {
  name: "John",
  age: 30,
  greet: function() {
    return `Hello, I'm ${this.name}`;
  }
};

console.log(person.greet()); // Hello, I'm John

Also learn:

• Accessing properties (. and [])
• Nested objects
• Object destructuring

---

🧵 8. String Handling

Working with text in JS:

let message = "Hello, World!";
console.log(message.length);           // 13
console.log(message.toUpperCase());    // HELLO, WORLD!
console.log(message.includes("World"));// true

Template literals:

let name = "Alice";
let output = `Hello, ${name}`;

---

🧮 9. Number Handling

Understand numeric operations and methods:

let x = 42;
console.log(x.toString());      // "42"
console.log(Number("123"));     // 123
console.log(Math.sqrt(16));     // 4
console.log(Math.random());     // Random number

---

⏳ Extra: Working with Dates

const today = new Date();
console.log(today.toDateString()); // E.g., Sun Jun 1 2025
console.log(today.getFullYear()); // 2025

---

⭐ Follow and Star our GitHub Repository

👉 https://github.com/PawanKumar-Dev/JS-Revision

Feel free to read and show some love by starring the repository ⭐.

Know that to learn JavaScript is like learning the language of the web.

Every interactive and dynamic element you experience in modern websites—dropdowns, modals, sliders, API-powered content—relies heavily on JavaScript.

---

🧾Conclusion of JavaScript 101

In this blog post, we walked through the core building blocks of JavaScript. From variables, data types, and conditionals to loops, functions, arrays, and objects, these fundamentals form the foundation of everything else you’ll learn in JavaScript and frameworks and libraries like React, Angular, and Vue.

Consistency beats complexity. Keep experimenting, building, and revisiting this repository whenever you want to improve your skills. Remember – every expert was once a beginner. 💪💥

Feel free to check out our Isekai Anime recommendation of year 2025!

If you found this post helpful, be sure to:

• 🔖 Bookmark the JS Revision GitHub Repo
• 💬 Share your feedback in the comments
• 🔁 Share this post with fellow learners!

Until next time, happy coding! 👨‍💻🚀