Master JavaScript Functions: Declarations, Expressions, IIFEs, and More

Among all the essential knowledge points that must be mastered in JavaScript, functions are often the most overlooked by beginners. Many articles emphasize object‑orientation and prototypes, yet almost every difficulty in object‑oriented JavaScript is closely related to functions.

Concepts such as execution context, variable object, closures, and this all revolve around functions.

Although many learners are eager to jump straight into object‑orientation, modules, or popular frameworks, a solid understanding of fundamental function concepts is indispensable for smooth progress.

1. Function Declarations, Function Expressions, Anonymous Functions, and IIFEs

In practical development, functions can be categorized as function declarations, function expressions, anonymous functions, and immediately‑invoked function expressions (IIFEs).

Function Declaration

JavaScript provides two declaration methods: variable declaration using var and function declaration using function. Function declarations are hoisted, meaning they are available throughout the execution context regardless of where they appear.

Function Expression

Unlike declarations, function expressions are created via var and follow the same hoisting rules as variable declarations. The execution order of the example below illustrates this behavior.

Therefore, due to different declaration methods, function declarations and function expressions have some usage differences, but functionally they are equivalent.

Anonymous Function

An anonymous function has no explicit name or assignment. It is often passed as a callback argument to another function.

In the example, the first argument of fn is an anonymous function. Although it cannot be referenced outside, inside fn it is assigned to bar and stored in the arguments object, effectively becoming a callback.

Anonymous functions are the core of many difficult concepts related to functions.

Self‑Executing Functions and Block Scope

In ES5, block scope does not exist, so developers often use IIFEs to simulate it, creating an isolated execution context that, together with closures, forms the basis for modularization.

A module can contain private variables, private methods, public variables, and public methods.

Because of the one‑way nature of the scope chain, external code cannot access the internal variables or methods of such a module, allowing us to create truly private members.

Public members can be exposed via closures, which let us access internal variables from outside the module.

If you need a deeper understanding of closures, see the detailed illustration of scope chain and closures at https://mp.weixin.qq.com/s?__biz=MzI1ODE4NzE1Nw==∣=2247484671&idx=2&sn=6cc6cb7b52089971f0584202e066b95c

Below is an example of using closures and modules together in jQuery:

When projects grow large, a state manager becomes necessary. Redux is a well‑known example. The following code demonstrates a simple state manager that can be directly used in single‑page applications.

Code example:

Demo: http://codepen.io/yangbo5207/pen/EZzEbY?editors=1111

Other IIFE syntaxes include !function(){}() and +function(){}() .

2. Function Parameter Passing: Pass‑by‑Value

Primitive types are copied by value, so changes to one do not affect the other. Reference types store a reference in the variable object; copying the reference means both variables point to the same heap memory.

When a value is passed as a function argument, it is stored in the function’s variable object, effectively creating a copy.

Thus, JavaScript always passes arguments by value; for reference types, the value being passed is the reference itself.

4. Functional Programming

Although JavaScript is not a purely functional language, it incorporates many functional programming features.

Functions as First‑Class Citizens

Functions can be assigned to variables, passed as arguments, and returned from other functions, just like any other data type.

Use Expressions, Not Statements

An expression always yields a value, whereas a statement performs an action without returning a value. Functional programming prefers expressions to ensure every step produces a result.

No Side Effects

A side effect occurs when a function modifies external state (e.g., global variables). Pure functions avoid side effects, returning new values without altering external data.

Consequently, identical inputs always produce identical outputs.

Closures

Closures are a key feature of functional programming; they have been discussed in earlier sections.

Currying

Currying transforms a function with multiple arguments into a sequence of functions each taking a single argument. A deeper dive will be covered in a future article.

5. Function Encapsulation

When encapsulating functions, it is advisable to follow functional programming principles, though practical constraints sometimes require using private module variables.

Normal Encapsulation

Mounting on Objects

Extending native objects is generally discouraged, but mounting methods on an object's prototype allows access via this, which introduces additional complexities that must be mastered.