Javascript is one of the most important assets for Web Developers.
But this is not very complicated language to understand ๐ฎ
To simplify the understanding of JavaScript
This repo will help and boost your knowledge in JavaScript๐ก
- Core Concepts of JavaScript โก
- Jewels of JavaScript ๐
- Exercises ๐๏ธโโ๏ธ
- Contribute ๐ค
Explore the contribution section for more information and guidance
How to contribute? ๐
- JavaScript is a high-level, versatile programming language primarily used for creating interactive and dynamic content on websites.
- JavaScript allows developers to implement complex features such as real-time updates, interactive forms, animations, and multimedia integration.
- JavaScript is an essential part of web development, working alongside HTML and CSS to enhance user experiences.
- It is supported by all modern web browsers and can be used on both the client side (in the browser) and the server side (using environments like Node.js).
- Interpreted Language
- Dynamic Typed
- Object Oriented
- DOM Manipulation
Are the key-features of JavaScript
- Directly in your browser's console.
- Inside a
HTML
file using<script>
tag<script> console.log("Hello World!") </script>
- Using a external JavaScript file
Or,
// index.js console.log("Hello World!")
- We can run our javascript file using a extension
code runner
in vs-code
Suppose we have a JavaScript file named asindex.js
Go to theterminal
window in vs-code and run the commandnode index.js
Important
The above node command will only work, If you have intalled node.js in your machine.
- In 1995, Netscape Communications Corporation wanted a lightweight scripting language for its Netscape Navigator web browser.
- Brendan Eich, a programmer at Netscape, created JavaScript in just 10 days. Initially called "
Mocha
," it was later renamed "LiveScript
" and finally "JavaScript
" to capitalize on the popularity of Java.
- JavaScript was released with Netscape Navigator 2.0 in 1995.
- Microsoft responded by creating a similar language called JScript, which was included in Internet Explorer 3.0 in 1996.
- To ensure compatibility across different browsers, JavaScript was standardized by the European Computer Manufacturers Association (ECMA).
- The first standardized version, ECMAScript 1 (ES1), was released in 1997.
- Subsequent versions introduced more features and improvements. Notably, ECMAScript 3 (ES3) in 1999 added regular expressions, better string handling, and new control statements.
- ECMAScript 4 (ES4) was ambitious but never fully realized due to disagreements within the community.
- ECMAScript 5 (ES5) was released in 2009, bringing significant features like
strict mode
,JSON support
, and more robust object properties. - ECMAScript 6 (ES6) or ECMAScript 2015 was a major update in 2015, introducing
classes
,modules
,arrow functions
,let
andconst
keywords, andpromises
. - Since ES6, the language has received yearly updates, with ECMAScript 2016 (ES7), ECMAScript 2017 (ES8), and so on, each adding new features and improvements.
- JavaScript is now a powerful, full-fledged programming language used for both client-side and server-side development.
- It is the backbone of modern web development, supported by vast ecosystems, including libraries like React, Angular, and Vue, and runtime environments like Node.js.
Print
In JavaScript we use console.log()
to print
console.log("Hello World!")
Comments
Comments are used to inhance readability or prevent execution of any code block.
// Single line comment
/*
This is
multi-line
comment
*/
Variables
Variables are like containers to store data.
In JavaScript we can create a variable using var
, let
or const
keyword.
Important
In modern JavaScript
let
& const
keywords are used for most of the coding.
Declaration vs Assigning
let myName; // Variable declaration part
myName = "Vikash"; // Variable assigning part
Data Types
At a very high level, there are two types of data types in JavaScript
- Primitive Data Types
undefined
,null
,numbers
,string
,boolean
,symbol
- Reference Data Types
Arrays
andObject
var
vs let
& const
// Declaration using var keyword
var myName = "Vikash"
console.log(myname) // Vikash
Warning
var
keyword supports Hoisting
method to declare a variable.
Hoisting
breaks the variable statement into two parts as
var myName;
myName = "Vikash";
And moves the declaration part on the top of the file
Initially the variable stored as undefined
value during the memory creation phase.
If we try to access the variable before declaring it will print the special keyword undefined
.
console.log(myName); // Undefined
var myName = "Vikash";
In modern JavaScript, Most of the time we will use let
and const
keyword to declare a variable.
// Declaration using let keyword
let myName = "Vikash";
console.log(myName); // Vikash
Note
When we create a variable using let
keyword, We have access to re-assign the value.
let myName = "Vikash";
console.log(myName); // Vikash
myName = "Ninja Vikash";
console.log(myName); // Ninja Vikash
// Declaration using const keyword
const myName = "Vikash";
console.log(myName); // Vikash
Warning
We cannot re-assign a variable declared using const
keyword
let
and const
don't support Hoisting
method.
If we try to access a variable declared using let
and const
keyword.
console.log(myName);
const myName = "Vikash";
It will through an error.
ReferenceError: Cannot access 'myName' before initialization
Since, JavaScript is not a typed Language.
Therefore, We don't need to define data type of any variable explicitly
JavaScript is smart enough to identify the variable type
For checking the data type of any variable we use typeof()
method.
let num1 = 123;
let num2 = 99.56;
console.log(typeof(num1)); // number
let str1 = "Vikash";
let str2 = "Kumar";
console.log(typeof(str1)); // string
let isCodingFun = true;
console.log(typeof(isCodingFun)) // boolean
let undValue;
console.log(typeof(undValue)); // undefined
let nulValue = null;
console.log(typeof(nulValue)); // object
Operators are used to perform some task on variables.
- Arithmetic Operator
- Addition
(+)
- Subtraction
(-)
- Multiplication
(*)
- Division
(/)
- Modulas
(%)
- Addition
- Assignment Operator
a = 2
a += 2
a -= 2
a *= 2
a /= 2
a %= 2
- Comparison Operator
- Greater than
x > y
- Less than
x < y
- Greater than or Equal to
x >= y
- Less than or Equal to
x <= y
- Equal-equal to
x == y
- Not equal to
x != y
- Greater than
- Logical Operator
- AND
&&
- OR
||
- NOT
!
- AND
- Array
- Conditionals
- Class
- What is class?
- DOM (Data Object Model)
- What is DOM?
- DOM Operations
- Events
- What is an Event in JavaScript?
- Common Events
- Event Handling
- Function
- Loop
- Math
- Math Object in JavaScript
- List of Math method
- Object
- Object Date
- Generate table using array
- Get even or odd numbers from the array list
- Create counting table up to 100 using the array list of 10 elements
- Insertion in Array
- Deletation in Array
- Basic methods in Array
- Replace any particular value from the array list
- Array destructuring *
- Case changing of a string elements in an array list
- Change the CASE of elements in a dynamic array
- Get candidates who can apply for government job
- Printing each individual element using for-each loop
- Reverse Array
- Eligiblity check for voting
- Advanced eligibility check
- Workout schedule
- Get exponential values of any single or a range
- A normal function to print welcome note
- A arrow function to print welcome note
- Calculate total marks and grade
- For getting square of one and more values
- To understand implicit return in arrow function
- A high-order function to get square, cube & quad values of any number
- Construct a table for any number using loop
- For getting a square table
- For getting exponential values of any range or a single value
- Form an Infinite loop
- Usage of for-in loop
- Usaage of for-of loop and for-each loop
- Break and continue statement
- Create an object
- Add new values and Update values in the existing object at once
- Create an object for student marks entry and get total marks, grade
- Course Constructor & Data Viewer
An Array is a collection of data in a list.
Array can hold elements of any type, including numbers
, strings
, objects
, functions
, and even other arrays
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
Each value inside of an array is known as an element
and each element has its own index
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
array.indexOf(2) // OUTPUT : 1
In the array index value starts from 0(zero)
JavaScript arrays come with a variety of built-in methods for common tasks such as adding, removing, or iterating over elements.
Reference: w3schools
| mdn
| geeksforgeek
// ------> Code for generating table
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function Table(n){
let table = arr.map((e)=> e*n)
console.log(`Table of ${n}`);
table.forEach((element) => {
console.log(element);
});
}
// Pass value for getting the table
Table(132)
// ------> Checking using multiple functions
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const Even = () => {
let even = arr.filter((e) => e % 2 == 0);
console.log(even);
};
Even()
const Odd = () => {
let odd = arr.filter((e) => e % 2 == 1);
console.log(odd);
};
Odd()
// ------> Checking using a single function
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function get(numType){
let result = arr.filter((e) => {
if (numType == "even") {
return e % 2 == 0
}
else
if (numType == "odd") {
return e % 2 == 1
}
});
if (numType == "even" || numType =="odd"){
console.log(result);
}
else {
console.log("Please enter a valid type!")
}
}
get("even")
// get("odd")
// get("red")
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = arr1.map((e) => e + 10);
let arr3 = arr2.map((e) => e + 10);
let arr4 = arr3.map((e) => e + 10);
let arr5 = arr4.map((e) => e + 10);
let arr6 = arr5.map((e) => e + 10);
let arr7 = arr6.map((e) => e + 10);
let arr8 = arr7.map((e) => e + 10);
let arr9 = arr8.map((e) => e + 10);
let arr10 = arr9.map((e) => e + 10);
let finalArr = arr1.concat(arr2,arr3,arr4,arr5,arr6,arr7,arr8,arr9,arr10);
console.log(...finalArr)
/**
* NOTE : For concatenation, I used the (...)spread operator
*/
// ------> Inserting in an empty array
let arr = []
function insert (...val){
arr.push(...val)
}
insert("Hello", "World", "!")
console.log(arr)
// ------> Inserting in an existing array using PUSH
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
const add = (...value)=>{
studentName.push(...value)
}
add("Sanjeev", "Kumar", "Suraj")
console.log(studentName)
// ------> Using UNSHIFT
const addBegin = (...value)=>{
studentName.unshift(...value)
}
addBegin("Aditi", "Nandini", "Sneha")
console.log(studentName)
// ------> Deletation using POP
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
function remove (n){
for (let i = 0; i < n; i++) {
studentName.pop()
}
}
remove(4)
console.log(studentName)
// ------> Advanced code
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
function remove (n){
if (n <= studentName.length && n >= 0) {
for (let i = 0; i < n; i++) {
studentName.pop()
}
console.log(studentName)
}
else {
console.log("Please enter lesser value than the array length")
}
}
remove(6)
// ------> Deletation using SHIFT
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
function removeBegin (n){
for (let i = 0; i < n; i++) {
studentName.shift()
}
}
removeBegin(1)
console.log(studentName)
// ------> Advanced code
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
function removeBegin (n){
if (n <= studentName.length) {
for (let i = 0; i < n; i++) {
studentName.shift()
}
console.log(studentName)
}
else {
console.log("Please enter lesser value than the array length")
}
}
removeBegin(5)
// ------> SPLICE METHOD
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
studentName.splice(2,5)
console.log(studentName)
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
let getIndex = studentName.indexOf("Sanjay")
console.log(getIndex)
let getValue = studentName[1]
console.log(getValue)
let sliced = studentName.slice(2, 3)
console.log(sliced)
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
studentName[2] = "King"
studentName[0] = "VIAKSH"
console.log(studentName)
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
let secondList = ["Ankush", "Sid"]
// -------> Merging two arrays
studentName = [...studentName, ...secondList]
// studentName = studentName.concat(secondList)
console.log(studentName)
// -------> Getting value
let [a, b, ...rest] = studentName
console.log(a)
console.log(b)
console.log(rest)
let [x, y, , ,...other] = studentName
console.log(x)
console.log(y)
console.log(other)
/**
* NOTE : A blank comma separation will skip value in Destructuring
*/
// -------> Using multiple functions
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
function ToUpper (){
let upper = studentName.map(e=> e.toUpperCase())
console.log(upper)
}
ToUpper()
function ToLower (){
let lower = studentName.map(e=> e.toLowerCase())
console.log(lower)
}
ToLower()
/**
* NOTE : We can't change the existing Array's string case
* but we can form a new array using the old array.
*/
// -------> Using a single function
let studentName = ["Vikash", "Anuj", "Shiv", "Rohit", "Sanjay"];
function toCase(change){
if(change == "UPPER"){
let newlist = studentName.map(e=>e.toUpperCase())
console.log(newlist)
}
else
if(change == "LOWER"){
let newlist = studentName.map(e=> e.toLowerCase())
console.log(newlist)
}
else {
console.log("Please enter a valid operation.")
}
}
toCase("UPPER")
// toCase("LOWER")
// toCase("HYPER")
let studentName = [];
function addStudent(...names) {
studentName.push(...names);
}
function toCase(change) {
if (change == "UPPER") {
let newlist = studentName.map((e) => e.toUpperCase());
console.log(newlist);
} else if (change == "LOWER") {
let newlist = studentName.map((e) => e.toLowerCase());
console.log(newlist);
} else {
console.log("Please enter a valid operation.");
}
}
// ------> Insert names here
addStudent("vikash", "rajiv", "sanjay", "hari")
// ------> Get your output value
toCase("UPPER");
// toCase("LOWER")
// toCase("HYPER")
// ------> Candidate data
let candidate = [
{
name: "Vikash",
age: 20
},
{
name: "Alice",
age: 25
},
{
name: "Bob",
age: 30
},
{
name: "Charlie",
age: 35
},
{
name: "David",
age: 40
},
{
name: "Emily",
age: 22
},
{
name: "Frank",
age: 28
},
{
name: "Grace",
age: 32
}
];
function candidateSelector (min, max){
candidate.filter(e=>{
if(e.age <= max && e.age >= min){
console.log(`Name = ${e.name} | Age = ${e.age}`)
}
})
}
// Pass age range in the function
candidateSelector(19, 33)
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function getList(){
nums.forEach((element,index)=>{
console.log(`Value at index ${index} is ${element}`)
})
}
getList()
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// ------> By using reverse method
function reverse (){
let newNum = num.reverse()
console.log(newNum)
}
reverse()
// ------> By using for loop
function reverse (){
let newNum = []
for (let i = num.length - 1; i >= 0; i--){
newNum.push(num[i])
}
console.log(newNum)
}
reverse()
In JavaScript, classes are a way to create reusable blueprints for objects.
Classes were introduced in ECMAScript 6 (ES6) and provide a more structured and syntactically sugar-coated way to work with prototypes
and inheritance
.
- Classes: Use the
class
keyword to define a class - Constructor: The
constructor
method is used to initialize object properties.class Person { // Constructor method to initialize the object constructor(name, age) { this.name = name; this.age = age; } } // Creating an instance of the Person class let person1 = new Person('Vikash', 20); console.log(person1.describe()); // Vikas is 20 years old.
- Instance Methods: Methods that operate on instances of the class.
class Person { constructor(name, age) { this.name = name; this.age = age; } describe() { return `${this.name} is ${this.age} years old.`; } } let person1 = new Person('Ninja Vikash', 20); console.log(person1.describe()); // Ninja Vikash is 20 years old.
- Static Methods: Methods that belong to the class itself.
class Person { constructor(name, age) { this.name = name; this.age = age; } describe() { return `${this.name} is ${this.age} years old.`; } // Static method static species() { return 'Homo sapiens'; } } console.log(Person.species()); // Homo sapiens
- Inheritance: Use the
extends
keyword to create a subclass andsuper
to call the parent class's constructor.class Person { constructor(name, age) { this.name = name; this.age = age; } describe() { return `${this.name} is ${this.age} years old.`; } } class Student extends Person { constructor(name, age, role) { super(name, age); // Call the constructor of the parent class this.role = role; } describe() { return `${this.name} is ${this.age} years old and a ${this.role}.`; } } let student1 = new Student('Vikash', 20, 'Coder'); console.log(student1.describe()); // Vikash is 20 years old and a Coder.
Important
The only important method in class is constructor
method, In which we create instances.
A conditional statement in programming is a feature that allows you to perform different actions based on whether a certain condition is true
or false
In JavaScript, conditional statements help control the flow of the code by executing specific blocks of code only if certain conditions are met.
- if-else statement
// ------> Single if statement
if (condition){
// Statement
}
// ------> if-else statement
if (condition){
// Statement
}
else{
// Statement
}
// ------> if-else ladder
if (condition){
// Statement
}
else
if(condition){
// Statement
}
else{
// Statement
}
- Switch case statement
switch (key) {
case value:
// Statement
break;
default:
// Default Statement
break;
}
// Single if statement
function EligiblityCheck(name,age){
if (age >=18) {
console.log(`${name}, You are eligible for voting!`)
}
}
EligiblityCheck("Akash",30)
// if-else ladder statement
function EligiblityCheck(name,age){
if (age < 18) {
console.log(`${name}, You are not eligible for voting!`)
}
if(age >=18 && age <=65){
console.log(`${name}, You are eligible for voting!`);
}
else
if(age > 65){
console.log(`${name}, You are eligible!`)
}
}
EligiblityCheck("Akash",64)
// Strictly checks the condition
function EligiblityCheck(...arg){
let voterName = arg[0]
let age = arg[1]
if(arg.length == 1){
console.log("Kindly pass your age as second argument");
}
else
if(arg.length == 2){
if(typeof(voterName)=="string"){
if(age > 0){
if (age < 18) {
console.log(`${voterName}, You are not eligible for voting!`);
}
else
if(age >=18 && age <=65){
console.log(`${voterName}, You are eligible for voting!`);
}
else
if(age > 65){
console.log(`${voterName}, You are eligible!`);
}
}
else{
console.log("Please insert a valid age");
}
}
else{
console.log("Please pass your name as first argument");
}
}
else
if(arg.length > 2){
console.log(`You have passed ${arg.length} arguments.`);
}
}
// EligiblityCheck("Vikash")
EligiblityCheck("Vikash", 20)
// EligiblityCheck("Vikash", 20, 21)
/**
* EligiblityCheck(_NAME_,_AGE_)
* Pass your name as first argument and your age as second argument
* You can try by passing only one or more than arguments as well as by not passing name as first arguemnt
*/
function workout(day){
let dayName = day.toUpperCase()
switch (dayName) {
case "SUN":
console.log("LEG WORKOUT DAY")
break;
case "MON":
console.log("LEG WORKOUT DAY")
break;
case "TUE":
console.log("REST")
break;
case "WED":
console.log("BICEP & BACK WORKOUT DAY")
break;
case "THU":
console.log("BICEP & BACK WORKOUT DAY")
break;
case "FRI":
console.log("CHEST WORKOUT DAY")
break;
case "SAT":
console.log("CHEST WORKOUT DAY")
break;
default:
console.log("PLEASE ENTER A VALID DAY.")
break;
}
}
workout("FRI")
workout("Thu")
/**
* NOTE : Enter a valid day name to get your workout schedule
*/
function power(...args) {
let [expo, start, end] = args;
if(args.length > 3){
console.log("Pass only 3 or less arguments");
}
else{
if (start != undefined && end != undefined) {
for (let i = Math.min(start , end); i <= Math.max(start, end); i++) {
console.log(`${i}^${expo}= ${Math.pow(i, expo)}`);
}
}
else
if(expo == undefined) {
console.log("Pass atleast two arguments");
}
else
if (start == undefined) {
console.log("Pass Second Argument");
}
else {
console.log(`${start}^${expo} = ${Math.pow(start, expo)}`);
}
}
}
power(2, 12, 1);
/**
* power(EXPONENT, START, END)
* You can get power value of any range or any order
*/
A function in JavaScript is a block of code designed to perform a specific task.
It allows you to encapsulate logic, making your code more reusable and easier to understand.
Functions can take input through parameters
and return a value or output.
function addNumbers(a, b) {
let result = a + b;
return result;
}
// Call the function
let sum = addNumbers(3, 4);
console.log(sum); // Output: 7
Reference : w3schools | mdn | geeksforgeeks
function Welcome(user){
console.log(`Hello ${user}!`)
console.log("Now, You are a part of JavaScript BrainStorming!")
console.log("Keep Learning!")
}
Welcome("Ninja")
const congrats = (candidate)=>{
console.log("Congratulations! " + candidate + " for performing excellent in the test.")
}
const congratulation = (candidate)=>{
console.log(`Congratulations! ${candidate} for performing excellent in the test.`)
}
congrats('ninja')
congratulation('vikash')
// ------> Sum of two numbers using normal function
function add (a, b){
return a + b
}
let sum = add(23, 23)
console.log(sum)
// ------> Sum of two numbers using arrow function with explicit return
let add = (a, b)=>{
return (
a + b
)
}
let sum = add(23, 23)
console.log(sum)
// ------> Sum of two numbers using arrow function with implicit return
let add = (a, b) => a + b
let sum = add(23, 23)
console.log(sum)
let marksData = []
function studentEntry(...marks){
console.log("STUDENT REPORT")
marksData.push(...marks)
let [a, b, c, d, e] = marksData
let marksToSum = [a, b, c, d, e]
let total = marksToSum.reduce((a,b)=>a+b)
console.log(`TOTAL MARKS : ${total}`)
let grade = total/5
if(grade <= 33){
console.log(`GRADE MARKS : 'F'`)
}
else
if (grade > 33 && grade <= 40) {
console.log(`GRADE MARKS : 'C'`)
}
else
if (grade > 40 && grade <= 48) {
console.log(`GRADE MARKS : 'C+'`)
}
else
if (grade > 48 && grade <= 54) {
console.log(`GRADE MARKS : 'B'`)
}
else
if (grade > 54 && grade <= 59) {
console.log(`GRADE MARKS : 'B+'`)
}
else
if (grade > 59 && grade <= 67) {
console.log(`GRADE MARKS : 'A'`)
}
else
if (grade > 67 && grade <= 84) {
console.log(`GRADE MARKS : 'A+'`)
}
else
if (grade > 85 && grade <= 89) {
console.log(`GRADE MARKS : 'A++'`)
}
else
if (grade > 89 && grade <= 100) {
console.log(`GRADE MARKS : 'EX'`)
}
}
studentEntry(67, 76, 63, 98, 69)
// studentEntry(88, 76, 66, 94, 73, 65)
// studentEntry(20, 20, 20, 20, 20)
/**
* NOTE : If you enter more than five values
* except initial five values all the other values will be neglected
*/
function square(...value) {
let values = [];
values.push(...value);
if (values.length == 0) {
console.log("PLEASE ENTER AT LEAST ONE VALUE TO GET RESULT!");
} else {
values.forEach((element) => {
console.log(`SQUARE OF ${element} is ${element ** 2}`);
});
}
}
square(4);
// square();
// square(2, 4, 5);
/**
* NOTE : Pass values in the function to get squares, If you don't pass
* any single value in the function. A message will appear on the console.
*/
function power(num, expo){
return expo(num)
}
function square(num){
console.log(`SQUARE OF ${num} : ${num**2}`)
}
function cube(num){
console.log(`CUBE OF ${num} : ${num**3}`)
}
function quad(num){
console.log(`QUAD OF ${num} : ${num**4}`)
}
power(3, square)
A loop in JavaScript is a programming tool used to repeat a set of instructions until a certain condition is met.
There are three main types of loops in JavaScript:
- for loop
for (initialization; condition; increment/decrement) {
// Code block to be executed
}
- while loop
while (condition) {
// Code block to be executed
}
- do-while loop
do {
// Code block to be executed
} while (condition);
Important
do-while
loop executes once the code block then it checks the condition.
Special loops
- forEach loop
forEach loop is a special loop, which is used to iterate each elements of an arraylet arr = [1, 2, 3, 4, 5]; arr.forEach(e => console.log(e));
- for-of loop
for-of loop is used to iterate each elements of an arraylet arr = [1, 2, 3, 4, 5]; for (const iterator of arr) { console.log(iterator) }
- for-in loop
for-in loop is used to iterate each value of an objectlet obj = { name : "vikash", role : "coder", age : 20 } for (const key in obj) { const element = obj[key]; console.log(element, key) }
Reference : w3schools | mdn | freecodecamp
// ------> Using for loop
function Table(value){
for(let i = 1; i <= 10; i++ ){
console.log(i*value)
}
}
Table(19)
// ------> Alternate
const Table = (val)=> {
console.log(`TABLE OF ${val}`)
for(let i = val; i <= val*10; i+=val ){
console.log(i)
}
}
Table(5)
// Table(11)
// Table(99)
// Table(202)
// ------> Using while loop
const Table = (num)=>{
let i = 1
console.log(`TABLE OF ${num}`)
while (i<=10) {
console.log(i*num);
i++
}
}
Table(13)
// ------> Alternate
const Table = (num)=>{
let i = num
console.log(`Table of ${num} :`)
while (i<=num*10) {
console.log(i);
i+=num
}
}
Table(24)
// ------> Using do-while loop
function Table (value){
let i = 1
console.log(`${value}'s table`)
do {
console.log(i*value);
i++
} while (i<=10);
}
Table(23)
// ------> Alternate
function Table (number){
let i = number
console.log(`${number}'s table`)
do {
console.log(i);
i+=number
} while (i<=number*10);
}
Table(7)
const sqTable = (end)=>{
for (let i = 1; i <= end; i++) {
console.log(`SQUARE OF ${i} \t = ${i*i}`)
}
}
sqTable(7)
// ------> Alternate
const sqTable = (end)=>{
for (let i = 1; i <= end; i++) {
console.log(`SQUARE OF ${i} \t = ${i**2}`)
}
}
sqTable(10)
/**
* NOTE : Both the operator will return the same value
* Use anyone of them
*/
function power(expo, start, end) {
if (start == undefined) {
console.log("PLEASE PASS AT LEAST TWO VALUES");
} else if (end == undefined) {
for (let i = start; i <= start; i++) {
console.log(`SQUARE OF ${i} = ${i ** expo}`);
}
} else {
for (let i = start; i <= end; i++) {
console.log(`SQUARE OF ${i} = ${i ** expo}`);
}
}
}
// power(2);
// power(2, 17);
power(2, 17, 24);
/**
* NOTE : power(exponent_value, start, end)
* We can get the exponent value of any single value
* By passing only two values as :
* power(exponent_value, start)
*/
// ------> Using while loop
let i = 1
while (i<=10) {
console.log(i*3);
// Declare an afterthought to avoid infinite loop
}
// ------> Using do-while loop
let i = 1
do {
console.log(i*3);
// Declare an afterthought to avoid infinite loop
} while (i<=10);
let OBJ = {
notebook : "classmate",
pencil : "doms",
eraser : "doms",
pen : "fort"
}
for (const key in OBJ) {
const element = OBJ[key];
console.log(key, element)
}
/**
* NOTE : for-in loop specially used in objects
*/
let ARRAY = ["AKASH", "SHIV", "SONAL", "SNEHA", "VIKASH"]
for (const iterator of ARRAY) {
console.log(iterator)
}
ARRAY.forEach(element => {
console.log(element)
});
/**
* NOTE : for-of and forEach loop specially used in the array for iterating
*/
for (let i = 1; i <= 10; i++) {
console.log("I am ",i)
if(i==6){
break
}
}
for (let i = 1; i <= 10; i++) {
if(i==6){
break
}
console.log("I am ",i)
}
for (let i = 1; i <= 10; i++) {
if(i==6){
continue
}
console.log("I am ",i)
}
/**
* NOTE : break statement stops the chain
* while the continue statement continues the chain excluding the condition
*/
An object in JavaScript is a collection of key-value
pairs where the keys are strings or symbols, and the values can be of any data type, including other objects.
Objects are used to store and organize complex data in a structured manner.
They are created using object literals
, constructor functions
, or object creation methods like Object.create()
- Using an object literal:
const car = {
make: "Toyota",
model: "Camry",
year: 2022,
start: function() {
console.log("Engine started.");
}
};
- Using a constructor function:
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
}
const person1 = new Person("Ninja Vikash", 20);
person1.sayHello();
- Using
Object.create()
:
const animal = {
speak: function() {
console.log("The animal makes a sound.");
}
};
const dog = Object.create(animal);
dog.speak(); // Output: The animal makes a sound.
function About (name, age, role, state){
this.name = name;
this.age = age;
this.role = role;
this.state = state;
this.data = ()=>{
console.log(`Hi, I am ${this.name} and I am a ${this.age} years old ${this.role}. and I am based on ${this.state}.`)
}
}
const Vikash = new About("Vikash Kumar", 20, "Developer", "Jharkhand")
Vikash.data()
let StudentData = {
name : "Vikash",
role : "Web Developer",
age : 20,
state : "JH",
status : "Married"
}
let newData = {
country : "INDIA",
contact : 1234567890,
email : "[email protected]"
}
let update = {
name : "Vikash Kumar",
status : "Single"
}
StudentData = {...StudentData, ...newData, ...update}
console.log(StudentData)
function studentEntry(...marks) {
let MARK = [];
MARK.push(...marks);
this.result = function () {
if (MARK.length > 5 || MARK.length < 5) {
console.log("PLEASE CHECK YOUR INPUT MARKS MAY BE YOU HAVE ENTERED MORE OR LESS INPUTS");
} else {
let total = MARK.reduce((a, b) => a + b);
let grade = total / 5;
if (grade >= 0 && grade < 33) {
console.log(`YOUR SCORE IS : ${total} AND GRADE : F`);
} else if (grade >= 33 && grade < 45) {
console.log(`YOUR SCORE IS : ${total} AND GRADE : D`);
} else if (grade >= 45 && grade < 55) {
console.log(`YOUR SCORE IS : ${total} AND GRADE : C`);
} else if (grade >= 55 && grade < 65) {
console.log(`YOUR SCORE IS : ${total} AND GRADE : B`);
} else if (grade >= 65 && grade < 75) {
console.log(`YOUR SCORE IS : ${total} AND GRADE : A`);
} else {
console.log(`YOUR SCORE IS : ${total} AND GRADE : A+`);
}
}
};
}
let Ajay = new studentEntry(30, 30, 30, 30);
// Ajay.result()
let Rohit = new studentEntry(67, 56, 78, 56, 77);
Rohit.result()
let Sanjay = new studentEntry(90, 79, 56, 45, 44, 56);
// Sanjay.result()
function Course(...arg){
this.title = arg[0];
this.price = arg[1];
this.duration = arg[2];
this.author = "Ninja-Vikash"
}
// ------> Create your course here
let DSA = new Course("DSA", 1999, 4);
let JAVASCRIPT = new Course("JavaScript", 1499, 6);
let HTML = new Course("HTML", 799, 5);
let CSS = new Course("CSS", 899, 3);
let REACT = new Course("React", 1999, 8);
let NODEJS = new Course("Node.js", 1799, 9);
/**
* Pass values as Course(_course_name, _price, _duration)
*/
function dataViewer(courseName){
console.log("---COURSE DETAILS---")
for (const key in courseName) {
const value = courseName[key];
console.log(`${key} : ${value}`)
}
console.log("---COURSE DETAILS---")
}
// ------> Get Your course details
// dataViewer(DSA)
// dataViewer(REACT)
dataViewer(NODEJS)
// dataViewer(CSS)
DOM stands for Data Object Model.
The DOM represents a document as a hierarchical tree structure of nodes.
Each node can be an element
, attribute
, or text
content.
The nodes in the DOM tree are objects with properties and methods.
Note
innerHTML
for content
style
for CSS styles
appendChild()
for add a new child node
We can select elements using various methods like getElementById()
, getElementsByClassName()
, getElementsByTagName()
, querySelector()
, and querySelectorAll()
.
// Accessing an element by ID
let element = document.getElementById('myElement');
// Accessing elements by class name
let elements = document.getElementsByClassName('myClass');
// Accessing elements by tag name
let paragraphs = document.getElementsByTagName('p');
// Accessing an element using a CSS selector
let firstParagraph = document.querySelector('p');
Note
querySelector()
uses CSS selector syntax
We can target any inner element as below
let element = document.querySelector(".container h2")
We can change the content, style and attribute of elements.
// Changing the inner HTML
element.innerHTML = 'New content';
// Changing the style
element.style.color = 'blue';
// Changing an attribute
element.setAttribute('src', 'newImage.jpg');
We can create new elements and add them to the DOM.
// Creating a new element
let newElement = document.createElement('div');
newElement.innerHTML = 'Hello, world!';
// Appending the new element to an existing element
document.body.appendChild(newElement);
Reference : w3schools | mdn | geeksforgeeks
let list = document.getElementById("list")
let listItems = ["Mango", "Apple", "Banana", "Orange"]
let olList = document.createElement("ol")
let list1 = document.createElement("li")
let list2 = document.createElement("li")
let list3 = document.createElement("li")
let list4 = document.createElement("li")
list1.innerText = listItems[0]
list2.innerText = listItems[1]
list3.innerText = listItems[2]
list4.innerText = listItems[3]
olList.appendChild(list1)
olList.appendChild(list2)
olList.appendChild(list3)
olList.appendChild(list4)
list.appendChild(olList)
Events in JavaScript are actions or occurrences
Happen in the browser window, which JavaScript can respond.
These events can be triggered by user interactions
Such as clicking
a button, typing
in a text field, or moving
the mouse
As well as by other actions, like loading a web page or playing a video.
By handling these events, we can make web pages interactive and responsive to user input.
click
: Fired when an element is clicked.
dblclick
: Fired when an element is double-clicked.
mousedown
: Fired when the mouse button is pressed down.
mouseup
: Fired when the mouse button is released.
mousemove
: Fired when the mouse pointer is moved.
mouseover
: Fired when the mouse pointer moves over an element.
mouseout
: Fired when the mouse pointer moves out of an element.
keydown
: Fired when a key is pressed down.
keyup
: Fired when a key is released.
keypress
: Fired when a key is pressed and released.
submit
: Fired when a form is submitted.
change
: Fired when the value of an element changes.
focus
: Fired when an element gains focus.
blur
: Fired when an element loses focus.
load
: Fired when the document or an image is fully loaded.
resize
: Fired when the window is resized.
scroll
: Fired when the document view is scrolled.
unload
: Fired when the user navigates away from the page.
copy
: Fired when content is copied.
cut
: Fired when content is cut.
paste
: Fired when content is pasted.
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button was clicked!');
});
<button id="myButton" onclick="alert('Button was clicked!')">Click Me</button>
let button = document.getElementById('myButton');
button.onclick = function() {
alert('Button was clicked!');
};
Reference : w3schools | mdn | geeksforgeeks
JavaScript provides a built-in Math object that contains properties and methods for performing mathematical operations and calculations.
object is static, meaning you do not need to create an instance of it to use its methods and properties.
Note
We can see the list all Math methods by simple logging the Math object in console.\
console.log(Math)
Math.abs(x)
let absoluteValue = Math.abs(-5); // 5
// Returns the absolute value of a number
Math.ceil(x)
let roundedUp = Math.ceil(4.2); // 5
// Rounds a number upwards to the nearest integer
Math.floor(x)
let roundedDown = Math.floor(4.8); // 4
// Rounds a number downwards to the nearest integer
Math.round(x)
let rounded = Math.round(4.5); // 5
// Rounds a number to the nearest integer.
Math.max(x, y, ...)
let maxNumber = Math.max(1, 2, 3, 4); // 4
// Returns the largest of the zero or more numbers given as input parameters
Math.min(x, y, ...)
let minNumber = Math.min(1, 2, 3, 4); // 1
// Returns the smallest of the zero or more numbers given as input parameters
Math.random()
let randomNumber = Math.random(); // e.g., 0.123456789
// Returns a pseudo-random number between 0 (inclusive) and 1 (exclusive)
Math.sqrt(x)
let squareRoot = Math.sqrt(16); // 4
// Returns the square root of a number
Math.pow(base, exponent)
let power = Math.pow(2, 3); // 8
// Returns the base to the exponent power (i.e., base^exponent)
Math.trunc(x)
let truncated = Math.trunc(4.9); // 4
// Returns the integer part of a number by removing any fractional digits
Math.sign(x)
let sign = Math.sign(-5); // -1
// Returns the sign of a number, indicating whether the number is positive, negative, or zero
Math.sin(x), Math.cos(x), Math.tan(x)
let sine = Math.sin(Math.PI / 2); // 1
let cosine = Math.cos(0); // 1
let tangent = Math.tan(Math.PI / 4); // 1
// Return the sine, cosine, and tangent of a number (the argument is in radians)
Math.log(x), Math.log10(x)
let naturalLog = Math.log(1); // 0
let logBase10 = Math.log10(10); // 1
// Returns the natural logarithm (base e) and the logarithm base 10 of a number
In JavaScript, We have a built-in Date
object.
We use it to get time.
We can create a new instance using date object as
let date = new Date();
console.log(date);
We can use the above object to extract any particular value
// for getting year
let year = date.getFullYear();
console.log(year);
// for getting date
let today = date.getDate();
console.log(today);
// for getting month
let month = date.getMonth() + 1;
console.log(month);
Note
Date()
object uses an array of months as
["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
Whenever we use getMonth()
method it returns the index value of the month.
To get the expected month number just increment it by one (month += 1
) before using it.
// for getting day
let day = date.getDay() + 1;
console.log(day);
Note
As months, Date()
object also has an array for days
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
We need to increment it by one (day += 1
) before using it.
// for getting hours
let hours = date.getHours();
console.log(hours);
// for getting minutes
let minutes = date.getgetMinutes();
console.log(minutes);
// for getting seconds
let seconds = date.getSeconds();
console.log(seconds);
// for getting mili-seconds
let miliseconds = date.getMilliseconds();
console.log(miliseconds);
// for getting localeString
let localeString = now.toLocaleString();
console.log(localeString);
// for getting localeDateString
let localeDateString = now.toLocaleDateString();
console.log(localeDateString);
// for getting localeTimeString
let localeTimeString = now.toLocaleTimeString();
console.log(localeTimeString);
This repository is open for collaboration, and your contributions are welcome! ๐ฅฐ
If you spot any error, have a suggestion, or want to add new content, feel free to submit a pull request.
Let's make this guide a vibrant and up-to-date resource for the entire JavaScript Aspirants
Fork the Repository
Fork this repository to contribute and become a part of JavaScript-Collection
Fork: JavaScript BrainStormingโก ๐(Click here)
Clone repository
Clone your forked repository to your local machine using the git clone
command.
Replace username
with your GitHub username.
git clone https://github.com/username/JavaScript-BrainStorming.git
Create a new branch for your ideas named it as new-idea
Make changes on your branch and push your changes using these commands.
git checkout -b new-idea
git add .
git commit -m "Brief description of your changes"
git push origin new-idea