Tutorial: Javascript Functions
Tags: javascript, webdev, programming, codenewbie
Published: 2022-01-28 07:42:18

---
title: Tutorial: Javascript Functions
published: true
date: 2021-01-10 01:16:04 UTC
tags: [javascript, webdev, programming, codenewbie]
canonical_url: https://www.devwares.com/blog//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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
// code here can NOT use fruit

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

// code here can NOT use fruit

```


[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)



## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [Tutorial: Javascript Loop](https://www.devwares.com/blog/javascript-for-loop)
- [Tutorial: Javascript String Methods](https://www.devwares.com/blog/javascript-string-methods)
- [Tutorial: Javascript Data Type](https://www.devwares.com/blog/javascript-data-type)
- [Tutorial: Javascript Control Flow](https://www.devwares.com/blog/javascript-control-flow)


- [Contrast Installation](https://www.devwares.com/docs/contrast/react/Installation/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Navbar](https://www.devwares.com/docs/contrast/react/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/react/navigation/pagination/)
- [Sidebar](https://www.devwares.com/docs/contrast/react/navigation/sidebar/)
- [Tab](https://www.devwares.com/docs/contrast/react/navigation/tabs/)
- [Date Picker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [Time Picker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [Editable Table](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [Data Table](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets]
(https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms]
(https://www.devwares.com/docs/contrast/react/forms/)