DEV Community: Amit Mehta

How to Easily Add and Remove Any Elements from a JavaScript Array

Amit Mehta — Mon, 08 Aug 2022 19:00:00 +0000

In this post I want to discuss a super useful way to add and remove elements from ANY index in a javaScript array.

You're probably familiar with push, pop, unshift, and shift. They come in handy for sure, if you want to add and remove elements from the beginning or the end of the array.

However, there are a TON of different scenarios where you will need to insert and remove array elements from any position.

This is worth memorizing cold!

Let's start with an array of animals...

const animals = ['😺' , '🙉' , '🧞','🦊', '🦁', '🐯', '🐵'];

Wait! There's a genie in the list at index 2. Not sure how that snuck in there 😂. Let's go ahead and remove that array element.

const genieIndex = 2;

animals.splice(genieIndex,1);

console.log(animals);
// => ['😺' , '🙉' ,'🦊', '🦁', '🐯', '🐵'];

splice(index,1) removes the array element located at index. Very simple.

Now 🐶 is feeling left out, so let's add him into the array at index equal to 2.

Again, we can use the splice array method.

const index = 2;

animals.splice(index, 0,'🐶');

console.log(animals);
// => ['😺' , '🙉' ,'🐶','🦊', '🦁', '🐯', '🐵'];

splice(index, 0,'🐶') inserts the dog emoji at position index.

Now there are definitely more sophisticated array manipulations you can do with splice. However, start by memorizing how to add and remove array elements with splice. You'll thank me later!

If you enjoyed this article please check out my blog
Indepth JavaScript for more illuminating
content.

How to Solve Palindrome Problem with 1 Line of JavaScript

Amit Mehta — Wed, 03 Aug 2022 21:45:00 +0000

Unless you're just learning how to code now, you've probably heard of the famous valid palindrome or 'is palindrome' problem. It's a common technical interview question.

I'm going to show you how to knock the socks off your interviewer by solving the palindrome problem in 1 line of JavaScript. 😎

Quick Refresher: What is the Palindrome Problem?

A string is a palindrome, if after reversing the order of all the characters, you get the same string. const str = 'abba' is a palindrome, const str = 'abc' is not.

Here's the challenge: Given a valid string of letters, can you construct a function that will check if the string is a valid palindrome. It returns true if it is, and false if it's not.

IsPalindrome(...) in 1 Line

const isPalindrome = (str, first = 0, last = str.length - 1) => 
  (first > last) ? 
    true : 
    (str[first] === str[last]) && isPalindrome(str, first + 1, last - 1);

Yes, this is 1 line of JavaScript code. I added a few line breaks and tabs to make it easier to read.

If the above function looks overwhelming to you, no worries, we're going to walkthrough all the JavaScript and Recursion Jui Jitsu together. 😅

Let's start with...

Arrow Function

I'm using a JavaScript arrow function so I can remove return and taken advantage of implicit return feature the arrow function offers. Love arrow functions! 😍

const isPalindrome = (str, first = 0, last = str.length - 1) =>

Default values for function arguments

We've initialized our 2 pointers right in the function argument: first = 0 and last = str.length - 1. Super cool and convenient.

Ternary operator

  (first > last) ? 
    true : 
    (str[first] === str[last]) && isPalindrome(str, first + 1, last - 1);

The ternary conditional operator is just a if {...} else {...} statement condensed onto 1 line. Here's a simple example:

(x > 0) ? 
console.log('x is greater than zero') : 
console.log('x is less than or equal to zero');

Finally Everyone's Favorite: Recursion!

(str[first] === str[last]) && isPalindrome(str, first + 1, last - 1);

Fortunately, this is a simple application of recursion that won't give anyone a headache trying to comprehend it. 🤯

In the above statement: (str[first] === str[last]) checks to make sure the first and last characters of the string are matching. * Then isPalindrome(str, first + 1, last - 1) recursively checks if the 2nd and 2nd to last characters of the string are matching.*

For example: If we ran str = abcba through isPalindrome(str), and expanded out the final return statement (after running through each iteration of recursion) it would look like this:

(str[0] === str[4]) && (str[1] === str[3]) && (str[2] === str[2]) && true

isPalindrome(str) is checking each pair of elements starting with str[0] versus str[4] (a vs a), until finally it's checking str[2] against itself when first === last.

The true statement at the end is tacked on when first > last, completing the last recursive function call.

Wait! What if I have to deal with spaces, uppercase, and weird characters??

OK, yea, in some Palindrome problems, such as this leetcode version you have strings with space, special characters and different cases that you have to remove or somehow deal with.

Fear not, there's a 1 line fix to cleaning up the string so it contains only lowercase letters. Run this before running isPalindrome(str):

str = str.match(/[a-z]/gi).join('').toLowerCase();

or we can keep isPalindrome to 1 line, like I promised:

const isPalindrome = (str = str.match(/[a-z]/gi).join('').toLowerCase(), first = 0, last = str.length - 1) => 
  (first > last) ? 
    true : 
    (str[first] === str[last]) && isPalindrome(str, first + 1, last - 1);

How to Match a Phone Number with Regex and JavaScript

Amit Mehta — Wed, 27 Jul 2022 21:36:00 +0000

I'll be honest, the first time I saw a regular expression, it was a scary experience. It looks like a weird alien language! I thought to myself: "I've spent months learning programming and now i gotta learn this seemly super complex language!?"

However, once I sat down to actually learn regex, I discovered it's not super hard, once you learn the syntax.

Why should I even bother Learning Regex?

As you start coding more, and more, it really comes in handy in all types of situations, and not just to valid phone numbers, and email addresses. It's very helpful when extract data from logs, messy JSON data from API calls, and many other situations.

I'm going to teach you how to valid a phone number with 1 line of code, with 1 regular expression. *Validating a phone number WITHOUT regex becomes an obnoxious leetcode question. * 😧

Why is validating a phone number so complex?

Let's say you have a form on your website to collect a phone number to spa-, I mean, SMS your subscribers, there are a bunch of different ways they could submit their phone numbers.

All of these are VALID US based numbers:

202-515-5555
202 515 5555
(202)515 5555
1 202 515 5555
2025155555
1-202-515-5555
1202-515-5555
etc

There are more valid combinations I didn't list, but you get the idea! Validating every combo because a nasty coding problem. *But NOT if you're using regex to validate it! * 😉

Let's start with the Simplest Case

Let's first validate 202-515-5555. The basic idea of regex is to build a pattern to match a string. What is the pattern in 202-515-5555 ?

We start with 3 digits followed by a - followed by 3 more digits, followed by another -, then we end with 4 digits.

Here's what the regex pattern to match 202-515-5555 looks like:

^\d{3}-\d{3}-\d{4}$

Let's watch through this...

The ^ just indicates the beginning of the string. In the above regex, we're stating that the phone number must start with \d{3} since we have ^ in front of \d{3}.

Now \d => stands for single digit, and {3} simple means \d repeats exactly 3 times.
So ^\d{3} means our phone number STARTS with 3 digits.

Now let's just jump to the end: $ indicates the end of the string match. \d{4}$ means our phone number must END with 4 digits. Does this make sense?

- just means the phone number must have a dash at that spot.

So let's read the entire regex from left to right now:

^\d{3} ⇾ start with 3 digits
- ⇾ followed by a dash
\d{3} ⇾ followed with 3 digits
- ⇾ followed by a dash
\d{4}$ ⇾ ends with 4 digits

Please read the above section a few times, if necessary, to make sure you fully understand before we move on.

How do I match the phone number if dashes are options?

Great question! How do we match BOTH: 202-515-5555 and 2025155555

To make a character match optional, just add a ? after it.

Here's what our new improved match looks like:

^\d{3}-?\d{3}-?\d{4}$

-? simply means the - is optional: it may, or may not, be there!

Let's read the entire regex again:

^\d{3} ⇾ start with 3 digits
-? ⇾ optionally followed by a dash
\d{3} ⇾ followed with 3 digits
-? ⇾ optionally followed by a dash
\d{4}$ ⇾ ends with 4 digits

How about matching the phone number if there are spaces, instead of dashes?

Now let's work on matching: 202-515-5555, 2025155555, AND 202 515 5555

Instead of optionally just having a - we can optionally have either - OR . How do we represent this? Easy, put both - and inside of [...] like this: [ -].

Our new regex looks like this:

^\d{3}[ -]?\d{3}[ -]?\d{4}$

Now it's definitely starting to look alien! 😅

Let's break it down:

^\d{3} ⇾ start with 3 digits
[ -]? ⇾ optionally followed by a space OR dash
\d{3} ⇾ followed with 3 digits
[ -]? ⇾ optionally followed by a space OR dash
\d{4}$ ⇾ ends with 4 digits

How to Match `1` or `1` or `1-` at the beginning of our phone number

Based on what we've learned, can you figure this out?

It's a bit tricky once you realize that the 1... in the beginning is optional.

Let's take it step by step...

If you want the phone number to start with 1 we add ^1 to the beginning of the string match, correct? Now we want to optionally add a dash or space after the 1. Luckily, we already know how to do that: [ -]?.

Combining the 2 we get: ^1[ -]?

Adding this to our previous regex we get:

^1[ -]?\d{3}[ -]?\d{3}[ -]?\d{4}$

Can you sense there's something wrong here? The above regex string match MUST start with 1, it's not optional. We need to make 1[ -]? optional.

How do we do that? Since we're talking about multiple elements here: 1 and [ -]? we need to place the whole thing in (...) creating a group. Then add a ? after it to make the entire group optional!

I know it's a lot to take in! Here's what it looks like:

^(1[ -]?)?\d{3}[ -]?\d{3}[ -]?\d{4}$

Let's break it down again, with an extra step now:

^(1[ -]?)? ⇾ optionally start with 1, which is optionally followed by a space OR dash
\d{3} ⇾ start with 3 digits
[ -]? ⇾ optionally followed by a space OR dash
\d{3} ⇾ followed with 3 digits
[ -]? ⇾ optionally followed by a space OR dash
\d{4}$ ⇾ ends with 4 digits

🤯

If you're still reading, congrats, you now know how to think 'regex'!

There's still 1 outstanding issue: how to match a phone number like: (202)515 5555. I'm going to leave that one for the reader (hint: use the pipe operator: (...|...)).

Putting it all Together to Test an Actual Phone Number String

Now let's take our regex and turn it into a regular expression in javaScript. To do that you just add /.../ around it. Then use a method called test:

const regex = /^(1[ -]?)?\d{3}[ -]?\d{3}[ -]?\d{4}$/;
const phoneNumber = '1202-515-5555';

// test returns 'true' if there's a match and 'false' if there is not
const match = regex.test(phoneNumber);

If you want to learn regex properly, here's a EXCELLENT free tutorial: RegexOne. This is literally how I learned Regex. It's worth going through ALL the exercises.

If you enjoyed this article please check out my blog
Indepth JavaScript for more illuminating
content. 🤓

How to Crack the Staircase Problem with JavaScript using Memoization

Amit Mehta — Fri, 22 Jul 2022 18:23:00 +0000

I want to write a quick follow up to a previous post on How to Solve the Staircase Problem with 5 Lines of JavaScript.

It's a very elegant solution to the infamous staircase problem, *however, as one commentor noted it's terribly inefficient to the order of O(3^n).😖

Yikes! So Now What?

There's a cool trick with a funny name to fix this problem: Memoization. Yea, I'm not exactly sure how to pronounce it either! 😂

Here's what the staircase problem looks like memoitized...

function stairSteps(N) {

  // store repeat values in memo to prevent repeat computations
  const memo = [];

  function stepsM(N) {

    if (N === 0) return 1;
    else if (N < 0) return 0;

    if (memo[N] !== undefined) return memo[N];
    else {
      memo[N] = stepsM(N - 1) + stepsM(N - 2) + stepsM(N - 3);
      return memo[N];
    }
  }

  return stepsM(N);
}

The idea is simple: the array memo just stores values that may repeat, so you can reference them later instead of having to calculate them again - which is SUPER expensive in the case of recursion.

For example...

Once you know the value of stepsM(N-3) which is calculated on the first round of stepsM(N), you do NOT need to calculate its value again when it's called later by stepsM(N-1) or stepsM(N-2).

Pretty neat, huh?

If you enjoyed this article please check out my blog
Indepth JavaScript for more illuminating
content. 🤓

Quick Way to Check if 2 Arrays are Equal in JavaScript

Amit Mehta — Thu, 21 Jul 2022 22:49:52 +0000

When learning JavaScript for the first time we've all done this...

const a = [1,2];
const b = [1,2];

if (a === b) console.log('Equal!');

If you'd tried this, then you KNOW a === b will return false every time.

*Why is that? *

Because array variables are assigned by reference NOT by value.

So a is just a pointer to the location of [1,2] somewhere in memory.
While 'b' is another pointer to a different location in memory, that also happens to be storing [1,2].

When you're checking if a === b, you're really checking their member locations, and not the values they're pointing to.

So what gives?

Is there any easy way to check if the underlying arrays that are represented by a and b are equal, WITHOUT having to do an element by element comparison?

Here's the quick cheat to get it done...

const d = [1,2,4,5,6];
const c = [1,2,4,5,6];

if (JSON.stringify(d) === JSON.stringify(c)) console.log('Equal!');

Why does this work?

And what the heck is JSON.stringify(...) anyway?

JSON.stringify(...) takes an array (or an object)and returns its string representation.

It's stringified!

For example:

JSON.stringify([7,8,9])

Will just return '[7,8,9]'. Since the value is a string, you can compare it with the value of another array, that's also returned as a string with JSON.stringify(...). :)

This trick even works with double array (and multi-dimensional arrays in general). You can also compare objects this way, as long as properties of each object are in the same order.

Another Tip

If you want to compare if 2 arrays contain the same values, regardless of order, then just use Array.sort() method to sort both arrays first, THEN use JSON.stringify to compare then!

If you enjoyed this article please check out my blog
Indepth JavaScript for more insightful
content. 🤓

4 Simple Ways to Covert a JavaScript String to a Number

Amit Mehta — Thu, 21 Jul 2022 02:28:51 +0000

Having to check if a string is a number, and then type convert it to a number, comes up a lot when coding in JavaScript. If you're done more than 5 leetcode problems, then you know what I'm talking about! 😅

It's also super useful when coding applications too. The classic example is the calculator app, where you're taking in input values from the users as strings, and you need to verify that these values are valid numbers (or operators).

How do you check if a String is a Number?

There's a JavaScript method with a funny name called isNaN(str). Which translates to "is Not a Number". It returns true if str is not a number, and false if it IS a number.

If we use !isNaN(str) we get true if str is a number....

!isNaN('👾123') // => false
!isNaN('😺') // => false
!isNaN('456') // => true

// works for floats too
!isNaN('-2.5') // => true

Great, now how do I Convert the String to a Number?

There are 4 ways to type convert a string to a number (if it is a number).

WARNING: If the string is NOT a number, do NOT attempt to convert it to a number, because you'll either get NaN back or sometimes 0 if you convert an empty string or space to a number. Good luck finding that bug in your code!** 🤬

*So ALWAYS check if it's a number using !isNaN(str) FIRST. *

Got it? Cool! Let's type convert:

// for integers
+'456' // => 456
parseInt('456') // => 456 
Number('456') // => 456

// for floating point numbers
+'-2.600' // => -2.6
parseFloat('-2.600') // => -2.6 
Number('-2.600') // => -2.6

Note that parseInt(...) ONLY works for integers, if you give it a float it will cut off everything after the ., so parseInt('-2.6') becomes -2.

How to Remove Trailing (and Leading) Zeros from a Floating Point Number

Notice I added some zeros at the end of -2.6 I did that to illustrate something cool: *by type converting a string to a float, all unnecessary floating point zeros that come after AND before will be removed. *

This really comes in handy.

For example:

+'-000002.600' // => -2.6

Related trick: if you have a float with a lot of trailing zeros you want to get rid of, just convert it to a string THEN back to a number with +:

const annoyingNumber = 1.230000000000;

const cleanNumber = +annoyingNumber.toString();

console.log(cleanNumber); // => 1.23

😎

My Favorite Option for Converting from String to Number in JavaScript?

Hands down, my favorite is the + operator. It's just one character long, gotta love it! 😻

What's your favorite?

If you enjoyed this article please check out my blog
Indepth JavaScript for more illuminating content. 🤓

How to Solve the Staircase Problem with 5 Lines of JavaScript

Amit Mehta — Wed, 20 Jul 2022 01:06:39 +0000

If you're new to algorithms and leetcode, the staircase problem is infamous!

What is the Staircase Programming Challenge?

Stated simply....

Imagine a staircase with N steps. If you can take 1, 2, or 3 steps at a time, how many different ways can you reach the top of the stairs?

Encountering a problem like this for the first time is for sure frightening. Even on its own as a math problem, IT'S REALLY HARD.

There are a few obvious cases. You can take 1 step at a time, N times. If N is divisible by 2, you can take 2 steps, N/2 times. Also, if N is divisible by 3, you can take 3 steps, N/3 times.

And then there is everything in between. 🤔

The good news is there is a really simple way to solve this problem using everyone's favorite algorithm: recursion. 😨

Recursion to the Rescue

As promised, here is the solution in 5 lines of JavaScript code...

// N is total number of steps in the staircase
// stepTaken is a counter for steps taken in each combination
function steps(N, stepsTaken = 0) {

  if (stepsTaken === N) return 1;
  else if (stepsTaken > N) return 0;

  return steps(N,stepsTaken + 1) + steps(N,stepsTaken + 2) + steps(N,stepsTaken + 3);
}

Yikes! What does this mean??

*Don't panic or feel bad if the above code confuses you. * I struggled for a long time with recursion since I first learned it in high school CS class. It's tricky for sure. * But once you understand it, it opens up a whole new world of possibilities!*

Let's walk through this solution

If you're thinking of just copying the above solution and leaving, you're missing the point. It's super important you understand what's happening.

function steps(N, stepsTaken = 0) is just a simple recursive counter.

Let's walk through it:

We're at the bottom of the stairs, no steps taken. So stepsTaken = 0.
You have 3 possibilities in front of you: take 1 step, jump up 2 steps, or leap up 3 steps.
Now we need to account for ALL 3 possibilities. So imagine you clone the stairs and yourself 2 times. Plus, you each have your own version of stepsTaken variable your carrying with you. You and your clones each go through one of these 'doors' (note each of you must go through a DIFFERENT door):

steps(N,stepsTaken + 1)
steps(N,stepsTaken + 2)
steps(N,stepsTaken + 3)

Once you go through your chosen door, your individual stepsTaken counter will be incremented by 1, 2, or 3 (depending on the door you went through). Then after that, you'll immediately see 3 more doors:

steps(N,stepsTaken + 1)
steps(N,stepsTaken + 2)
steps(N,stepsTaken + 3)

Again, you'll clone yourself 2 times again and each go through one of these steps doors. Your stepsTaken counter will increment again by 1, 2 or 3. This will KEEP HAPPENING until :

  if (stepsTaken === N) return 1;
  else if (stepsTaken > N) return 0;

If you overstepped stepsTaken > N, your combination of steps does NOT count towards the total of unique way to go up the stairs.

However, if (stepsTaken === N), then bingo 🤩 you found a legit combo of steps to go up the stairs and you return 1 to add to the count of way to go up the stairs.

Now remember the way we count the number of possible combinations of stepsTaken to reach the top of the N step staircase, is to simply add all the possibilities:

return steps(N,stepsTaken + 1) + steps(N,stepsTaken + 2) + steps(N,stepsTaken + 3);

Remember each legitimate combo of steps where if (stepsTaken === N) return 1 and each if path is not valid (overstep) then 0 is returned : else if (stepsTaken > N) return 0.

Some of you may be asking: Nice, this is elegant, but isn't it super inefficient in terms of time complexity?

Yea, it's super high time complexity. However, there's a trick to dramatically improving that ➡️ How to Solve the Staircase Problem with JavaScript using Memoization

Hope this makes sense, comment below if you have any questions?

If you enjoyed this article, please check out my blog Indepth JavaScript for more illuminating content. 🤓