The Many Ways to Write JavaScript Functions

The Many Ways to Write JavaScript Functions

A function might be a staple object in programming, but you might see them written many different ways in JavaScript, even within the same code base — this is because functions have different properties depending on how they were defined.

A function might be a staple object in programming, but you might see them written many different ways in JavaScript, even within the same code base — this is because functions have different properties depending on how they were defined.

This is a field guide to the different types of functions you might encounter on your JavaScript programming journey, derived from documentation from the MDN Web Docs.

Overview

The syntax a function is written in determines these properties: whether or not it is hoisted, named, has an implicit return, or lexically binds the value of the this keyword.

I made this graph to summarize what we’re working with:

Note: Both Functions and Generator Functions can be created using their respective object constructors, but this is not recommended.

Function Declarations

I have found this to be the most common way functions are written in plain ol’ vanilla JavaScript. Here is an example:

cow() // => "moo"

function cow() {return "moo"}

Note that the function can be invoked before it is declared because its definition is put into memory during compilation, before the code is executed.

For function declarations, as well as all of the other types of functions except arrow functions, the value of the this keyword changes depending on its execution context. In ES2015 the .bind(someObj)method allows you to permanently set the value of this as the object passed into .bind.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()); // azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

(modified from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

Function Expressions

Function expressions, unlike function declarations, do not have to be named and are not hoisted.

Unnamed, or anonymous functions, are popularly used as callbacks because they are immediately invoked. However, the MDN Web Docs notes that it is still useful to name your functions to make it easier to trace them in your call stacks.

const dog = function() { return "bark" }

dog() //=> "bark"
(function() {return "meow"})() //=> "meow"

You cannot reuse immediately invoked functions even if they are named.

(function sheep() { return "baa" })() // => "baa"

sheep() // => ReferenceError: sheep is not defined

javascript functions-in-javascript programming programming-languages

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Functional Programming in Javascript 

The mystic term of Functional Programming (FP) must be familiar to any JS developer. The first impression when we say “JS supports functional programming paradigm”.

Functional Programming: Higher Order Functions

Functional Programming: Higher Order Functions. A Better Take on JavaScript’s Higher Order Functions. Functional Programming is awesome! It makes programming fun.

From imperative to declarative JavaScript

In this post, I will explain why declarative code is better than imperative code. Then I will list some techniques to convert imperative JavaScript to a declarative one in common situations.

Functional Programming

Functional Programming: Functional Programming is a Declarative style of Programming Paradigm for writing computer programs.

Taking functional programming to JavaScript objects

Functional programming seems to be where the hype is nowadays — And for good reason; It can drastically reduce the amount of boilerplate code that you have to write in comparison to imperative programming which allows you to improve the readability of your code and consequently, maintainability.