DEV Community: Mauro Bono

Regex Domination to Become an Algorithms Wizard (Basic)

Mauro Bono — Tue, 30 Jul 2019 14:47:46 +0000

In this article I want to take a close look at one of the most weird argument I found while learning to code: Regular Expressions.
Any time I work with Regular Expressions I feel like Jon Snow in front of Ygritte listening to her saying "YOU KNOW NOTHING, JON SNOW".
Probably it's because any time I get in touch with Regular Expressions it seems I know nothing about them ☹. It seems that there's always something new to learn that I miss or don't know.
I like to think that any Super Coder out there the first time he/she got in touch with Regex felt the same as me.

After a lot of practice with algorithms on FreeCodeCamp or Codewars I can tell you that Regular Expressions are difficult to understand in the beginning, but very useful and friendly when it comes to solve different kind of problems in Javascript.
So: let's start diving in the Regular Expressions World!

What the hell are Regular Expressions ?
According to Mozilla Developers Network Regular Expressions are:

patterns used to match character combinations in strings.

It means Regex, for short, allows us to check a series of characters for matches in strings.
They are commonly used for validating data, performing advanced searches, replacing or updating text, and more.
When you need to validate something like phone numbers, email addresses or passwords in your code you need to use a Regex.
So...learn it! 😄

CREATING A REGULAR EXPRESSION

In Javascript there are a couple of ways to create a regular expression:
a. Regex Literal:
This is the most used syntax and the one I'm going to use in this article.
Syntax: let regex = /wizard/;

b. Regex Constructor:
This syntax is very handy when you need to create regex dynamically.
Syntax: let regex = new RegExp('wizard');

Now that we know how to create a Regex let's use our knowledge to create a simple one:
First Regex: /wizard/;
This is the string where we want to check for our Regex: "become an algorithms wizard is very hard!".
Result: "become an algorithms wizard is very hard!".
The regex we created literaly matches the word 'wizard'. Nothing more, nothing less.

REGULAR EXPRESSION JS METHODS

In Javascript there are different methods to work with Regex. I'll talk about just a couple.
a. test() that tests whether there's a match or not of the regex against a given string. It returns a Boolean value.
Example:

  let string = 'May the Force be with you';
  let regex = /Force/;
  let result = regex.test(string);
  console.log(result); // true

b. match() that returns an array containing all matched groups of characters. It is always tested against a string. If there is no match found it returns null.
Example:

  let string = 'May the Force be with you';
  let regex = /Force/;
  let result = string.match(regex);
  console.log(result);
  /**
   * output:
   * [ 'Force',
        index: 8,
        input: 'May the Force be with you',
        groups: undefined
      ]
  */

SIMPLE PATTERN

Up till now we used only this kind of regex. It matches a literal pattern.
Let's make just another example:

let string = 'I find your lack of faith disturbing.';
let regex = /faith/;
let result = string.match(regex);
console.log(result);
/**
 * [ 'faith',
    index: 20,
    input: 'I find your lack of faith disturbing.',
    groups: undefined
  ]
 */

FUN WITH FLAGS

Regex are case sensitive and look only for a first match.
Mr Stephen Cole Kleene, inventor of Regex, was a good man and gave us the possibilities to check both for case insensitive and for more than a single match.
He let us use the so called flags. They are also simple to use: just add them after the closing forward slash. Remember you can combine different flags and the order doesn't affect the search.
Syntax: /pattern/flags
A. g - Global flag that don't return after the first match
Examples:


  //No Global Flag Example
  let string = 'force force force';
  let regex = /force/; // no global flag
  let result = string.match(regex); //it will return only the first match at index 0
  console.log(result);
  /**
   * [ 'force',
      index: 0,
      input: 'force force force',
      groups: undefined
    ]
  */

  //Example with Global Flag
  let string = 'force force force';
  let regex = /force/g; // global flag on
  let result = string.match(regex); // it will all matches
  console.log(result); //['force', 'force', 'force'];

B. i - Case Insensitive flag
Examples:

  //No Case Insensitive Flag
  let string = 'force force Force'; //last word is uppercased
  let regex = /force/g; // no case-insensitive flag
  let result = string.match(regex); //it will return only the first two matches
  console.log(result); //['force', 'force'];

  //Case Sensitive Flag
  let string = 'force force Force'; //last word is uppercased
  let regex = /force/gi; // case-insensitive flag
  let result = string.match(regex); //it will return all matches
  console.log(result); //['force', 'force', 'Force'];

CHARACTER SETS

It matches any single character in the string from characters present inside the square brackets /[abc]/.
For instance the above /[abc]/ means "hey, look for a, b or c inside the string"
Syntax: /[abc]/ It matches a, b or c inside a string.
Examples:

let string = 'foo poo zoo';
let regex = /[fpz]oo/gi; // matches any f, p or z followed by 'oo'
let result = string.match(regex);
console.log(result); //[ 'foo', 'poo', 'zoo' ]

//Using another Character Set it is possible to match any Vowels like 'o' 😉
//Take a look:
let string = 'foo poo zoo';
let regex = /[fpz][aeiou][aeiou]/gi; // matches any f, p or z followed by a couple of vowels
let result = string.match(regex);
console.log(result); //[ 'foo', 'poo', 'zoo' ]

//Another one:
let string = 'foo faa fee';
let regex = /f[aeiou][aeiou]/gi; // matches any f followed by a couple of vowels
let result = string.match(regex);
console.log(result); //[ 'foo', 'faa', 'fee' ]

NEGATED CHARACTER SETS

It matches anything that is not enclosed in the brackets if a caret followes the opening bracket /[^abc]/.
For instance the above /[^abc]/ means "hey, look for a character but a, b or c inside the string".
Examples:

let string = 'fun sun gun';
let regex = /[^fs][aeiou]n/gi; // matches anything but f and s followed by a vowel and a 'n'
let result = string.match(regex);
console.log(result); //[ 'gun' ]

//Look at this one
let string = 'fun sun gun';
let regex = /[fsg][^aeiou]n/gi; // matches f,s or g followed by a letter except a vowel and then by a n
let result = string.match(regex);
console.log(result); //null

RANGES

Square brackets can also contain a range of characters to look for inside a string like this /[a-c]/.
For instance the above /[a-c]/ means "hey, look for a range of characters from a to c inside the string". It will search for a, b and c.
It is very easy to look for any letter of the alphabet using this regex: /[a-z]/
Syntax: /[a-c]/ It matches a, b or c inside a string.
Examples:

let string = 'fear tear bear';
let regex = /[a-z]ear/gi; // matches any letter of the alphabet followed by 'ear'
let result = string.match(regex);
console.log(result); // ["fear", "tear", "bear"]

//Another example with a range of numbers
let string = 't85 x76 c9';
let regex = /[a-z][0-9][0-9]/gi; // matches any letter of the alphabet followed by 2 numbers from 0 to 9
let result = string.match(regex);
console.log(result); //["t85", "x76"]

NEGATED RANGES

Like for Character Sets it is possible to negate even a range of characters so, for example, /[^a-z]/ means "hey, get any characters but a lowercased letter from the alphabet, we really don't need it!".
Examples:

let string = '88c foo @4c';
let regex = /[^a-z][^a-z][a-z]/gi; // matches a couple of non alphabet letter followed by a letter
let result = string.match(regex);
console.log(result); //["88c", "@4c"]

META CHARACTERS

Regular Expressions have characters with a very special meaning. I'm going to cover the most used.
a. \d matches any digit like [0-9]
b. \w matches any word character, it means any letter, numbers and underscore like [a-zA-Z0-9_]
c. \s matches a whitespace character. Spaces, tabs and similar.
d. \t matches a tab character.
e. . the period matches any character except newline.
f. \D matches any non digit characters like [^0-9].
g. \W matches any non word characters like [^a-zA-Z0-9_].
h. \S matches a non whitespace character.

QUANTIFIERS

They are symbols that have a special meaning in a regex.

a. + matches the preceding expression 1 or more times (unlimited)
Example:

  let string = '8 88 888';
  let regex = /\d+/g; // matches a pattern of one or more digits
  let result = string.match(regex);
  console.log(result); //["8", "88", "888"]

  //Look here:
  let string = 'force 88 888';
  let regex = /\d+/g; // matches a pattern of one or more digits
  let result = string.match(regex);
  console.log(result); //[88", "888"]

  //Look at this piece of cake
  let string = 'gd god good goooooooooood';
  let regex = /go+d/g; // matches a pattern of one or more letter o
  let result = string.match(regex);
  console.log(result); //["god", "good", "goooooooooood"]

b. /*/ matches the preceding expression 0 or more times (unlimited)

  let string = 'gd god good goooooooooood';
  let regex = /go*d/g; // matches a pattern of zero or more letter o
  let result = string.match(regex);
  console.log(result); //["gd", "god", "good", "goooooooooood"]

c. ? matches the preceding expression 0 or 1 time, so the preceding pattern is optional

  let string = 'god good goooooooooood';
  let regex = /goo?d/g; // matches god or good and the second o is optional!
  let result = string.match(regex);
  console.log(result); //["god", "good"]

d. ^ matches the beginning of the string and the follow regex must be at the start of the test string.

  let string = 'force';
  let regex = /^f/; // the string must start with a f
  let result = regex.test(string);
  console.log(result); //true

  //Another example
  let string = '888';
  let regex = /^[0-9]/; // the string must start with a number
  let result = regex.test(string);
  console.log(result); //true

  //Another one
  let string = 'pass0999';
  let regex = /^[0-9]\w+/; // the string must start with a number and followed by any word chars
  let result = regex.test(string);
  console.log(result); //false

e. $ matches the end of the string and the regex that precedes must be at the end of the test string.

  let string = 'pass0999';
  let regex = /\d$/; // the string must end with a digit
  let result = regex.test(string);
  console.log(result); //true

f. {x} matches exactly x occurences of the preceding regex.

  let string = 'god good goood';
  let regex = /go{2}d/gi; // check for g followed by 2 letter o and then g
  let result = string.match(regex);
  console.log(result); //["good"]

g. {x, } matches at least x occurences of the preceding regex.

  let string = 'god good goood';
  let regex = /go{2,}d/gi; // check for g followed by at least 2 letters o and then g
  let result = string.match(regex);
  console.log(result); //["good", "goood"]

h. {x, y} matches at least x occurences and at most y occurences of the preceding regex.

  let string = 'god good goood gooood';
  let regex = /go{2,3}d/gi; // check for g followed by at least 2 and at most 3 letters o and then d
  let result = string.match(regex);
  console.log(result); //["good", "goood"]

i. x|y matches either x or y.

  let string = 'good';
  let regex = /good|bad/; // check either for 'good' or 'bad'
  let result = regex.test(string);
  console.log(result); //true

  //And
  let string = 'bad';
  let regex = /good|bad/; // check either for 'good' or 'bad'
  let result = regex.test(string);
  console.log(result); //true

Attention — In case you want to use any special character as a part of the regex, say for example you want to match literal . or ?, you have to escape them with backslash \ .

And finally a fast recap of what we saw in this first article on Regex Basic

let regex;
//SINGLE REGEX PATTERN
regex = /abc/; //match a specific string

//FLAGS
regex = /abc/i; //match a specific string case insensitive
regex = /abc/g; //match a specific string globally
regex = /abc/gi; //match a specific string globally and case insensitive

//CHARACTER SETS AND NEGATIVE CHARACTER SETS
regex = /[abc]/; //match a specific characters set
regex = /[^abc]/; //not match a specific characters set

//RANGE OF CHARACTERS AND NEGATIVE RANGE OF CHARACTERS
regex = /[a-z]/; //match a range of characters
regex = /[^a-z]/; //not match a range of characters

//METACHARACTERS
regex = /\d/; // matches any digit
regex = /\D/; // matches any non-digit
regex = /\w/; // matches any word character, underscore included (a-z, A-Z, 0-9, _)
regex = /\W/; // matches any non-word character
regex = /\s/; // matches any white space character (\r (carriage return),\n (new line), \t (tab), \f (form feed))
regex = /\S/; // matches any non-white space character
regex = /\t/; // matches any tab

//QUANTIFIERS
regex = /[0-9]+/; //match a range of characters for one or unlimited times
regex = /[0-9]{2}/; //match a range of characters exactly 2 times
regex = /[0-9]{2,3}/; //match a range of characters from 2 to 3 times
regex = /[0-9]{2,}/; //match a range of characters from 2 to unlimited times

That’s it for the Basic of Regular Expressions. A new article on more advanced features will follow.
Meanwhile don't forget to practice these basic skills.
If you want you can do it online at a very good website like Regex101.

I will update this article with new information and some algorithms on regex, based on the reactions and comments.
If you found this article helpful, please hit the 💖 or 🦄 button and share the article, so it could help others.
Follow me on Twitter.

Code Long And Prosper

Map, Filter, Reduce and others Arrays Iterators You Must Know to Become an Algorithms Wizard

Mauro Bono — Thu, 25 Jul 2019 10:16:16 +0000

In this article we are going to take a close look at some arrays iterators like map, filter, reduce or others methods that use callbacks to make arrays more flexible and help you solve problems and algorithms in javascript.
Learning these higher order functions is an important step towards being able to write clean functional code, and opens the doors to the vastly powerful techniques of functional and reactive programming.

1) Loop an array with forEach();
A great alternative of a for loop is surely the forEach method. It loops through the array and invokes a callback function using each value as an argument. The callback function takes 3 different parameters: the value in the array, the current index and the array that the callback is being called on. There is also a fourth value and it is the one to use as this when executing the callback (if it is not provided it will be undefined).
Attention: forEach() does not mutate the array on which it is called


const cities = ['ROME', 'PARIS', 'LONDON', 'LOS ANGELES', 'VIENNA'];

cities.forEach((value, index, array) => {
  console.log(`${index + 1} ${value}`); //output: 1 ROME, 2 PARIS, 3 LONDON, 4 LOS ANGELES, 5 VIENNA
});

//we can use it to invert the "cities" array...even though with reverse() would be better 😉
const invertedCities = [];
cities.forEach((value, index, array) => invertedCities.unshift(value));
console.log(invertedCities); //output: ["VIENNA", "LOS ANGELES", "LONDON", "PARIS", "ROME"]

2) Create a new array with the results of a function called on every element of the original array with map();
Very similar to the forEach() method. It iterates over an array and takes a callback function as a parameter that is invoked on each item in the original array. The difference is that it returns a new array that replaces each value with the return value of the callback function.


//Let's create a new array with all our numbers squared
const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers); //output: [1, 4, 9, 16, 25]

//We all know which is the most beautiful city in the World... 😉
const cities = ['ROME', 'PARIS', 'LONDON', 'LOS ANGELES', 'VIENNA'];
const bestCity = cities.map(city => (city === 'ROME' ? city : 'ROME'));
console.log(bestCity); //output: ["ROME", "ROME", "ROME", "ROME", "ROME"]

//Let's create an array of HTML tag
const html = cities.map(city => `<li>${city}</li>`);
console.log(html); //output: ["<li>ROME</li>", "<li>PARIS</li>", "<li>LONDON</li>", "<li>LOS ANGELES</li>", "<li>VIENNA</li>"]

//Transform an array of strings in an array of objects
const metalBands = ['IRON MAIDEN', 'SLAYER', 'JUDAS PRIEST'];
const collection = metalBands.map((band, index) => {
  let obj = {}; //create an empty object at any call of the loop
  obj.id = index; //create a key called "id" and set it equal to our index parameter
  obj.band = band; //create a key called "band" and set it equal to our band parameter
  return obj; //return an object at any call with key/value pairs like this: {id: 'index', band: 'band-name'}
});
console.log(collection); //output: [{id: 0, band: "IRON MAIDEN"},{id: 1, band: "SLAYER"}, {id: 2, band: "JUDAS PRIEST"}]

3) Filter values of an array with filter();
It returns a new array that only contains items from the original array that return true when passed to the callback.


const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//Return an array of even values from numbers
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); //output: [2, 4, 6, 8, 10]

//Return an array of odd values from numbers
const odds = numbers.filter(num => num % 2 !== 0);
console.log(odds); //output: [1, 3, 5, 7, 9]

//All the roads lead to Rome 🚋 ...
const cities = ['ROME', 'PARIS', 'LONDON', 'LOS ANGELES', 'VIENNA'];
const rome = cities.filter(city => city == 'ROME');
console.log(rome); //output: ["ROME"]

//You can chain together this methods 🚀🚀🚀
//Example: let's square all even numbers
const squaredEvens = numbers.filter(num => num % 2 === 0).map(num => num * num);
console.log(squaredEvens); //output: [4, 16, 36, 64, 100];

4) Cumulatively combine each result to return a single value with reduce();
This is where the real magic happens! reduce() is the "cornerstone" of functional programming and if you'll get it you are on the right path to become a JS Wizard 🤘😉🤘
It is another method that iterates over each item in the array, but this time it cumulatively combines each result to return just a single value.
The callback function is used to describe how to combine each value of the array with the running total. This is often used for calculation of data stored in an array.
The reducer function takes four arguments: accumulator, current value, current index and source array. It also accepts an initial value to use as the first argument to the first call of your callback.


const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//Let's start with a basic example
//Sum all the numbers in an array of integers
const sum = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
  //Look we set the Initial Value to 0, because it is a sum so the count starts at 0
  //So our Accumulator is 0 at first call and we sum it with the Current Value that is 1 at first call...
  //the new Accumulator will be 0 + 1 = 1 ...at any call the Current Value will be added to it
  //till the end of the array
  return accumulator + currentValue;
}, 0);
console.log(sum); // output: 55

//Same example setting the Initial Value to 1 instead of 0 will return ... 56
const anotherSum = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue;
}, 1);
console.log(anotherSum); // output: 56

//Sum from an array of objects
const integers = [{ x: 1 }, { x: 2 }, { x: 3 }];
const anotherSumAgain = integers.reduce((acc, val, idx, array) => {
  return acc + val.x;
}, 0);
console.log(anotherSumAgain); // output: 6

//Count vowels in a string (even though it's easier with regex 😉)
const maryPoppins = 'supercalifragilisticexpialidocious';
const onlyVowels = maryPoppins.replace(/[^aeiou]/gi, ''); //'ueaiaiiieiaioiou'
const arrOfVowels = [...onlyVowels]; //["u", "e", "a", "i", "a", "i", "i", "i", "e", "i", "a", "i", "o", "i", "o", "u"]
const countVowels = arrOfVowels.reduce((acc, val) => {
  acc.hasOwnProperty(val) ? (acc[val] += 1) : (acc[val] = 0);
  return acc;
}, {});
console.log(countVowels); // output: {u: 1, e: 1, a: 2, i: 6, o: 1}

//Flatten an array of arrays
//Hey! I know ES2019 gave us flat and flatMap methods, but we MUST learn reduce() now 😉
const someData = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flatten = someData.reduce((acc, val) => {
  //set the initial value to an empty array
  return acc.concat(val);
}, []);
console.log(flatten); // output: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

//Sum all countries population except China
const population = [
  {
    country: 'China',
    pop: 1409517397
  },
  {
    country: 'India',
    pop: 1339180127
  },
  {
    country: 'USA',
    pop: 324459463
  },
  {
    country: 'Indonesia',
    pop: 263991379
  }
];
const sumPopulationButNotChina = population.reduce((acc, val) => {
  // we use the Ternary Operator as a "filter"
  //if val.country is not equal to "China" we add the value to the accumulator
  //if it is equal to "China" we add nothing and simply return the accumulator
  return val.country !== 'China' ? acc + val.pop : acc;
}, 0);

console.log(sumPopulationButNotChina); // output: 1927630969

Similar to reduce() is reduceRight. It applies a function against an accumulator and each value of the array but from right-to-left. I'm not going to cover it here, because it only will be a repetition of what already said for reduce().

5) Check if all array items pass a test with every();
The callback function to be used as the test takes 3 arguments: current value, index and the array. The return value is a Boolean. True if the callback function return truthy value for any element in the array. Otherwise false.


//Check if all values are more than zero
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const moreThanZero = numbers.every((val, index, array) => val > 0);
console.log(moreThanZero); //true

const numbersAgain = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const moreThanZeroAgain = numbersAgain.every((val, index, array) => val > 0);
console.log(moreThanZeroAgain); //false

//Check if there are more than 1000000 people in all the countries
const population = [
  {
    country: 'China',
    pop: 1409517397
  },
  {
    country: 'India',
    pop: 1339180127
  },
  {
    country: 'USA',
    pop: 324459463
  },
  {
    country: 'Indonesia',
    pop: 263991379
  }
];

const check = population.every(val => val.pop > 1000000);
console.log(check); //true

6) Check if some array items pass a test with some();
The callback function to be used as the test takes 3 arguments: current value, index and the array. The return value is a Boolean. True if the callback function return a truthy value for at least one element in the array. Otherwise false.


//Check if a value is more than zero in the array
const numbers = [-1, -2, 0, 10];
const moreThanZero = numbers.some((val, index, array) => val > 0);
console.log(moreThanZero); //true

const numbersAgain = [0, -1, -2];
const moreThanZeroAgain = numbersAgain.some((val, index, array) => val > 0);
console.log(moreThanZeroAgain); //false

//Check if there is at least a country with less than 1000000 people
const population = [
  {
    country: 'China',
    pop: 1409517397
  },
  {
    country: 'India',
    pop: 1339180127
  },
  {
    country: 'USA',
    pop: 324459463
  },
  {
    country: 'Indonesia',
    pop: 263991379
  }
];

const check = population.some(val => val.pop < 1000000);
console.log(check); //false

7) Find the first array item that passes a test with find();
The callback function to be used as the test takes 3 arguments: current value, index and the array. The return value is the item itself if an item at least passes the test. Otherwise it returns undefined.


//Check if there is a value more than 7
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const moreThanSeven = numbers.find((val, index, array) => val > 7);
console.log(moreThanSeven); //8
//Check if there is a value more than 42
const moreThanFortyTwo = numbers.find((val, index, array) => val > 42);
console.log(moreThanFortyTwo); //undefined

//Check if there is a country with more than 100000000 people
const population = [
  {
    country: 'China',
    pop: 1409517397
  },
  {
    country: 'India',
    pop: 1339180127
  },
  {
    country: 'USA',
    pop: 324459463
  },
  {
    country: 'Indonesia',
    pop: 263991379
  }
];

const check = population.find(val => val.pop > 100000000);
console.log(check); //{ country: 'China', pop: 1409517397 }

This don't want to be an exhaustive list of all javascript array iterators, but a list of those I find out to be the most important when it comes to solve problems and algorithms.
To get better at JS and problem solving I suggest to "play" a lot with all these methods and to subscribe both on FreeCodeCamp or Codewars where you can find a lot of algorithms to work with and brush up your javascript knowledge.
On Codewars you can look for 7kyu or 6kyu algorithms about "arrays" and train with them. It will be funny and useful!

If you are interested in this kind of articles take a look at these:
Javascript String Methods You Must Know to Become an Algorithms Wizard
Javascript Arrays Methods You Must Know to Become an Algorithms Wizard

I will update this article with new information and some algorithms on arrays, based on the reactions and comments.
Follow me on Twitter

Code Long And Prosper

Javascript Arrays Methods You Must Know to Become an Algorithms Wizard

Mauro Bono — Tue, 09 Jul 2019 13:39:53 +0000

This time I want to talk about basic Arrays Methods which are commonly used in Javascript to solve problems and algorithms.

I've been working on solving algorithms both on FreeCodeCamp and CodeWars for the last 4 weeks and find out I used a lot of times this methods.

If you are interested in String Methods you can check my previous post about them:
Javascript String Methods You Must Know to Become an Algorithms Wizard

First thing first before talking about array methods always remember array index starts at 0 !

1) Getting the length of any array with .length .

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.length); //6
//This is a mutable property...you can change it "manually"
avengers.length = 8;
console.log(avengers); //["Captain America", "Iron Man", "Thor", "Hulk", "Hawkeye", "Black Widow", empty × 2]
//If you try to retrieve one of the two elements added...it will give you "undefined"
console.log(avengers[7]); //undefined

2) Remove last item of an array with pop(). It changes the length of the array and returns the removed element.

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.pop()); //Black Widow
console.log(avengers); //[ 'Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye' ]
console.log(avengers.length); //5

//Attention: If you call pop() on an empty array, it returns undefined !
const emptyArray = [];
console.log(emptyArray.pop()); //undefined

3) Remove first item of an array with shift(). It changes the length of the array and returns the removed item.

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.shift()); //Captain America
console.log(avengers); //['Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow' ]
console.log(avengers.length); //5

//Attention: If you call shift() on an empty array, it returns undefined !
const emptyArray = [];
console.log(emptyArray.shift()); //undefined

4) Add one or more items at the end of an array with push(). It returns and changes the length of the array.

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.push('DeadPool')); // 7
console.log(avengers); //['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow', 'DeadPool']

const animals = ['snake', 'bear', 'hawk'];
console.log(animals.push('monkey', 'cat', 'dog')); // 6
console.log(animals); //[ 'snake', 'bear', 'hawk', 'monkey', 'cat', 'dog' ]

5) Add one or more items to the beginning of an array with unshift(). It returns and changes the length of the array.

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.unshift('DeadPool')); // 7
console.log(avengers); //['DeadPool', 'Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow']

const animals = ['snake', 'bear', 'hawk'];
console.log(animals.unshift('monkey', 'cat', 'dog')); // 6
console.log(animals); //['monkey', 'cat', 'dog', 'snake', 'bear', 'hawk']

6) Merge an array with one or more arrays with concat(). It will not change the original array, but creats a new one. With ES6 spred operator it is possible to get the same result. It consists in three dots ... placed in front of the array you want to spread and has the effect of spreading out all the values in each array, which allows them to be placed inside a new array.

const firstArr = [0, 1, 2, 3, 4, 5];
const secondArr = [6, 7, 8, 9, 10];

console.log(firstArr.concat(secondArr)); //[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(secondArr.concat(firstArr)); //[ 6, 7, 8, 9, 10, 0, 1, 2, 3, 4, 5 ]
console.log(secondArr.concat(firstArr, secondArr)); //[ 6, 7, 8, 9, 10, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

//ES6 SPREAD OPERATOR
console.log([...firstArr, ...secondArr]); //[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log([...secondArr, ...firstArr]); //[ 6, 7, 8, 9, 10, 0, 1, 2, 3, 4, 5 ]
console.log([...secondArr, ...firstArr, ...secondArr]); //[ 6, 7, 8, 9, 10, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

7) Turn an array into a string with join(). The string comprises all the items in the array separated by commas. Attention: You can choose a separator other than a comma by placing it inside the brackets.

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.join()); //Captain America,Iron Man,Thor,Hulk,Hawkeye,Black Widow
console.log(avengers.join(' - ')); //Captain America - Iron Man - Thor - Hulk - Hawkeye - Black Widow
console.log(avengers.join(', ')); //Captain America, Iron Man, Thor, Hulk, Hawkeye, Black Widow
console.log(avengers.join(' & ')); //Captain America & Iron Man & Thor & Hulk & Hawkeye & Black Widow

8) Create a subarray with slice(). It chops out a slice of the original array starting from one position and ending to another. This is a non-destructive operation! The original array remains the same.

const avengers = ['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers.slice(2, 4)); //[ 'Thor', 'Hulk' ]
console.log(avengers.slice(0, 1)); //[ 'Captain America' ]
console.log(avengers); //['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow']

//If begin parameter is not defined it slices from index 0
console.log(avengers.slice()); //['Captain America', 'Iron Man', 'Thor', 'Hulk', 'Hawkeye', 'Black Widow']
//if end parameter is not defined it slices from begin to array length
console.log(avengers.slice(2)); //[ 'Thor', 'Hulk', 'Hawkeye', 'Black Widow' ]

//Attention: A negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence.
console.log(avengers.slice(-2)); //[ 'Hawkeye', 'Black Widow' ]
console.log(avengers.slice(2, -2)); //[ 'Thor', 'Hulk' ]

9) Change the content of an array, removing, replacing or adding items with splice(). It takes a first parameter (usually called start) equal to index where to start changing the array, a second parameter (itemsToDelete) equal to the number of items to remove from start. Every value after this is then inserted into the array in the same place the other items were removed. The return value is an array containing the deleted elements. It is a destructive method and it changes the original array.

const animals = ['monkey', 'bull', 'python', 'cow'];
console.log(animals.splice(3, 1, 'gorilla')); //[ 'cow' ]
console.log(animals); //[ 'monkey', 'bull', 'python', 'gorilla' ]
console.log(animals.splice(2, 2)); //[ 'python', 'gorilla' ];
console.log(animals); //[ 'monkey', 'bull' ]

//The splice() method can be used to insert values into an array at a specific index without removing any items, by indicating that zero items are to be removed:
const bestMetalBands = ['Iron Maiden', 'Slayer', 'Pantera', 'Megadeth', 'Judas Priest'];
console.log(bestMetalBands.splice(2, 0, 'Saxon')); //[]
console.log(bestMetalBands); //['Iron Maiden', 'Slayer', 'Saxon', 'Pantera', 'Megadeth', 'Judas Priest']
console.log(bestMetalBands.splice(2, 2)); //[ 'Saxon', 'Pantera' ]
console.log(bestMetalBands); //[ 'Iron Maiden', 'Slayer', 'Megadeth', 'Judas Priest' ]

//If you want to remove a value completely, you can use the splice() method with a length of 1 and without specifying any values to add
console.log(bestMetalBands.splice(2, 1)); //[ 'Slayer' ]
console.log(bestMetalBands); //[ 'Iron Maiden', 'Megadeth', 'Judas Priest' ]

10) Reverse the order of an array with reverse(). It changes the order of the array permanently.

const bestMetalBands = ['Iron Maiden', 'Slayer', 'Pantera', 'Megadeth', 'Judas Priest'];
console.log(bestMetalBands.reverse()); //[ 'Judas Priest', 'Megadeth', 'Pantera', 'Slayer', 'Iron Maiden' ]
console.log(bestMetalBands); //[ 'Judas Priest', 'Megadeth', 'Pantera', 'Slayer', 'Iron Maiden' ]

11) Sort the order of an array with sort(). It takes a so called compareFunction as parameter. If not defined the default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. This will create problems if a compareFunction is not defined for sorting an array of integers because they will be sorted alphabetically!

const bestMetalBands = ['Iron Maiden', 'Slayer', 'Pantera', 'Megadeth', 'Judas Priest'];
console.log(bestMetalBands.sort()); //[ 'Iron Maiden', 'Judas Priest', 'Megadeth', 'Pantera', 'Slayer' ]

const numbers = [4, 2, 5, 1, 3];
//ascending sorting
console.log(numbers.sort((a, b) => a - b)); //[ 1, 2, 3, 4, 5 ]
//descending sorting
console.log(numbers.sort((a, b) => b - a)); //[ 5, 4, 3, 2, 1 ]

12) Find the first occurrence of a value inside an array with indexOf(). If the value is in the array it returns the index of the first occurrence of that value. If not it returns -1. It has also a second optional parameter called fromIndex. The index where to start the search. If it is negative it is taken as the offset from the end of the array.

const bestMetalBands = ['Iron Maiden', 'Slayer', 'Pantera', 'Megadeth', 'Judas Priest'];
console.log(bestMetalBands.indexOf('Iron Maiden')); //0
console.log(bestMetalBands.indexOf('Megadeth')); //3
console.log(bestMetalBands.indexOf('Metallica')); //-1 ...they are no more a metal band ;)
console.log(bestMetalBands.indexOf('Iron Maiden', 2)); //-1

13) Find the last occurrence of a value inside an array with lastIndexOf(). If the value is in the array it returns the index of the last occurrence of that value. If not it returns -1. It has also a second optional parameter called fromIndex. The index where to start the search. If it is negative it is taken as the offset from the end of the array.

const numbers = [4, 2, 5, 1, 3, 5, 3];
console.log(numbers.lastIndexOf(5)); //5
console.log(numbers.lastIndexOf(3)); //6
console.log(numbers.lastIndexOf(3, -3)); //4
console.log(numbers.lastIndexOf(42)); //-1 ...It is hard to find the Meaning of Life

14) Find if an array contains an item or not with includes(). It will return a boolean value: true or false. It is possible to use also here the fromIndex parameter like in indexOf() or lastIndexOf().

const bestMetalBands = ['Iron Maiden', 'Slayer', 'Pantera', 'Megadeth', 'Judas Priest'];
console.log(bestMetalBands.includes('Slayer')); //true
console.log(bestMetalBands.includes('Slayer', 3)); //false
console.log(bestMetalBands.includes('Metallica')); //false...Again? They are no more a metal band!

15) Take values out of an array and present them as an individual value with Destructuring. This is not an array method but a special syntax that let us unpack arrays (and objects) into variables. It is very handy when it comes to solve algorithms.

const bestMetalBands = ['Iron Maiden', 'Slayer', 'Pantera'];
const [ironMaiden, slayer, pantera] = bestMetalBands;
console.log(ironMaiden); // Iron Maiden
console.log(slayer); //Slayer
console.log(pantera); //Pantera

//With Destructuring to swap the value of two variables it is now very easy
const arr = [42, 71];
let [x, y] = arr; //don't use const...
console.log(x); //42
console.log(y); //71
//...here comes the swap...
[x, y] = [y, x];
console.log(x); //71
console.log(y); //42

This don't want to be an exhaustive list of all javascript array methods, but a list of the ones I find out to be the most important when it comes to solve problems and algorithms.
To get better at JS and problem solving I suggest to "play" a lot with all these methods and to subscribe both on FreeCodeCamp or Codewars where you can find a lot of algorithms to work with and brush up your javascript knowledge.
On Codewars you can look for 7kyu or 6kyu algorithms about "arrays" and train with them. It will be funny and useful!

I will update this article with new information and some algorithms on arrays, based on the reactions and comments.

Code Long And Prosper

Javascript String Methods You Must Know to Become an Algorithms Wizard

Mauro Bono — Sat, 06 Jul 2019 12:07:20 +0000

In this article I want to talk about few basic string methods which are most commonly used in Javascript and very useful when it comes to solve problems and algorithms.

I've been working on solving algorithms both on FreeCodeCamp and CodeWars for the last 4 weeks and find out I used a lot of times this methods.

If you are interested in Arrays Methods you can check my post about them:
Javascript Arrays Methods You Must Know to Become an Algorithms Wizard

1) Getting length of a string with .length

let str = "i am a string";
console.log(str.length); //13

2) Getting an array from a string with .split(). Remember it is possible to use a specified separator string to determine where to make each split.

const str = "Luke, I am your Father";
console.log(str.split());//[ 'Luke, I am your Father' ]
console.log(str.split(''));//["L", "u", "k", "e", ",", " ", "I", " ", "a", "m", " ", "y", "o", "u", "r", " ", "F", "a", "t", "h", "e", "r"]
console.log(str.split(' '));//[ 'Luke,', 'I', 'am', 'your', 'Father' ]
console.log(str.split(','));//[ 'Luke', ' I am your Father' ]

Let's see an easy algorithm I solved on CodeWars where given a string of words the function must return an array of integers equals to the words length.

function wordsLength(str) {
  return str.split(' ') //first split the string at spaces to have an array of words;
            .map(word => word.length); //second use array map() to trasform any array element to its length with .length;
}

wordsLength('Luke, I am your father'); //[ 5, 1, 2, 4, 6 ]

3) Convert a string into upper case with toUpperCase()

const str = 'I find your lack of faith disturbing.';
console.log(str.toUpperCase()); //I FIND YOUR LACK OF FAITH DISTURBING.

4) Convert a string into lower case with toLowerCase()

const str = 'Help me, Obi-Wan Kenobi. You’re my only hope.';
console.log(str.toLowerCase()); //help me, obi-wan kenobi. you’re my only hope.

5) Check if a string contains specified characters includes(). It will return a boolean value (true or false). It is possible to add the position within the string at which to begin searching

const str = 'The Force will be with you. Always.';
console.log(str.includes('Force')); //true
//Attention: it is case sensitive!
console.log(str.includes('force')); //false
//Often it will be better to transform the given string to lowercased 
//and then check if it includes or not what you are looking for.
const newStr = str.toLowerCase();
console.log(newStr.includes('force')); //true
//Add the position where to start searching
console.log(str.includes('w', 0)); //true
console.log(str.includes('T', 1)); //false

6) Check if a string starts with specified characters with startWith(). It will return a boolean value and it is possible to add the position where to start searching. It is case sensitive.

const str = 'Never tell me the odds!';
console.log(str.startsWith('Never')); //true
console.log(str.startsWith('Never', 1)); //false
console.log(str.startsWith('never', 0)); //false

7) Check if a string ends with specified characters with endsWith(). It will return a boolean value and it is possible to add the length parameter (optional). It is case sensitive.

const str = 'Do. Or do not. There is no try.';
console.log(str.endsWith('try.')); //true
console.log(str.endsWith('Try.')); //false
console.log(str.endsWith('try', 30)); //true
console.log(str.endsWith('try.', 30)); //false

7) Check for the first occurrence of a specified value in a string with .indexOf(). If the value is not in the string it will return -1. It is possible to add a second parameter starting the search at specified index.

const str = 'When gone am I, the last of the Jedi will you be. The Force runs strong in your family. Pass on what you have learned.';
console.log(str.indexOf('h')); //1
console.log(str.indexOf('H')); //-1
console.log(str.indexOf('h', 2)); //17
console.log(str.indexOf('J', str.length)); //-1

8) Check for the last occurrence of a specified value in a string with .lastIndexOf(). If the value is not in the string it will return -1. It is possible to add the index of the last character in the string to be considered as the beginning of a match.

const str = 'When gone am I, the last of the Jedi will you be. The Force runs strong in your family. Pass on what you have learned.';
console.log(str.lastIndexOf('h')); //105
console.log(str.lastIndexOf('h', 100)); //97
console.log(str.lastIndexOf('.')); //117
console.log(str.lastIndexOf('.', 0)); //-1

9) Repeat a given string with .repeat().

const str = 'There’s always a bigger fish.';
console.log(str.repeat(2));//There’s always a bigger fish.There’s always a bigger fish.
//Attention: count will be converted to integer!
console.log(str.repeat(5.5));//There’s always a bigger fish.There’s always a bigger fish.There’s always a bigger fish.There’s always a bigger fish.There’s always a bigger fish.

10) Replace a pattern in a given string with replace(). The pattern can be a string or a regex and the replacement can be a string or a function to be called on each match. Attention: if the replacer or pattern is a string only the first occurence will be replaced.

const string = 'Fear is the path to the dark side.';
console.log(string.replace('Fear', 'Tears')); //Tears is the path to the dark side.
console.log(string.replace(/a/gi, 'A'));//FeAr is the pAth to the dArk side.

11) Get a specific character from a string using charAt(). A string representing the character (exactly one UTF-16 code unit) at the specified index is returned. An empty string if index is out of range!

const string = 'Fear leads to anger';
console.log(string.charAt(1));//e
console.log(string.charAt(string.length - 1));//r
console.log(string.charAt(string.length));//'' Index out of range!
//Attention: if no index is provided the default one is 0;
console.log(string.charAt());//F

12) Get the UTF-16 code of the letter at the given index in a string with charCodeAt(). This method is very useful with algorithms like ROT13 or Caesar Cypher. If no index is provided the default one is 0.

const string = 'We must keep our faith in the Republic.';
console.log(string.charCodeAt(0));//87
console.log(string.charCodeAt(5));//115
//If you want all the UTF-16 values of any letter in a string
//split the string to have an array of letters
//map the array and change any letter to its utf-16 value with charCodeAt();
const utfValuesArr = string.split('').map(letter => letter.charCodeAt());
console.log(utfValuesArr);
//[87, 101, 32, 109, 117, 115, 116, 32, 107, 101, 101, 112, 32, 111, 117, 114, 32, 102, 97, 105, 116, 104, 32, 105, 110, 32, 116, 104, 101, 32, 82, 101, 112, 117, 98, 108, 105, 99, 46]

13) Get a string created from the specified sequence of UTF-16 code units with the static String.fromCharCode() method.

console.log(String.fromCharCode(65));//A
console.log(String.fromCharCode(105, 106, 107));//ijk
console.log(String.fromCharCode(32));//'' empty space!


const arr = [77, 97, 121, 32, 116, 104, 101, 32, 70, 111, 114, 99, 101, 32, 66, 101, 32, 87, 105, 116, 104, 32, 89, 111, 117];
const quote = arr.map(n => String.fromCharCode(n));
console.log(quote.join('')); //May the Force Be With You

14) Get a section of a string, returned in a new string, without modifying the original one with slice(). It takes two parameter. BeginIndex, or where to start to slice the string and the optional EndIndex where to stop to slice it. If no EndIndex is provided it will slice the string to the end. Attention: A negative index counts backwards from the end of the string

const string = 'I’m just a simple man trying to make my way in the universe.';
console.log(string.slice(1));//’m just a simple man trying to make my way in the universe.
console.log(string.slice(0,10));//I’m just a
console.log(string.slice(-3));//se.

15) Get the part of the string between the start and end indexes, or to the end of the string with substring(). Attention: any argument value that is less than 0 or greater than stringName.length is treated as if it were 0 and stringName.length respectively. Any argument value that is NaN is treated as if it were 0.

const string = 'Darth Vader';
console.log(string.substring(0));//Darth Vader
console.log(string.substring(6));//Vader
console.log(string.substring(1,6));//arth

16) Remove whitespaces from both ends of a string with trim().

const string = '      Yoda     ';
console.log(string.trim());//Yoda

This don't want to be an exhaustive list of all javascript string methods, but a list of the ones I find out to be the most important when it comes to solve problems and algorithms.
To get better at JS and problem solving I suggest to "play" a lot with all these methods and to subscribe both on FreeCodeCamp or Codewars where you can find a lot of algorithms to work with and brush up your javascript knowledge.
On Codewars you can look for 7kyu or 6kyu algorithms about "strings" and train with them. It will be funny!

I will update this article with new information and some algorithms on strings, based on the reactions and comments.

Code Long And Prosper