A comprehensive set of notes on JavaScript, covering the essentials for both beginners and
intermediate learners. We'll break it down into several key sections: Basics, Data Types,
Control Flow, Functions, Objects, DOM Manipulation, ES6+ Features, and Asynchronous
JavaScript.
1. Basics
What is JavaScript?
A scripting language used to create dynamic web pages.
Can run both on the client-side (in browsers) and server-side
(using Node.js).
Interacts with HTML and CSS to build interactive websites.
Embedding JavaScript
Inline: <script>console.log("Hello, World!");</script>
External:
<script src="script.js"></script>
Comments
Single-line: // This is a comment
Multi-line:
/*
This is a
multi-line comment
*/
2. Data Types
Primitive Types
1. String: "Hello"
2. Number: 42, 3.14
3. Boolean: true, false
4. Undefined: A variable declared but not assigned.
5. Null: Intentional absence of value.
6. Symbol: Unique and immutable value (rarely used).
7. BigInt: For integers larger than 2^53 - 1.
Non-Primitive Types
Object: { name: "Alice", age: 25 }
Array: [1, 2, 3, 4]
Type Checking
typeof operator:
console.log(typeof "Hello"); // string
console.log(typeof 42); // number
3. Variables
Declaration Keywords
var: Function-scoped, can be redeclared.
let: Block-scoped, cannot be redeclared.
const: Block-scoped, must be initialized, immutable reference.
Examples
var a = 10;
let b = 20;
const PI = 3.14;
4. Operators
Arithmetic Operators
+, -, *, /, % (modulus), ** (exponentiation).
Comparison Operators
== (loose equality), === (strict equality), !=, !==, >, <, >=, <=.
Logical Operators
&& (AND), || (OR), ! (NOT).
Assignment Operators
=, +=, -=, *=, /=, %=.
5. Control Flow
Conditional Statements
if-else
if (x > 10) {
console.log("Greater");
} else {
console.log("Smaller or equal");
}
switch-case
switch (day) {
case 1:
console.log("Monday");
break;
default:
console.log("Other day");
}
Loops
for
for (let i = 0; i < 5; i++) {
console.log(i);
}
while
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
do-while
let j = 0;
do {
console.log(j);
j++;
} while (j < 5);
6. Functions
Function Declaration
function add(a, b) {
return a + b;
}
Function Expression
const multiply = function(a, b) {
return a * b;
};
Arrow Functions
const divide = (a, b) => a / b;
Default Parameters
function greet(name = "Guest") {
console.log("Hello, " + name);
}
7. Objects
Creating Objects
const person = {
name: "Alice",
age: 25,
greet() {
console.log("Hello, " + this.name);
},
};
Accessing Properties
Dot notation: person.name
Bracket notation: person["age"]
8. Arrays
Creating Arrays
const fruits = ["Apple", "Banana", "Mango"];
Array Methods
.push(), .pop(), .shift(), .unshift()
.map(), .filter(), .reduce()
.forEach()
9. DOM Manipulation
Selecting Elements
const title = document.getElementById("title");
const items = document.querySelectorAll(".item");
Modifying Content
title.textContent = "New Title";
Event Handling
button.addEventListener("click", () => {
alert("Button clicked!");
});
10. ES6+ Features
Template Literals
const name = "Alice";
console.log(`Hello, ${name}!`);
Destructuring
const [a, b] = [1, 2];
const { name, age } = person;
Spread and Rest Operators
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num);
}
Classes
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
11. Asynchronous JavaScript
Callbacks
setTimeout(() => console.log("Executed after 2 seconds"), 2000);
Promises
let promise = new Promise((resolve, reject) => {
if (success) resolve("Success!");
else reject("Failure!");
});
Async/Await
async function fetchData() {
const response = await fetch("https://api.example.com");
const data = await response.json();
console.log(data);
}
12. Error Handling
try-catch
try {
let result = riskyFunction();
} catch (error) {
console.log("Error:", error.message);
}
Summary
JavaScript is versatile with a range of features for building dynamic
web pages.
Understanding the basics, data types, and control flow is essential.
Mastering functions, objects, and asynchronous programming
unlocks advanced capabilities.
ES6+ features streamline code and enhance readability.
