DEV Community

Žane Suhadolnik
Žane Suhadolnik

Posted on


What are constructor functions?

Constructor functions have, at least to me, one of the coolest names in programming. The first time I had to explain to someone what constructor functions are, I got all gitty because I just got to use the word constructor.

Enough of the bullshit. This post will focus on how constructor functions are use in JavaScript
and React. To use my own reasoning for what they are: Constructor functions are functions that are called only once usually at the start of a script or in React terms when a component is loaded, we use a constructor functions to set the state of that component, usually using props which have been passed to that functions.

Constructors are functions, but have a few different properties to regular functions:

  • They are executed with the new keyword.
  • They start with a capital letter.

What does the new keyword do? Well when used it creates an object and binds it to this, the body of the new functions is ran, which also changes the this with new values, properties...

function Animal(species) {
  // this = {};

  // add properties to this
  this.species = species;
  this.size    = 'big';
  this.legs    = 4;

  // return this;

let animal = new Animal('Dog');
Enter fullscreen mode Exit fullscreen mode

In short they are used to create AND initialize an object within a class while most other functions are created and then need to be called with certain parameters.


Because I haven't personally so far used constructors in any other framework other than React I would like to also explain my own reasoning for how React uses them. React used to have a function called getInitialState which I happen to still use daily on my job. This function was replaced by just a regular constructor for setting a component's state.

//Old way
  return {
    name    :,    //
    surname : this.props.surname, //this.state.surname
    age     : this.props.age      //this.state.age
Enter fullscreen mode Exit fullscreen mode
//Current way
  this.state = {
    name    :,    //
    surname : this.props.surname, //this.state.surname
    age     : this.props.age      //this.state.age
  //Any other variable you want to define for when state loads
Enter fullscreen mode Exit fullscreen mode

You will most likely find the second way more often now, unless you are reading some legacy React code, but essentially both ways are the same with slight differences, like you having to use super(props) to refer to that component's parent class constructor. Or in more simple terms you are refering to the parent of that component, which also has a constructor.

Thank you for reading!

Oldest comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.