DEV Community

Cover image for The three primary functions in JavaScript
Omor Faruk
Omor Faruk

Posted on

The three primary functions in JavaScript

In modern JavaScript, functions can be defined in several ways, each with its own characteristics and use cases. The three primary types are:


1. Named Function Declaration

This is the traditional way to define a function, using the function keyword followed by a name.

function greet(name) { return `Hello, ${name}!`; } 
Enter fullscreen mode Exit fullscreen mode

Key Features:

  • Hoisting: Named functions are hoisted, meaning they can be invoked before their declaration in the code.
 console.log(greet('Alice')); // Works even though greet is defined later function greet(name) { return `Hello, ${name}!`; } 
Enter fullscreen mode Exit fullscreen mode
  • Self-reference: Useful for recursion, as the function can call itself by name.

2. Anonymous Function Expression

An anonymous function is a function without a name, often assigned to a variable or used as a callback.

const greet = function(name) { return `Hello, ${name}!`; }; 
Enter fullscreen mode Exit fullscreen mode

Key Features:

  • Not hoisted: Unlike named function declarations, anonymous functions are not hoisted. They must be defined before use.
 console.log(greet('Alice')); // Error: greet is not a function const greet = function(name) { return `Hello, ${name}!`; }; 
Enter fullscreen mode Exit fullscreen mode
  • Flexibility: Commonly used for callbacks or functions that don't need a name.

3. Arrow Function Expression

Introduced in ES6 (2015), arrow functions provide a concise syntax for writing functions.

const greet = (name) => `Hello, ${name}!`; 
Enter fullscreen mode Exit fullscreen mode

Key Features:

  • Concise syntax: Especially useful for simple functions.

  • Lexical this: Arrow functions do not have their own this context; they inherit it from the enclosing scope. This makes them particularly useful in scenarios where maintaining the context of this is important, such as in event handlers or callbacks.

 function Person(name) { this.name = name; setTimeout(() => { console.log(`Hello, ${this.name}!`); }, 1000); } const person = new Person('Alice'); // Logs: Hello, Alice! 
Enter fullscreen mode Exit fullscreen mode
  • Always anonymous: Arrow functions are inherently anonymous. To use them, they must be assigned to a variable or used directly as arguments.

Summary

Function Type Syntax Example Hoisted this Binding
Named Function Declaration function greet() {} Yes Dynamic
Anonymous Function const greet = function() {} No Dynamic
Arrow Function const greet = () => {} No Lexical (inherits)

Each function type serves different purposes:

  • Named functions: Best for defining reusable functions and when hoisting is beneficial.

  • Anonymous functions: Useful for one-time use, such as callbacks or immediately invoked function expressions (IIFEs).

  • Arrow functions: Ideal for concise function expressions and when preserving the context of this is desired.

Understanding these differences helps in choosing the appropriate function type based on the specific requirements of your code.

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

An anonymous function is a function without a name, often assigned to a variable or used as a callback.

The act of assigning an anonymous function to a variable makes it cease to be anonymous. This can be verified by checking the 'name' property of the assigned function (this will be 'greet' in your example). True anonymous functions have an empty name property. It's actually pretty difficult to store an anonymous function in a variable without losing its anonymity.

Collapse
 
theonlineaid profile image
Omor Faruk

Ooh, that’s a juicy and nuanced observation—and yeah, it’s very true, especially when you peek under the hood at how JavaScript works.