Detailed JavaScript Notes
1. Variables and Declarations
Variables are containers used to store data values in JavaScript.
Whenever we want to store information such as a name, age, marks, or any value, we use variables.
JavaScript provides three keywords for variable declaration:
1. var
• Old method of declaring variables.
• Function scoped.
• Can be redeclared and updated.
Example:
var name = "John";
2. let
• Introduced in ES6.
• Block scoped.
• Can be updated but cannot be redeclared in the same block.
Example:
let age = 20;
3. const
• Block scoped.
• Value cannot be reassigned after declaration.
Example:
const pi = 3.14;
Difference:
• var → old and less secure
• let → preferred for changing values
• const → preferred for fixed values
Best Practice:
Use const by default and let only when value changes.
2. Data Types and Type System
JavaScript is a dynamically typed language. This means you do not need to specify the data type manually.
Main Data Types:
1. Number
Stores integer and decimal values.
Example:
let marks = 95;
2. String
Stores text values.
Example:
let city = "London";
3. Boolean
Stores true or false.
Example:
let isPassed = true;
4. Undefined
Variable declared but no value assigned.
Example:
let x;
5. Null
Represents empty value intentionally.
Example:
let data = null;
6. Object
Stores key-value pairs.
Example:
let student = {
name: "Alex",
age: 22
};
7. Array
Stores multiple values.
Example:
let colors = ["Red", "Blue", "Green"];
JavaScript automatically converts data types when needed. This is called Type Coercion.
3. Operators
Operators are symbols used to perform operations on variables and values.
Types of Operators:
1. Arithmetic Operators
Used for mathematical calculations.
Examples:
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
Example:
let result = 10 + 5;
2. Assignment Operators
Used to assign values.
Examples:
=
+=
-=
3. Comparison Operators
Used to compare values.
Examples:
==
===
!=
>
<
4. Logical Operators
Used with conditions.
Examples:
&& AND
|| OR
! NOT
Example:
if(age > 18 && age < 60){
[Link]("Adult");
}
4. Control Flow
Control flow decides how code executes in a program.
Conditional Statements:
1. if Statement
Executes code when condition is true.
Example:
if(age >= 18){
[Link]("Eligible");
}
2. if-else Statement
Executes alternative code when condition is false.
Example:
if(age >= 18){
[Link]("Adult");
}else{
[Link]("Minor");
}
3. switch Statement
Used when multiple conditions exist.
Example:
switch(day){
case 1:
[Link]("Monday");
break;
}
5. Loops
Loops are used to repeat code multiple times.
1. for Loop
Runs code for fixed number of times.
Example:
for(let i = 1; i <= 5; i++){
[Link](i);
}
2. while Loop
Runs while condition is true.
Example:
let i = 1;
while(i <= 5){
[Link](i);
i++;
}
3. do-while Loop
Executes code at least once.
Example:
do{
[Link](i);
i++;
}while(i <= 5);
4. for...of Loop
Used with arrays.
Example:
for(let value of arr){
[Link](value);
}
6. Functions
Functions are reusable blocks of code designed to perform specific tasks.
Advantages:
• Code reuse
• Better readability
• Easy debugging
1. Normal Function
Example:
function add(a, b){
return a + b;
}
2. Arrow Function
Example:
const multiply = (a, b) => {
return a * b;
}
3. Anonymous Function
Example:
setTimeout(function(){
[Link]("Hello");
}, 1000);
Functions can take parameters and return values.
7. Arrays
Arrays are used to store multiple values in a single variable.
Example:
let fruits = ["Apple", "Banana", "Mango"];
Accessing Elements:
[Link](fruits[0]);
Important Array Methods:
1. push()
Adds element at end.
2. pop()
Removes last element.
3. shift()
Removes first element.
4. unshift()
Adds element at beginning.
5. map()
Creates new array.
6. filter()
Filters values.
Example:
[Link]("Orange");
8. The DOM (Document Object Model)
DOM stands for Document Object Model.
It represents the structure of an HTML document as a tree.
JavaScript can:
• Access elements
• Modify content
• Change styles
• Create elements
• Remove elements
Selecting Elements:
1. getElementById()
Example:
[Link]("demo");
2. querySelector()
Example:
[Link](".box");
Changing Content:
Example:
[Link]("demo").innerHTML = "Hello";
9. Events and Event Handling
Events are actions performed by users or browsers.
Examples of Events:
• click
• submit
• keypress
• mouseover
Event Handling means responding to these events.
Example:
[Link]("click", function(){
alert("Button Clicked");
});
Common Event Methods:
• addEventListener()
• removeEventListener()
Events make web pages interactive.
10. Forms and Form Validation
Forms are used to collect user input.
Examples:
• Login forms
• Registration forms
• Contact forms
Form Validation checks whether entered data is correct.
Types of Validation:
• Empty field validation
• Email validation
• Password validation
Example:
if(username == ""){
alert("Username Required");
}
Benefits:
• Prevents invalid data
• Improves security
• Improves user experience
11. Timers and Intervals
JavaScript provides timing functions.
1. setTimeout()
Runs code once after specified delay.
Example:
setTimeout(() => {
[Link]("Hello");
}, 2000);
2. setInterval()
Runs code repeatedly after interval.
Example:
setInterval(() => {
[Link]("Running");
}, 1000);
3. clearTimeout()
Stops timeout.
4. clearInterval()
Stops interval.
These functions are useful for animations and automatic updates.
12. localStorage, sessionStorage, and Cookies
These technologies store data inside the browser.
1. localStorage
• Stores data permanently.
• Data remains even after browser closes.
Example:
[Link]("name", "John");
2. sessionStorage
• Stores data for one browser session.
• Data removed after tab closes.
Example:
[Link]("user", "Alex");
3. Cookies
• Small pieces of data stored in browser.
• Can have expiration date.
Example:
[Link] = "username=John";
Uses:
• Login sessions
• User preferences
• Tracking information
