JavaScript Masters: Three ways to use a function?

In JavaScript, we have three ways of describing or using functions.

1. Constructors

Constructors are used to set up a class with a base set of properties, values, methods, or dependencies. In this simple example for a class Greeting, the constructor is being used to provide an initial value for the variable ‘name’ and takes in one argument for the variable ‘who’. Constructors belong to the function object or class.

class Greeting  {
  constructor(who) {
    this.name = 'Patrick';
    this.who = who;
  }
}

let p = new Greeting('World');
console.log(p.name);

If you were to run this little snippet in a fiddle you would see ‘Patrick’ printed into the console window.

You can tell which functions are being used as constructors by their use of the ‘new’ keyword. In this example, we see ‘new Greeting(‘World’) which instantiates the class ‘Greeting’ while passing the value ‘World’ to its constructor.

If you changed

let p = new Greeting(‘World’);

console.log(p.name);

to be

let p = new Greeting();

console.log(p.who);

console.log(p.name);

and then ran the example, you would still see the class ‘Greeting’ instantiated. You would still see ‘Patrick’ in the console but you would see ‘undefined’ written out by the console for ‘p.who’ since we failed to provide that value to the constructor.

2. Class or Object Methods

A lot of time we hear the words function and methods used interchangeably, but they actually have varying meanings in JavaScript.

class Greeting  {
  constructor(who) {
    this.name = 'Patrick';
    this.who = who;
  }
  sayGreeting(){
      console.log('Hello ' + this.who + '!')
  }
}
function imAFunction(){
    console.log('only in the console');
}
let p = new Greeting('World');
p.sayGreeting();
imAFunction();

In this example, we are calling two functions ‘imAFunction’ and ‘p.sayGreeting’ but only the latter is a method. We define it as a method because it belongs to the class. In the case of the method, we must instantiate the class before we can access it. This type of function also has it’s own ‘this’ keyword. We can see that keyword used in both the constructor and in the method ‘sayGreeting’ to complete the greeting sentence.

If you commented out the line:

//let p = new Greeting(‘World’);

You would be greeted in the console by a nasty red ‘Uncaught ReferenceError: p is not defined‘ because the compiler has no idea what you are calling and the method, therefore, is meaningless.

3. Non-Method functions

These are probably what you have seen the most of. These blocks stand on their own. Can be called without instantiating any classes. Do not have constructors and cannot be constructors, and can even be written in the new ES6 arrow function style. You’ve probably seen one or both of these if you’ve spent any time around JavaScript. Additionally, non-method functions do not have their own ‘this’ in scope. This is important to remember when passing arguments to them. Any usage of ‘this’ will be accessing the global object.

//Nonmethod function
function thing1(){
    alert('thing1 here')
}
thing1();

//Nonmethod arrow function
var thing2 = () => {alert('thing2 here')}
thing2();

Conclusion

It’s important to understand and communicate clearly. The take away from this article should be an understanding that each type of function: a constructor, a method and the non-method function are all functions in JavaScript. You should also be able to explain and understand that not all functions, however, are methods. The key to knowing which type you are working with is in understanding their scope and usage and being able to identify them through their syntax.

 

A Web Developer by trade, find me on Github
A motorcycle enthusiast at heart.
Most days I’d rather be in the woods anywhere.