Add approaches to pangram (#1987)

Add approaches to pangram

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: bobahop

exercises/practice/pangram/.approaches/bitfield/content.md

@@ -0,0 +1,62 @@
+# Bit field
+
+```javascript
+const A_LCASE = 97;
+const A_UCASE = 65;
+const ALL_26_BITS_SET = 67108863;
+
+export function isPangram(input) {
+  let phrasemask = 0;
+  [...input].forEach((letter) => {
+    if (letter >= 'a' && letter <= 'z')
+      phrasemask |= 1 << (letter.charCodeAt(0) - A_LCASE);
+    else if (letter >= 'A' && letter <= 'Z')
+      phrasemask |= 1 << (letter.charCodeAt(0) - A_UCASE);
+  });
+  return phrasemask == ALL_26_BITS_SET;
+}
+```
+
+This solution uses the [ASCII][ascii] value of the letter to set the corresponding bit position.
+
+Some [const][const]ants are defined for readability in the function.
+The ASCII value for `a` is `97`.
+The ASCII value for `A` is `65`.
+The value for all of the rightmost 26 bits being set is `67108863`.
+
+- [Spread syntax][spread-syntax] is used to make an [`Array`][array] of the characters in the `input`.
+- The `Array` method [`forEach`][foreach] loops through the characters and looks for a character being `a` through `z` or `A` through `Z`.
+- If a letter is found, then its ASCII value is taken by the [`charCodeAt`][charcodeat] method.
+
+```exercism/note
+`charCodeAt` actually returns the UTF-16 code unit for the character, which is an integer between `0` and `65535`.
+For the letters `a`-`z` and `A`-`Z`, the UTF-16 number is the same value as the ASCII value.
+```
+
+- If the lowercase letter is subtracted by `97`, then `a` will result in `0`, because `97` minus `97` equals `0`.
+  `z` would result in `25`, because `122` minus `97` equals `25`.
+  So `a` would have `1` [shifted left][shift-left] 0 places (so not shifted at all) and `z` would have `1` shifted left 25 places.
+- If the uppercase letter is subtracted by `A`, then `A` will result in `0`, because `65` minus `65` equals `0`.
+  `Z` would result in `25`, because `90` minus `65` equals `25`.
+  So `A` would have `1` [shifted left][shift-left] 0 places (so not shifted at all) and `Z` would have `1` shifted left 25 places.
+
+In that way, both a lowercase `z` and an uppercase `Z` can share the same position in the bit field.
+
+So, for an integer, if the values for `a` and `Z` were both set, the bits would look like
+
+```
+      zyxwvutsrqponmlkjihgfedcba
+00000010000000000000000000000001
+```
+
+We can use the [bitwise OR operator][or] to set the bit.
+After the loop completes, the function returns if the `phrasemask` value is the same value as when all `26` bits are set, which is `67108863`.
+
+[ascii]: https://www.asciitable.com/
+[const]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+[spread-syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+[array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
+[foreach]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
+[charcodeat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+[shift-left]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift
+[or]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR

exercises/practice/pangram/.approaches/bitfield/snippet.txt

@@ -0,0 +1,7 @@
+[...input].forEach((letter) => {
+  if (letter >= "a" && letter <= "z")
+    phrasemask |= 1 << (letter.charCodeAt(0) - A_LCASE);
+  else if (letter >= "A" && letter <= "Z")
+    phrasemask |= 1 << (letter.charCodeAt(0) - A_UCASE);
+});
+return phrasemask == ALL_26_BITS_SET;

exercises/practice/pangram/.approaches/config.json

@@ -0,0 +1,28 @@
+{
+  "introduction": {
+    "authors": ["bobahop"]
+  },
+  "approaches": [
+    {
+      "uuid": "2495f79d-9ef9-4f38-abad-f3af8f1f217e",
+      "slug": "every-includes",
+      "title": "every with includes",
+      "blurb": "Use every with includes.",
+      "authors": ["bobahop"]
+    },
+    {
+      "uuid": "5d19ca5a-9eb2-42fc-bf23-ebf66b7e4959",
+      "slug": "set-size",
+      "title": "Set with size",
+      "blurb": "Use Set with size.",
+      "authors": ["bobahop"]
+    },
+    {
+      "uuid": "44eff693-c28f-4928-9f45-7a9c7e79b843",
+      "slug": "bitfield",
+      "title": "Bit field",
+      "blurb": "Use a bit field to keep track of used letters.",
+      "authors": ["bobahop"]
+    }
+  ]
+}

exercises/practice/pangram/.approaches/every-includes/content.md

@@ -0,0 +1,24 @@
+# `every` with `includes` on lowercased letters
+
+```javascript
+export function isPangram(input) {
+  const inputLowered = input.toLowerCase();
+  return [...'abcdefghijklmnopqrstuvwxyz'].every((c) =>
+    inputLowered.includes(c)
+  );
+}
+```
+
+- This begins by lowercasing the input by using the [`String`][string] [`toLowerCase`][tolower] method.
+- It uses [spread syntax][spread-syntax] to make an [Array][array] out of a `string` of the alphabet.
+- It then checks if all letters in the alphabet are contained in the input,
+  using the `Array` method [`every`][every] with the `String` method [`includes`][includes].
+
+If all letters of the alphabet are in the `input`, then the function returns `true`.
+
+[string]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
+[tolower]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+[spread-syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+[array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
+[every]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
+[includes]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes

exercises/practice/pangram/.approaches/every-includes/snippet.txt

@@ -0,0 +1,6 @@
+export function isPangram(input) {
+  const inputLowered = input.toLowerCase();
+  return [..."abcdefghijklmnopqrstuvwxyz"].every((c) =>
+    inputLowered.includes(c)
+  );
+}

exercises/practice/pangram/.approaches/introduction.md

@@ -0,0 +1,55 @@
+# Introduction
+
+There are various idomatic approaches to Pangram.
+You can use the `every` method with the `includes` method.
+Or you can use the `Set` object with the `size` property.
+
+## General guidance
+
+The key to solving Pangram is determining if all of the letters in the alphabet are in the `string` being tested.
+The occurrence of either the letter `a` or the letter `A` would count as the same letter.
+
+## Approach: `every` with `includes`
+
+```javascript
+export function isPangram(input) {
+  const inputLowered = input.toLowerCase();
+  return [...'abcdefghijklmnopqrstuvwxyz'].every((c) =>
+    inputLowered.includes(c)
+  );
+}
+```
+
+For more information, check the [`every` with `includes` approach][approach-every-includes].
+
+## Approach: `Set` with `size`
+
+```javascript
+export function isPangram(input) {
+  return new Set(input.toLowerCase().match(/[a-z]/g)).size === 26;
+}
+```
+
+For more information, check the [`Set` with `size`approach][approach-set-size]
+
+## Other approaches
+
+Besides the aforementioned, idiomatic approaches, you could also approach the exercise as follows:
+
+### Other approach: Bit field
+
+Another approach can use a bit field to keep track of used letters.
+For more information, check the [Bit field approach][approach-bitfield].
+
+## Which approach to use?
+
+Testing `"the _1_ quick brown fox jumps over the _2_ lazy dogs"` on [JSBench.me][jsbench-me]:
+
+- The `every` with `includes` approach benched fastest.
+- Although the bit field approach is often faster in other languages, it was about 45% slower.
+- `Set` with `size` was about 75% slower.
+
+[approach-every-includes]: https://exercism.org/tracks/javascript/exercises/pangram/approaches/every-includes
+[approach-set-size]: https://exercism.org/tracks/javascript/exercises/pangram/approaches/set-size
+[approach-bitfield]: https://exercism.org/tracks/javascript/exercises/pangram/approaches/bitfield
+[jsbench-me]: https://jsbench.me/

exercises/practice/pangram/.approaches/set-size/content.md

@@ -0,0 +1,32 @@
+# `Set` with `size`
+
+```javascript
+export function isPangram(input) {
+  return new Set(input.toLowerCase().match(/[a-z]/g)).size === 26;
+}
+```
+
+This approach creates a [`Set`][set] of the unique letters in the `input` and tests its [size][size] to determine the result.
+
+- It first creates a new `Set` made from the [lowercased][tolowercase] characters of the `input`
+  that only [match][match] the [regular expression][regex] pattern for letters from `a`-`z`.
+- The function returns if the `size` of the `Set` is `26`.
+  If the number of unique letters in the `Set` is equal to the `26` letters in the alphabet, then the function will return `true`.
+
+## Shortening
+
+When the body of a function is a single expression, the function can be implemented as an [arrow function][arrow-function], like so
+
+```javascript
+export const isPangram = (input) =>
+  new Set(input.toLowerCase().match(/[a-z]/g)).size === 26;
+```
+
+Notice that `return` and the curly braces are not needed.
+
+[set]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
+[size]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size
+[tolowercase]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+[match]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
+[regex]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
+[arrow-function]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

exercises/practice/pangram/.approaches/set-size/snippet.txt

@@ -0,0 +1,3 @@
+export function isPangram(input) {
+  return new Set(input.toLowerCase().match(/[a-z]/g)).size === 26;
+}