JavaScript Functions vs Methods (and other helpful tips)

If you’re coming to JavaScript after learning another backend language, you may get confused with some of the JavaScript terminology — I was. While knowing every single term in the JavaScript vocabulary won’t necessarily improve your code, not knowing them may lead to awkward situations. Because of that, I’ve created this cheat sheet to help you (and me) better understand some of the nuances when it comes to functions in JavaScript:

Functions vs. Methods

So what’s the different between the two?

Methods have a “receiver” while functions do not.

This is not unique to JavaScript but it’s still good to learn and remember. My background is in Ruby and I rarely ever heard the term “function”. It’s all about those methods (besides procs and lambdas). I never really understood the difference until I started learning JavaScript.

Also, this definition may not technically be true in JavaScript — and I’ll show you why — but it’s probably the easiest way to think of it. If you are unaware of what a “receiver” is, look at the code snippet below:

someObject.someMethod()

In this context, the someObject is the receiver, while the someMethod is the method. Compare that with a function invocation:

someFunction(arg)

Notice how there is no receiver. In JavaScript, functions are invoked without a receiver using the parens syntax (). The receiver is what separates a function from a method.

Technicalities

While it may look like a function is invoked without a receiver in JavaScript, there’s a gray area to that. Whenever a function is declared on the global scope it becomes a property of the global object. In the browser, the global object is the window:

function helloWorld() {
  console.log('hello world');
}

helloWorld();          // Logs 'hello world'
window.helloWorld();   // Also logs 'hello world'

As you can see in the last line, the window is the receiver of helloWorld which would make helloWorld a method and not a function by my own definition. However, in JavaScript, it’s still considered a function.

Another thing to note is you can easily turn a method into a function and vice-versa.

var object = {
  method: function() {
    console.log("Am I still a method?");
  }
};

object.method();          // method call
var func = object.method; 
func();                   // now it is a function invocation

Function Declaration vs Function Expression

What’s the difference?

If the line begins with the word “function” it’s a declaration. Otherwise, it’s an expression.

Here are some examples:

// This is a function declaration
function hello() {
  console.log('Hello World');
}

// This is a function expression
var hello = function() {
  console.log('Hello World');
};

// This is also a function expression.
(function() {
  console.log('Hello World');
})();

Notice in the last expression that the line started with ( and not function.

Implicit vs Explicit Function Context

What’s the difference?

Explicit context is when the context is explicitly defined and passed in. Implicit context is when the context is left off and the runtime interprets it.

And if you don’t know what I mean by “context,” I’m referring to whatever this equals when a function is executed.

This might be harder to understand, so look at the code below for reference:

function context() {
  console.log('the context is ' + this);
}

var someObject = {};

context.call(someObject);   
// Logs: 'the context is [object Object]'
// This is explicit context. The context is explicitly defined.

context();
// Logs: 'the context is [object Window]'
// This is implicit context. The context is not defined.

In the explicit context execution, we directly told the context function to use the someObject context. Therefore, this was assigned to someObject, which is why it logged out the context is [object Object].

However, in the implicit execution, no context was given. And since functions are properties of the global object, this will equal the global object. That’s why it logged out the context is [object Window].

First-Class Functions vs Higher-Order Functions

What’s the difference?

First class functions are treated like objects. Higher order functions either accept a function as an argument, return a function, or both.

When I say first class functions are treated like objects, I mean that they have states and behaviors, and they can be passed as arguments in functions and returned from functions — among other things. In this way, higher order functions essentially use first order functions and are first order functions themselves.

Examples:

// Higher Order Function
function higher(callback) {  // first order function being passed in
  callback();

  return callback;           // first order function being returned.
}

var callback = higher(function() {
  console.log('Hello World');
});
// Logs: 'Hello World'

callback();
// Also logs: 'Hello World'

While first order functions and higher level functions are not necessarily related, it’s hard to imagine a programming language supporting one and not the other.

While this is by no means the entire list of things to know about JavaScript functions, I hope you can use it as a handy reference guide. At the least it can be a nice beginner’s reference for anyone just starting out in JavaScript or anyone transferring from another backend language.

JavaScript has its quirks and flaws, but it’s here to stay. All we can do is learn to love it. Happy programming!