You Must Understand These 14 JavaScript Functions

You should be able to understand and write by hand these functions before you go to any JavaScript interview.

bitfish
bitfish
Jan 19 · 6 min read
Photo by Caspar Camille Rubin on Unsplash

1. Determine the specific type of any object

As we all know, there are five primitive data types and an object data type in JavaScript. But do you know that the object data type can be subdivided into many seed types? An object may be an array, function, map, etc. If we want to get the specific type of object, what should we do?

The ECMAScript has the following rules:

From EcmaScript

For different objects, different results will be returned when calling Object.prototype.toString().

From Chrome‘s Console

Moreover, the return value of Object.prototype.toString() is always in the format of ‘[object + ‘tag +‘] ’. If we only want the middle tag, We can delete characters on both sides by regular expression or String.prototype.slice().

toRawType(null) 
// "Null"
toRawType(/sdfsd/)
//"RegExp"

2. Caching function calculation results

If there is such a function:

function computed(str) {    // Suppose the calculation in the funtion is very time consuming    console.log('2000s have passed')    return 'a result'}

We want to cache the result of the function operation. When it is called later, if the parameters are the same, the function will no longer be executed, but the result in the cache will be returned directly. What can we do?

3. Implement Array.prototype.map

This is a useful built-in method in JavaScript, but you should be able to implement this function by yourself.

4. Implement Array.prototype.filter

This is a useful built-in method in JavaScript, but you should be able to implement this function by yourself.

5. Implement Array.prototype.some

This is a useful built-in method in JavaScript, but you should be able to implement this function by yourself.

6. Implement Array.prototype.reduce

This is a useful built-in method in JavaScript, but you should be able to implement this function by yourself.

7. Implement Array.prototype.flat

8. Curry

Currying is a technique of evaluating function with multiple arguments, into a sequence of functions with a single argument.

In other words, when a function, instead of taking all arguments at one time, takes the first one and return a new function that takes the second one and returns a new function which takes the third one, and so forth until all arguments have been fulfilled.

That is when we turn a function call add(1,2,3) into add(1)(2)(3) . By using this technique, the little piece can be configured and reused with ease.

Why it’s useful?

  • Currying helps you to avoid passing the same variable again and again.
  • It helps to create a higher-order function. It is extremely helpful in event handling.
  • Little pieces can be configured and reused with ease.

Let’s look at a simple add function. It accepts three operands as arguments and returns the sum of all three as the result.

function add(a,b,c){
return a + b + c;
}

You can call it with too few (with odd results), or too many (excess arguments get ignored).

add(1,2,3) --> 6 
add(1,2) --> NaN
add(1,2,3,4) --> 6 //Extra parameters will be ignored.

How to convert an existing function to a curried version?

9. Debouncing

Debouncing is nothing but reducing unnecessary time-consuming computations so as to increase browser performance. There are some scenarios in which some functionalities take more time to execute a certain operation. For instance, take an example of a search bar on an e-commerce website.

For suppose a user wants to get “Tutorix study kit”. He types every character of the product in the search bar. After typing each character, there is an Api call takes place from browser to server so as to get the required product. Since he wants “Tutorix study kit”, the user has to make 17 Api calls from the browser to a server. Think of a scenario that when millions of people making the same search thereby calling billions of Api’s. So calling billions of Api’s at a time will definitely lead to slower browser performance. To reduce this drawback, Debouncing comes in to picture.

In this scenario, Debouncing will set a time interval, for suppose 2 secs, between two keystrokes. If the time between two keystrokes exceeds 2 secs, then only Api calling will take place. In those 2 secs, the user may type at least some characters, reducing those characters Api calls. Since the Api calls have reduced, the browser performance will be increased. One must heed that the Debouncing function updates for every keystroke.

10. Throttling

Throttling will change the function in such a way that it can be fired at most once in a time interval. For instance, throttling will execute the function only one time in 1000 milliseconds, no matter how many times the user clicks the button.

11. Lazy Load Images

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

12. Array random disorder

We often need to disorder an array.

13. Singleton

The Singleton Pattern limits the number of instances of a particular object to just one. This single instance is called a singleton.

Singletons are useful in situations where system-wide actions need to be coordinated from a single central place. An example is a database connection pool. The pool manages the creation, destruction, and lifetime of all database connections for the entire application ensuring that no connections are ‘lost’.

Singletons reduce the need for global variables which is particularly important in JavaScript because it limits namespace pollution and associated risk of name collisions.

14. Implement JSON.stringfy

This is a useful built-in method in JavaScript, but you should be able to implement this function by yourself.

JavaScript in Plain English

Learn the web's most important programming language.

bitfish

Written by

bitfish

Love reading, writing and programming.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade