DEV Community: Glad Chinda

Why don't you just put a tag on it

Glad Chinda — Fri, 21 Feb 2020 09:40:11 +0000

Hello there,
Do you have 3-5 minutes to spare? If so, let's have a brief discussion about Template Tags in JavaScript.

Background

In ES2015, a new string delimiter was introduced to the language for template literals. Template literal strings are delimited by a pair of back-ticks ().

Template literals were introduced to deal with challenges associated with formatting and representing strings, such as: creating multiline strings, string substitutions, etc.

String Substitution

Prior to template literals, constructing dynamic strings was a process that relied heavily on string concatenation. Here is what it looks like:

const person = {
  name: 'Glad Chinda',
  lang: 'JavaScript'
};

// String concatenation
const bio = person.name + ' knows how to code in ' + person.lang + '.';

console.log(bio); // "Glad Chinda knows how to code in JavaScript."

Having to chain all those disjointed fragments of the string using the + (concatenation) operator wasn't one of the coolest things.

However, with template literals, dynamic strings can be created via string substitution in a much more declarative way, like so:

const person = {
  name: 'Glad Chinda',
  lang: 'JavaScript'
};

// String substitution with template literal
const bio = `${person.name} knows how to code in ${person.lang}.`;

console.log(bio); // "Glad Chinda knows how to code in JavaScript."

Let's say we want all the substituted strings in the literal to be in uppercase. We could modify the template literal like so:

// String substitutions in uppercase
const bio =
  `${person.name.toUpperCase()} knows how to code in ${person.lang.toUpperCase()}.`;

console.log(bio); // "GLAD CHINDA knows how to code in JAVASCRIPT."

Calling the .toUpperCase() method on each substituted string of the template literal is way too verbose and degrades its readability.

We can do better, with a slightly modified template literal syntax. All we have to do is just put a tag on it, and it becomes a tagged template literal.

Template Tags

A template tag is simply a function that defines how a template literal should be transformed.

The syntax of a template tag is pretty straightforward.

The first argument is an array containing all the literal strings in the template literal.
The remaining arguments correspond with the string substitutions in the template literal.

It is important to note that the number of items in the first argument array is always higher than the number of remaining arguments by 1. Hence, if the first argument contains 5 literals, then there will be 4 remaining arguments.

Let's create a template tag called uppercase to transform our template literal as required.

function uppercase (literals, ...substitutions) {
  let finalString = '';

  for (let i = 0, len = substitutions.length; i < len; i++) {
    finalString += literals[i];
    finalString += String(substitutions[i]).toUpperCase();
  }

  finalString += literals[literals.length - 1];

  return finalString;
}

We will modify the template literal to use the uppercase template tag like so:

/**
 * Tagged template literal
 *
 * Equivalent to:
 *   uppercase(literals, substitution1, substitution2)
 *
 * where:
 *   literals => ['', ' knows how to code in ', '.'],
 *   substitution1 => person.name,
 *   substitution2 => person.lang
 */
const bio = uppercase`${person.name} knows how to code in ${person.lang}.`;

console.log(bio); // "GLAD CHINDA knows how to code in JAVASCRIPT."

Notice that applying the template tag like so:

uppercase`${person.name} knows how to code in ${person.lang}.`

is functionally equivalent to calling the template tag function like so:

uppercase(
  ['', ' knows how to code in ', '.'],
  person.name,
  person.lang
);

In summary, you can achieve so much more from a template literal if only you will be willing to just put a tag on it.

❤️ Like and Share

If you found this post insightful in any way please:

Like this post
Comment your feedback
Share with someone
Follow me on Twitter

Destructuring Arrays Object(ively)

Glad Chinda — Mon, 17 Feb 2020 08:36:28 +0000

Background

The syntax for destructuring objects was added to the ECMAScript Language Specification starting from ES2015 (popularly known as ES6). This syntax makes it possible to break down complex JavaScript values like objects into simpler parts that can be assigned to local variables.

The destructuring syntax comes in two basic flavors:

Array destructuring

// Array Destructuring
// Skip the first item (red)
// Setting a default for the third item (blue)
const [, green, blue = 51] = [255, 180];

console.log(green); // 180
console.log(blue); // 51

Object destructuring

// Object Destructuring
// Declaring a language local variable for `lang`
// Setting a default for age
const {name, lang: language, age = 16} = {
  name: 'Glad Chinda',
  lang: 'JavaScript'
};

console.log(lang); // undefined
console.log(language); // "JavaScript"
console.log(age); // 16

However, it is possible to have destructuring syntax that is a mix of both flavors, nested in a certain way.

In this post, we will focus on destructuring for arrays. If you are not already familiar with the destructuring syntax, you can check out this guide to learn more.

Array Destructuring

The array destructuring syntax has proven useful for quite a lot of applications. A very common application of array destructuring is in swapping variables.

Without the array destructuring syntax, swapping the values of two variables will always require a third temporary variable. With array destructuring, that is not the case.

let width = 1280;
let height = 720;

// Without Array Destructuring
let temp = width;

width = height;
height = temp;

// With Array Destructuring
[width, height] = [height, width];

Another very common use of the array destructuring syntax is in combination with the rest parameters syntax for cloning arrays.

const scores = [23, 27, 22, 41, 35];

// Clone the `scores` array
const [...scoresClone] = scores;

console.log(scoresClone); // [23, 27, 22, 41, 35]
console.log(scores === scoresClone); // false

Also, array destructuring isn't limited to arrays alone (as the name implies), rather it can be used with iterables of all kinds such as strings, sets, array-likes like arguments, etc.

// Array Destructuring with String
const [firstChar, ...otherChars] = 'Hello';

// Array Destructuring with Set
const [,, thirdItem] = new Set([1, 2, 3, 4, 5]);

console.log(firstChar); // "H"
console.log(otherChars); // ["e", "l", "l", "o"]
console.log(thirdItem); // 3

Limitations of Array Destructuring

Let's say we have an array ITEMS of 100 items and we want to assign the last item to a variable named lastItem. Basically, this can be done as follows:

// The 100th item is at index 99
const lastItem = ITEMS[99];

Trying to do this assignment using the array destructuring syntax doesn't make any sense, because it literally means you will have to skip the first 99 items (using commas) just to get to the last item.

It even gets worse when the number of items in the array is not known beforehand.

// Number of items not known
const lastItem = ITEMS[ITEMS.length - 1];

One might think for a moment here, that array destructuring can again be combined with the rest parameters syntax to solve this problem like so:

// Throws `SyntaxError`
// Rest element must always be the last element
const [...otherItems, lastItem] = ITEMS;

The above approach fails with a SyntaxError due to the limitations placed on rest parameters:

You can only have one rest parameters element.
The rest parameters element, when present, must be the last element.

Can we try a different approach?
The answer is YES. Fundamentally, JavaScript arrays are objects (with special behaviors), and as such, can be targets for object destructuring.

Object Destructuring to the Rescue

According to the ECMAScript Language Specification, an array object is an exotic object that gives special treatment to array index property keys.

Hence, the following destructuring statements are equivalent:

// Array Destructuring
const [red, green, blue] = [255, 180, 51];

// Object Destructuring (equivalent)
const {0: red, 1: green, 2: blue} = [255, 180, 51];

That said, we can get the 100th item of the ITEMS array from our previous example, and assign it to the lastItem variable like so:

// Using object destructuring
// The 100th item is at index 99
const {99: lastItem} = ITEMS;

Using the object destructuring syntax makes it possible to introduce computed property names. For example, we can get the first, middle and last items of that ITEMS array as follows:

// Using object destructuring
// Get the first, middle and last items
const {
  0: firstItem,
  [Math.floor(ITEMS.length / 2)]: midItem,
  [ITEMS.length - 1]: lastItem
} = ITEMS;

Using the object destructuring syntax still allows us to assign values of named properties such as length as long as they are enumerable.

That said, we can modify the previous code snippet, introducing the length property like so:

// Using object destructuring
// Get the first, middle and last items
const {
  length: len,
  0: firstItem,
  [Math.floor(len / 2)]: midItem,
  [len - 1]: lastItem
} = ITEMS;

Finally, this approach, besides arrays, works for strings and other array-like objects (with special behaviors for index properties) as well.

const STRING = 'Hello World!';
const {length, [length - 1]: lastChar} = STRING;

console.log(length); // 12
console.log(lastChar); // "!"

Wrap everything that can be wrapped

Glad Chinda — Mon, 10 Feb 2020 20:47:44 +0000

Hello there,
Do you have 3-5 minutes to spare? If so, let's have a brief discussion about Wrapper Objects in JavaScript.

Background

Data types in JavaScript can be grouped into two broad categories:

Primitives — strings, numbers, booleans, symbols, null, undefined
Objects — anything that's not a primitive (arrays, functions, etc)

While primitives are usually simple immutable values, objects, on the other hand, are collections of one or more properties (each property having a name, and a value that can be of any data type).

Let's consider strings for a moment

Strings in JavaScript can be created in two ways:

String Literal — Produces a string primitive.

// String literal
const string1 = 'Hello';
const string2 = 'Hello';

console.log(string1[0]); // "H"
console.log(string2.length); // 5
console.log(typeof string1); // "string"
console.log(string1 === string2); // true

String() Function — Produces a String object when called as a constructor with the new keyword, and casts its argument to a string primitive when called without the new keyword.

// String Constructor
const string1 = new String('Hello');
const string2 = new String('Hello');

console.log(string1[0]); // "H"
console.log(string2.length); // 5
console.log(typeof string1); // "object"
console.log(string1 === string2); // false

Since a string primitive (created with the string literal syntax) is not an object (as shown in the code snippets above), how is it that we are able to access properties like length on it as though it is a String object?

The reason is because at the time we are accessing the said property (length), we are already dealing with a String object (wrapper object).

Wrapper Objects

The ECMAScript language specification defines an abstract operation for accessing the value of a property from a value. If the value is not an object (e.g string primitive), then the property lookup is performed on a wrapper object appropriate for the type of the value.

Hence, whenever we try to access a property from the string literal, the JavaScript engine does the following:

Create a one-off String wrapper object for the string literal
Access the specified property on the wrapper object
Discard the String wrapper object.

// String primitive
const greeting = 'Hello World';

// Access and call toUpperCase() method
// Equivalent to: (new String(greeting)).toUpperCase()
console.log(greeting.toUpperCase()); // "HELLO WORLD"

The above behavior also applies to other primitive values like numbers, booleans and symbols. However, trying to access a property on null and undefined will throw a TypeError, since a wrapper object cannot be created for them.

// Number primitive
const price = 12.357;

// Null primitive
const nullValue = null;

// Access and call `Number` methods
// Equivalent to: (new Number(price)).toFixed(2)
console.log(number.toFixed(2)); // 12.36

// Equivalent to: (new Number(price)).toExponential(2)
console.log(number.toExponential(2)); // 1.24e+1

// Access a property on a Null primitive
// Throws TypeError
console.log(null.length);

In summary, the JavaScript engine knows how to wrap everything that can be wrapped, whenever it is required to do so.

❤️ Like and Share

If you found this post insightful in any way please:

Like this post
Comment your feedback
Share with someone
Follow me on Twitter

JavaScript Tip: whatis() — A better typeof

Glad Chinda — Mon, 10 Feb 2020 13:04:36 +0000

Correctly determining the type of a value in JavaScript is not very obvious, especially to beginners. However, using Object.prototype.toString has always proven to yield a slightly better result for most values than the native typeof operator.

Leveraging Object.prototype.toString, we can create a better typeof — a function called whatis(), like so:

function whatis (value) {
  return Object.prototype.toString.call(value)
    .replace(/^\[object\s+([a-z]+)\]$/i, '$1')
    .toLowerCase();
}

Here, we are doing 3 things:

First, call Object.prototype.toString() on value to get the string tag of the value. The function returns a string of this format: "[object T]", where T is the string tag (e.g Array, String, WeakMap, etc).
Next, use a regular expression and String.prototype.replace() to extract the string tag.
Finally, change the string tag to all lowercase and return the result.

Note:
The whatis() function is still error prone. Its type testing mechanism is not so reliable for some kinds of built-in or program defined objects, since there are several ways of changing the reported type of an object.

whatis(NaN); // 'number'
whatis(-5.23); // 'number'
whatis(Infinity); // 'number'
whatis(144705209n); // 'bigint'
whatis('hello world'); // 'string'
whatis(Symbol.iterator); // 'symbol'

whatis(null); // 'null'
whatis(false); // 'boolean'
whatis(undefined); // 'undefined'

whatis(/^.+$/); // 'regexp'
whatis([1, 2, 3, 4]); // 'array'
whatis({ x: 5, y: 10 }); // 'object'
whatis(function () {}); // 'function'

whatis(new Date()); // 'date'
whatis(window.location); // 'location'
whatis(document.body); // 'htmlbodyelement'

Note:
The whatis() function will throw a ReferenceError for variables that have not been declared, unlike the typeof operator that evaluates to "undefined" for undeclared variables.

console.log(typeof undeclaredVar); // "undefined"
console.log(whatis(undeclaredVar)); // Throws ReferenceError

❤️ Like and Share

If you found this post insightful in any way please:

Like this post
Comment your feedback
Share with someone
Follow me on Twitter

JSON Collection to CSV

Glad Chinda — Tue, 04 Feb 2020 10:52:35 +0000

The code pen you are about to see was originally created as part of an article I published on the LogRocket blog.

Here is a breakdown of what the code pen is about:

Fetch an array collection of JSON objects from an API (photos from the Picsum Photos API).
Filter the photos based on image type and dimensions.
Extract selected fields from each photo item in the array collection.
Reformat the extracted data as CSV (comma-separated values) string
Download the generated CSV file on the browser.

The goal is to do all the operations listed above using just Web APIs.

Show some love ❤️

Like this post
Comment your feedback
Share with someone
Follow me on Twitter

The Single Argument Problem: Hello Unary!

Glad Chinda — Mon, 13 Jan 2020 14:11:04 +0000

This is my first 2020 post on the DEV community and I have decided to share something really simple and possibly cool (depending on what you think of it). However, I do hope that you find it insightful. 😜

In this post, I will explain, in less than 5 minutes, a problem I prefer to call the Single Argument Problem and how it manifests itself. Finally, I will share how it can be fixed, with special emphasis on the unary() helper function.

It is important at this point to note that all code snippets in this post are written in JavaScript. However, the concepts described in it may apply to several other programming languages. LET'S JUMP RIGHT IN 🚀🚀

Background

You are building a JavaScript application that requires an array of integers. However, there is no guarantee that you will always have an array of integers. So you decide to convert each element of every array to an integer before working with the array.

Based on your decision, you came up with this simple function:

function getIntegerArray (arr) {
  return arr.map(parseInt);
}

The function effectively maps every element of the original array to a new array using the global parseInt() as the mapping function.

The parseInt() function is guaranteed to return an integer for a string that can be parsed into an integer, and NaN otherwise. You can learn more about how parseInt() works here.

Then comes the moment of truth. You tested the getIntegerArray() function with an array like so:

console.log(getIntegerArray(['1', '3', '5', '7', '9']));
// [1, NaN, NaN, NaN, NaN]

You were expecting to get this:
[1, 3, 5, 7, 9]

but instead you got:
[1, NaN, NaN, NaN, NaN]

What could you have gotten wrong? You'll find out as you read along.

The Single Argument Problem

The mapping function passed to Array.prototype.map() has the following call signature:

function mapFunction (element, index, arr, thisArg) { ... }

Hence, any function passed to Array.prototype.map() will be called with 4 arguments for every element in the target array.

In the case of your getIntegerArray() function, the mapping function is the global parseInt() function. Here, is kinda a breakdown of the function calls for each element of the array:

parseInt('1', 0, ['1', '3', '5', '7', '9'], this) // 1st element
parseInt('3', 1, ['1', '3', '5', '7', '9'], this) // 2nd element
parseInt('5', 2, ['1', '3', '5', '7', '9'], this) // 3rd element
parseInt('7', 3, ['1', '3', '5', '7', '9'], this) // 4th element
parseInt('9', 4, ['1', '3', '5', '7', '9'], this) // 5th element

Since the global parseInt() function can only take 2 arguments, it discards the extraneous arguments like so:

parseInt('1', 0) // 1st element
parseInt('3', 1) // 2nd element
parseInt('5', 2) // 3rd element
parseInt('7', 3) // 4th element
parseInt('9', 4) // 5th element

The second argument passed to the parseInt() function is taken to be the fromRadix of the string as first argument to be parsed.

So if the second argument to parseInt() is 0, it is treated as though it was not passed; hence JavaScript determines the correct radix before parsing. You can learn more about how parseInt() works here.

If you execute the functions from before for each element of the array, here is what you'll get:

parseInt('1', 0) // 1
parseInt('3', 1) // NaN
parseInt('5', 2) // NaN
parseInt('7', 3) // NaN
parseInt('9', 4) // NaN

which explains the result you got earlier. It appears that for your getIntegerArray() function to work as intended, the parseInt() mapping function will have to be called with only the first argument (effectively discarding all the other arguments).

This is what I will refer to as the Single Argument Problem.

Fixing the Problem

Now that the problem have been identified, fixing it is only a matter of making some adjustments to the initial function to ensure that the parseInt() mapping function is called with only the first argument.

Here is the modified getIntegerArray() function:

function getIntegerArray (arr) {
  return arr.map(x => parseInt(x));
}

A very simple modification and, Eureka!!! you fixed it 👍🏼. In fact, the arrow function syntax makes the modification more subtle in appearance that you might not even notice it.

Now you tested the getIntegerArray() function with the same array again and got the correct result you expected, like so:

console.log(getIntegerArray(['1', '3', '5', '7', '9']));
// [1, 3, 5, 7, 9]

Introducing the `unary()` helper function

The Single Argument Problem as described earlier is a very popular problem you might face when using callback functions in your applications. As a result, JavaScript utility libraries like Lodash (Underscore) provide a higher-order _.unary() helper function that can be used to create a new function (that can be called with only one argument) from an initial function.

Using this unary() helper function, the getIntegerArray() function can be modified as follows:

function getIntegerArray (arr) {
  return arr.map(unary(parseInt));
}

Calling unary(parseInt) returns a new function that delegates its call to parseInt() but with only one argument. Hence, this effectively solves the Single Argument Problem for any use case.

Here is a simple implementation of the unary() function:

function unary (fn) {
  if (typeof fn === 'function') {
    return function _unaryFn (firstArg) {
      return fn(firstArg);
    }
  }
  return fn;
}

A more compact version of the unary() function looks like this:

function unary (fn) {
  return (typeof fn === 'function')
    ? firstArg => fn(firstArg)
    : fn;
}

Final Words

That is all I have to say. Thanks for your patience and effort to make it to the end of this post. I hope you found it insightful.

Please remember to:

Hit the Like Button
Share with a Friend
Follow me on Twitter (@gladchinda)

Hope to see you again soon.

HAPPY CODING

5 Simple Applications of JavaScript Bitwise Operators

Glad Chinda — Mon, 28 Oct 2019 01:26:20 +0000

I wrote a more detailed article on bitwise operators published on the LogRocket blog. Check it out here: Interesting use cases for JavaScript bitwise operators.

Although bitwise operators are sparingly used in JavaScript programs, they have quite a number of interesting applications. This post shows 5 simple applications of bitwise operators.

1. Even or Odd

No doubt the most popular way of checking if an integer is even or odd is by using the remainder operator (%) like so:

For signed integers that can be fully represented in 32 bits, the bitwise AND (&) operator can be used to check if the least significant bit is set. If it is set (that is set to 1), the integer is odd, otherwise it is even. Hence the previous functions become:

2. Includes

In ES6, the includes() method was added to the prototypes for the Array and String constructors to check if they contain a particular element or substring and return a boolean indicating the presence.

Prior to ES6, one of the available methods is the indexOf() method which returns the index of the element or substring if present and -1 otherwise. Since JavaScript bitwise operators represent integers in two's complement format, -1 is the integer with all bits set to 1, and its complement is 0 (with all bits set to 0).

This information can be used to create a simple includes() function that is based on indexOf() like so:

3. Powers of 2

Bitwise shift operators can be used to perform some quick arithmetic with powers of 2. The left shift (<<) operator can be used to quickly multiply integers by powers of 2. Given that (0 <= a < 32):

The sign-propagating right shift (>>) operator can be used to quickly perform integer division by powers of 2. Given that (0 <= a < 32):

The above can be used in algorithms like binary search, where you need to find the midpoint of an array like so:

4. Truncating Floats

Bitwise operators convert their operands to 32-bit integers. This has a truncating effect on operands that are floats.

The bitwise NOT (~) operator can be used to truncate a float to an integer (remove the decimal portion of a float).

Given that (-2147483649 < a < 2147483648):

The bitwise OR (|) operator can also be used in like manner to truncate a float to an integer like so:

5. Color Conversions

Bitwise operators can be used to convert color representations from RGB to hexadecimal and vice-versa. Each RGB color component (red, green and blue) ranges from 0 - 255, and can be fully represented with 8 bits.

Hence RGB color can be fully represented by a 24-bit integer, where the first (most significant) 8 bits represent the red, the next 8 bits represent the green and the last (least significant) 8 bits represent the blue.

Based on this information, we can convert a color representation from RGB to hexadecimal using the bitwise left shift (<<) and OR (|) operators as follows:

Note: The above function isn't reliable for RGB color component values lower than 16. For example: rgbToHex([0, 128, 255]) will return #80ff.

To convert from hexadecimal to RGB representation, we need to work in the reverse direction to extract each color component using the bitwise right shift (>>) and AND (&) operators like so:

Note: The above function will not work for hexadecimal colors in compact form (3 hexadecimal digits). For example: hexToRgb('#3ff') will return [0, 0, 0].

❤️ Like and Share

Thanks for making time to go through this post. I am really glad that you made it to the end, and do hope it was worth your time.

If you loved this post, kindly hit the like button and share with friends. You can also follow me for updates on more exciting content coming up soon.

DEV Community: Glad Chinda

Why don't you just put a tag on it

Background

String Substitution

Template Tags

❤️ Like and Share

Destructuring Arrays Object(ively)

Background

Array Destructuring

Limitations of Array Destructuring

Object Destructuring to the Rescue

Further Reading

❤️ Like and Share

Wrap everything that can be wrapped

Background

Let's consider strings for a moment

Wrapper Objects

❤️ Like and Share

JavaScript Tip: whatis() — A better typeof

Further Reading

❤️ Like and Share

JSON Collection to CSV

Show some love ❤️

The Single Argument Problem: Hello Unary!

Background

The Single Argument Problem

Fixing the Problem

Introducing the `unary()` helper function

Final Words

5 Simple Applications of JavaScript Bitwise Operators

1. Even or Odd

2. Includes

3. Powers of 2

4. Truncating Floats

5. Color Conversions

❤️ Like and Share

DEV Community: Glad Chinda

Why don't you just put a tag on it

Background

String Substitution

Template Tags

❤️ Like and Share

Destructuring Arrays Object(ively)

Background

Array Destructuring

Limitations of Array Destructuring

Object Destructuring to the Rescue

Further Reading

❤️ Like and Share

Wrap everything that can be wrapped

Background

Let's consider strings for a moment

Wrapper Objects

❤️ Like and Share

JavaScript Tip: whatis() — A better typeof

Further Reading

❤️ Like and Share

JSON Collection to CSV

Show some love ❤️

The Single Argument Problem: Hello Unary!

Background

The Single Argument Problem

Fixing the Problem

Introducing the unary() helper function

Final Words

5 Simple Applications of JavaScript Bitwise Operators

1. Even or Odd

2. Includes

3. Powers of 2

4. Truncating Floats

5. Color Conversions

❤️ Like and Share

Introducing the `unary()` helper function