Master JavaScript
From Basics to Advanced - Learn the Language of the Web 🚀
Introduction to JavaScript
What is JavaScript?
JavaScript is a high-level, interpreted programming language that makes web pages interactive. It is one of the core technologies of the World Wide Web, alongside HTML and CSS.
- JavaScript runs on the client-side (browser) and server-side (Node.js)
- It is dynamically typed and supports object-oriented programming
- JavaScript can manipulate HTML and CSS
- It enables interactive features like forms, animations, and dynamic content
Why Learn JavaScript?
1 Universal Language - Works in all modern browsers
2 Full-Stack Development - Frontend + Backend
3 Huge Ecosystem - NPM, React, Vue, Angular
4 High Demand - In-demand skill
5 Easy to Learn - Beginner-friendly
History of JavaScript
1995 JavaScript created by Brendan Eich in just 10 days at Netscape
1997 ECMAScript 1 - First standardization
2009 Node.js released - JavaScript on the server
2015 ES6/ES2015 - Major update with modern features
Present Annual ECMAScript updates with new features
JavaScript Basics
Your First JavaScript Program
console.log("Hello, World!");
Variables and Data Types
Declaring Variables
JavaScript has three ways to declare variables:
var name = "John"; // Function-scoped (old way)
let age = 25; // Block-scoped (modern)
const PI = 3.14; // Block-scoped, constant
Data Types
Number: let num = 42;
String: let text = "Hello";
Boolean: let isTrue = true;
Null: let empty = null;
Undefined: let notDefined;
Object: let person = {name: "John"};
Array: let nums = [1, 2, 3];
Symbol: let sym = Symbol();
Operators
Arithmetic Operators
let sum = 10 + 5; // Addition
let diff = 10 - 5; // Subtraction
let product = 10 * 5; // Multiplication
let quotient = 10 / 5; // Division
let remainder = 10 % 3; // Modulus
let power = 2 ** 3; // Exponentiation
Comparison Operators
5 == "5" // true (loose equality)
5 === "5" // false (strict equality)
5 != "5" // false
5 !== "5" // true
5 > 3 // true
5 >= 5 // true
Control Flow
Conditional Statements
If-Else Statement
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
Switch Statement
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Other day");
}
Loops
For Loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
While Loop
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Do-While Loop
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
Functions
Function Declaration
function greet(name) {
return "Hello, " + name;
}
Function Expression
const greet = function(name) {
return "Hello, " + name;
};
Arrow Functions (ES6)
const greet = (name) => "Hello, " + name;
const add = (a, b) => {
return a + b;
};
Default Parameters
function greet(name = "Guest") {
return "Hello, " + name;
}
Rest Parameters
function sum(...numbers) {
return numbers.reduce(
(a, b) => a + b, 0
);
}
Arrays
Creating Arrays
let fruits = ["Apple", "Banana", "Orange"];
let numbers = new Array(1, 2, 3, 4, 5);
Array Methods
Adding and Removing Elements
fruits.push("Mango"); // Add to end
fruits.pop(); // Remove from end
fruits.unshift("Grapes"); // Add to beginning
fruits.shift(); // Remove from beginning
Array Iteration
// forEach
fruits.forEach(fruit => console.log(fruit));
// map
let lengths = fruits.map(fruit => fruit.length);
// filter
let long = fruits.filter(fruit => fruit.length > 5);
// reduce
let total = [1,2,3].reduce((sum, num) => sum + num, 0);
Common Array Methods:
push() pop() shift() unshift() forEach() map() filter() reduce() find() includes()Objects
Creating Objects
let person = {
name: "John",
age: 30,
city: "New York",
greet: function() {
return "Hello, " + this.name;
}
};
Accessing Properties
console.log(person.name); // Dot notation
console.log(person["age"]); // Bracket notation
Object Methods
Object.keys(person); // ["name", "age", "city"]
Object.values(person); // ["John", 30, "New York"]
Object.entries(person); // Array of [key, value] pairs
Destructuring
const { name, age } = person;
console.log(name); // "John"
DOM Manipulation
Selecting Elements
document.getElementById("myId");
document.querySelector(".myClass");
document.querySelectorAll("p");
Modifying Elements
element.textContent = "New text";
element.innerHTML = "<strong>Bold</strong>";
element.style.color = "red";
element.classList.add("active");
Event Handling
element.addEventListener("click", function() {
console.log("Clicked!");
});
Try clicking the button above to see DOM manipulation in action!
Asynchronous JavaScript
Callbacks
function fetchData(callback) {
setTimeout(() => {
callback("Data received");
}, 1000);
}
Promises
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Success!"), 1000);
});
promise.then(result => console.log(result));
Async/Await
async function fetchData() {
try {
let response = await fetch("api/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
Async Comparison
Callbacks Traditional approach, can lead to callback hell
Promises Better error handling, chainable
Async/Await Modern, clean syntax, easier to read
ES6+ Features
Template Literals
let name = "John";
let greeting = `Hello, ${name}!`;
Spread Operator
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]
Destructuring
let [a, b, c] = [1, 2, 3];
let { name, age } = person;
Classes
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, ${this.name}`;
}
}
Modern JavaScript Features:
Template Literals Arrow Functions Destructuring Spread/Rest Classes Promises Async/Await ModulesBest Practices
Code Quality
- Use meaningful variable names
- Write comments for complex logic
- Follow consistent code style
- Use const and let instead of var
- Always use strict equality (===)
Performance
- Minimize DOM manipulation
- Use event delegation
- Avoid global variables
- Cache frequently used values
Security
- Validate and sanitize user input
- Avoid eval() function
- Use HTTPS for API calls
- Keep dependencies updated
Congratulations! 🎉
You've completed the comprehensive JavaScript course!
You now have a solid foundation in JavaScript programming, from basic syntax to advanced concepts.
Next Steps
1 Practice building real projects
2 Learn a JavaScript framework (React, Vue, or Angular)
3 Explore Node.js for backend development
4 Build a portfolio of projects
5 Contribute to open-source projects
6 Keep learning and stay updated