Study JavaScript #1 – JavaScript Functions

by

1. Function Literals

In JavaScript, functions are treated as first-class objects, meaning they can be assigned to variables, passed as arguments, and returned from other functions. Just like object literals, JavaScript allows the creation of function literals.

Example:
JavaScript
function add(x, y) {
    return x + y;
}
Key Features:
  1. function Keyword: Function literals begin with the function keyword.
  2. Function Name: The function name is optional. When a function has no name, it is called an anonymous function. Named functions are useful for recursion and debugging.
  3. Parameter List: JavaScript functions accept parameters similar to other programming languages, but without explicit type definitions.
  4. Function Body: The block of code executed when the function is called.

2. Function Declaration

A function can be defined using the function declaration syntax. Unlike function literals, functions defined this way must have a name.

Example:
JavaScript
function add(x, y) {
    return x + y;
}

console.log(add(3, 4)); // Output: 7

Functions declared using this syntax are automatically hoisted, meaning they can be called even before their definition appears in the code.

3. Function Expressions

Because functions are treated as values in JavaScript, they can be assigned to variables. This is known as a function expression.

Example:
JavaScript
var add = function (x, y) { // Anonymous function expression
    return x + y;
};

var add2 = function sum(x, y) { // Named function expression
    return x + y;
};

console.log(add(3, 4));  // Output: 7
console.log(add2(3, 4)); // Output: 7
console.log(sum(3, 4));  // ReferenceError: sum is not defined
Key Differences:
  • Anonymous Function Expressions: The function has no name and is assigned directly to a variable.
  • Named Function Expressions: The function has a name, but this name is only available within the function itself (useful for recursion and debugging).

4. Using the Function Constructor

JavaScript allows the creation of functions dynamically using the Function constructor.

Syntax:
new Function(arg1, arg2, ..., functionBody);
  • arg1, arg2, ... – Parameters of the function.
  • functionBody – A string representing the function’s executable code.
Example:
JavaScript
var add = new Function('x', 'y', 'return x + y');
console.log(add(3, 4)); // Output: 7

While possible, using the Function constructor is generally discouraged due to performance and security concerns.

5. Function Hoisting

Function declarations are hoisted, meaning they can be used before they are defined in the code.

Example:
JavaScript
console.log(add(2, 3)); // Output: 5

function add(x, y) {
    return x + y;
}

console.log(add(3, 4)); // Output: 7

Here, add() is successfully called before its declaration due to function hoisting.

However, function expressions are not hoisted.

Example:
JavaScript
console.log(add(2, 3)); // TypeError: add is not a function

var add = function (x, y) {
    return x + y;
};

console.log(add(3, 4)); // Output: 7

Since function expressions are assigned to variables, they follow the same hoisting rules as variables, meaning the variable exists but is undefined until its assignment.

Conclusion

This guide introduced JavaScript functions, their different declaration styles, and key concepts like hoisting. Understanding these fundamentals will help you write cleaner and more efficient JavaScript code. In future lessons, we will explore more advanced topics, such as closures, callbacks, and arrow functions.

Leave a Comment