DEV Community: Pranjal Jately

Measure the time taken by a function to execute - console.time & console.timeEnd ⏳⏲

Pranjal Jately — Sun, 06 Sep 2020 23:18:12 +0000

A quick and easy way to measure the time it takes code to run is by using console.time in conjunction with console.timeEnd.

All you need to do is surround the code or function call you desire to evaluate with console.time and console.timeEnd respectively...

Pranjal Jately 👨🏽‍💻

@pjately

💡 #JavaScript tip: console.time & console.timeEnd ⏲

I'm no performance expert, but TIL a quick and easy way to measure the time it takes code to run ⬇

#100DaysOfCode #webdev #CodeNewbie #LearnInPublic #React

16:37 PM - 03 Jul 2020

7 3

console.time(<label>) starts a timer with a given (unique) label and console.timeEnd(<label>) stops the timer with the corresponding label (the labels must match for this to work).

Once stopped, the elapsed time is automatically displayed in the console 🤯

Drop a comment if you've ever used this technique to measure the performance of your code.
Have a good one.

Destructuring a property with a different name

Pranjal Jately — Wed, 01 Jul 2020 20:32:45 +0000

So, you want to destructure an object but the property name is already assigned to another variable in the same scope or you just don't like the property name?

A property can be destructured from an object and assigned to a variable with a different name using the following syntax:

const personal = 'Something personal...'

const info = {
  personal: 'pjately.dev',
  social: {
    twitter: 'twitter.com/pjately',
    github: 'github.com/pranjaljately',
  },
}

const { personal: profile } = info

console.log(profile); // pjately.dev

Short, simple and sweet.
Peace.

What the Fetch - Failed HTTP responses

Pranjal Jately — Sun, 21 Jun 2020 22:54:27 +0000

So you think you know Fetch? Let's start with a little quiz...

Pranjal Jately 👨🏽‍💻

@pjately

🏆 #JavaScript quiz

What will the code below log to the console?

URL in snippet: httpstat.us/500

#100DaysOfCode #webdev #CodeNewbie #React

12:35 PM - 21 Jun 2020

6 8

Well done to those that guessed Okay.... If you didn't, don't feel bad, I too assumed that the code logs Error.... I then did some digging around and understood why it doesn't.

So, why does Fetch do this?

As per the docs on MDN{:target="_blank"},

A fetch() promise will reject with a TypeError when a network error is encountered or CORS is misconfigured on the server-side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example.

(Or in our case a 500)

So, how do we handle this? The good news is, we can simply check if the Response.ok() property has a value of true.

{:target="_blank"}

So now the code logs Error: Internal Server Error, which is what you probably wanted in the first place.

Final Thoughts

Many of you, including myself, expected Error... to be logged from the very first snippet. This expectation probably comes from regularly using a library like Axios which handles the failed HTTP status code for you as seen in this CodeSandox{:target="_blank"}.

Let me know if you were caught out by this in the discussion section below. Ciao.

P.S. This is my first blog post so I would appreciate any feedback 😁