Function and Control Structure:
A function in JavaScript is a group of reusable code that can be called anywhere in
your program. It eliminates the need of writing the same code again and again..
There are mainly two advantages of functions:
Code reusability: We can call a function several times, so it saves coding.
Less coding: It makes our program compact. We don’t need to write many
lines of code each time to perform a common task.
The most common way to define a function in JavaScript is by using the function
keyword, followed by a unique function name, a list of parameters, and a statement
block surrounded by curly braces.
Syntax:
function functionName(parameter-list) {
statements
Calling a Function
To invoke(call) a function somewhere later in the script, you would simply need
to write the name of that function with the parentheses () as shown in the
following code.
Example
<html>
<head>
<script type= "text/javascript">
function sayHello() // function declaration and definition
{
document.write("Hello there");
}
</script>
<head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type= "button" onclick="sayHello()" value= "Say Hello">
</form>
</body> Function call
</html>
Control Structures
Control structure defines the flow of control within the program.
1. Conditional control structure
2. Loop control structure
1. Conditional control structure
a. if statement: It evaluates the content only if expression is true.
Syntax
if (expression)
{
Statement(s) to be executed if expression is true
}
Example:
<!doctype html>
<html>
<body>
<div id ='output'> </div>
<script type = "text/javascript">
let result;
let age = 20;
if( age > 18 ) {
result = "Qualifies for driving";
}
document.getElementById("output").innerHTML = result;
</script>
<p> Set the variable to a different value and then try... </p>
</body>
</html>
b. if-else statement: It allows JavaScript to execute statements in a more
controlled way.
Syntax
if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}
Example:
<html>
<body>
<div id ='output'> </div>
<script type = "text/javascript">
let result;
let age = 15;
if( age > 18 ) {
result = "Qualifies for driving";
} else {
result = "Does not qualify for driving";
}
document.getElementById("output").innerHTML = result;
</script>
<p> Set the variable to a different value and then try... </p>
</body>
</html>
c. if-else-if statement: It is an advance form of if-else statement that allows
JavaScript to make correct decision out of several conditions.
Syntax
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if(expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{
Statement(s) to be executed if no expression is true
}
Example:
<html>
<body>
<div id ="demo"></div>
<script type="text/javascript">
const output = document.getElementById("demo")
let book = "maths";
if (book == "history") {
output.innerHTML="<b>History Book</b>";
} else if (book == "maths") {
output.innerHTML="<b>Maths Book</b>";
} else if (book == "economics") {
output.innerHTML="<b>Economics Book</b>";
} else {
output.innerHTML="<b>Unknown Book</b>";
}
</script>
<p> Set the variable to a different value and then try... </p>
</body>
<html>
d. Switch case
The basic syntax of the switch statement is to give an expression to evaluate and
several different statements to execute based on the value of the expression. The
interpreter checks each case against the value of the expression until a match is
found. If nothing matches, a default condition will be used.
Syntax
switch (expression){
case condition 1: statement(S)
break;
case condition 2: statement(s)
break;
.
.
.
case condition n: statement(s)
break;
default: statement(s)
}
Example:
<html>
<head>
<title> JavaScript - Switch case statement </title>
</head>
<body>
<p id = "output"> </p>
<script>
const output = document.getElementById("output");
let grade = 'A';
output.innerHTML += "Entering switch block <br />";
switch (grade) {
case 'A': output.innerHTML += "Good job <br />";
break;
case 'B': output.innerHTML += "Passed <br />";
break;
case 'C': output.innerHTML += "Failed <br />";
break;
default: output.innerHTML += "Unknown grade <br />";
}
output.innerHTML += "Exiting switch block";
</script>
</body>
</html>
2. Loop Control:
1. For loop control
2. While loop control
3. Do while control
1. For loop control:
JavaScript for loop is a control flow statement that allows code to be
executed repeatedly based on a condition.
Syntax
for (initialization; condition; increment/decrement )
{
code here...
}
Initialization: It is the initialization of the counter.
condition: It defines the testing condition for executing the code block
increment/ decrement: It is the increment or decrement of the counter
example:
let arr = [10, 20, 30, 40];
for (let i = 0; i < arr.length; i++)
{
document.write(arr[i]);
}
2. while loop control:
The while loop executes a block of code as long as a specified
condition is true. In JavaScript, this loop evaluates the condition before
each iteration and continues running as long as the condition remains
true.
Syntax
while (condition) {
Code block to be executed
}
example:
let count = 1;
while (count <= 5)
{
document.write(count);
4
count++;
5
}
3. do-while loop control:
The do...while loop is similar to the while loop except that the condition
check happens at the end of the loop. This means that the loop will always
be executed at least once, even if the condition is false.
Syntax
do {
Statement(s) to be executed;
} while (expression);
Example:
let count = 1;
do {
document.write(count);
count++;
} while (count <= 5);
