JavaScript Functions and Conditional Statements:

JavaScript Functions and Conditional Statements: Full Detail (Part 3)

JavaScript Functions and Conditional Statements Having gained knowledge of the fundamental data kinds and operations, we should attempt to make our scripts a bit more interesting. This will be accomplished by tampering with how the Javascript application is executed.

This is possible through the usage of functions. If you missed all the previous classes, you could start from here. Or check part 2 of this course here.

JavaScript Functions and Conditional Statements:

Functions

Functions allow us to repeat tasks that involve a similar sequence of steps. You’ve already seen the console.log() function, which allows us to predictably log some output to the console.

Let’s look at an example of a function definition that finds the sum of two numbers:

                    

var sum = function(x, y){
  return x + y;
}

We start by creating a variable, which we then define as a function by using the function(){} syntax.

Within the parentheses are a set of arguments, which are values that are used or manipulated by the function in some manner. If you have multiple arguments, they are each separated by a comma. A function can also have no arguments.

The code to be executed by the function lies within the curly braces ({}). If you expect the function to give back some value, it should include a return statement (which is done by using the keyword return), followed by the value you want to be returned. If you don’t expect your Javascript function to return a value, you do not have to include a return statement.

You may have noticed that nothing happens when you run the code above. In order to make use of our function, we must first invoke or call the function on the computer.

A function is denoted by the following notation:

The parenthesis (), when used together, represents an operator that begins a call to a function. In order to utilize the function, you must add any parameters you wish to use within the parentheses of the function called.

Let’s make use of the sum the function we just created above:

                    

var onePlusTwo = sum(1, 2);
var twoPlusTwenty = sum(2, 20);

console.log(onePlusTwo, twoPlusTwenty);

Specifically, we make use of two separate functions in our example:

  • the sum() method, which takes two integers as parameters and returns the total of them
  • the console.log() method, which takes as inputs the newly generated variables we specified earlier

When we use sum(), numbers are supplied to it, and as a result, the value returned will likewise be a number in both circumstances. This number is then placed into the console using console.log().

JavaScript Functions and Conditional Statements: Why Should You Use Functions

Perhaps the most convincing justification for employing functions is that they allow us to reuse code and construct modules to conduct tasks that we intend to repeat regularly. Even if the example above isn’t much more beneficial than simply using the + operator, you will discover that functions are convenient when your code becomes more elaborate and start to get complex.

JavaScript Functions and Conditional Statements: Program Flow: Conditional Statements

Conditional statements are another mechanism we may use to regulate the flow of our project. They provide us the ability to execute code only under specific conditions that we specify.

if Statements

Let’s start with a simple illustration. Because of the fluctuating temperature, we wish to provide users with information regarding weather conditions.

                    

var weather = function(temperature){
  console.log("The temperature outside is", temperature, "degrees centigrade.");
}

weather(60);

OUTPUT

                    

The temperature outside is 60 degrees Centigrade.

Let’s say we want to go beyond just giving the temperature value and want to inform users on whether or not they should wear a jacket. How could this be done programmatically?

We can add a statement that will only execute if the temperature meets a certain condition.

                    

var weather = function(temperature){
  console.log("The temperature outside is", temperature, "degrees centigrade.");
  
  if(temperature <= 65) {
    console.log("It's getting cold outside. Better wear a jacket!");
  }
}

weather(60);

OUTPUT

                    

The temperature outside is 60 degrees Centigrade.
It's getting cold outside. Better wear a jacket!

Conditional statements rely on providing a Boolean value that can determine whether a code block (the statements between the {} curly braces) should execute.

In the above example, temperature <= 65 will return true if the temperature is less than or equal to 65. Otherwise, it will return false. Therefore, the code within the if statement will only run if temperature it is less than or equal to 65.

The below example illustrates how conditional execution works by directly providing true or false values:

                    

if(true){
  console.log("This line will execute.");
}

if(false){
  console.log("This line will not execute.");
}

Now let us look at If or Else Statements

if/else statments

Let’s take another look at our weather example. What if we want to include a statement about warmer Weather if the temperature is greater than 65?

One way we could do this is by creating another if condition:

                    

var weather = function(temperature){
  console.log("The temperature outside is", temperature, "degrees farenheight.");
  
  if(temperature <= 65) {
    console.log("It's getting cold outside. Better wear a jacket!");
  } 
  if(temperature > 65) {
  console.log("It's pleasant outside!");  
  }
}

weather(70);

OUTPUT

                    

The temperature outside is 70 degrees farenheight.
It's pleasant outside!

It is not rocket science, since Weather (70);, the second if will show because the code says if the temperature is greater than 65 then print…

Despite the fact that the code above is absolutely acceptable, there is a more efficient way to write it. Because we are attempting to run a particular code if a condition is met, and another piece of code if the condition is not met, we can use an if/else statement to accomplish this:

                    

var weather = function(temperature){
  console.log("The temperature outside is", temperature, "degrees farenheight.");
  
  if(temperature <= 65) {
    console.log("It's getting cold outside. Better wear a jacket!");
  } else {
    console.log("It's pleasant outside!");  
  }
}

weather(70);

OUTPUT

                    

The temperature outside is 70 degrees farenheight.
It's pleasant outside!

if/else / if/else Statements

Looking again at the weather example, what if you wanted multiple statements for various temperatures?

Adding an else if allows us to make additional checks when the if condition is false. Let’s take a look at how this works:

                    

var weather = function(temperature){
  console.log("The temperature outside is", temperature, "degrees farenheight.");
  
  if(temperature <= 65) {
    console.log("It's getting cold outside. Better wear a jacket!");
  } else if (temperature > 65 && temperature <= 80){
    console.log("It's pleasant outside!");  
  } else {
    console.log("It's getting hot outside!");
  }
}

weather(90);

OUTPUT

                    

The temperature outside is 90 degrees farenheight.
It's getting hot outside!

The condition in the else if statement will only be evaluated after the first if condition is false. If the else if condition is also false, the code in the else block will execute.

Multiple else if statements can be chained together, like below:

                    

var weather = function(temperature){
  console.log("The temperature outside is", temperature, "degrees farenheight.");
  
  if(temperature <= 30) {
    console.log("It's freezing outside! It'll be best to bundle up.");
  } else if(temperature <= 55) {
    console.log("It's getting cold outside. Better wear a jacket!");
  } else if (temperature <= 75){
    console.log("It's pleasant outside!");  
  } else {
    console.log("It's getting hot outside!");
  }
}

weather(20);
weather(40);
weather(60);
weather(90);

OUTPUT

                    

The temperature outside is 20 degrees farenheight.
It's freezing outside! It'll be best to bundle up.
The temperature outside is 40 degrees farenheight.
It's getting cold outside. Better wear a jacket!
The temperature outside is 60 degrees farenheight.
It's pleasant outside!
The temperature outside is 90 degrees farenheight.
It's getting hot outside!

In other words, the second else if condition will only be assessed in the event that the first else if the condition is false, and so on.

In programming, conditional statements are extremely helpful because they allow you to specify precisely under what conditions a block of code will run.

Follow me on Twitter.

One Comment

  1. Wow.., you’re a genius bro

Leave a Reply

Your email address will not be published. Required fields are marked *