Javascript snippets you need to know right now 🔥 - #1
Tags: javascript, webdev, beginners, programming
Published: 2021-11-10 16:06:10

JavaScript is one of the most popular languages you can learn. As many people say: “If you’re going to learn just one programming language, go for JavaScript.”

If this sounds compelling to you, I am starting a series where i give 10 Javascript snippets every Wednesday for 5 weeks.
This tweet of mine had originally inspired me to create this series, do drop a like and follow me.
{% tweet 1456165753359527938 %}

Here’s a list of 10 beneficial snippets that you can learn and use immediately.

### Lets get started!

1️⃣ all

This snippet returns true if the predicate function returns true for all elements in a collection and false otherwise. You can omit the second argument 'fn' if you want to use Boolean as a default value.
```js
const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
```

2️⃣ arrayToCSV

This snippet converts the elements to strings with comma-separated values.
```js
const arrayToCSV = (arr, delimiter = ',') =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
  
arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'
```

3️⃣ arrayToHtmlList

This snippet converts the elements of an array into list tags and appends them to the list of the given ID.
```js
const arrayToHtmlList = (arr, listID) =>
  (el => (
    (el = document.querySelector('#' + listID)),
    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
  ))();
  
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
```

4️⃣ bifurcate

This snippet splits values into two groups and then puts a truthy element of filter in the first group, and in the second group otherwise.

You can use Array.prototype.reduce()and Array.prototype.push()to add elements to groups based on filter.
```js
const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]
```

5️⃣ byteSize

This snippet returns the length of a string in bytes.
```js
const byteSize = str => new Blob([str]).size;

byteSize('😀'); // 4
byteSize('Hello World'); // 11
```

6️⃣ capitalize

This snippet capitalizes the first letter of a string.
```js
const capitalize = ([first, ...rest]) =>
  first.toUpperCase() + rest.join('');
  
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'
```

7️⃣ dayOfYear

This snippet gets the day of the year from a Dateobject.
```js
const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272
```

8️⃣ decapitalize

This snippet turns the first letter of a string into lowercase.
```js
const decapitalize = ([first, ...rest]) =>
  first.toLowerCase() + rest.join('')

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar'); // 'fooBar'
```

9️⃣ countOccurrences

This snippet counts the occurrences of a value in an array.
```js
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3
```

🔟 default
This snippet assigns default values for all properties in an object that are undefined.
```js
const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);

defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }
```

***

Until next Wed,
[Abhiraj](https://abhiraj.glitch.me)