JAVASCRIPT
JAVASCRIPT 1
VARIABLES
//1. decleration
let x;
//2. assignment
x=200;
//printing
console.log(x);
//we can do decleration and assignment in one step:
let x=200:
console.log(x);
${} //placeholder
Datatypes
JAVASCRIPT 2
//NUMBERS
let age=25;
let price=10.99;
let gpa=2.3;
console.log(typeof gpa);
console.log(typeof price);
console.log(typeof age);
console.log(`You are ${age} years old.`);
console.log(`The price is $${price}.`);
console.log(`Your gpa is ${gpa}.`);
//OUTPUT
number
number
number
You are 25 years old.
The price is $10.99.
Your gpa is 2.3.
//STRINGS
let name="Bro"; //we can use single quote or double quote
let favouritefood="Pizza";
let email="bro123@gmail.com" //strings can include numbers,
but can't use for mathematical operations.
console.log(typeof name);
console.log(typeof favouritefood);
console.log(typeof email);
console.log(`My name is ${name}.`);
console.log(`I love ${favouritefood}.`);
console.log(`My email is ${email}`);
//OUTPUT
string
JAVASCRIPT 3
string
string
My name is Bro.
I love Pizza.
My email is bro123@gmail.com
//BOOLEAN
let online=true;
let forSale=false;
let isStudent=true;
console.log(typeof online);
console.log(`is he online?: ${online}`);
console.log(`is this car fo sale? ${forSale}`);
console.log(`Is this student enrolled? ${isStudent}`);
//OUTPUT
boolean
is he online?: true
is this car fo sale? false
Is this student enrolled? true
EXCSERCISE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, init
ial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="myName">What is your name?</p>
JAVASCRIPT 4
<p id="myAge">What is you age?</p>
<p id="status">Are you a student?</p>
<script>
let fullName = "Rob";
let age = 23;
let isStudent = true;
document.getElementById("myName").textContent = `My n
ame is ${fullName}`; //getElementById is used to fetch the
element with a particular id.
document.getElementById("myAge").textContent=`I am
${age} years old.`; //textContent is used to change the tex
t
document.getElementById("status").textContent = isStu
dent;
</script>
</body>
</html>
KEYWORDS
Their meaning and purpose is already defined within the Javascript.
Must be written in lowercase letters.
Should not be used as identifiers or user defined names.
1. var, let, const
//These three keywords are used to declare a variab
le.
//var can be redeclared and reassigned.
var x=5;
x=10; //reassignment
var x=15; //redecleration
//let cannot be redeclered but can be reassigned.
let x=5;
x=15; //reassignment
JAVASCRIPT 5
let x=30; //Error shows
//const can neither be redeclered nor be re assigne
d.
const x=15;
x=15; //shows error
const x=15; //error shows
2. if, else, else if
//Used for conditional statement
if execute a code block if the condition inside
if statement is true
if (condition) {
// code to execute if condition is true
}
code block under else statement will execute if
the if condition is false.
if (condition) {
// code to execute if condition is true
}
else {
// code to execute if condition is fals
e
Specifies a new condition to test if the first
condition is false.
if (condition1) {
// code if condition1 is true
} else if (condition2) {
// code if condition2 is true
} else {
// code if none of the above conditions are
true
}
3. for, while, do...while
JAVASCRIPT 6
for: A loop with a counter, usually used when the number of
iterations is known.
for (let i = 0; i < 5; i++) {
console.log(i);
}
//OUTPUT
0
1
2
3
4
while: A loop continues to run as long as the condition is
true.
let i=0;
while(i<5){
console.log(i);
i++;
}
//OUTPUT
0
1
2
3
4
do...while: Similar to while loop. But it guarantees at lea
st one iteration, as the condition is checked after the loo
p body.
let i = 0;
do{
console.log(i);
i++;
} while (i<5);
//OUTPUT
0
1
2
3
JAVASCRIPT 7
4
4. function: functions can be called using their naame and
passing any required arguments.
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("insha"));
//OUTPUT
Hello, insha!
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet(123));
//OUTPUT
Hello, 123!
5. return:Used to exit a function and return a value.
function add(a, b) {
return a + b;
}
let sum = add(5, 3); // sum is 8
5. switch:
let day = 3;
switch (day) {
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
case 3:
console.log('Wednesday');
JAVASCRIPT 8
break;
default:
console.log('Other day');
}
//OUTPUT
Wednesday
let day = 2;
switch (day) {
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
case 3:
console.log('Wednesday');
break;
default:
console.log('Other day');
}
//OUTPUT
Tuesday
let day = 5;
switch (day) {
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
case 3:
console.log('Wednesday');
break;
default:
JAVASCRIPT 9
console.log('Other day');
}
//OUTPUT
Other day
7. try, catch, finally
Used for error handling.
try: wraps code that may throw an error.
catch : executes if an error occur in try block.
finally : executes after try and catch block regardless of
whether the error occured.
try {
// code that may throw an error
let result = riskyOperation();
} catch (error) {
console.error(error); // handle the error
} finally {
console.log('This runs no matter what');
}
8. class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I a
m ${this.age} years old.`);
}
}
let person1 = new Person('Alice', 30);
person1.greet();
JAVASCRIPT 10
//Output
Hello, my name is Alice and I am 30 years old.
9.this : analogous to self
class Car {
constructor(brand) {
this.brand = brand;
}
display() {
console.log(`This car is a ${this.brand}`);
}
}
let myCar = new Car('Toyota');
myCar.display(); // This car is a Toyota
10. new
let date = new Date(); // Creates a new Date object
11. null and undefined
null: intentional absence of any object value.
undefined: uninitialised variable or absent value.
let a = null;
let b;
console.log(b); // undefined
12. true and false
let isRaining = false;
if (!isRaining) {
console.log('You don\'t need an umbrella.');
}
JAVASCRIPT 11
//OUTPUT
You don't need an umbrella.
13. import and export
we could import and export code from other modules to the c
urrent file.
To do that in html file, we link our .js file like this.
<script>src="index.js"</script>
add 'type' attribute to this code inorder to make the file
a module.
<script> type ="module" src="index.js"</script>
index.js is the file where we want to import our code.
mathUtil.js is the file from which we export the code.
in mathUtil.js:
export const Pl = 3.14159;
export function getCircumference(radius){
return 2 * PI * radius;
}
export function getArea(radius){
return PI * radius * radius;
}
export function getVolume(radius){
return 4 * PI * radius * radius;
}
in index.js:
import{PI, getCircumference, getArea, getVolume} fr
om './mathUtil.js';
JAVASCRIPT 12
console.log(PI);
const circumference = getCircumference(10);
const area = getArea(10);
const volume = getVolume(10);
console.log(`${circumference.tofixed(2)}cm`);
console.log(`${area.tofixed(2)}cm^2`);
console.log(`${volume.tofixed(2)}cm^3`);
//output
3 .14159
62.83cm
314.16cm^2
1256.64cm^3
OPERATORS
Comparison Operators
== equal to
!= not equal to
=== strict equal to
!== strict not equal to
Equal to
var a=5;
var b= 5;
var c= "Monica"
console.log(a==5); //true
console.log(b=='5'); //true
console.log(c=="monica") //false due to case sensitivity of
string
Not equal to
JAVASCRIPT 13
var a = 4;
var b = "Monika";
console.log(a!=3); //true
console.log(b!="Monika"); //false
Strict equal to
var a=10;
console.log(a===10); //true
console.log(a==='10'); //false .... because strict equal to
check the datatype also
Strict not equal to
a=2;
b="Monica"
console.log(a !== 2); //false
console.log(a !== '2'); //true
console.log(a !== "monica"); //true
Greater than
a=20;
b=10;
console.log(a>b); //true
less than
a=10;
b=20;
JAVASCRIPT 14
console.log(a<b); //true
less than or equal to
a=2;
console.log(a<=3); //true
console.log(a<=2); //true
less than or equal to
a=2;
console.log(a>=3); //false
console.log(a>=2); //true
console.log(a>=1); //true
CONDITIONAL OPERATORS
Ternary operators
Short form of if else condition.
let age =18;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote);
//Output : Yes
Logical Operators
AND : true if both the conditions are true.
OR : true if either of the conditions is true.
NOT : true if the opposite of condition’s truthiness.
JAVASCRIPT 15
= assigning value to an operator
== for the comparison of operators but ignores datatype
=== for the comparison of operators but only true if datatypes
also same.
Undefined vs Null
undefined : A variable has been declared but not yet been assigned.
let x;
console.log(x); //logs undefined
null : it is an assignment value. A variable has been declared and given a
value null.
let y = null;
cinsole.log(y); //logs 'null'
Block scope and function scope
In JavaScript, the whole document is global scope and all other functions
and variables contained in global scope.
Function Scope: When a variable is declared inside the function, it is only
accessible within that function and cannot be used outside.
variables declared inside the curly braces are called block scope.
let and const are also block scope. since the variables are used within a
particular block. let used to declare a variable which can be changed as
program progress, while const is a variable that can be declared inside the
program which cannot be changed throughout the program.
var : functions scoped
let : block scoped
const: block scoped
JAVASCRIPT 16
function hello() // calls a function
{
if (true)
{
var a = 'Javascript'; //function scoped
let b = 'c++'; //block scoped
const c = 'Python'; //block scoped
console. log(a) ; //logs Javascript
console. log(b) ; //logs c++
console. log(c) ; //logs Python
}
console. log("outside If statement") //logs outside If
statement
console. log(a) ; //logs Javascript since var is a func
tion blocked element.
console. log(b) ; //logs reference error since if block
has ended
console. log(c); //logs reference error since if block
has ended.
}
hello() ;
A variable that declares outside the function : Global function
Shadowing and Illegal Shadowing
when a variable is declared and assigned a value inside a certain scope,
then it is reassigned in another block, reassigned value will be the new
assigned value. and after that scope. the value will be again the previously
assigned value.
function func() {
let a = 'Geeks';
if (true) {
let a = 'GeeksforGeeks'; // New value assigned
console.log(a);
JAVASCRIPT 17
}
console.log(a);
}
func();
//outpt
//GeeksforGeeks
//Geeks
illegal shadowing: declaring var in the outside block and then declaring new
variable in the inside block using let is legal
but reverse is illegal
function func() {
var a = 'Geeks';
let b = 'Geeks';
if (true) {
let a = 'GeeksforGeeks'; // Legal Shadowing
var b = 'Geeks'; // Illegal Shadowing
console.log(a); // It will print 'GeeksforGeeks'
console.log(b); // It will print error
}
}
func();
Pass by value and Pass by reference
Pass By Value
let a = 10;
let b = a;
a = 20;
JAVASCRIPT 18
console.log(a); //logs 20
console.log(b); //logs 10
Here variable a declared and assigned a value of 10.
then var b declared and assigned variable a; which means the memory
space labelled by variable b stores the value of memory space labelled by
variable a, i.e. 10.
Then reassign the variable a to 20
But since we passed only the value to a, the change in variable a doesn’t
affect the variable b.
Pass by reference
let obj1 = {value : 10};
let obj2 = obj1;
obj1=20;
console.log(obj1.value); //logs 20
console.log(obj2.value); //logs 20
Here obj1 assigned a value 10
obj2 pointed to the value of obj1
therefore now the value in obj2 is 10
then obj1 is reassigned to 20
Since obj2 is pointed towards the value of obj1, the value in obj2 also
changes corresponding to obj1. i.e. 20
Type coercion
This is basically the technique of converting a value from one datatype to
another datatype
code conversion and code coercion is doing the same thing but with one
key difference.
JAVASCRIPT 19
type coercion is implicit ; can be automatically changed to another
datatype.
type conversion is either explicit or implicit
let a = 10;
let b = '20';
let sum = a + b;
console.log(sum); //logs 1020
JAVASCRIPT 20
