1. 1
    Refactor Constructor Functions and Promises to ES6 with One Click in VS Code
    2m 10s
⚠️ This lesson is retired and might contain outdated information.

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

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

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

Instructor: [00:02] 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.

[00:25] 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.

[00:51] 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.

[01:10] 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.

[01:29] 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.

[01:52] 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.

egghead
egghead
~ 32 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today