Developers Code Style

Heimdall Developers Code Style

Vue

Heimdall development follows the Vue.js style guide provided by Vue.js Style Guide

Typescript

Heimdall development follows the TypeScript style guide provided by TS Style Guide

---

Common Practices

Use this space to add common code style practices used for developing Heimdall

• Async/Await vs then()
• Array Methods
• Looping over Arrays

---

Async/Await vs then()

Recommend using async/await when possible, and minimize promise chain. Async/await makes JavaScript code more accessible to developers that aren't as familiar with JavaScript, and much easier to read.

Logic

The difference is that in an async function, JavaScript will pause the function execution until the promise settles. With .then(), the rest of the function will continue to execute but JavaScript won't execute the .then() callback until the promise settles.

If using promise chaining with .then(), we need to put any logic we want to execute after the request in the promise chaining. Any code placed after fetch() will execute immediately, before the fetch() is done.

From a performance point of view, await is just an internal version of .then() (doing basically the same thing). The reason to choose one over the other doesn't really have to do with performance, but has to do with desired coding style or coding convenience.

References Top

---

Array Methods

An array is a homogenous collection of values. To simplify, an array is a collection of values of the same data type. It is a user defined type.

Best usages for Filter vs Map vs Reduce vs Foreach

Foreach

Foreach takes a callback function and run that callback function on each element of array one by one. The 'forEach()' method calls a function for each element in the array.

Basically forEach() works as a traditional for loop looping over the array and providing you array elements to do operations on them.

Filter

Filter provides a callback for every element and returns a filtered array. The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The main difference between forEach() and filter() is that forEach just loop over the array and executes the callback but filter executes the callback and check its return value.

Map

Map provides a callback that modifies (by means of operations) the array elements and save them into the new array, that is returned once the entire mapped array is finished. The map() method creates a new array with the results of calling a provided function on every element in this array.

Basically map() creates a new array from calling a function for every array element, it does not execute the function for empty elements, and does not change the original array.

Reduce

Reduce provides a callback that modifies (by means of removing) array elements into one single value and returns it upon completion.

Basically reduce() applies a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

Note

The filter() and map() methods do not update the existing array, they create and return a new array every time

References Top

---

Looping over Arrays

Recommend using for ... of loop that was added to JavaScript in ECMAScript 6. The for...of loop lets us loop through arrays, array-like objects, and user-defined iterables. It lets us loop through all of them without using different kinds of methods and loops.

One of the best advantages of using the for...of loop is the ability to iterate through array-like objects like NodeLists using user-defined iterable objects.

References Top

---