DEV Community

Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: Javascript Functions

JavaScript function

A JavaScript function is a snippet of code that performs a specific task. When "something" calls a JavaScript function, it gets called (calls it).

JavaScript Function Syntax

The function keyword is used to define a JavaScript function, which is then followed by a name and parenthesis (). Letters, numerals, underscores, and dollar signs can all be used in function names (same rules as variables). Parameter names separated by commas may be included in the parentheses: (parameter1, parameter2, ...) Inside curly brackets is the code that will be executed by the function:

In the function definition, function parameters are listed inside parentheses (). The values passed to the function when it is called are known as function parameters. The arguments (parameters) are treated as local variables within the function.

JavaScript code:

function myFunction(p1, p2) {
  return p1 * p2; // The function returns the product of p1 and p2
}

Enter fullscreen mode Exit fullscreen mode

Function Invocation

When "something" invokes (calls) the function, the code contained within it will run:

  • When an incident occurs (when a user clicks a button)
  • When invoked (called) from JavaScript code
  • On its own (self invoked)

JavaScript Code:

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2); // Will return 20

Enter fullscreen mode Exit fullscreen mode

Function Return

The function will cease operating when it reaches a return statement in JavaScript. If the function was called from a statement, JavaScript will "return" and run the code after the invoking statement has finished. Return values are frequently computed by functions. The "caller" gets the return value "returned."

JavaScript Code:

var x = myFunction(9, 3); // Function is called, return value will end up in x

function myFunction(a, b) {
  return a + b; // Function returns the product of a and b
}

Enter fullscreen mode Exit fullscreen mode

You're using a function to calculate the addition of two numbers and then returning the resul

Why Functions?

The following code can be reused: Once you've defined the code, you can reuse it. The same code can be run multiple times with various arguments to generate different outcomes.

JavaScript Code:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}
document.getElementById('demo').innerHTML = toCelsius(77);

Enter fullscreen mode Exit fullscreen mode

Conversation of Fahrenheit to Celsius.

The () Operator Invokes the Function

toCelsius refers to the function object in the example above, and toCelsius() refers to the function result. When you call a function without (), the function object is returned instead of the function result.

JavaScript Code:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}
document.getElementById('demo').innerHTML = toCelsius;

Enter fullscreen mode Exit fullscreen mode

Functions can be used in formulas, assignments, and calculations in the same way that variables can

JavaScript Code:

var text = 'The temperature is ' + toCelsius(77) + ' Celsius';

Enter fullscreen mode Exit fullscreen mode

Local Variables

Variables declared within a JavaScript function are LOCAL to it. Only within the function can you access local variables. Variables with the same name can be used in multiple functions because local variables are only recognized within their routines. When a function is started, local variables are generated, and when the function is finished, they are destroyed.

JavaScript Code:

// code here can NOT use fruit

function myFunction() {
  var fruit = 'mango';
  // code here CAN use fruit
}

// code here can NOT use fruit

Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Resources

You may find the following resources useful:

Discussion (0)