Tutorials References Menu

JS Reference

JS by Category JS by Alphabet

JavaScript

JS Array JS Boolean JS Classes JS Date JS Error JS Global JS JSON JS Math JS Number JS Operators JS RegExp JS Statements JS String

HTML DOM

DOM Attributes DOM Document DOM Element DOM Events DOM Event Objects DOM HTMLCollection DOM Location DOM Navigator DOM Screen DOM Style
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex
DOM Window

Web APIs

API Console API Geolocation API History API Storage

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other References

CSSStyleDeclaration JS Conversion


JavaScript function Statement


Example

Declare a function and output "Hello World" in an element with id="demo", when the function is called:

function myFunction() { // Declare a function
  document.getElementById("demo").innerHTML = "Hello World!";
}
 
myFunction(); // Call the function
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The function statement declares a function.

A declared function is "saved for later use", and will be executed later, when it is invoked (called).

In JavaScript, functions are objects, and they have both properties and methods.

A function can also be defined using an expression (See Function Definitions).

Read our JavaScript Tutorial to learn all you need to know about functions. Start with the introduction chapter about JavaScript Functions and JavaScript Scope. For more detailed information, see our Function Section on Function Definitions, Parameters, Invocation and Closures.

Tip: Use the return statement to return a value from the function.


Browser Support

Statement
function Yes Yes Yes Yes Yes

Syntax

function functionName(parameters) {
  code to be executed
}

Parameter Values

Parameter Description
functionName Required. Specifies the name of the function, which can be "saved for later use". Function names can contain letters, digits, underscores, and dollar signs (same rules as variables)
parameters Optional. Specifies a set of zero or more parameter names, separated by commas.

Function parameters are the names listed in the function definition.

Function arguments are the real values received by the function when it is invoked. Inside the function, the arguments are used as local variables.

Note: If a function is called with a missing argument, the value of the missing argument is set to undefined


Technical Details

JavaScript Version: ECMAScript 1

More Examples

Example

Return the value of PI:

function myFunction() {
  return Math.PI;
}
Try it Yourself »

Example

Return the product of a and b:

function myFunction(a, b) {
  return a * b;
}
Try it Yourself »

Example

With functions, you can use the same code many times with different arguments, to produce different results.

Convert Fahrenheit to Celsius:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
Try it Yourself »

Example

Functions can be used as variables.

Instead of:

temp = toCelsius(32);
text = "The temperature is " + temp + " Centigrade";

You can use:

text = "The temperature is " + toCelsius(32) + " Centigrade";
Try it Yourself »

Example

JavaScript functions have a built-in object called the arguments object.

The arguments.length property returns the number of arguments received when the function was invoked:

function myFunction(a, b) {
  return arguments.length;
}
Try it Yourself »

Example

Click on a button to call a function, which will output "Hello World" in an element with id="demo":

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
Try it Yourself »

Example

A JavaScript function can also be defined using an expression.

A function expression can be stored in a variable:

var x = function (a, b) {return a * b};
Try it Yourself »

Example

After a function expression has been stored in a variable, the variable can be used as a function:

var x = function (a, b) {return a * b};
var z = x(4, 3);
Try it Yourself »

Related Pages

JavaScript Tutorial: JavaScript Functions

JavaScript Tutorial: JavaScript Scope

JavaScript Tutorial: JavaScript Function Definitions

JavaScript Tutorial: JavaScript Function Parameters

JavaScript Tutorial: JavaScript Function Invocation

JavaScript Tutorial: JavaScript Function Closures

JavaScript Reference: JavaScript return Statement