JavaScript Functions

A JavaScript function is a block of code designed to perform a specific task. It is defined with the keyword function, followed by its name and parentheses (). The function name can contain letters, numbers, underscores and the $ sign (same rules as for variables). Parameters, separated by commas, are specified in the parentheses. Functions can return values with the return statement, accept other functions as arguments (callbacks) or be stored in variables (function expressions). ES6 also introduced arrow functions (=>), which allow shorter syntax.

Types of Functions in JavaScript

Functions in JavaScript can be defined in several ways: as a declaration, expression or arrow function. Each type has its own characteristics regarding hoisting, this binding and syntax.

An arrow function (arrow function) is a modern, shorter syntax for writing functions introduced in ES6 (ECMAScript 2015). Why is it called "arrow"? Because it uses an arrow => instead of the keyword function.

Main differences:

1. Shorter syntax:
   1. Classic: function(x) { return x * x; }
   2. Arrow: (x) => x * x; (if it has only one line, return and parentheses for the body are automatic).
2. this behavior: (This is the most important!)
   1. Classic function: Has its own this, which changes depending on how you call it (e.g., as an object method or as a standalone function).
   2. Arrow function: DOES NOT HAVE its own this. It inherits this from the environment where it is defined (lexical scoping). This is great for callback functions (e.g., in map, filter), where you don't want this to change.

Function Methods and Properties

Functions in JavaScript are objects, so they have properties (e.g., length, name) and methods (e.g., call(), apply(), bind()) that enable advanced usage.

Complete Functions Overview (Cheat Sheet)

The table below shows all ways to define functions, parameters, properties and methods. For each element, the description, syntax and concrete code example are provided.

Name	Description	Syntax	Example
Function Declaration	Classic function definition (hoisted).	function name(parameters) { ... }	function greet(name) { return "Hello, " + name; }
Function Expression	Function stored in a variable (not hoisted).	let name = function(parameters) { ... };	let sum = function(a, b) { return a + b; };
Arrow Function	Shorter syntax (ES6), does not bind its own this.	let name = (parameters) => expression;	let square = (x) => x * x;
Arrow (multiple lines)	Arrow function with code block and return.	let name = (parameters) => { ... return ...; };	let sum = (a, b) => { let r = a + b; return r; };
Anonymous Function	Function without a name (common as callback).	function(parameters) { ... }	setTimeout(function() { alert("Done!"); }, 1000);
IIFE	Immediately Invoked Function Expression.	(function() { ... })();	(function() { let x = 10; console.log(x); })();
Parameters	Values that the function receives when called.	function name(param1, param2) { ... }	function sum(a, b) { return a + b; }
Default Values	Value if argument is not provided (ES6).	function name(param = value) { ... }	function greet(name = "World") { return "Hello, " + name; }
Rest Parameters	Collects remaining arguments into an array (ES6).	function name(...args) { ... }	function sum(...numbers) { return numbers.reduce((a,b) => a+b); }
arguments object	Old way to access all arguments (not a real array).	arguments[i]	function all() { return arguments[0]; }
return	Returns a value and ends the function.	return value;	function square(x) { return x * x; }
Without return	Function returns undefined.	function name() { ... }	function greet() { console.log("Hello"); } // returns undefined
length	Returns the number of expected parameters.	function.length	function sum(a, b) {} sum.length; // 2
name	Returns the function name as a string.	function.name	function greet() {} greet.name; // "greet"
prototype	Allows adding properties if the function is used as a constructor.	function.prototype	Person.prototype.year = 2024;
constructor	Returns the function that created the prototype.	function.constructor	greet.constructor; // function Function() { ... }
call()	Calls the function with a specific this and individual arguments.	function.call(thisArg, arg1, arg2)	greet.call(person, "Ana");
apply()	Calls the function with a specific this and array of arguments.	function.apply(thisArg, [arg1, arg2])	greet.apply(person, ["Ana"]);
bind()	Returns a new function with bound this (does not call it).	function.bind(thisArg, arg1)	let bound = greet.bind(person); bound("Ana");
toString()	Returns the source code of the function as a string.	function.toString()	greet.toString(); // "function greet() { ... }"
Closure	Function remembers variables from outer scope.	function outer() { let x = 10; return function() { return x; }; }	function counter() { let i = 0; return () => ++i; } let c = counter(); c(); // 1
Callback	Function passed as an argument to another function.	function(callback)	arr.forEach(function(el) { console.log(el); });
Recursion	Function calls itself.	function name() { ... name(); }	function fact(n) { return n <= 1 ? 1 : n * fact(n-1); }

Why Use Functions?

Do I always have to use return?	No. If a function does not return a value, it returns undefined by default.
What is an "anonymous function"?	A function without a name, e.g., function(a,b){ return a+b; }. Often used as an argument to other functions.
How do I convert a function to a variable?	Simply assign it: let sq = function(x){ return x*x; };