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
}

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

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
}

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);

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;

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';

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.