Download as pdf or txt
Download as pdf or txt
You are on page 1of 21

💻

IWT - Shubhanshu Singh


HTML
SYLLABUS : Elements, attributes, headings, paragraphs, text formatting, links, images, tables, lists,
block and inline elements

Elements
HTML elements are the basic building blocks of web pages. They define the structure and content
of the page.

<header>
<h1>Welcome to my website!</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

Attributes
HTML attributes provide additional information about an HTML element, such as its source or
alternate text.

<img src="example.jpg" alt="An example image" width="400" height="300" style="border: 1px solid black;">

Headings
HTML headings are used to define the structure of a web page and to provide visual hierarchy.
There are six levels of headings, from h1 (most important) to h6 (least important)

IWT - Shubhanshu Singh 1


<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Paragraphs
Paragraphs are used to group together a block of text.

<p>This is a paragraph element.</p>

Text formatting
Text formatting: HTML provides a variety of tags to format text, including bold, italic, and underlined
text.

<p>This text is <b>bold</b>.</p>


<p>This text is <i>italicized</i>.</p>
<p>This text is <u>underlined</u>.</p>
<p>This text is <strong>strongly emphasized</strong>.</p>
<p>This text is <em>emphasized</em>.</p>
<p>This text has been <ins>inserted</ins> into the document.</p>

Links
Links are used to connect webpages and create a navigation structure.

<a href="https://www.example.com">This is a link</a>

Images

<img src="example.jpg" alt="Example Image" />

Tables
<table> : The <table> tag is used to define the table itself.

<caption> : The <caption> tag is used to provide a title or caption for the table. It is placed
immediately after the <table> tag.

<thead> , <tbody> , and <tfoot> : These tags are used to divide the table into three sections: the
header, body, and footer. The <thead> tag is used to define the header section of the table,
which typically contains column headings. The <tbody> tag is used to define the body section
of the table, which contains the main content. The <tfoot> tag is used to define the footer
section of the table, which can contain summary information or additional notes.

<tr> : The <tr> tag is used to define a row in the table.

IWT - Shubhanshu Singh 2


<th> : The <th> tag is used to define a header cell in a table. Header cells are typically used in
the first row of the table to provide column headings.

<td> : The <td> tag is used to define a standard cell in a table. Standard cells contain the main

content of the table.

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>Software Developer</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>Graphic Designer</td>
</tr>
</table>

Lists
Lists are used to group items together. HTML provides two types of lists: ordered and unordered.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Block and inline elements


A block-level element starts on a new line and takes up the full width of its parent element.
Some common examples of block-level elements are <div> , <p , <h1> - <h6> , <ul> , <ol> ,
<li> , <table> , <form> , and <header>

<div>
This is a block-level element.
</div>

A inline element only takes up as much width as necessary and does not start on a new line.
Some common examples of inline elements are <a> , <img> , <span> , <input> , and <strong>

This is an <span>inline element</span>.

IWT - Shubhanshu Singh 3


CSS
SYLLABUS : Selectors, backgrounds, ways to include CSS in HTML, text, fonts, box model (padding,
margin, border), styling tables and lists, display, inline-block.

Ways to include CSS in HTML


CSS can be included in an HTML document in several ways, including using an external
stylesheet, inline styles, and embedded styles.

/* External stylesheet */
<link rel="stylesheet" type="text/css" href="styles.css">

/* Inline styles */
<div style="color: blue;">This text is blue.</div>

/* Embedded styles */
<style>
p {
font-size: 18px;
}
</style>

Selectors
Selectors are used to target specific HTML elements and apply styles to them. There are several
types of selectors in CSS, including element selectors, class selectors, ID selectors, and more.

/* Element selector */
p {
color: red;
}
/* Class selector */
.special {
font-weight: bold;
}
/* ID selector */
#main-heading {
font-size: 36px;
}

Backgrounds
The background property in CSS is used to apply one or more background styles to an HTML
element. It is a shorthand property that allows you to set several individual background properties
at once, such as background-color , background-image , and background-size .
Here are some of the most commonly used background properties in CSS:

1. background-color : Sets the background color of an element. You can specify a color value using
a keyword, RGB or HSL values, or hexadecimal notation. For example:

IWT - Shubhanshu Singh 4


div {
background-color: red;
}

2. background-image : Sets the background image of an element. You can specify the image using a
URL, like so:

div {
background-image: url('background.jpg');
}

3. background-size : Sets the size of the background image. You can specify the size using a
keyword like cover , contain , or auto , or you can use values like 50% or 100px .

div {
background-image: url('background.jpg');
background-size: cover;
}

4. background-repeat : Determines whether the background image is repeated or not. You can set
this property to repeat , repeat-x , repeat-y , or no-repeat .

div {
background-image: url('background.jpg');
background-repeat: no-repeat;
}

5. background-position : Sets the position of the background image. You can specify the position
using keywords like left , right , center , or top , or you can use values like 50% 50% or 10px

20px .

div {
background-image: url('background.jpg');
background-position: center;
}

6. background-attachment : Determines whether the background image is fixed or scrolls with the
rest of the page. You can set this property to fixed or scroll .

div {
background-image: url('background.jpg');
background-attachment: fixed;
}

Text and Fonts


1. color : Sets the color of the text. You can specify a color value using a keyword, RGB or HSL
values, or hexadecimal notation. For example:

IWT - Shubhanshu Singh 5


p {
color: blue;
}

2. font-family : Sets the font family used to display the text. You can specify a font family name or
a comma-separated list of font family names.

p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

3. font-size : Sets the size of the text. You can specify the size using keywords like large , small ,
or medium , or you can use values like 12px or 2em .

p {
font-size: 16px;
}

4. font-weight : Sets the weight (or thickness) of the text. You can specify a value of bold , normal ,
lighter , or a numerical value between 100 and 900 .

p {
font-weight: bold;
}

5. text-align : Sets the alignment of the text within its container. You can use values like left ,
center , right , or justify .

p {
text-align: center;
}

6. text-decoration : Sets the decoration applied to the text. You can use values like underline ,
line-through , overline , or none .

p {
text-decoration: underline;
}

7. text-transform : Sets the capitalization of the text. You can use values like uppercase , lowercase ,
capitalize , or none .

p {
text-transform: uppercase;
}

IWT - Shubhanshu Singh 6


In addition to these properties, there are other text-related properties in CSS, such as line-height ,
letter-spacing , word-spacing , text-shadow , and white-space .

Box model (padding, margin, border)


he box model consists of four components: content, padding, border, and margin.

1. Content : This is the actual content of the element, such as text or images. The size of the
content box is determined by the width and height properties.

div {
width: 200px;
height: 100px;
}

2. Padding : This is the space between the content and the border. You can set the padding using
the padding property, which can take up to four values (top, right, bottom, left). You can also
use the shorthand property, which applies the same padding value to all sides.

div {
padding: 20px;
/* or */
padding: 10px 20px 30px 40px; /* top, right, bottom, left */
}

3. Border: This is the line that surrounds the content and padding. You can set the border using
the border property, which can take up to three values (width, style, color). You can also use
the shorthand property, which applies all three values.

div {
border: 1px solid black;
/* or */
border-width: 2px;
border-style: dashed;
border-color: red;
}

4. Margin: This is the space between the border and the adjacent elements. You can set the
margin using the margin property, which can take up to four values (top, right, bottom, left). You
can also use the shorthand property, which applies the same margin value to all sides.

div {
margin: 20px;
/* or */
margin: 10px 20px 30px 40px; /* top, right, bottom, left */
}

Styling tables and lists


1. Tables:

Border: You can add borders to table cells using the border property.

IWT - Shubhanshu Singh 7


Background color: You can set a background color for table cells using the background-
color property.

Padding and spacing: You can control the padding and spacing of table cells using the
padding and border-spacing properties.

/* Set border and background color for table */


table {
border-collapse: collapse;
background-color: #f8f8f8;
}
/* Set border for table cells */
td, th {
border: 1px solid #ddd;
padding: 8px;
}
/* Set background color and font color for table header cells */
th {
background-color: #4CAF50;
color: white;
}

2. Lists:

List style: You can change the style of list bullets using the list-style-type property.

List images: You can use images as list bullets using the list-style-image property.

Nested lists: You can use CSS to style nested lists by targeting the appropriate list
element.

/* Set style and color for unordered list bullets */


ul {
list-style-type: disc;
color: blue;
}
/* Use an image as the bullet for unordered list items */
ul {
list-style-image: url('bullet.png');
}
/* Set style and color for ordered list bullets */
ol {
list-style-type: decimal;
color: red;
}
/* Nest a second level unordered list and style it */
ul ul {
list-style-type: square;
color: green;
}

Display
1. block : This value makes an element a block-level element, meaning that it takes up the full
width of its parent element and starts on a new line. Block-level elements include headings,
paragraphs, and divs.

2. inline : This value makes an element an inline-level element, meaning that it doesn't start on a
new line and only takes up as much width as necessary. Inline-level elements include spans
and links.

IWT - Shubhanshu Singh 8


3. inline-block : This value combines the features of block and inline elements. The element is
placed on the same line as the surrounding text, but it can have a width and height, and other
block-level properties such as padding and margin can be applied.

4. none : This value hides the element completely, and it won't take up any space on the web
page.

The display property can also take other values, such as table , flex , and grid , which are used
for creating specific layout structures.

/* Set a heading to be displayed as a block-level element */


h1 {
display: block;
width: 100%;
background-color: #f2f2f2;
padding: 20px;
}

/* Set a link to be displayed as an inline-level element */


a {
display: inline;
color: blue;
text-decoration: none;
padding: 5px;
border: 1px solid blue;
}

/* Set a div to be displayed as an inline-block element */


div {
display: inline-block;
width: 50%;
height: 100px;
background-color: #ccc;
padding: 10px;
margin: 5px;
}

/* Hide an element completely */


p {
display: none;
}

Inline-block.
In CSS, the display property is used to define how an HTML element should be displayed. The
inline-block value of the display property creates a block-level element that flows with
surrounding text like an inline element, but it also has its own dimensions and box model (padding,
margin, border) like a block-level element.
For example, let's say you want to create a box with a background color that contains a heading
and some text, but you want the box to be centered on the page and have a specific width. You can
achieve this by using the inline-block value for the display property.

<div class="box">
<h2>Box Title</h2>

IWT - Shubhanshu Singh 9


<p>Box content goes here...</p>
</div>

.box {
display: inline-block;
width: 400px;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
}
h2 {
color: #333;
}
p {
color: #666;
}

JavaScript
SYLLABUS : Connecting HTML and JavaScript, Comments, Literals, Data types, values and
variables, Expressions and operators, Statements – conditionals, loops, break, continue,
try/catch/finally/throw, with, Functions – declaration, invocation, arguments and parameters, variable
arguments, rest parameters, optional parameters and default values, functions as values, Arrays –
creating arrays, reading and writing array elements, sparse array, array length, adding and deleting
array elements, iterating array, multidimensional array, array methods, Strings

Connecting HTML and JavaScript


1. Inline JavaScript :

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Click the button below to change the text.</p>
<button onclick="document.getElementById('text').innerHTML = 'Hello, world!';">Click me</button>
<p id="text">This is some text.</p>
<script>
// JavaScript code goes here
</script>
</body>
</html>

2. External JavaScript file :

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="myscript.js"></script>
</head>
<body>
<h1>Welcome to my website</h1>

IWT - Shubhanshu Singh 10


<p>Click the button below to change the text.</p>
<button onclick="changeText()">Click me</button>
<p id="text">This is some text.</p>
</body>
</html>

Comments
// Single-line comments
/* Multi-line comments */

Literals
Literal is a value that appears directly in the source code of a program. It is a way of representing
data in a program's code, and is used to create and assign values to variables or as arguments to
functions.

1. String literals :

const greeting = "Hello, World!";


const name = 'Alice';

2. Numeric literals :

const number = 123;


const hexNumber = 0x1a; // hexadecimal
const floatNumber = 3.14;
const exponentialNumber = 2e3; // exponential

3. Boolean literals :

const isTrue = true;


const isFalse = false;

4. Array literals :

const numbers = [1, 2, 3, 4, 5];


const names = ['Alice', 'Bob', 'Charlie'];

5. Object literals:

const person = {
name: 'Alice',
age: 30,
city: 'New York'};

6. Regular expression literals:

const regex = /hello/i; // match 'hello' case-insensitively

IWT - Shubhanshu Singh 11


Data types
Primitive data types :

1. Number: represents numeric values, including integers and floating-point numbers.

const age = 30;


const price = 9.99;

2. String: represents textual data, such as names, messages, or other types of text.

const name = 'Alice';


const message = "Hello, " + name;

3. Boolean: represents logical values, either true or false.

const isTrue = true;


const isFalse = false;

4. Undefined: represents a variable that has not been assigned a value.

let x;
console.log(x); // prints undefined

5. Null: represents a deliberate non-value or absence of an object value.

const value = null;

6. Symbol (added in ECMAScript 6): represents a unique identifier.

const id = Symbol('id');

Object data type :

1. Object: represents a collection of properties and methods.

const person = {
name: 'Alice',
age: 30,
city: 'New York'};

2. Array: a specialized type of object, used to represent a list of values.

const numbers = [1, 2, 3, 4, 5];


const names = ['Alice', 'Bob', 'Charlie'];

3. Function: a type of object used to represent code that can be called or executed.

IWT - Shubhanshu Singh 12


function greet(name) {
console.log('Hello, ' + name);
}

4. Date: represents a specific date and time.

const now = new Date();


console.log(now.toLocaleString());
// prints the current date and time in a human-readable format

5. RegExp: represents a regular expression, used for pattern matching in text.

const pattern = /hello/i;


// matches the word "hello" case-insensitively

Values and Variables

let age = 30; // create a variable named "age" and assign it the value 30
const name = 'Alice'; // create a constant named "name" and assign it the value 'Alice'
var count = 0; // create a variable named "count" and assign it the value 0

if (true) {
var a = 1;
let b = 2;
const c = 3;
}
console.log(a); // prints 1
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined

function example() {
var x = 1;
let y = 2;
const z = 3;
if (true) {
var x = 4; //was 1
let y = 5; //was 2
const z = 6; //was 3
console.log(x, y, z); // prints 4 5 6
}
console.log(x, y, z); // prints 4 2 3
}
example();

Expressions and operators


1. Arithmetic operators: used for mathematical operations, such as addition (+), subtraction (-),
multiplication (*), division (/), and modulus (%).

2. Comparison operators: used to compare values and return a Boolean value (true or false).
Examples include >, <, >=, <=, ==, !=, ===, and !==.

3. Logical operators: used to combine and manipulate Boolean values. Examples include &&
(logical AND), || (logical OR), and ! (logical NOT).

IWT - Shubhanshu Singh 13


4. Assignment operators: used to assign values to variables. Examples include =, +=, -=, *=, /=,
and %=.

5. Conditional (ternary) operator: used to create a conditional expression in one line. It has the
form condition ? valueIfTrue : valueIfFalse.

6. Type operators: used to check the type of a value.


Examples include typeof and instanceof.

let a = 5;
let b = "hello";
let c = true;
let d = undefined;
let e = null;
let f = [1, 2, 3];
let g = { name: "John", age: 30 };
console.log(typeof a); // "number"
console.log(typeof b); // "string"
console.log(typeof c); // "boolean"
console.log(typeof d); // "undefined"
console.log(typeof e); // "object"
console.log(typeof f); // "object"
console.log(typeof g); // "object"

class Car {
constructor(make, model, year) {
this.make = make;
this.model = model;
this.year = year; } }

let myCar = new Car("Toyota", "Corolla", 2019);


console.log(myCar instanceof Car); // true
console.log(myCar instanceof Object); // true
console.log(myCar instanceof Array); // false

Statements – conditionals, loops, break, continue, try/catch/finally/throw,


with
In JavaScript, statements are used to control the flow of the program.

Conditionals(if/else)

Loops(for/while)

Break

for (let i = 0; i < 5; i++) {


if (i === 3)
break;
console.log(i);
}

Continue

for (let i = 0; i < 5; i++) {


if (i === 3)

IWT - Shubhanshu Singh 14


continue;
console.log(i); }

try/catch/finally/throw

try {
let x = y + 1;
} catch (e) {
console.log("An error occurred: " + e);
} finally {
console.log("This code will always run");
}

function divide(a, b) {
if (b === 0)
throw new Error "Cannot divide by zero";
return a / b;
}

try {
let result = divide(10, 0);
} catch (e) {
console.log(e);
}

with
The with statement is used to specify the default object to use for property lookups in a block of
code.

let person = { name: "John", age: 30 };


with (person) {
console.log(name); // "John"
console.log(age); // 30
}

Functions – declaration, invocation, arguments and parameters, variable


arguments, rest parameters, optional parameters and default values,
functions as values
Declaration

function greet(name) {
console.log("Hello " + name + "!"); }

Invocation

greet("John"); // Output: "Hello John!"

Arguments and Parameters

function add(a, b) {
return a + b; }
let result = add(2, 3);

IWT - Shubhanshu Singh 15


// The values 2 and 3 are passed as arguments to the add function
//and the result is stored in the result variable

Variable Arguments
JavaScript functions can accept any number of arguments, even if they are not defined in the
function declaration. The arguments object can be used to access these variable arguments
inside the function

function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]+" ")
total += arguments[i]; }
return total; }
let result = sum(1, 2, 3, 4, 5); // Output: 15

Rest Parameters
ES6 introduced the concept of rest parameters, which allows you to define a function with a
variable number of parameters. These are denoted by three dots ... before the last parameter
in the function definition, and they create an array of all the remaining arguments passed to the
function.

function sum(...args) {
let total = 0;
for (let arg of args)
total += arg;
return total; }
let result = sum(1, 2, 3, 4, 5); // Output: 15

Optional Parameters and Default Values

function multiply(a, b = 1, c = 1) {
return a * b * c;
}
multiply(2); // returns 2
multiply(2, 3); // returns 6
multiply(2, 3, 4); // returns 24

Functions as Values

function add(a, b) {
return a + b; }

function multiply(a, b) {
return a * b;}

function calculate(operation, a, b) {
return operation(a, b); }

IWT - Shubhanshu Singh 16


let result = calculate(add, 2, 3); // Output: 5
result = calculate(multiply, 2, 3); // Output: 6

// Optional Parameters and Default Values


function greet(name, message = "Hello") {
console.log(message + " " + name + "!"); }
greet("John"); // Output: "Hello John!"
greet("Jane", "Hi"); // Output: "Hi Jane!"

Arrays – creating arrays, reading and writing array elements, sparse array,
array length, adding and deleting array elements, iterating array,
multidimensional array, array methods
Creating Arrays

let numbers = [1, 2, 3, 4, 5];


let fruits = ['apple', 'banana', 'cherry'];

Reading and Writing

let numbers = [1, 2, 3, 4, 5];


console.log(numbers[0]); // output: 1
console.log(numbers[3]); // output: 4

numbers[2] = 10;
console.log(numbers); // output: [1, 2, 10, 4, 5]

Sparse Array

let numbers = [1, , , 4, 5];


console.log(numbers); // output: [1, undefined, undefined, 4, 5]

Array Length

let fruits = ['apple', 'banana', 'cherry'];


console.log(fruits.length); // output: 3

Adding and Deleting

let fruits = ['apple', 'banana', 'cherry'];


fruits.push('orange');
console.log(fruits); // output: ['apple', 'banana', 'cherry', 'orange']

fruits.pop();
console.log(fruits); // output: ['apple', 'banana', 'cherry']

fruits.shift();
console.log(fruits); // output: ['banana', 'cherry']

fruits.unshift('pear');
console.log(fruits); // output: ['pear', 'banana', 'cherry']

IWT - Shubhanshu Singh 17


Iterating Array

let numbers = [1, 2, 3, 4, 5];


for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]); }

let fruits = ['apple', 'banana', 'cherry'];


fruits.forEach(function(fruit) {
console.log(fruit);
});

Multidimensional Array

let matrix = [[1, 2, 3],


[4, 5, 6],
[7, 8, 9]];
console.log(matrix[0][0]); // output: 1
console.log(matrix[1][2]); // output: 6

Array Methods

let arr = [1, 2, 3, 4, 5];

1. Adding and Removing Elements

arr.push(6); // add 6 to the end of the array


arr.pop(); // remove the last element from the array
arr.unshift(0); // add 0 to the beginning of the array
arr.shift(); // remove the first element from the array
arr.splice(2, 0, 'a', 'b'); // insert elements at a specific position
arr.splice(3, 2); // remove elements from a specific position

2. Accessing and Modifying Elements

let first = arr[0]; // access the first element of the array


let last = arr[arr.length - 1]; // access the last element of the array
arr[1] = 'two'; // modify the second element of the array

3. Iterating over an Array

arr.forEach((element, index, array) => {


console.log(element);
});

arr.map((element, index, array) => {


return element * 2;
});

arr.filter((element, index, array) => {


return element % 2 === 0;
});

arr.reduce((accumulator, currentValue, currentIndex, array) => {


return accumulator + currentValue;
});

arr.every((element, index, array) => {

IWT - Shubhanshu Singh 18


return element > 0;
});

arr.some((element, index, array) => {


return element > 3;
});

4. Searching for Elements

arr.indexOf(3); // returns the index of the first occurrence of 3


arr.lastIndexOf(3); // returns the index of the last occurrence of 3
arr.includes(3); // returns true if 3 is in the array

5. Sorting and Reversing

arr.sort(); // sorts the elements in the array


arr.reverse(); // reverses the order of the elements in the array

6. Creating a New Array from an Existing Array

let newArray = arr.slice(); // creates a new array with all the elements of arr
let newArray2 = arr.concat([6, 7, 8]); // creates a new array by joining arr with another array

Strings

let str = "The quick brown fox jumps over the lazy dog";

// Using the length method


console.log("Length of the string:", str.length);

// Using the toUpperCase method


console.log("Uppercase string:", str.toUpperCase());

// Using the toLowerCase method


console.log("Lowercase string:", str.toLowerCase());

// Using the indexOf method to find the index of a substring


console.log("Index of 'jumps':", str.indexOf('jumps'));

// Using the lastIndexOf method to find the last index of a substring


console.log("Last index of 'o':", str.lastIndexOf('o'));

// Using the slice method to get a substring


console.log("Substring from index 4 to 9:", str.slice(4, 9));

IWT - Shubhanshu Singh 19


// Using the replace method to replace a substring
console.log("Replace 'brown' with 'red':", str.replace('brown', 'red'));

// Using the split method to split the string into an array


console.log("Split string by spaces:", str.split(' '));

// Using the charAt method to get a character at a specific index


console.log("Character at index 0:", str.charAt(0));

// Using the concat method to concatenate two strings


console.log("Concatenated string:", str.concat(" and the quick brown hare"));

// Using the includes method to check if a substring is in the string


console.log("Does the string include 'dog'?", str.includes('dog'));

// Using the match method to match a substring with a regular expression


console.log("Match 'quick' with a regular expression:", str.match(/quick/));

// Using the repeat method to repeat the string a certain number of times
console.log("Repeat the string three times:", str.repeat(3));

// Using the search method to search for a substring


console.log("Search for 'lazy':", str.search('lazy'));

// Using the substring method to get a substring


console.log("Substring from index 10 to 15:", str.substring(10, 15));

// Using the trim method to remove whitespace from the beginning and end of the string
console.log("Trimmed string:", str.trim());

() => is an arrow function syntax used to define an anonymous function in


JavaScript. It was introduced in ES6 (ECMAScript 2015).
This syntax is used to make function expressions smaller and easier to read
and write. In this syntax, the => arrow operator is written on the left-hand side
of the function, and the body of the function is on the right-hand side. This
syntax can also be used for function parameters.

IWT - Shubhanshu Singh 20


let multiply = (a, b) => {
return a * b;
};

IWT - Shubhanshu Singh 21

You might also like