Assert is a general-purpose validator and should not be used in the context of testing alone. An assert in Javascript simply checks for truthy values and produces an error otherwise. We use it quite a bit in automated testing when checking for correctness of output for pre-defined inputs. We use asserts like so -

Easily convert objects to arrays and iterate to your heart’s content. There are multiple ways of converting an object to an array (which, also is an object but a different one at that.) Method 1: A simple Object.values() method The first idea that comes to mind is to just use Object.

Here’s a different syntax for our favourite IIFE’s. Immediately invoked function expressions enable us to write functions without using “functions”. Well - just kidding. They are functions but with a different syntax. A typical IIFE looks like this - 1 2 3 4 5 6 7 8 9 10 11 const x = 1, y = 9; var sum = 0; (function() { sum = x + y; console.

Here’s a shorter, readable way to copy props from one object to another subject to defined conditions. The shortest way to copy object (when you don’t quite care about copying sub objects by reference) - 1 2 3 4 5 const planet = { name: "earth", position: 3 }; const newPlanet = { .

A simpler way to do curry functions in Javascript. We have previously seen currying in Javascript. A simple form and application of that concept is demonstrated below - 1 2 3 const addThem = add.curry(2); const addTotal = addThem(1); console.log("addTotal: ", addTotal); // 3 Or, we could avoid a external function or library and curry using bindings .

Beware of using implicit returns in arrow functions. Consider the below example of a simple arrow function. It returns a simple variable. In the absence of any other statement in the function body, a simple mention of x will return the value of x. 1 2 3 const getStuff = x => x; console.

Use onclick rather than submit in HTML forms. A typical HTML form has a few fields and a button to submit the data to some back-end server. And, the typical way to do the form submission is through the submit method. 1 2 3 4 5 <form action="/helloMessage.php"> <input type="text" id="name" /><br /> <button type="submit"></button> </form> On clicking the button, the page will submit data to helloMessage.

Use a button on a Vue component to start a print dialog and print a specific section. Setup We will use a small library called ‘html2paper’. First install the said library in your Vue project - 1 npm install vue-html-to-paper Add library to your code in main.js -

How can you use await without an async function? Don’t click or proceed further if you are not into practical jokes. Say, you try using await in a “normal” function or directly within a module.. 1 2 3 4 5 6 7 function getWeather(loc) { const weather = await fetchWeather(loc); return weather; } // SyntaxError: await is only valid in async function You receive a compilation error that await can be used only in async function.

Generate Fibonacci series with generators and feel good about yourself. Previously you have seen how the totally practical example of generating Fibonacci series was breathing fire with memoization, and may have also come across using loops or recursion to solve the same problem. But, there is no fun in all that - this is real-life and we have to “generate” fun (yep, there we go again).

Previously, we have talked about all things being an object in Javascript. But to what extent can we apply this to our beloved functions. You can see this almost everywhere with the below syntax - 1 2 3 4 5 6 const getSum = (x, y) => { return x + y; }; console.

What are generators and how can I use them? How do you write loops in Javascript - Simple for/while? Recursion? In other less exciting ways? How do you throttle and control function execution? Debounce function? Build your own? What if you could produce the right mix of reusable functions, looping and throttling in one go?

Validate your props in Vue components. We have seen all about props in Vue before. We can define a simple prop in a component, pass the value from source, and the receiving component happily processes it. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <template> <div>{{ contactDetails }}</div> </template> <script> export default { data: () => ({}), props: { contactDetails: { type: String, required: true } } }; </script> But, what if you want to validate the prop?