Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Refactor Constructor Functions and Promises to ES6 with One Click in VS Code

    Christian NwambaChristian Nwamba
    vscodeVS Code

    Whether you are having a hard time with catching up to classes or async await or maybe you have legacy code written with constructor functions and promises -- you can refactor them with just one-click away in your VS Code editor.

    This feature is built in and if you are interested in powering up your VS Code refactor game, you can use this extension --> https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor&WT.mc_id=egghead-screencast-chnwamba



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: Assuming we have this constructor function named team which takes in a name parameter and assigns this parameter to a local variable. While I'm typing this local variable or assign a value to it, the team constructor name gets highlighted with inaudible . I will get to what that means in a minute.

    We can also have a count variable, which basically takes the value for team. We can also have a hire method which will actually call when we want to hire someone new to our team. This is basically going to take a parameter num, then returns an increment to this account with the value of num.

    The interesting thing is remember the team constructor name I told you about, if you click on this name, a yellow bulb will appear. If you click on this yellow bulb, you can convert this function to an ES 2015 class. Notice we now have a constructor and a higher method with the class named theme.

    We can also convert promises to async inaudible . If I have a function named fetch theme, which takes in the URL of the theme we want to fetch, of course, and the returns a call to a fetch method. In this case, returning a promise.

    This fetch method would take in the URL we want to fetch from, and then handle what happens when this promise resolves, which in this case, we just want to console.log the response. We can also handle what happens when an error occurs, which in this case we just want to console.error whatever went wrong.

    Once we have this function set up, you can do with it for the theme constructor function by clicking on the theme and clicking on the yellow bulb to convert to async function. Once you click on convert to async function, you can see we have a try and a catch block now, but the most important thing is that we have async and away.