In ECMAScript, functions are objects. Each function is an instance of the Function type, having properties and methods like other reference types. Since functions are considered objects, their names act as pointers to function objects and aren't strictly tied to the function itself.
Functions are commonly defined using the function-declaration syntax, as demonstrated in this example:
function add(a, b) {
return a + b;
}
In this code, a variable add is defined and initialized to be a function. Notice that there's no semicolon (;) at the end. In JavaScript, when you define functions using this syntax, you don't need a semicolon after the closing brace.
To define a function, you can use the function expression syntax, which is almost a complete equivalent to the function-declaration syntax:
let add = function(a, b) {
return a + b;
};
Note that there is a semicolon (;) after the end of the function.
Another way to define a function that is quite similar to a function expression is to use the "arrow" function syntax, like this:
let add = (a, b) => {
return a + b;
};
To demonstrate that functions are objects and that the function name serves as a pointer to the object, there's another way to define a function:
// not recommended
let add = new Function("a", "b", "return a + b");
The Function constructor can take any number of arguments. The final argument is always treated as the function body, and the preceding arguments define the parameters for the new function.
In ECMAScript 6, there's a new way to create function expressions using the fat-arrow syntax. Arrow functions mostly work the same as regular function expressions. You can use arrow functions anywhere you'd use a regular function expression:
let arrowMultiply = (x, y) => {
return x * y;
};
let functionExpressionMultiply = function(x, y) {
return x * y;
};
console.log(arrowMultiply(3, 4)); // 12
console.log(functionExpressionMultiply(3, 4)); // 12
Arrow functions are really handy when you want to write short and simple code, especially in inline situations:
let numbers = [1, 2, 3];
console.log(numbers.map(function(number) { return number * 2; })); // [2, 4, 6]
console.log(numbers.map((number) => { return number * 2 })); // [2, 4, 6]
Arrow functions don't need parentheses if you have just one parameter. But if you have zero or more than one parameter, you need to use parentheses:
// Both are valid
let doubleValue = (x) => { return 2 * x; };
let tripleValue = x => { return 3 * x; };
// Zero parameters require an empty pair of parentheses
let getRandomNumber = () => { return Math.random(); };
// Multiple parameters require parentheses
let calculateSum = (a, b) => { return a + b; };
// Invalid syntax:
let invalidMultiply = a, b => { return a * b; };
Arrow functions don't necessarily require curly braces, but choosing not to use them alters the behavior of the function. When you use curly braces, it's called "block body" syntax, and it works like a regular function expression. You can have multiple lines of code inside. If you skip the curly braces, it's the "concise body" syntax, and you're limited to just one line of code, like an assignment or expression. The value of this line will automatically be returned:
// Both are valid and will return the value
let doubleValue = (x) => { return 2 * x; };
let tripleValue = (x) => 3 * x;
// Assignment is allowed
let value = {};
let setName = (x) => x.name = "Karl";
setName(value);
console.log(value.name); // "Karl"
// Invalid syntax:
let invalidMultiply = (a, b) => return a * b;
While arrow functions are concise in syntax, they're not suitable for several situations. They don't support the use of arguments, super, or new.target, and they can't be used as constructors. Moreover, function objects created with the arrow syntax lack a defined prototype property.
Since function names are basically pointers to functions, they behave like any other variable holding a pointer to an object. This allows having multiple names for a single function. For instance:
function sum(a, b) {
return a + b;
}
console.log(sum(5, 10)); // 15
let anotherSum = sum;
console.log(anotherSum(5, 10)); // 15
sum = null;
console.log(anotherSum(5, 10)); // 15
This code creates a function called sum() that adds two numbers. A variable, anotherSum, is declared and assigned the value of sum. When we use the function name without parentheses, it refers to the function itself rather than executing it. At this stage, both anotherSum and sum point to the same function, so calling anotherSum() returns a result. When sum is set to null, it breaks its connection with the function. However, calling anotherSum() still works without any issues.
In ECMAScript, function arguments work differently compared to many other programming languages. When you define a function in ECMAScript, it doesn't care how many arguments you pass to it or what data types those arguments are. Even if you specify a function to take two arguments, you can actually pass in any number of arguments, including one, three, or none, without causing an issue for the interpreter.
This flexibility exists because in ECMAScript, arguments are internally represented as an array. This array is always sent to the function, but the function doesn't pay attention to the contents of the array. Whether the array is empty or has multiple items, the function will still work. When you define a function using the function keyword (not an arrow function), there is an arguments object available within the function. This arguments object behaves like an array, allowing you to access each argument using bracket notation (arguments[0] for the first argument, arguments[1] for the second, and so on) and determine the number of arguments passed in using the length property.
In the following example, the sayHello() function’s first argument is named name:
function sayHello(name, message) {
console.log("Hello " + name + ", " + message);
}
You can access the same value by using arguments[0]. This allows you to rewrite the function without explicitly naming the arguments, like this:
function sayHello() {
console.log("Hello " + arguments[0] + ", " + arguments[1]);
}
In this rewritten version, the specific names for the arguments have been taken out. Even without the names "name" and "message", the function will still work correctly. This shows that in ECMAScript, having named arguments is helpful but not mandatory.
You can also use the arguments object to count the number of arguments passed into the function using the length property. The next example shows how many arguments are passed into the function every time it is called:
function countArgs() {
console.log(arguments.length);
}
countArgs("apple", "banana", "orange"); // 3
countArgs(1, 2, 3, 4, 5); // 5
countArgs(true, false); // 2
If you don't pass a value for a named argument into a function, it will automatically be set as undefined. This is similar to creating a variable without giving it a value.
When you use the arrow function notation to define a function, you can't access the passed arguments using the arguments keyword; you can only access them by their specific names in the function definition.
For example:
function printNumber() {
console.log(arguments[0]);
}
printNumber(10); // Output: 10
let printValue = () => {
console.log(arguments[0]);
};
printValue(10); // Output: ReferenceError: arguments is not definedEven though the arguments keyword may not work in arrow functions, it's possible for the arguments to be accessible if they are provided from the scope of a surrounding function being called:
For example:
function printNumber() {
let printValue = () => {
console.log(arguments[0]);
};
printValue();
}
printNumber(10); // Output: 10In older versions of ECMAScript before 5.1, a popular way to set default parameter values was to check if a parameter was missing in the function call by verifying if it was undefined, and then assigning a value to the parameter if it was indeed undefined. For example:
function greetUser(userName) {
userName = (typeof userName !== 'undefined') ? userName : 'Guest';
return `Hello, ${userName}!`;
}
console.log(greetUser()); // 'Hello, Guest!'
console.log(greetUser('Alice')); // 'Hello, Alice!'In ECMAScript 6, there is no longer a need for the previous workaround, as it allows for defining default parameter values directly in the function signature using the = operator. The equivalent of the previous function using ES6 default parameters would be:
function greetUser(userName = 'Guest') {
return `Hello, ${userName}!`;
}
console.log(greetUser()); // 'Hello, Guest!'
console.log(greetUser('Alice')); // 'Hello, Alice!'
When you pass undefined as an argument, it is handled similarly to not passing any argument at all. This feature enables the use of multiple independent default variables. Here's an example using ES6 default parameters:
function createCharacter(characterName = 'Alice', role = 'Explorer') {
return `${characterName} the ${role}`;
}
console.log(createCharacter()); // 'Alice the Explorer'
console.log(createCharacter('Bob')); // 'Bob the Explorer'
console.log(createCharacter(undefined, 'Wizard')); // 'Alice the Wizard'
When using default parameters, the arguments object's value does not show the default value of a parameter, but rather the actual argument passed to the function. This aligns with the behavior in ES5 strict mode and is beneficial because it maintains the values as they were passed during the function invocation:
function greetUser(userName = 'Guest') {
return `Hello, ${arguments[0]}!`;
}
console.log(greetUser()); // 'Hello, undefined!'
console.log(greetUser('Alice')); // 'Hello, Alice!'
You can set default parameter values to be the result of a function call, not just fixed values or objects:
let colors = ['Red', 'Blue', 'Green'];
let index = 0;
function getNextColor() {
return colors[index++ % colors.length];
}
function paintHouse(houseNumber, color = getNextColor()) {
return `House ${houseNumber} is painted ${color}`;
}
console.log(paintHouse(1)); // House 1 is painted Red
console.log(paintHouse(2, 'Yellow')); // House 2 is painted Yellow
console.log(paintHouse(3)); // House 3 is painted Blue
console.log(paintHouse(4)); // House 4 is painted Green
The default parameter value is calculated only when the function is called, not when it's defined. The calculation for the default value only happens if the argument is missing.
Arrow functions can also use default parameters similarly, but if a default value is set, parentheses around a single argument become mandatory:
let greetUser = (userName = 'Guest') => `Hello, ${userName}!`;
console.log(greetUser()); // Hello, Guest!
Instead of passing an array as one argument to a function, it's often helpful to split the array into individual values and pass each value separately.
For example, if you have a function like this that sums all the values passed as arguments:
let values = [1, 2, 3, 4];
function getSum() {
let sum = 0;
for (let i = 0; i < arguments.length; ++i) {
sum += arguments[i];
}
return sum;
}
This function expects each argument to be a single number that will be added together to find the sum. To pass an array of values to this function, you can use the .apply() method to flatten the array into separate parameters:
console.log(getSum.apply(null, values)); // Output: 10
In ECMAScript 6, you can now do this more simply using the spread operator (...). When you apply the spread operator to an iterable object and pass it as a single argument to a function, it breaks down the object into individual arguments. This allows you to unpack an array directly into separate arguments within the function call. For example:
console.log(getSum(...values)); // 10
Since the array size is known, you can freely place other parameters before or after the spread operator, including additional spread operators:
console.log(getSum(-1, ...values)); // Output: 9
console.log(getSum(...values, 5)); // Output: 15
console.log(getSum(-1, ...values, 5)); // Output: 14
console.log(getSum(...values, ...[5, 6, 7])); // Output: 28
In these examples, you can see how you can mix the spread operator with other parameters to pass values efficiently to the function.
The spread operator is not recognized by the arguments object; it treats the spread values as individual pieces because that's how they are passed to the function:
let values = [1, 2, 3, 4];
function countArguments() {
console.log(arguments.length);
}
countArguments(-1, ...values); // Output: 5
countArguments(...values, 5); // Output: 5
countArguments(-1, ...values, 5); // Output: 6
countArguments(...values, ...[5, 6, 7]); // Output: 7
When defining a function, you can use the spread operator to combine variable-length parameters into a single array. This is similar to how the arguments object works, but with the spread operator, the parameters become part of a formal Array object:
function getTotal(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(getTotal(1, 2, 3)); // Output: 6
If there are named parameters before the rest parameter, the rest parameter will capture the remaining unnamed parameters as an array, or it will be an empty array if there are no remaining parameters. The rest parameter must always be the last formal parameter because it can vary in size.
Here's a simple example to illustrate this concept:
function printValues(first, second, ...rest) {
console.log("First:", first);
console.log("Second:", second);
console.log("Rest:", rest);
}
printValues(1, 2, 3, 4, 5);
// Output:
// First: 1
// Second: 2
// Rest: [3, 4, 5]
While arrow functions do not support the arguments object, they do support rest parameters, providing functionality that closely resembles arguments:
const sumValues = (...args) => {
return args.reduce((total, num) => total + num, 0);
};
console.log(sumValues(1, 2, 3, 4)); // Output: 10
As expected, using a rest parameter does not impact the arguments object — it will continue to reflect exactly what was passed to the function:
function exampleFunction(...args) {
console.log("Rest Parameter:", args);
console.log("Arguments Object:", arguments);
}
exampleFunction(1, 2, 3);
// Output:
// Rest Parameter: Array(3) [ 1, 2, 3 ]
// Arguments Object:Arguments { 0: 1, 1: 2, 2: 3, … }
Function declarations and function expressions are similar in many ways, but there is a crucial difference in how JavaScript engines handle them. Function declarations are loaded and available in the execution context before any code is executed, thanks to a process called function declaration hoisting. On the other hand, function expressions are not fully defined until the code execution reaches that line.
For example:
// Function Declaration - OK
console.log(multiplyNumbers(3, 5));
function multiplyNumbers(a, b) {
return a * b;
}
// Function Expression - Error
console.log(multiplyNumbers(3, 5));
let multiplyNumbers = function(a, b) {
return a * b;
};
In the first case, the function declaration works fine due to hoisting, while in the second case, using a function expression causes an error because the function isn't available until the line where it's defined is executed. This issue occurs regardless of using let or var.
Apart from this availability difference, function declarations and function expressions are essentially equivalent in functionality.
In ECMAScript, functions are like variables, so you can use them just like you would use variables. This allows you to pass a function as an argument to another function and even return a function as the result of another function. Consider the following function:
function applyOperation(operation, number) {
return operation(number);
}
This function takes two arguments. The first argument should be a function, and the second argument should be a value to pass to that function. You can pass any function in this way:
function squareNumber(x) {
return x * x;
}
let result1 = applyOperation(squareNumber, 5);
console.log(result1); // Output: 25
function greetPerson(personName) {
return "Hello, " + personName;
}
let result2 = applyOperation(greetPerson, "Alice");
console.log(result2); // Output: "Hello, Alice"
The applyOperation() function is generic, meaning it doesn't matter which function is passed as the first argument — the result will always come from executing the first argument. To pass a function pointer instead of executing the function, you should omit the parentheses. This way, the variables squareNumber and greetPerson are passed into applyOperation() without executing them.
Returning a function from a function is a useful capability. For example, if you have an array of objects and need to sort it based on a specific object property, you can create a comparison function dynamically. The sort() method of an array requires a comparison function that compares two values, but you may need to specify which property to sort by. This can be solved by creating a function that generates a comparison function based on a property name, as in the following example:
function createSortingFunction(property) {
return function(obj1, obj2) {
let value1 = obj1[property];
let value2 = obj2[property];
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
The syntax of this function may seem complex, but it's simply a function inside of a function, with the outer function returning the inner function. The property argument is accessible within the inner function and is used with bracket notation to access the property values for comparison. Once the property values are obtained, a straightforward comparison can be performed.
Here's an example of how this function can be used:
let people = [
{name: "Emma", age: 28},
{name: "David", age: 29}
];
people.sort(createSortingFunction("name"));
console.log(people[0].name); // Output: David
people.sort(createSortingFunction("age"));
console.log(people[0].name); // Output: Emma
In this code, an array named people is defined with two objects, each containing a name and an age property. By default, the sort() method would use toString() to sort the objects, which might not provide the desired order.
When createSortingFunction("name") is invoked, it generates a comparison function that sorts the objects based on the name property. Consequently, the first item in the sorted array will have the name "David".
On the other hand, calling createSortingFunction("age") creates a comparison function that sorts the objects based on the age property. This results in the first item being the one with the name "Emma" and an age of 28.
Inside a function in JavaScript, there are several special objects that provide additional context and functionality within a function, allowing you to access arguments, refer to the function itself, and determine the calling context.
The arguments object is like an array that holds all the values passed into a function (Learn more). It's there when you define a function using the function keyword (not with arrow functions). Besides storing the function's arguments, it also has a property called callee (arguments.callee property is deprecated in modern JavaScript and should be avoided), which points back to the function itself. Let's look at a typical factorial function as an example:
function factorial(num) {
if (num <= 1) {
return 1;
} else {
return num * factorial(num - 1);
}
}
Factorial functions are usually recursive, like in this example. It works well when the function name is fixed as "factorial". However, the function's proper execution is closely tied to this specific name. To make it more flexible, you can use arguments.callee to decouple it from the function name:
function factorial(num) {
if (num <= 1) {
return 1;
} else {
return num * arguments.callee(num - 1);
}
}
In this updated version of the factorial() function, the function no longer directly references its own name "factorial" within the function body. This change guarantees that the recursive call will always be made to the correct function, regardless of how the function is named or referenced.
In strict mode, the value of arguments.callee is not accessible and attempting to read it will result in an error. To overcome this limitation, you can utilize named function expressions to achieve the same result. Here is an example:
const factorial = (function f(num) {
if (num <= 1) {
return 1;
} else {
return num * f(num - 1);
}
});
In this code, a named function expression f() is created and assigned to the variable factorial. The name f remains the same even if the function is assigned to another variable, so the recursive call will always execute correctly. This pattern works in both nonstrict mode and strict mode.
In JavaScript, the special object this works differently in standard functions and arrow functions.
In a standard function, this refers to the object the function is working with. When used globally, this points to the window object. Consider the following:
window.brand = 'Toyota';
let car = {
brand: 'Ford'
};
function displayBrand() {
console.log(this.brand);
}
displayBrand(); // 'Toyota'
car.displayBrand = displayBrand;
car.displayBrand(); // 'Ford'
When the function displayBrand() is called globally, it outputs "Toyota" because this points to the window object, and this.brand evaluates to window.brand. Once the displayBrand() function is assigned to the car object and called through car.displayBrand(), this now refers to the car object, and this.brand evaluates to car.brand, resulting in the output "Ford".
Inside an arrow function, this refers to the context in which the arrow function expression is defined. This concept is illustrated in the following example, where two separate invocations of displayBrand both access the property of the window object, which represents the context where the arrow function was originally defined.
window.brand = 'Toyota';
let car = {
brand: 'Ford'
};
let displayBrand = () => console.log(this.brand);
displayBrand(); // 'Toyota'
car.displayBrand = displayBrand;
car.displayBrand(); // 'Toyota'
This is especially useful in situations where events or timeouts will invoke a function inside a callback where the invoking object is not the intended object. When an arrow function is used in these situations, the context referenced by this is preserved:
function Emperor() {
this.royaltyName = 'Julius';
// 'this' will refer to the Emperor instance
setTimeout(() => console.log(this.royaltyName), 1000);
}
function Empress() {
this.royaltyName = 'Cleopatra';
// 'this' will refer to the window object
setTimeout(function() { console.log(this.royaltyName); }, 1000);
}
new Emperor(); // Output: 'Julius'
new Empress(); // Output: 'undefined'
The caller property holds a reference to the function that invoked the current function, or it is null if the function was called from the global scope:
function outer() {
inner();
}
function inner() {
console.log(inner.caller);
}
outer(); // will display the source text of the outer() function
This code displays an alert with the source text of the outer() function. This is because outer() calls inner(), and inner.caller refers back to outer().
In JavaScript, functions can act as constructors to create new objects or as regular callable functions. A new feature introduced in ECMAScript 6 is the new.target property, which allows you to determine if a function was invoked with the new keyword.
If a function is called normally, new.target will be undefined. However, if a function is called using the new keyword, new.target will reference the constructor or function itself.
This feature provides a way to differentiate between regular function calls and constructor calls in JavaScript:
function Emperor() {
if ( ! new.target) {
throw 'Emperor must be instantiated using "new"';
}
console.log('Emperor instantiated using "new"');
}
new Emperor(); // Output: Emperor instantiated using "new"
// Emperor(); // Throws an error: Emperor must be instantiated using "new"
In ECMAScript, functions are treated as objects, which means they have properties and methods. Every function in JavaScript has two key properties: length and prototype. The length property specifies the number of named arguments that the function expects, as illustrated in the following example:
function greetUser(user) {
console.log("Hello, " + user);
}
function calculateTotal(price, quantity) {
return price * quantity;
}
function sayHello() {
console.log("Hello there!");
}
console.log(greetUser.length); // Output: 1
console.log(calculateTotal.length); // Output: 2
console.log(sayHello.length); // Output: 0
In this code snippet, there are three functions defined, each with a different number of named arguments. The greetUser() function expects one argument, so its length property is set to 1. Similarly, the calculateTotal() function requires two arguments, resulting in a length property of 2. Lastly, the sayHello() function does not have any named arguments, leading to a length property value of 0.
The prototype property is a crucial aspect of the ECMAScript core. It serves as the actual storage location for all instance methods of reference types. This means that methods like toString() and valueOf() are stored on the prototype and accessed from object instances. The prototype property plays a significant role in defining custom reference types and implementing inheritance. In ECMAScript 5, the prototype property is non-enumerable, which means it won't be discovered using a for-in loop.
In JavaScript, functions have two useful methods: apply() and call(). These methods allow you to call a function while specifying a particular this value, essentially setting the context within the function.
The apply() method takes two arguments: the value of this inside the function and an array of arguments. The second argument can be an array or the arguments object itself. Consider the following:
function multiply(num1, num2) {
return num1 * num2;
}
function callMultiply1(num1, num2) {
return multiply.apply(this, arguments);
}
function callMultiply2(num1, num2) {
return multiply.apply(this, [num1, num2]);
}
console.log(callMultiply1(5, 5)); // Output: 25
console.log(callMultiply2(5, 5)); // Output: 25
In this example, callMultiply1() call the multiply() function, passing in this as the this value (which is equal to window because it’s being called in the global scope) and also passing in the arguments object. The callMultiply2() method also calls multiply(), but it passes in an array of the arguments instead. Both functions will execute and return the correct result.
The call() method functions similarly to apply(), but the way arguments are passed differs. In call(), the first argument is the this value, while the subsequent arguments are passed directly into the function. When using call(), arguments need to be explicitly listed, as shown in this example:
function multiply(num1, num2) {
return num1 * num2;
}
function callMultiply(num1, num2) {
return multiply.call(this, num1, num2);
}
console.log(callMultiply(5, 5)); // Output: 25
The callMultiply() method needs to explicitly list each of its arguments when using the call() method. The result is equivalent to using apply(). The choice between apply() and call() depends on the most convenient way for passing arguments into the function. If you plan to pass the arguments object directly or already have an array of data to pass in, then apply() is the preferred option. Otherwise, call() might be more suitable. If there are no arguments to pass in, these methods behave identically.
The real strength of apply() and call() lies in their capability to modify the this value within the function. Let's explore this concept with the following example:
window.brand = 'Toyota';
let car = {
brand: 'Ford'
};
function displayBrand() {
console.log(this.brand);
}
displayBrand(); // 'Toyota'
displayBrand.call(this); // 'Toyota'
displayBrand.call(window); // 'Toyota'
displayBrand.call(car); // 'Ford'
In this example displayBrand() is defined as a global function, and when it’s called in the global scope, it displays "Toyota" because this.brand evaluates to window.brand. You can then call the function explicitly in the global scope by using displayBrand.call(this) and displayBrand.call(window), which both display "Toyota". Running displayBrand.call(car) switches the context of the function such that this points to car, resulting in a display of "Ford".
ECMAScript 5 introduces a new method called bind(). The bind() method generates a new function instance where the this value is bound to the value provided to bind(). Here is an example:
window.brand = 'Toyota';
let car = {
brand: 'Ford'
};
function displayBrand() {
console.log(this.brand);
}
let boundDisplayBrand = displayBrand.bind(car);
boundDisplayBrand(); // 'Ford'
Here, a new function called boundDisplayBrand() is created from displayBrand() by calling bind() and passing in the object car. The boundDisplayBrand() function has a this value equivalent to car, so calling the function, even as a global call, results in the string "Ford" being displayed.
One of the more powerful, and often confusing, parts of JavaScript is function expressions. There are two primary ways to define a function: through function declaration and function expression. Function declaration takes the form:
function functionName(arg0, arg1, arg2) {
// function body
}
One of the key characteristics of function declarations is function declaration hoisting, a behavior where function declarations are read before the code executes. This allows a function declaration to be placed after the code that calls it and still function correctly:
sayHello();
function sayHello() {
console.log("Hello!");
}
This example doesn’t throw an error because of function declaration hoisting. The function declaration is processed first before the code execution begins, allowing the function to be called successfully even though it appears after the call in the code.
Another method to create a function in JavaScript is through a function expression. Function expressions come in various forms, with the most common being:
let functionName = function(arg0, arg1, arg2) {
// function body
};
This pattern of function expression looks like a normal variable assignment. A function is created and assigned to the variable functionName. The created function is considered to be an anonymous function, because it has no identifier after the function keyword. (Anonymous functions are also sometimes called lambda functions.) This means the name property is the empty string.
Function expressions behave like other expressions in JavaScript and must be assigned before they are used:
sayHello(); // Error! function doesn't exist yet
function sayHello() {
console.log("Hello!");
}Understanding function hoisting is key to understanding the differences between function declarations and function expressions. For instance, the result of the following code may be surprising:
// Never do this!
if (condition) {
function greet() {
greeting = 'Hello!';
}
} else {
function greet() {
greeting = 'Hi!';
}
}
The code appears to suggest using one definition for greet() if a condition is true, and another definition if false. However, this is not valid syntax in ECMAScript. JavaScript engines attempt to error-correct, but browsers may not consistently handle this situation. Most browsers return the second declaration regardless of the condition, while Firefox returns the first if the condition is true. This approach is unreliable and should be avoided. Instead, it is acceptable to use function expressions in a conditional manner:
// OK
let greet;
if (condition) {
greet = function() {
console.log("Hello!");
};
} else {
greet = function() {
console.log("Hi!");
};
}
This example behaves the way you would expect, assigning the correct function expression to the variable greet based on condition.
The ability to create functions for assignment to variables also allows you to return functions as the value of other functions:
function createSortingFunction(property) {
return function(obj1, obj2) {
let value1 = obj1[property];
let value2 = obj2[property];
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
createSortingFunction() returns an anonymous function. The returned function will, presumably, be either assigned to a variable or otherwise called, but within createSortingFunction() it is anonymous. Any time a function is being used as a value, it is a function expression.
A closure in JavaScript is a function that has access to variables from an outer scope, even after the outer function has finished executing. Closures allow functions to retain access to variables from their parent scope even after the parent function has completed its execution.
Here is an example of a closure in JavaScript:
function outerFunction() {
let outerVariable = 'I am from the outer function';
function innerFunction() {
console.log(outerVariable); // The inner function has access to outerVariable from the outer function
}
return innerFunction;
}
let closureExample = outerFunction();
closureExample(); // Outputs: "I am from the outer function"
In this example, innerFunction is a closure because it retains access to the variable outerVariable from the outer function outerFunction, even after outerFunction has finished executing.
Using this in JavaScript closures can be challenging due to the dynamic nature of this. Unlike variables, which are lexically scoped, this is determined at runtime based on the context in which a function is called. This dynamic binding means that the value of this can change depending on how a function is invoked, leading to potential confusion when using this inside closures.
One common issue arises when this inside a closure does not refer to the expected object. Instead, it can refer to the global object (in non-strict mode) or be undefined (in strict mode). To address this, developers have devised several strategies.
One popular approach is to save the value of this in a variable before entering the closure. This variable, often named self or that, ensures the correct reference is maintained. For instance, consider the following example:
function outerFunction() {
let self = this; // Save the context
function innerFunction() {
console.log(self); // Use the saved context
}
return innerFunction;
}
let obj = { outerFunction: outerFunction };
let closureExample = obj.outerFunction();
closureExample(); // Outputs: { outerFunction: [Function: outerFunction] }
In this example, outerFunction saves this as self before defining innerFunction. When innerFunction is called later, it accesses self, which holds the correct reference to obj.
Another elegant solution involves using arrow functions. Arrow functions do not have their own this binding; instead, they inherit this from the enclosing lexical context. This feature makes arrow functions particularly useful for preserving this in closures. Here’s an example:
function outerFunction() {
this.outerVariable = 'I am from the outer function';
const innerFunction = () => {
console.log(this.outerVariable); // Arrow function uses `this` from outerFunction
};
return innerFunction;
}
let obj = new outerFunction();
let closureExample = obj;
closureExample(); // Outputs: "I am from the outer function"
In this scenario, innerFunction is defined as an arrow function within outerFunction. The arrow function automatically uses the this value from outerFunction, ensuring the correct reference is maintained.
A third method involves using Function.prototype.bind to manually set the value of this when the closure is created. By binding this to the desired context, you ensure that this within the closure refers to the correct object, regardless of how the function is later invoked. For example:
function outerFunction() {
this.outerVariable = 'I am from the outer function';
function innerFunction() {
console.log(this.outerVariable);
}
return innerFunction.bind(this); // Bind `this` to outerFunction's `this`
}
let obj = new outerFunction();
let closureExample = obj;
closureExample(); // Outputs: "I am from the outer function"
In this case, innerFunction is explicitly bound to the this value of outerFunction using bind. This ensures that when innerFunction is called, it accesses the correct this context.
Understanding these strategies is essential for effectively working with this in closures, ensuring that your code behaves as intended.
Closures in JavaScript can sometimes lead to memory issues because they retain references to their enclosing scope. This means that variables from the outer function are kept in memory as long as the closure exists, even if the outer function has finished executing. This can cause increased memory usage, particularly in long-running applications or those that create many closures.
For example:
function createClosure() {
let largeArray = new Array(1000000).fill('Some data'); // Large object
return function() {
console.log(largeArray[0]); // Closure retains reference to largeArray
};
}
let closure = createClosure();
Even after createClosure() finishes, largeArray is not garbage collected because the closure holds a reference to it.
If a function repeatedly creates closures and these closures are not needed or properly managed, they can accumulate and consume memory unnecessarily. For instance:
let closures = [];
for (let i = 0; i < 1000; i++) {
closures.push(function() {
console.log(i);
});
}
The closures array holds references to 1000 closures, each with its own lexical environment.
To avoid memory issues related to closures, consider the following strategies:
Avoid Unnecessary Closures: Only create closures when necessary. Avoid using closures for simple tasks that do not require preserving the lexical scope.
Nullify References When Possible: If a closure is no longer needed, explicitly nullify references to it so that the garbage collector can reclaim the memory. Here’s an example:
function createClosure() {
let largeArray = new Array(1000000).fill('Some data'); // Large object
function closure() {
console.log(largeArray[0]); // Closure retains reference to largeArray
}
function cleanup() {
largeArray = null; // Nullify the reference when done
}
return { closure, cleanup };
}
let { closure, cleanup } = createClosure();
closure(); // Outputs: "Some data"
// When done with closure, call cleanup to free memory
cleanup();
In this approach, the createClosure function returns an object containing both the closure and a cleanup function. You use the closure as needed, and when you are finished with it, you call cleanup to nullify the reference to largeArray, ensuring that memory can be reclaimed. This way, you avoid memory leaks while still allowing the closure to function correctly until it is no longer needed.
Use Weak References: In cases where you need to hold references to closures but want to allow them to be garbage collected when no longer needed, consider using weak references if your environment supports them (e.g., WeakMap (MDN web docs)):
let weakMap = new WeakMap();
function createClosure() {
let largeArray = new Array(1000000).fill('Some data'); // Large object
let closure = function() {
console.log(largeArray[0]); // Closure retains reference to largeArray
};
// Use weak reference to hold largeArray
weakMap.set(closure, largeArray);
return closure;
}
// Usage example
let closure = createClosure();
closure(); // Outputs: "Some data"
WeakMap allows you to associate closure with largeArray weakly, meaning that if closure is the only remaining reference to largeArray, both can be garbage collected.
An anonymous function that is called immediately is called an Immediately Invoked Function Expression (IIFE). It looks like a regular function declaration, but since it’s wrapped in parentheses, it’s treated as a function expression. The function is then immediately called using another set of parentheses at the end. The basic syntax looks like this:
(function() {
// block code here
})();
Using an Immediately Invoked Function Expression (IIFE) can create a scope similar to block scope by defining and executing a function immediately. This is particularly useful in older versions of JavaScript (before ECMAScript 6) where block-scoped variables were not available. Here's an example:
// IIFE
(function () {
var secret = 'hidden message';
console.log(secret); // Outputs: 'hidden message'
})();
console.log(secret); // Throws an error
In this example, the variable secret is defined inside the IIFE and is not accessible outside of it. When console.log(secret) is called outside the IIFE, it results in an error because secret is not defined in that scope. This technique was especially useful to prevent variable bleed in ECMAScript 5.1 and earlier versions, and it also helps to avoid memory issues related to closures by ensuring the scope chain is destroyed immediately after the function completes.
With ECMAScript 6, you don't need to use an IIFE to create block scope, because block-scoped variables (let and const) provide the same functionality:
{
const secret = 'hidden message';
console.log(secret); // Outputs: 'hidden message'
}
console.log(secret); // Throws an error
Strictly speaking, JavaScript has no concept of private members; all object properties are public. There is, however, a concept of private variables. Any variable defined inside a function or block is private because it can't be accessed from outside that function. This includes function arguments, local variables, and inner functions. For example, in the function below:
function multiply(num1, num2) {
let mul = num1 * num2;
return mul;
}The variables num1, num2, and mul are private. They can be accessed within the function but not outside of it. If a closure is created within this function, it can access these private variables through its scope chain. This allows you to create public methods that can interact with private variables.
A privileged method is a public method that can access private variables and functions. One way to create privileged methods is by defining them inside a constructor function. Here’s a simple example:
function MyObject() {
// Private variables and functions
let privateVariable = 10;
function privateFunction() {
return false;
}
// Privileged method
this.publicMethod = function() {
privateVariable++;
return privateFunction();
};
}
This pattern defines all private variables and functions inside the constructor. Then privileged methods can be created to access those private members. This works because the privileged methods, when defined in the constructor, become closures with full access to all variables and functions defined inside the constructor’s scope. In the example, the variable privateVariable and the function privateFunction can only be accessed by publicMethod(). Once an instance of MyObject is created, privateVariable and privateFunction can't be accessed directly; they can only be accessed through publicMethod().
You can create private and privileged members to protect data from being directly modified, like in this example:
function Car(make) {
// Private variable
let carMake = make;
// Privileged methods
this.getMake = function() {
return carMake;
};
this.setMake = function(value) {
carMake = value;
};
}
let myCar = new Car('Toyota');
console.log(myCar.getMake()); // Outputs: 'Toyota'
myCar.setMake('Honda');
console.log(myCar.getMake()); // Outputs: 'Honda'
In this example, carMake is a private variable. The methods getMake and setMake are privileged methods that allow access to the private variable carMake. This ensures that the carMake variable can only be accessed and modified through these methods, providing controlled access to the private data.