Javascript - Functions

About

Functions functionalities in Javascript.

A function in Javascript is a variable that’s given a reference to the function being declared. The function itself is a value (as an integer or an array) that contains an expression.

JavaScript functions are first-class objects.

Every function is an object: a Function object and retains then its state.

Functions are a subtype of objects — typeof returns “function”, which implies that a function is a main type — and can thus have properties,

Variables and functions defined within a function may only be accessed inside that context. They are private.

Functions in Javascript fulfill multiple distinct features:

  • procedures,
  • constructors,
  • classes
  • and modules.

functions, methods, and class constructors are just three different usage patterns of function.

Syntax

Parentheses are used to execute a function. All constructs of the below form are then functions.

functionName(arg1,...argN)

You can (initialize|declare) a function through 3 constructs:

  • The function declaration. The standard function declaration. This function is added to the global context. It's execution can be called before its definition.
  • The function expression is a text that can be assigned to a variable and executed afterward. The function is not added to the global context and can therefore not be called from everywhere.
  • The function constructor. You can create dynamically a function with a Function with a text as parameter.

Declaration

A Javascript - Function Declaration is a fix function declaration.

function add(a,b) {
     return a+b;
};

Expression

A Function Expression is just a function expression stored in a variable.

var add = function myOptionalName(x, y) {
   return x + y;
};
 
console.log(add(2,3))

Constructor

See Javascript - Function Constructor (Dynamic Coding)

new Function ([arg1[, arg2[, ...argN]],] functionBody)

Arrow Expression

An arrow function expression has a shorter syntax than a function expression and does not bind a lot of environment element (this, …).

var area = (r) => Math.PI * r ** 2;
var rayon = 3;
console.log("The area of a circle with the rayon "+rayon+" is "+area(rayon));

Immediately invoked function expression (IIFE)

An IIFE is often used to create a scope in order to declare variables that won’t affect the surrounding code outside of it.

(function IIFE(){
    var foo = "IFFE variable";
    // this is set to the top browser scope
    this.window.bar = "bar IFFE variable";
    console.log( "Hello!" ); 
})(); // "Hello!"

// foo is not defined in the global scope
if (typeof foo == 'undefined') {
   console.log("foo is undefined");
}

if (typeof window.bar == 'undefined') {
   console.log("bar is undefined");
} else {
   console.log("window.bar is defined with the value ("+window.bar+")");
}

Management

Signature / Argument

Position

// ECMAScript 2015 allows default parameters in the signature
foo = function (a='default',b='default'){ 
   console.log('a has the value '+a);
   console.log('b has the value '+b);
};
console.log('Passing values:');
foo('A','B');
console.log('\nWith Default values:');
foo();

Name

JavaScript does not have native support for named parameters

Argument

Static / Lexical
foo = function (first, second){ 
  console.log('There is two arguments: '+first+' and '+second);
};

foo('B','A');
Dynamic Argument
foo = function (){ 
   for (i = 0; i < arguments.length; i++) {
        console.log('Argument '+i+' has the value '+arguments[i]);
    }
};

foo('B','A');

Scope

Variables

A function can refer to any variables in its scope, including the parameters and variables of outer functions (ie outer scope).

Block-local

A block local function is inside a define inside local blocks or substatements (such as if then else).

JavaScript implementations report them as an error in strict mode. Block local function must be avoid> Most of the function must be put at the outermost level of its parent function. Until ES5, the standard did not even acknowledge the existence of block-local function declarations.

Example: The result could be “local” :(

var fs = [];

function f() { return "global"; }

if (false) {
        function f() { return "local"; } // block-local
        fs.push(f());
}
fs.push(f());
console.log(fs);

Return

The return statement return the result variable out of the function so it is available to use.

This is necessary because variables defined inside functions are only available inside those functions. See execution context

Object

A Function is an object that inherit its methods from Function.prototype.

Javascript Function Method

where:

  • apply(): Calls a function and sets its this to the provided value, arguments can be passed as an Array object.
  • bind(): Creates a new function which, when called, has its this set to the provided value, with a given sequence of arguments preceding any provided when the new function was called. See Javascript - bind method
  • call(): Calls (executes) a function and sets its this to the provided value, arguments can be passed as they are. See Javascript - Call method
  • caller: Specifies the function that invoked the currently executing function.
  • isGenerator(): Returns true if the function is a generator; otherwise returns false
  • length: Specifies the number of arguments expected by the function.
  • toLocaleString returns the result of calling toString().
  • toSource(): Returns a string representing the source code of the function.
  • toString(): Returns a string representing the source code of the function.
  • name: The name of the function.

State

A function is an object that creates a context and retains its state. See Javascript - Closure

function makeCounter() {
  
  var i = 0;

  return function() {
    console.log( ++i );
  };
  
}

var counter = makeCounter();
counter();
counter();
counter();
counter();

Argument

Test if an argument was defined with undefined

if (typeof sec === 'undefined') sec = 2000;

List

You can list all the function by inspecting the window object. See Javascript - (Firefox) Scratchpad

Type

You can use the Javascript - Type operator to test if a property is a function.

Example:

var element = document.querySelector("body");

if (typeof element.childElementCount !== 'function') {
    console.log("element.childElementCount is a function")
} else {
    console.log("element.childElementCount is not a function")
}

Typescript: How to test that a variable is a function?

To avoid TS2349: This expression is not callable, you can test your variable with the following expression.

initialState instanceof Function ? initialState() : initialState;

Documentation / Reference





Discover More
Card Puncher Data Processing
D3 - Getting Started

Whether you’re building a static chart or a dynamic one with fluid transitions and object constancy, your code remains roughly the same. See also: The...
Card Puncher Data Processing
D3 - Selection

D3 adopts the W3C Selectors API to identify document elements for selection. Any number of operators can be applied to selected elements. These operators wrap the W3C DOM API, setting: attributes (attr),...
How to create a Debounce Function in Javascript?

A debounce is a function that: will wrap a callback function willnot let the callback function execute for each event will let the callback function execute only when a certain amount of time...
Javascript (Js|ECMAScript)

Javascript was born to run in the browser but may know with the advent of node run on the server side. See JavaScript is also known as: Mocha, LiveScript, JScript (Windows Implementation),...
Javascript Lexical Environment Scope Chaine
Javascript - (Variable) Scope (Namespace)

Variable scope in Javascript. variable scope is delimited by the function definition, not a the block level A block has the scope of its inner function. As a function is also an object, by generalization,...
Javascript - Apply

apply permits to call a function stored in a variable specifying: its execution context: this and its arguments eval A function that we will call with apply that: print the name property of...
Javascript - Arrow Function Expression

An arrow function expression has a shorter syntax than a function expression and does not bind its own: this, arguments, super, or new.target. These function expressions are best suited for...
Javascript - Boolean (Truthy|Falsy)

in Javascript. JavaScript defines a list of specific values that are considered “falsy” because when coerced to a boolean, they become false. Any other value not on the “falsy” list is automatically...
Chrome Dev Tool Source Debugger Scope
Javascript - Call method

Calls (executes) a function and sets its this to the provided value binded , arguments can be passed as they are. call(this)context (scope) Bind ECMA-262-3...
Javascript - Callback

This page is callbacks in Javascript. It is the primary method of enabling asynchrony. With argument, you are not passing the function but the return value of the function. You need then to wrap...



Share this page:
Follow us:
Task Runner