Tutorial: Javascript Functions


By Emmanuel Chinonso

Web Developer

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

Contrast Bootstrap UI Kit

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:

1function myFunction(p1, p2) {
2 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:

1function myFunction(a, b) {
2 return a * b;
4myFunction(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:

1var x = myFunction(9, 3); // Function is called, return value will end up in x
3function myFunction(a, b) {
4 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:

1function toCelsius(fahrenheit) {
2 return (5 / 9) * (fahrenheit - 32);
4document.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:

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

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

JavaScript Code:

1var 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:

1// code here can NOT use fruit
3function myFunction() {
4 var fruit = 'mango';
5 // code here CAN use fruit
8// code here can NOT use fruit

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro


Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts