Javascript Functions

functions allow

• to store a piece of code that does a single task inside a defined block
• call that code whenever required using a single short command — rather than having to type out the same code multiple times

Functions can be user-defined or among built-in browser functions

Built-in browser functions

Example

var aText = 'stringular';
var newText = aText.replace('stri', 'si');
console.log(newText);
// string replace() function takes a string,
// replaces one substring with another, and returns the updated string

Generating a random number:

var myNumber = Math.random();
// the random() function returns a random number between 0 and 1 

JavaScript language has a number of built-in functions

Some built-in browser functions are not part of core JavaScript language — some are defined as part of browser APIs, which build on top of default language to provide more functionality

Custom functions

custom functions are functions defined by a user, and not inside a browser

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

This function draws 100 random circles inside an <canvas> element after clearing its content, each time it is invoked

draw();

This allows to replace repetitive code

Functions can contain any code as desired including calling other functions from inside functions

Invoking functions

To use(or execute) a function after it has been defined, the name of the function in written followed by parentheses

function alerter() {
  alert('mozello');
}
// calls the function once
alerter()

Anonymous functions

An anonymous function is a function that doesn't have a name:

function() {
  alert('mozello');
}

An anonymous function is typically used along with an event handler :

var myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

Above example assigns an onclick handler to a <button> element

An anonymous function can also be assigned as the value of a variable, for example:

var alerter = function() {
  alert('mozello');
}

This function can now be invoked using:

alerter();

Function parameters

Some functions require parameters to be specified when invoked

Parameters are values which are provided to a function by including inside the function parentheses, and can affect its functionality

• Parameters are sometimes called arguments, properties, or even attributes

• A browser's built-in Math.random() function doesn't require any parameters and returns a random number between 0 and 1

  var randomNumber = Math.random();

• The browser's built-in string replace() function however requires two parameters — the substring to find in the main string, and the substring to replace that string with:

  var aText = 'stringular';
  var newText = aText.replace('stri', 'si');

• Multiple parameters are separated by commas

• Sometimes parameters are optional and doesn't have to be specified, which is based on how the function is implemented

Function scope

Scope is an important concept when dealing with functions

Variables and other things defined inside a function are inside their own separate scope

This causes them to be inaccessible from inside other functions or from code outside the functions

The top level outside all functions is called the global scope

Values defined in the global scope are accessible from any other scope

This is to facilitate security and organization, and also allows same variable name to hold different values inside and outside of functions

What are return values?

Return values are values returned by a function when it completes

var aText = 'stringular';
var newText = aText.replace('stri', 'si');
console.log(newText);
// string replace() function takes a string,
// replaces one substring with another, and returns the updated string

In the code above, return value is saved as the value of the newText variable

Javascript functions typically return undefined by default

Generally, a return value is used where the function is an intermediate step

Using return values in custom functions

To return a value from a custom function, return keyword is used

function square(x) {
	return x * x;
}

Above example returns squared value of input number