Complete JavaScript Notes: From Basics to Advanced Concepts.pdf

Complete JavaScript Notes
1. Introduction to JavaScript
JavaScript is a versatile and powerful programming language primarily known for its
role in web development. It enables interactive and dynamic content on websites,
making them more engaging and user-friendly. Beyond web browsers, JavaScript has
expanded its reach to various other domains, including server-side development with
Node.js, mobile app development with frameworks like React Native, and even
desktop applications.
What is JavaScript?
JavaScript is a high-level, interpreted programming language that conforms to the
ECMAScript specification. It is a multi-paradigm language, supporting event-driven,
functional, and imperative programming styles. Unlike compiled languages,
JavaScript code is executed directly by an interpreter, typically within a web browser's
JavaScript engine or a Node.js runtime environment.
History and Evolution
JavaScript was created in 1995 by Brendan Eich while he was working at Netscape
Communications. Initially named LiveScript, it was quickly renamed JavaScript to
capitalize on the popularity of Java at the time, despite having little to no direct
relation to the Java programming language. The language was standardized under
ECMAScript in 1997, and subsequent versions have introduced significant
enhancements and new features, such as ES6 (ECMAScript 2015), which brought major
improvements like arrow functions, classes, and modules.
Where is JavaScript used?
JavaScript's primary domain remains web development, where it powers the client-
side interactivity of millions of websites. However, its applications have diversified
considerably:

Front-end Web Development: Used with HTML and CSS to create dynamic and
interactive user interfaces. Frameworks and libraries like React, Angular, and
Vue.js are built on JavaScript.
Back-end Web Development: With Node.js, JavaScript can be used to build
scalable and high-performance server-side applications, APIs, and microservices.
Mobile App Development: Frameworks such as React Native and NativeScript
allow developers to build cross-platform mobile applications using JavaScript.
Desktop App Development: Electron and NW.js enable the creation of desktop
applications using web technologies (HTML, CSS, JavaScript).
Game Development: JavaScript can be used to develop browser-based games
and even more complex games with libraries like Phaser.
IoT (Internet of Things): JavaScript can be used to program various IoT devices.
Setting up your development environment
To start writing and running JavaScript code, you primarily need a text editor and a
web browser. For more advanced development, a dedicated Integrated Development
Environment (IDE) and Node.js are recommended.
1. Text Editor/IDE: Popular choices include Visual Studio Code, Sublime Text, Atom,
or WebStorm. These provide features like syntax highlighting, autocompletion,
and debugging tools.
2. Web Browser: Modern web browsers (Chrome, Firefox, Edge, Safari) come with
built-in JavaScript engines and developer tools (console, debugger) that are
essential for testing and debugging client-side JavaScript.
3. Node.js: For server-side JavaScript development and to use JavaScript outside
the browser, install Node.js. It includes the npm (Node Package Manager) which
is crucial for managing project dependencies and running development tools.
2. JavaScript Basics
JavaScript's fundamental building blocks include variables, data types, operators, and
control flow statements. Understanding these concepts is crucial for writing any
JavaScript program.

Variables (var, let, const)
Variables are containers for storing data values. JavaScript provides three keywords to
declare variables:
var : Historically used for variable declaration. var declarations are function-
scoped and are hoisted to the top of their function or global scope. This can lead
to unexpected behavior, especially in loops or conditional blocks.
javascript var x = 10; if (true) { var x = 20; // Same variable x
console.log(x); // 20 } console.log(x); // 20
let : Introduced in ES6 (ECMAScript 2015), let declarations are block-scoped.
This means the variable is only accessible within the block (e.g., if statement,
for loop) where it is defined.
javascript let y = 10; if (true) { let y = 20; // Different variable
y console.log(y); // 20 } console.log(y); // 10
const : Also introduced in ES6, const is used to declare constants. Like let ,
const declarations are block-scoped. Once a const variable is assigned a value,
it cannot be reassigned. However, for objects and arrays declared with const ,
their properties or elements can still be modified.
```javascript const PI = 3.14; // PI = 3.14159; // This would cause an error
const person = { name: "Alice" }; person.name = "Bob"; // This is allowed
console.log(person.name); // Bob ```
Data Types (Primitive and Non-Primitive)
JavaScript has several built-in data types. They are broadly categorized into primitive
and non-primitive (or reference) types.
Primitive Data Types:
String : Represents textual data. Enclosed in single quotes ( '...' ), double
quotes (`
"..." ), or backticks ( `...` for template literals). javascript let name = "John
Doe"; * Number : Represents both integer and floating-point numbers. javascript

let age = 30; let price = 99.99; * Boolean : Represents a logical entity and can
have two values: true or false . javascript let isActive = true; * Undefined :
Represents a variable that has been declared but has not yet been assigned a value.
javascript let city; // city is undefined * Null : Represents the intentional
absence of any object value. It is a primitive value. javascript let car = null; *
Symbol : (ES6) Represents a unique identifier. Used to create unique property keys that
won't clash with other property keys. javascript const id = Symbol('id'); *
BigInt : (ES2020) Represents whole numbers larger than 2^53 - 1, which is the largest
number JavaScript can reliably represent with the Number primitive. javascript
const bigNumber = 1234567890123456789012345678901234567890n;
Non-Primitive (Reference) Data Types:
Object : A collection of key-value pairs. Objects are the most fundamental non-
primitive data type. javascript let person = { firstName: "John",
lastName: "Doe" };
Array : A special type of object used to store ordered collections of data.
javascript let colors = ["red", "green", "blue"];
Function : A block of code designed to perform a particular task. Functions are
also objects in JavaScript. javascript function greet(name) { return
"Hello, " + name; }
Operators (Arithmetic, Assignment, Comparison, Logical, etc.)
Operators are symbols that perform operations on operands (values and variables).
Arithmetic Operators: Perform mathematical calculations.

Operator Description Example
+ Addition x + y
- Subtraction x - y
* Multiplication x * y
/ Division x / y
% Modulus x % y
** Exponentiation x ** y
++ Increment x++ or ++x
-- Decrement x-- or --x
Assignment Operators: Assign values to variables.
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y
Comparison Operators: Compare two values and return a boolean result.

== Equal to (loose equality) x == y
=== Equal value and type (strict equality) x === y
!= Not equal (loose inequality) x != y
!== Not equal value or type (strict inequality) x !== y
> Greater than x > y
< Less than x < y
>= Greater than or equal to x >= y
<= Less than or equal to x <= y
Logical Operators: Combine conditional statements.
&& Logical AND x < 10 && x > 5
|| Logical OR x < 5 || x > 10
! Logical NOT !(x === 5)
Type Conversion (Implicit and Explicit)
JavaScript is a loosely typed language, meaning variables do not have a fixed type.
Values can be converted from one type to another, either implicitly (coercion) or
explicitly.
Implicit Type Conversion (Coercion): JavaScript automatically converts data
types when an operation involves different types.
javascript console.log("5" + 5); // "55" (Number 5 is converted to
String "5") console.log("5" - 5); // 0 (String "5" is converted to
Number 5) console.log(true + 1); // 2 (Boolean true is converted to
Number 1)

Explicit Type Conversion: Developers explicitly convert data types using built-in
functions or methods.
javascript console.log(Number("10")); // 10 console.log(String(100));
// "100" console.log(Boolean(0)); // false
Conditional Statements (if, else if, else, switch)
Conditional statements execute different actions based on different conditions.
if , else if , else :
javascript let hour = 14; if (hour < 12) { console.log("Good
morning!"); } else if (hour < 18) { console.log("Good afternoon!"); }
else { console.log("Good evening!"); }
switch : Used to perform different actions based on different conditions.
javascript let day = "Monday"; switch (day) { case "Monday":
console.log("It's Monday."); break; case "Friday": console.log("It's
Friday!"); break; default: console.log("It's another day."); }
Loops (for, while, do-while, for...in, for...of)
Loops are used to execute a block of code repeatedly.
for loop: Iterates a block of code a number of times.
javascript for (let i = 0; i < 5; i++) { console.log(i); }
while loop: Executes a block of code as long as a specified condition is true.
javascript let i = 0; while (i < 5) { console.log(i); i++; }
do...while loop: Similar to while , but the block of code is executed at least
once before the condition is tested.
javascript let i = 0; do { console.log(i); i++; } while (i < 5);
for...in loop: Iterates over the enumerable properties of an object.

javascript const person = { fname: "John", lname: "Doe", age: 25 };
for (let x in person) { console.log(x + ": " + person[x]); }
for...of loop: (ES6) Iterates over iterable objects (like Arrays, Strings, Maps,
Sets, etc.).
javascript const colors = ["red", "green", "blue"]; for (let color of
colors) { console.log(color); }
3. Functions
Functions are fundamental building blocks in JavaScript. They are reusable blocks of
code that perform a specific task. Functions allow you to organize your code, make it
more modular, and avoid repetition (DRY - Don't Repeat Yourself principle).
Function Declaration and Expression
There are two primary ways to define functions in JavaScript:
Function Declaration (or Function Statement): This is the most common way
to define a function. Function declarations are hoisted, meaning they can be
called before they are defined in the code.
```javascript // Function Declaration function greet(name) { return "Hello, " +
name + "!"; }
console.log(greet("Alice")); // Output: Hello, Alice! ```
Function Expression: A function expression defines a function as part of an
expression, typically assigned to a variable. Function expressions are not hoisted,
so they cannot be called before they are defined.
```javascript // Function Expression const sayHello = function(name) { return
"Hello, " + name + "!"; };
console.log(sayHello("Bob")); // Output: Hello, Bob! //
console.log(anotherGreet("Charlie")); // This would cause an error if called
before definition ```

Arrow Functions
Arrow functions (introduced in ES6) provide a more concise syntax for writing function
expressions. They also behave differently regarding the this keyword (which will be
discussed in a later section).
Basic Syntax:
javascript const add = (a, b) => a + b; console.log(add(5, 3)); //
Output: 8
Single Parameter: Parentheses are optional for a single parameter.
javascript const square = num => num * num; console.log(square(4));
// Output: 16
No Parameters: Empty parentheses are required.
javascript const sayHi = () => "Hi there!"; console.log(sayHi()); //
Output: Hi there!
Block Body: For multiple statements, use curly braces and a return statement.
javascript const calculateArea = (length, width) => { const area =
length * width; return `The area is ${area} square units.`; };
console.log(calculateArea(10, 5)); // Output: The area is 50 square
units.
Parameters and Arguments
Parameters: Named variables listed in the function definition. They act as
placeholders for the values that will be passed into the function.
Arguments: The actual values passed to the function when it is called.
```javascript function multiply(a, b) { // a and b are parameters return a * b; }
console.log(multiply(7, 2)); // 7 and 2 are arguments ```

Return Values
Functions can return a value using the return statement. If no return statement is
specified, or if return; is used without a value, the function implicitly returns
undefined .
function getMax(x, y) {
if (x > y) {
return x;
} else {
return y;
}
}
let result = getMax(15, 8);
console.log(result); // Output: 15
function doNothing() {
// No return statement
}
console.log(doNothing()); // Output: undefined
Scope (Global, Local, Block)
Scope determines the accessibility of variables, objects, and functions in different
parts of your code.
Global Scope: Variables declared outside any function or block have global
scope. They can be accessed from anywhere in the code.
```javascript let globalVar = "I am global";
function accessGlobal() { console.log(globalVar); } accessGlobal(); // Output: I am
global ```
Function (Local) Scope: Variables declared inside a function (using var , let ,
or const ) are function-scoped. They are only accessible within that function.
javascript function localScopeExample() { var localVar = "I am local
(var)"; let anotherLocalVar = "I am local (let)"; const PI = 3.14; //
Also local console.log(localVar); console.log(anotherLocalVar); }
localScopeExample(); // console.log(localVar); // Error: localVar is
not defined

Block Scope: Variables declared with let and const inside a block (e.g., if
statement, for loop, or any {} block) are block-scoped. They are only
accessible within that block.
javascript if (true) { let blockVar = "I am block-scoped";
console.log(blockVar); // Output: I am block-scoped } //
console.log(blockVar); // Error: blockVar is not defined
Closures
A closure is the combination of a function bundled together (enclosed) with references
to its surrounding state (the lexical environment). In simpler terms, a closure gives you
access to an outer function's scope from an inner function, even after the outer
function has finished executing.
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log("Outer Variable: " + outerVariable);
console.log("Inner Variable: " + innerVariable);
};
}
const newFunction = outerFunction("Hello");
newFunction("World");
// Output:
// Outer Variable: Hello
// Inner Variable: World
// Even after outerFunction has returned, innerFunction still has access to
outerVariable
Closures are powerful for creating private variables and functions, and for
implementing patterns like currying and memoization.
Immediately Invoked Function Expressions (IIFE)
An IIFE is a JavaScript function that runs as soon as it is defined. It's a design pattern
that creates a private scope for variables, preventing them from polluting the global
namespace.

3. Constructor Function: Used to create multiple objects of the same type.
``javascript function Book(title, author, year) { this.title = title;
this.author = author; this.year = year; this.getSummary = function()
{ return $ {this.title} by ${this.author}, published in ${this.year}.`; }; }
const book1 = new Book("The Hobbit", "J.R.R. Tolkien", 1937);
console.log(book1.getSummary()); ```
4. class Keyword (ES6): Syntactic sugar over constructor functions and
prototypes.
```javascript class Animal { constructor(name, species) { this.name = name;
this.species = species; }
makeSound() {
console.log("Generic animal sound");
}
}
const dog = new Animal("Buddy", "Dog"); dog.makeSound(); ```
Accessing Properties:
Dot Notation (Recommended):
javascript console.log(person.firstName); // "John"
Bracket Notation (Useful for dynamic property names or properties with
special characters):
javascript console.log(person["lastName"]); // "Doe" let prop =
"age"; console.log(person[prop]); // 30
Modifying Properties:
person.age = 31;
person["isStudent"] = true;
console.log(person.age); // 31
console.log(person.isStudent); // true
Adding New Properties:

person.nationality = "American";
console.log(person.nationality); // "American"
Deleting Properties:
delete person.isStudent;
console.log(person.isStudent); // undefined
Methods: Functions stored as object properties.
console.log(person.greet()); // "Hello, my name is John Doe."
Arrays (Creation, Methods, Iteration)
Arrays are ordered collections of values. Each value is called an element, and each
element has a numeric position called an index (starting from 0).
Creation of Arrays:
1. Array Literal (Recommended):
javascript const fruits = ["apple", "banana", "cherry"]; const
numbers = [1, 2, 3, 4, 5]; const mixed = ["text", 123, true, { key:
"value" }];
2. new Array() (Less common):
javascript const emptyArray = new Array(); const fiveElements = new
Array(5); // Creates an array with 5 empty slots const colors = new
Array("red", "green", "blue");
Accessing Elements:
Elements are accessed using their index in bracket notation.
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "cherry"
console.log(fruits.length); // 3
Modifying Elements:

fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "cherry"]
Common Array Methods:
JavaScript provides a rich set of built-in methods for manipulating arrays.

Method Description Example
push()
Adds one or more elements to the end of
an array and returns the new length.
arr.push("new")
pop()
Removes the last element from an array
and returns that element.
arr.pop()
shift()
Removes the first element from an array
and returns that element.
arr.shift()
unshift()
Adds one or more elements to the
beginning of an array and returns the new
length.
arr.unshift("first")
splice()
Changes the contents of an array by
removing or replacing existing elements
and/or adding new elements in place.
arr.splice(index,
deleteCount, item1, ...)
slice()
Returns a shallow copy of a portion of an
array into a new array object.
arr.slice(startIndex,
endIndex)
concat() Used to merge two or more arrays. arr1.concat(arr2)
indexOf()
Returns the first index at which a given
element can be found in the array, or -1 if it
is not present.
arr.indexOf("item")
includes()
Determines whether an array includes a
certain value among its entries, returning
true or false as appropriate.
arr.includes("item")
forEach()
Executes a provided function once for each
array element.
arr.forEach(callback)
map()
Creates a new array populated with the
results of calling a provided function on
every element in the calling array.
arr.map(callback)
filter()
Creates a new array with all elements that
pass the test implemented by the provided
function.
arr.filter(callback)

Method Description Example
reduce()
Executes a reducer function (that you
provide) on each element of the array,
resulting in single output value.
arr.reduce(callback,
initialValue)
find()
Returns the value of the first element in
the provided array that satisfies the
provided testing function.
arr.find(callback)
sort()
Sorts the elements of an array in place and
returns the sorted array.
arr.sort()
reverse() Reverses an array in place. arr.reverse()
Iteration over Arrays:
for loop:
javascript for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); }
forEach() method:
javascript fruits.forEach(function(fruit, index) {
console.log(`$`{index}: `${fruit}`); });
for...of loop (ES6):
javascript for (const fruit of fruits) { console.log(fruit); }
Destructuring (Object and Array)
Destructuring assignment is a special syntax that allows you to unpack values from
arrays, or properties from objects, into distinct variables.
Object Destructuring:
```javascript const person = { name: "Alice", age: 25, city: "New York" }; const {
name, age } = person; console.log(name); // "Alice" console.log(age); // 25

// Renaming variables const { name: personName, city: personCity } = person;
console.log(personName); // "Alice" console.log(personCity); // "New York" ```
Array Destructuring:
```javascript const colors = ["red", "green", "blue"]; const [firstColor,
secondColor] = colors; console.log(firstColor); // "red" console.log(secondColor);
// "green"
// Skipping elements const [,, thirdColor] = colors; console.log(thirdColor); //
"blue"
// With rest operator const [primary, ...restColors] = colors; console.log(primary);
// "red" console.log(restColors); // ["green", "blue"] ```
Spread and Rest Operators
Both the spread ( ... ) and rest ( ... ) operators use the same syntax but serve
different purposes based on where they are used.
Spread Operator ( ... ): Expands an iterable (like an array or string) into
individual elements. Useful for copying arrays, merging arrays, or passing
multiple arguments to a function.
```javascript // Copying an array const originalArray = [1, 2, 3]; const copiedArray
= [...originalArray]; // [1, 2, 3]
// Merging arrays const arr1 = [1, 2]; const arr2 = [3, 4]; const mergedArray =
[...arr1, ...arr2]; // [1, 2, 3, 4]
// Spreading properties in objects (ES2018) const obj1 = { a: 1, b: 2 }; const obj2 = {
c: 3, d: 4 }; const mergedObject = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
// Passing arguments to a function function sum(a, b, c) { return a + b + c; } const
nums = [1, 2, 3]; console.log(sum(...nums)); // 6 ```
Rest Operator ( ... ): Collects multiple elements into an array. Used in function
parameters to handle an indefinite number of arguments, or in destructuring
assignments.
```javascript // In function parameters function collectArgs(firstArg, ...restArgs) {
console.log(firstArg); // "A" console.log(restArgs); // ["B", "C", "D"] }

collectArgs("A", "B", "C", "D");
// In array destructuring (as shown above) const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1 console.log(tail); // [2, 3, 4] ```
5. Asynchronous JavaScript
JavaScript is a single-threaded language, meaning it can only execute one task at a
time. However, many operations, such as fetching data from a server, reading a file, or
waiting for a user action, can take time. If these operations were synchronous
(blocking), the entire application would freeze until they completed. Asynchronous
programming allows JavaScript to handle these long-running tasks without blocking
the main thread, ensuring a smooth and responsive user experience.
Callbacks
A callback is a function passed as an argument to another function, which is then
invoked inside the outer function to complete some kind of routine or action. This is
the traditional way of handling asynchronous operations in JavaScript.
function fetchData(callback) {
// Simulate a network request
setTimeout(() => {
const data = { message: "Data fetched successfully!" };
callback(null, data); // Pass null for error, and data on success
}, 2000);
}
console.log("Fetching data...");
fetchData((error, data) => {
if (error) {
console.error("Error:", error);
} else {
console.log(data.message);
}
});
console.log("This will be logged before the data is fetched.");
Callback Hell (Pyramid of Doom): When multiple asynchronous operations depend
on each other, you can end up with nested callbacks, which makes the code hard to
read and maintain. This is known as "callback hell."

Promises (States, Chaining, Error Handling)
Promises, introduced in ES6, provide a cleaner and more robust way to handle
asynchronous operations. A Promise is an object representing the eventual
completion (or failure) of an asynchronous operation and its resulting value.
Promise States:
pending : Initial state, neither fulfilled nor rejected.
fulfilled : The operation completed successfully.
rejected : The operation failed.
Creating a Promise:
const myPromise = new Promise((resolve, reject) => {
// Asynchronous operation
setTimeout(() => {
const success = true;
if (success) {
resolve("Promise resolved!");
} else {
reject("Promise rejected!");
}
}, 2000);
});
Consuming a Promise:
myPromise
.then(result => {
console.log(result); // "Promise resolved!"
})
.catch(error => {
console.error(error); // "Promise rejected!"
})
.finally(() => {
console.log("Promise finished.");
});
Promise Chaining: Promises can be chained together to handle a sequence of
asynchronous operations.

fetch('https://api.example.com/data')
.then(response => response.json()) // .json() also returns a promise
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
Async/Await
async/await , introduced in ES2017, is syntactic sugar built on top of Promises. It
allows you to write asynchronous code that looks and behaves more like synchronous
code, making it easier to read and reason about.
async function: A function declared with the async keyword automatically
returns a Promise .
await operator: The await operator is used to wait for a Promise to resolve. It
can only be used inside an async function.
async function fetchDataAsync() {
try {
console.log("Fetching data...");
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
fetchDataAsync();
Event Loop
The Event Loop is the mechanism that allows JavaScript to perform non-blocking
asynchronous operations, despite being single-threaded. It continuously checks the
message queue for new messages (tasks) and executes them.
1. Call Stack: Where function calls are pushed and popped.
2. Web APIs (Browser) / C++ APIs (Node.js): Handle asynchronous operations
(e.g., setTimeout , fetch ).

3. Message Queue (or Task Queue): Where callback functions are placed after the
asynchronous operation is complete.
4. Event Loop: When the Call Stack is empty, the Event Loop takes the first message
from the Message Queue and pushes it onto the Call Stack for execution.
This model ensures that the main thread is not blocked by long-running operations,
allowing the user interface to remain responsive.
6. DOM Manipulation
The Document Object Model (DOM) is a programming interface for web documents. It
represents the page structure as a tree of objects, where each object corresponds to a
part of the document, such as an element, attribute, or text. JavaScript can interact
with this DOM tree to dynamically change the content, structure, and style of a web
page.
What is the DOM?
When a web page is loaded, the browser creates a DOM of the page. The DOM is a
platform- and language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of documents. It
represents the document as nodes and objects.
For example, consider this simple HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1 id="main-title">Hello, DOM!</h1>
<p class="intro">This is a paragraph.</p>
<button>Click Me</button>
</body>
</html>
The DOM represents this as a tree structure, where document is the root, html is its
child, and so on.

Selecting Elements
To manipulate elements, you first need to select them. JavaScript provides several
methods for this:
document.getElementById() : Selects a single element by its id attribute.
Returns null if the element is not found.
javascript const titleElement = document.getElementById("main-
title"); console.log(titleElement.textContent); // "Hello, DOM!"
document.getElementsByClassName() : Selects all elements with a specific class
name. Returns an HTMLCollection (live collection).
javascript const introParagraphs =
document.getElementsByClassName("intro");
console.log(introParagraphs[0].textContent); // "This is a
paragraph."
document.getElementsByTagName() : Selects all elements with a specific tag
name. Returns an HTMLCollection.
javascript const allParagraphs = document.getElementsByTagName("p");
console.log(allParagraphs.length); // 1
document.querySelector() : Selects the first element that matches a specified
CSS selector. This is a very versatile method.
javascript const firstParagraph = document.querySelector("p.intro");
console.log(firstParagraph.textContent); // "This is a paragraph."
const button = document.querySelector("button");
document.querySelectorAll() : Selects all elements that match a specified CSS
selector. Returns a NodeList (static collection).
javascript const allElements = document.querySelectorAll("h1, p");
allElements.forEach(el => console.log(el.tagName)); // H1, P

Modifying HTML Content and Attributes
Once you have selected an element, you can modify its content and attributes.
textContent : Gets or sets the text content of an element (ignores HTML tags).
javascript titleElement.textContent = "New Title!";
console.log(titleElement.textContent); // "New Title!"
innerHTML : Gets or sets the HTML content of an element (parses HTML tags).
javascript firstParagraph.innerHTML = "This is a
<strong>bold</strong> paragraph.";
setAttribute() : Sets the value of an attribute on the specified element.
javascript button.setAttribute("id", "myButton");
removeAttribute() : Removes an attribute from an element.
javascript // button.removeAttribute("id");
classList : Provides methods to add, remove, toggle, or check for CSS classes.
javascript button.classList.add("btn-primary");
button.classList.remove("btn-secondary");
button.classList.toggle("active"); // Adds if not present, removes if
present if (button.classList.contains("btn-primary")) {
console.log("Button has btn-primary class."); }
Styling Elements
You can change the inline styles of elements using the style property.
titleElement.style.color = "blue";
titleElement.style.fontSize = "40px";
titleElement.style.backgroundColor = "lightgray";
For more complex styling or when applying multiple styles, it's often better to toggle
CSS classes.

Event Handling
Events are actions or occurrences that happen in the browser, such as a user clicking a
button, a page loading, or a key being pressed. JavaScript allows you to respond to
these events.
addEventListener() : The recommended way to attach event handlers. It allows
multiple handlers for the same event on the same element.
```javascript button.addEventListener("click", function() { alert("Button
clicked!"); });
// You can add multiple listeners button.addEventListener("click", () => {
console.log("Another click handler."); }); ```
Event Object: When an event occurs, an Event object is passed to the event
handler function. This object contains information about the event.
javascript button.addEventListener("click", (event) => {
console.log("Event type:", event.type); console.log("Target
element:", event.target); });
Common Events:
click : When an element is clicked.
mouseover , mouseout : When the mouse pointer enters/leaves an element.
keydown , keyup : When a key is pressed/released.
submit : When a form is submitted.
load : When a page or an image has finished loading.
change : When the value of an input element changes.
7. ES6+ Features
ECMAScript 2015 (ES6) marked a significant turning point in JavaScript development,
introducing a plethora of new features that greatly improved the language's
expressiveness, readability, and capabilities. Subsequent annual releases (ES2016,

ES2017, etc.) have continued to add valuable enhancements. Here are some of the
most impactful ES6+ features:
Template Literals
Template literals (also known as template strings) provide a more flexible and
readable way to create strings, especially when they involve variables or expressions.
They are enclosed by backticks ( ` ) instead of single or double quotes.
Multi-line Strings: Easily create strings that span multiple lines without using
n .
javascript const multiLine = ` This is a string that spans multiple
lines. `; console.log(multiLine);
Expression Interpolation: Embed expressions directly within the string using
${expression} .
``javascript const name = "World"; const greeting = Hello, ${name}!`;
console.log(greeting); // "Hello, World!"
const a = 10; const b = 5; console.log( The sum of $ and ${b} is ${a + b}. ); //
"The sum of 10 and 5 is 15." ```
Classes
Classes, introduced in ES6, are a syntactic sugar over JavaScript's existing prototype-
based inheritance. They provide a cleaner and more familiar object-oriented syntax for
creating objects and handling inheritance.

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, my name is $`{this.name} and I am `${this.age} years
old.`;
}
}
const john = new Person("John Doe", 30);
console.log(john.greet()); // "Hello, my name is John Doe and I am 30 years
old."
// Inheritance
class Student extends Person {
constructor(name, age, studentId) {
super(name, age); // Call the parent class constructor
this.studentId = studentId;
}
study() {
return `$`{this.name} (ID: `${this.studentId}) is studying.`;
}
}
const alice = new Student("Alice Smith", 20, "S12345");
console.log(alice.greet()); // "Hello, my name is Alice Smith and I am 20 years
old."
console.log(alice.study()); // "Alice Smith (ID: S12345) is studying."
Modules (Import/Export)
ES6 modules provide a standardized way to organize JavaScript code into separate
files, making it easier to manage dependencies, improve reusability, and prevent
global namespace pollution. Modules use export to make variables, functions, or
classes available to other files, and import to bring them into the current file.
math.js (Exporting module):
// math.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export default function subtract(a, b) {
return a - b;
}

app.js (Importing module):
// app.js
import { PI, add } from './math.js'; // Named imports
import subtractAlias from './math.js'; // Default import (can be renamed)
console.log(PI); // 3.14159
console.log(add(5, 2)); // 7
console.log(subtractAlias(10, 3)); // 7
// Import all as an object
import * as MathFunctions from './math.js';
console.log(MathFunctions.PI);
Iterators and Generators
Iterators: An object is an iterator when it implements the next() method, which
returns an object with two properties: value (the next value in the sequence)
and done (a boolean indicating if the sequence has finished).
Generators: Generator functions are a special type of function that can be
paused and resumed, allowing them to produce a sequence of values over time.
They are defined using function* and use the yield keyword to pause
execution and return a value.
```javascript function* idGenerator() { let id = 1; while (true) { yield id++; } }
const gen = idGenerator(); console.log(gen.next().value); // 1
console.log(gen.next().value); // 2 console.log(gen.next().value); // 3 ```
Map and Set
ES6 introduced new built-in objects for storing collections of data, offering advantages
over plain objects and arrays in certain scenarios.
Map : A collection of key-value pairs where keys can be of any data type (unlike
plain objects where keys are limited to strings or Symbols). Map maintains the
insertion order of elements.
```javascript const myMap = new Map(); myMap.set("name", "Alice");
myMap.set(1, "one"); myMap.set(true, "boolean");

console.log(myMap.get("name")); // "Alice" console.log(myMap.has(1)); // true
myMap.delete("name"); console.log(myMap.size); // 2
// Iterating over a Map for (const [key, value] of myMap) { console.log( $ :
${value} ); } ```
Set : A collection of unique values. Duplicate values are automatically ignored.
Set maintains the insertion order of elements.
```javascript const mySet = new Set(); mySet.add(1); mySet.add("hello");
mySet.add(1); // This will be ignored
console.log(mySet.has("hello")); // true mySet.delete(1); console.log(mySet.size);
// 1
// Iterating over a Set for (const item of mySet) { console.log(item); }
// Convert array to Set to get unique values const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)]; console.log(uniqueNumbers); //
[1, 2, 3, 4, 5] ```
8. Advanced Concepts
Beyond the foundational elements and modern features, JavaScript encompasses
several advanced concepts that are crucial for writing robust, efficient, and
maintainable code. Understanding these concepts helps in debugging complex issues
and mastering the language.
this Keyword
The this keyword in JavaScript is one of the most misunderstood concepts. Its value
is determined by how a function is called, not where it is defined. The this context
can change dynamically.
Global Context: In the global execution context (outside of any function), this
refers to the global object ( window in browsers, global in Node.js).
javascript console.log(this === window); // true (in browser)

Function Context (Simple Function Call): In a regular function call, this also
refers to the global object (or undefined in strict mode).
javascript function showThis() { console.log(this); } showThis(); //
window object (non-strict), undefined (strict)
Method Context: When a function is called as a method of an object, this refers
to the object that owns the method.
javascript const person = { name: "Alice", greet: function() {
console.log(`Hello, my name is ${this.name}`); } }; person.greet();
// "Hello, my name is Alice"
Constructor Context: When a function is used as a constructor with the new
keyword, this refers to the newly created instance of the object.
javascript function Car(make) { this.make = make; } const myCar = new
Car("Toyota"); console.log(myCar.make); // "Toyota"
Explicit Binding ( call , apply , bind ):
call() : Invokes the function with a specified this value and arguments
provided individually.
apply() : Invokes the function with a specified this value and arguments
provided as an array.
bind() : Returns a new function, allowing you to permanently set the this
context.
```javascript const anotherPerson = { name: "Bob" };
function sayName() { console.log(this.name); }
sayName.call(anotherPerson); // "Bob" sayName.apply(anotherPerson); // "Bob"
const boundSayName = sayName.bind(anotherPerson); boundSayName(); //
"Bob" ```
Arrow Functions and this : Arrow functions do not have their own this
context. They inherit this from their lexical (enclosing) scope. This makes them

very useful in callbacks where you want to preserve the this context of the
surrounding code.
javascript const user = { name: "Charlie", logMessages: function() {
setTimeout(() => { console.log(`Hello from ${this.name}`); // 'this'
refers to 'user' }, 1000); } }; user.logMessages(); // "Hello from
Charlie" (after 1 second)
Prototypes and Prototypal Inheritance
JavaScript is a prototype-based language, meaning that objects can inherit properties
and methods directly from other objects. Every JavaScript object has a prototype,
which is another object that it inherits properties and methods from. The prototype
chain is how inheritance works in JavaScript.
__proto__ and [[Prototype]] : Every object has an internal [[Prototype]]
property, which points to its prototype object. This is often exposed via the
__proto__ property (though Object.getPrototypeOf() is the standard way to
access it).
prototype property of functions: Functions in JavaScript also have a
prototype property. When a function is used as a constructor (with new ), the
prototype property of the constructor function becomes the [[Prototype]] of
the newly created object.
```javascript function Vehicle(make) { this.make = make; }
Vehicle.prototype.getMake = function() { return this.make; };
const car = new Vehicle("Honda"); console.log(car.getMake()); // "Honda"
console.log(car.proto === Vehicle.prototype); // true
console.log(Object.getPrototypeOf(car) === Vehicle.prototype); // true ```
Prototype Chain: When you try to access a property or method on an object,
JavaScript first looks for it directly on the object. If it doesn't find it, it then looks
on the object's prototype, then on the prototype's prototype, and so on, until it
reaches null (the end of the chain).
javascript // Example of prototype chain console.log(car.toString());
// Inherited from Object.prototype

console.log(car.__proto__.__proto__ === Object.prototype); // true
Hoisting
Hoisting is a JavaScript mechanism where variable and function declarations are
moved to the top of their containing scope during the compilation phase, before code
execution. This means you can use variables and functions before they are declared in
your code.
Function Hoisting: Function declarations are fully hoisted, meaning both the
function name and its definition are moved to the top. So, you can call a function
before its declaration.
```javascript hoistedFunction(); // "Hello from hoisted function!"
function hoistedFunction() { console.log("Hello from hoisted function!"); } ```
Variable Hoisting ( var ): Variables declared with var are hoisted, but only their
declaration is hoisted, not their initialization. This means they are initialized with
undefined .
javascript console.log(hoistedVar); // undefined var hoistedVar = "I
am hoisted"; console.log(hoistedVar); // "I am hoisted"
let and const (Temporal Dead Zone): Variables declared with let and
const are also hoisted, but they are not initialized. They are in a "Temporal Dead
Zone" (TDZ) from the beginning of the block until their declaration is processed.
Accessing them before declaration will result in a ReferenceError .
javascript // console.log(tdzVar); // ReferenceError: Cannot access
'tdzVar' before initialization let tdzVar = "I am in TDZ";
Event Delegation
Event delegation is a technique where you attach a single event listener to a parent
element, instead of attaching multiple event listeners to individual child elements.
This single listener then listens for events bubbling up from its children. It's
particularly useful for dynamically added elements or a large number of similar
elements.

Benefits: * Performance: Reduces the number of event listeners, saving memory and
improving performance. * Dynamic Elements: Automatically handles events for
elements added to the DOM after the initial page load. * Simpler Code: Less code to
write and maintain.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
const myList = document.getElementById("myList");
myList.addEventListener("click", function(event) {
// Check if the clicked element is an LI
if (event.target.tagName === "LI") {
console.log("Clicked on:", event.target.textContent);
event.target.style.color = "red";
}
});
// Dynamically add a new item
const newItem = document.createElement("li");
newItem.textContent = "Item 4";
myList.appendChild(newItem);
// Clicking on Item 4 will also work due to event delegation
Error Handling (try...catch...finally)
Error handling is crucial for creating robust applications. JavaScript provides the
try...catch...finally statement to handle runtime errors gracefully.
try block: Contains the code that might throw an error.
catch block: Contains the code to be executed if an error occurs in the try
block. It receives the error object as an argument.
finally block: Contains code that will always be executed, regardless of
whether an error occurred or not.

Common npm Commands:
npm init : Initializes a new package.json file.
npm install : Installs all dependencies listed in package.json .
npm install <package-name> : Installs a specific package as a production
dependency.
npm install <package-name> --save-dev or npm install <package-
name> -D : Installs a specific package as a development dependency.
npm uninstall <package-name> : Uninstalls a package.
npm update : Updates packages to their latest compatible versions.
npm run <script-name> : Executes a script defined in the scripts section
of package.json .
Transpilers (Babel)
JavaScript is constantly evolving, with new features being added regularly. However,
not all browsers or Node.js environments support the latest features immediately. A
transpiler (like Babel) converts modern JavaScript code (e.g., ES6+) into an older,
backward-compatible version of JavaScript (e.g., ES5) that can run in a wider range of
environments.
How Babel Works: Babel takes your source code, parses it into an Abstract
Syntax Tree (AST), transforms the AST based on configured plugins and presets,
and then generates new code from the transformed AST.
Presets: Collections of plugins that support a particular set of JavaScript
features (e.g., @babel/preset-env for all modern JavaScript features).
``javascript // ES6+ source code const greet = (name) => Hello,
${name}!`;
// Transpiled ES5 code (by Babel) var greet = function greet(name) { return "Hello,
" + name + "!"; }; ```

Bundlers (Webpack, Parcel)
As JavaScript applications grow, they often consist of many modules and assets (CSS,
images, fonts). Bundlers are tools that combine these separate modules and assets
into a single (or a few) optimized bundles for deployment. This reduces the number of
HTTP requests a browser needs to make, improving load times.
Webpack: A highly configurable and powerful module bundler. It can handle
various asset types through loaders and plugins.
Parcel: A zero-configuration bundler that aims for a faster and easier
development experience.
Key functions of bundlers: * Module Resolution: Understands import and require
statements to build a dependency graph. * Transpilation: Integrates with transpilers
like Babel to convert modern JavaScript. * Minification: Removes unnecessary
characters (whitespace, comments) from code to reduce file size. * Code Splitting:
Divides code into smaller chunks that can be loaded on demand, improving initial load
performance. * Asset Management: Can process and optimize other assets like CSS,
images, and fonts.
Linting (ESLint)
Linting is the process of analyzing source code to flag programming errors, bugs,
stylistic errors, and suspicious constructs. Linters help enforce coding standards and
identify potential problems early in the development cycle.
ESLint: The most popular JavaScript linter. It is highly configurable and allows
developers to define their own rules or use popular style guides (e.g., Airbnb,
Standard).
Benefits of Linting: * Code Quality: Catches common errors and anti-patterns. *
Consistency: Ensures a consistent coding style across a team or project. * Early
Detection: Identifies issues before they become harder to debug runtime errors. *
Improved Readability: Consistent formatting and adherence to best practices make
code easier to read and understand.
Example ESLint rule:

// Bad (ESLint would flag this)
var x = 10;
// Good
const x = 10;
These tools collectively form the backbone of a modern JavaScript development
workflow, enabling developers to build complex, high-quality, and performant
applications efficiently.
10. Best Practices and Tips
Writing good JavaScript code goes beyond just knowing the syntax and features.
Adhering to best practices, optimizing for performance, and understanding debugging
techniques are crucial for building maintainable, scalable, and robust applications.
Clean Code Principles
Clean code is code that is easy to read, understand, and modify. Following these
principles improves collaboration and reduces technical debt.
Meaningful Names: Use descriptive names for variables, functions, and classes
that clearly indicate their purpose. Avoid single-letter names or abbreviations
unless they are universally understood (e.g., i for loop counters).
```javascript // Bad let d = new Date(); let val = calculate(x, y);
// Good let currentDate = new Date(); let totalAmount =
calculateTotalPrice(itemPrice, quantity); ```
Small Functions: Functions should do one thing and do it well. Keep functions
short and focused, ideally no more than 20-30 lines of code.
Avoid Global Variables: Minimize the use of global variables to prevent naming
collisions and make code more modular. Use modules, closures, or IIFEs to
encapsulate variables.
Comments: Write comments that explain why the code does something, not
what it does (the code itself should be self-explanatory). Remove commented-
out code.

Consistency: Maintain a consistent coding style (indentation, naming
conventions, semicolon usage) across your entire codebase. Linters like ESLint
can help enforce this.
DRY (Don't Repeat Yourself): Avoid duplicating code. If you find yourself writing
the same logic multiple times, extract it into a reusable function or module.
Performance Optimization
Optimizing JavaScript code ensures that your applications run smoothly and
efficiently, providing a better user experience.
Minimize DOM Manipulation: DOM operations are expensive. Batch changes,
use document fragments, or update innerHTML once instead of multiple times.
Avoid Layout Thrashing: Repeatedly reading and writing to the DOM can cause
the browser to recalculate layout multiple times. Read all necessary layout
properties first, then perform all writes.
Optimize Loops: For large arrays, prefer for loops over forEach or map if
performance is critical, as native loops can be faster. Cache array.length in
for loops.
javascript // Good for (let i = 0, len = arr.length; i < len; i++) {
// ... }
Debouncing and Throttling: For events that fire frequently (e.g., resize ,
scroll , mousemove , input ), use debouncing or throttling to limit the rate at
which event handlers are executed.
Lazy Loading: Load resources (images, components, modules) only when they
are needed, reducing initial load time.
Use const and let : Prefer const and let over var to improve scope
management and prevent accidental reassignments, which can sometimes lead
to minor performance benefits due to better optimization by JavaScript engines.

Debugging Techniques
Debugging is an essential skill for every developer. Modern browsers provide powerful
developer tools to help you find and fix issues.
console.log() : The simplest and most common debugging tool. Use
console.log() , console.warn() , console.error() , console.table() ,
console.dir() to inspect values and program flow.
Browser Developer Tools:
Elements Tab: Inspect and modify HTML and CSS.
Console Tab: View logs, errors, and execute JavaScript code.
Sources Tab: Set breakpoints, step through code, inspect variables, and
modify code on the fly.
Network Tab: Monitor network requests and responses.
Performance Tab: Analyze runtime performance.
Memory Tab: Profile memory usage.
Breakpoints: Pause code execution at specific lines to inspect the state of
variables and the call stack.
debugger keyword: Insert debugger; into your code to programmatically set a
breakpoint. When the developer tools are open, execution will pause at this
point.
Error Messages: Pay close attention to error messages in the console. They often
provide valuable clues about the type and location of the problem.
Common Pitfalls and How to Avoid Them
Loose Equality ( == ) vs. Strict Equality ( === ): Always use === (strict equality)
to compare values, as == performs type coercion, which can lead to unexpected
results.
javascript console.log(0 == false); // true console.log(0 === false);
// false console.log("5" == 5); // true console.log("5" === 5); //
false

Floating Point Inaccuracy: JavaScript numbers are 64-bit floating-point. This
can lead to precision issues with decimal numbers. Avoid direct comparison of
floating-point numbers.
javascript console.log(0.1 + 0.2 === 0.3); // false
this Context Issues: As discussed, this can be tricky. Be mindful of how
functions are called and use arrow functions or bind / call / apply to control
this when necessary.
Asynchronous Code Complexity: Callback hell, unhandled promises, and race
conditions are common. Use Promises and async/await to manage
asynchronous flow effectively.
Modifying Arrays While Iterating: Avoid adding or removing elements from an
array while iterating over it with for...of or forEach , as this can lead to
skipped elements or infinite loops. Iterate over a copy or use methods like
filter or map to create new arrays.
Global Scope Pollution: Declare variables within the narrowest possible scope
to avoid unintended side effects and conflicts.
By understanding and applying these best practices, you can write more efficient,
readable, and maintainable JavaScript code, leading to more robust and successful
applications.

Complete JavaScript Notes: From Basics to Advanced Concepts.pdf

More Related Content

Similar to Complete JavaScript Notes: From Basics to Advanced Concepts.pdf (20)

Recently uploaded (20)

Complete JavaScript Notes: From Basics to Advanced Concepts.pdf