Welcome to the JavaScript Learning Roadmap! This guide will help you master JavaScript, from the basics to advanced concepts. Follow the steps below to enhance your JavaScript skills.
let
, const
, and var
if
, else if
, else
, switch
for
, while
, do...while
try
, catch
, finally
, and Throwing ErrorsFeel free to modify and add more details to each section as you progress through your JavaScript journey. Happy coding!
This roadmap gives a structured pathway to learning JavaScript, starting from the basics and advancing to more complex topics, with plenty of practice and project opportunities along the way.
$
, _
, or a letter but not a number.Harry
is not equal to harry
.let
var
const
let
: Initialization is optional.const
: Initialization is required.var
: Initialization is optional.null
number
symbol
string
boolean
bigint
undefined
let a = null;
let b = 345;
let c = true; // can also be false
let d = BigInt("567") + BigInt("3");
let e = "Harry";
let f = Symbol("I am a symbol");
let g;
console.log(typeof a); // Output: object
Objects in JavaScript are similar to dictionaries in Python (key-value pairs).
objectname.key
objectname["Keyname"]
+
, -
, *
, **
, /
, %
, ++
, --
Operator | Name | Description | Example | Result |
---|---|---|---|---|
+ |
Addition | Adds two operands. | 5 + 3 |
8 |
- |
Subtraction | Subtracts the second operand from the first. | 5 - 3 |
2 |
* |
Multiplication | Multiplies two operands. | 5 * 3 |
15 |
/ |
Division | Divides the first operand by the second. | 6 / 3 |
2 |
% |
Modulus (Remainder) | Returns the remainder when the first operand is divided by the second. | 5 % 2 |
1 |
** |
Exponentiation | Raises the first operand to the power of the second operand. | 2 ** 3 |
8 |
++ |
Increment | Increases an integer value by one. | let a = 1; a++ |
2 |
-- |
Decrement | Decreases an integer value by one. | let b = 2; b-- |
1 |
+
): Adds numbers or concatenates strings if one of the operands is a string.-
): Only subtracts numbers; does not work with strings./
): Divides one numeric operand by another. Returns a floating-point number if division is not exact.%
): Useful for finding even/odd numbers or cycling through a range.++
): Adds 1
to its operand. If used as a prefix (++a
), it increments before the value is used; if used as a postfix (a++
), it increments after.--
): Subtracts 1
from its operand. If used as a prefix (--b
), it decrements before the value is used; if used as a postfix (b--
), it decrements after.=
, +=
, -=
, /=
, %=
, *=
, **=
Operator | Name | Description | Example | Equivalent to | Result |
---|---|---|---|---|---|
= |
Assignment | Assigns a value to a variable. | x = 5 |
— | x = 5 |
+= |
Addition Assignment | Adds the right operand to the left operand and assigns the result to the left operand. | x += 3 |
x = x + 3 |
x becomes 8 |
-= |
Subtraction Assignment | Subtracts the right operand from the left operand and assigns the result to the left operand. | x -= 2 |
x = x - 2 |
x becomes 6 |
*= |
Multiplication Assignment | Multiplies the left operand by the right operand and assigns the result to the left operand. | x *= 4 |
x = x * 4 |
x becomes 20 |
/= |
Division Assignment | Divides the left operand by the right operand and assigns the result to the left operand. | x /= 5 |
x = x / 5 |
x becomes 4 |
%= |
Modulus Assignment | Takes the modulus using the two operands and assigns the result to the left operand. | x %= 3 |
x = x % 3 |
x becomes 1 |
**= |
Exponentiation Assignment | Raises the left operand to the power of the right operand and assigns the result to the left operand. | x **= 2 |
x = x ** 2 |
x becomes 16 |
=
): Simply assigns the right-hand value to the left-hand variable.+=
): Adds the value of the right-hand operand to the left-hand operand and assigns the result to the left-hand operand.-=
): Subtracts the right-hand operand from the left-hand operand and assigns the result to the left-hand operand./=
): Divides the left-hand operand by the right-hand operand and assigns the result to the left-hand operand.%=
): Takes the modulus using the left-hand operand and the right-hand operand and assigns the result to the left-hand operand.==
: Equal to (does not check the type).!=
: Not equal to (does not check the type).===
: Equal value and equal type.!==
: Not equal value and not equal type.>
, <
, >=
, <=
&&
: Logical AND||
: Logical OR!
: Logical NOT// Single line comment
/*
Multi-line comment
*/
if-else
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}
Nested if-else
if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition2 is true
} else {
// code to be executed if both conditions are false
}
Ternary Operator
condition ? expression1 : expression2;
Switch Case
switch (variable) {
case "1":
// code to be executed if variable is "1"
break;
case "2":
// code to be executed if variable is "2"
break;
default:
// code to be executed if variable doesn't match any case
}
prompt("output")
: Displays a dialog box with a message and an input field for the user.alert("output")
: Displays an alert box with a message and an OK button.console.log("output")
: Prints a message to the browser console for debugging.console.error("error message")
: Prints an error message to the browser console.console.warn("warning message")
: Prints a warning message to the browser console.document.write("output")
: Writes content directly into the HTML document.document.getElementById("demo").innerHTML = "output"
: Sets the content of an HTML element with the specified id.Typecasting is converting a value from one data type to another. It can be implicit or explicit.
let a = "123";
a = Number.parseInt(a); // Convert string to a number
a = parseInt(a); // Convert string to a number
for (initialize; condition; increment) {
// code to be executed
}
Iterates over the properties of an object.
const dict = {
water: "pani",
lens: "chasma",
bag: "basta",
mobile: "phone"
};
for (let key in dict) {
console.log(key); // prints keys
console.log(dict[key]); // prints values
}
Iterates over the values of an iterable object.
let name = "sanskar";
for (let char of name) {
console.log(char); // prints each character
}
while (condition) {
// code to be executed
}
do {
// code to be executed
} while (condition);
Reusable blocks of code that perform specific tasks.
function funcName() {
// code to be executed
}
funcName(); // calling the function
function myFunc(a, b) {
return a + b;
}
// Before Arrow Function
funcName = function() {
return "Hello World!";
}
// After Arrow Function
funcName = () => "Hello World!";
"Hello my value is " + a
// double quotes'Hello my value is ' + a
// single quotesHello my value is ${a}
// backticks (template literals)\n
: New line\t
: Tab\'
: Single quote\"
: Double quote\\
: BackslashstrName.charAt(index)
or strName[index]
: Returns the character at the specified index.strName.charCodeAt(index)
: Returns the Unicode value of the character at the specified index.String.fromCharCode(CharCodeOfString)
: Returns a string from the Unicode value.strName.endsWith("text")
: Checks if the string ends with a specific value.strName.includes("text")
: Checks if the string contains a specific value.strName.indexOf("text")
: Returns the index of the first occurrence of the given string.strName.lastIndexOf("text")
: Returns the index of the last occurrence of the given string.strName.length
: Returns the length of the string.strName.localeCompare("text2")
: Compares two strings and returns -1, 0, or 1.strName.match(/text/)
: Returns the matched string if found.let strName = "Hello World";
console.log(strName.charAt(4)); // Output: "o"
console.log(strName.charCodeAt(6)); // Output: 87
console.log(String.fromCharCode(72)); // Output: "H"
console.log(strName.endsWith("World")); // Output: true
console.log(strName.includes("lo")); // Output: true
console.log(strName.indexOf("o")); // Output: 4
console.log(strName.lastIndexOf("o")); // Output: 7
console.log(strName.length); // Output: 11
console.log(strName.localeCompare("Hello")); // Output: 1
console.log(strName.match(/World/)); // Output: ["World"]
let text = "a,b,c,d,e,f";
let myArray = text.split(",");
console.log(myArray[2]); // Output: "c"
const array = []
let array = []
push()
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
pop()
let arr = [1, 2, 3, 4];
arr.pop();
console.log(arr); // [1, 2, 3]
shift()
let arr = [1, 2, 3, 4];
arr.shift();
console.log(arr); // [2, 3, 4]
unshift()
.
let arr = [1, 2, 3, 4];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3, 4]
splice()
let arr = [1, 2, 3, 4];
arr.splice(2, 1, 10);
console.log(arr); // [1, 2, 10, 4]
slice()
let arr = [1, 2, 3, 4];
let newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
concat()
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]
join()
let arr = [1, 2, 3, 4];
let str = arr.join("-");
console.log(str); // "1-2-3-4"
map()
let arr = [1, 2, 3, 4];
let newArr = arr.map(x => x * 2);
console.log(newArr); // [2, 4, 6, 8]
filter()
let arr = [1, 2, 3, 4];
let newArr = arr.filter(x => x > 2);
console.log(newArr); // [3, 4]
reduce()
let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
sort()
let arr = [4, 2, 3, 1];
arr.sort();
console.log(arr); // [1, 2, 3, 4]
reverse()
let arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // [4, 3, 2, 1]
find()
let arr = [1, 2, 3, 4];
let found = arr.find(x => x > 2);
console.log(found); // 3
findIndex()
let arr = [1, 2, 3, 4];
let index = arr.findIndex(x => x > 2);
console.log(index); // 2
The window object represents the browser's window. It contains various properties and methods.
alert("Hello, World!");
prompt("Enter your name:");
confirm("Are you sure?");
setTimeout(function, milliseconds)
: Executes a function after a specified number of milliseconds.setInterval(function, milliseconds)
: Repeats execution of a function continuously every specified number of milliseconds.setTimeout(() => {
console.log("Hello after 3 seconds");
}, 3000);
let interval = setInterval(() => {
console.log("Repeating every 2 seconds");
}, 2000);
// To clear the interval
clearInterval(interval);
The Document Object Model (DOM) allows scripts to update the content, structure, and style of a document.
document.getElementById("id")
document.getElementsByClassName("className")
document.getElementsByTagName("tagName")
document.querySelector("selector")
document.querySelectorAll("selector")
element.innerHTML = "New Content"
element.style.property = "value"
element.setAttribute("attribute", "value")
element.classList.add("className")
element.classList.remove("className")
element.classList.toggle("className")
document.createElement("tagName")
element.appendChild(child)
element.removeChild(child)
element.replaceChild(newChild, oldChild)
element.addEventListener("event", function)
element.removeEventListener("event", function)
let button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("Button clicked!");
});
let div = document.createElement("div");
div.innerHTML = "Hello, World!";
document.body.appendChild(div);
document.body.removeChild(div);
Add the following line in your HTML file inside the <head>
or <body>
tag:
<script src="https://github.com/sanskaarz/LearnJS/raw/main/filename.js"></script>
This concludes the LearnJS summary of fundamental JavaScript concepts and syntax.