Telephone Validator - Project 4 Javascript Certification FreeCodeCamp

hello everyone thank you so much for tuning in to code with use heed my name is Yazeed and we are looking at the fourth project in our JavaScript algorithms in data structures certification this series will go through all of the projects in this certification so if you do enjoy the content please like subscribe and share I would really appreciate that i'm also on twitter at UCB if you would like to connect my DMS are currently open for questions comments and hate mail whatever you want to send me so for this project we are doing a telephone number validator basically we're going to have a function that takes a string which is a phone number and we are going to return true or false true if it is a valid phone number and false if it is not a valid phone number so we see some examples of valid phone numbers you can have the dashes in between you can have some parentheses you can have an optional space with the parentheses they can all be spaced out it can be one big number or it can have a one in the front with all these spaces and there are some more that we can look at down here and we'll see that this is valid this is valid so on and so forth this is not valid because it only has seven characters seven numbers I mean inside of it and a US telephone number has ten or eleven if you want to include that first one in the beginning this is not valid because you are missing the left parenthesis this is not valid because it's complete garbage this would be fine but this should be a one not a two that's what makes us invalid same thing here you can of zero can't have negative one can't have this mess so we're gonna get valid in develop own but basically these are going to be most of the valid ones so we need to include these so let's start thinking about how we can break this problem down when you're dealing with the validation of strings one topic that you will hear a lot especially as you go on to improve and can your programming journey is regular expressions regular expressions are a way to pattern match on strings so let's start with an example I have this website I'll link to it in the description reg X pal comm and this is one of my favorite tools for analyzing regular expressions if you watch a video one in the series I talked about reg X there and a short name for regular expressions is reg X regular expressions so let's say you have this telephone number we saw that on the free code camp site and whatever reg X you want to create it has to go in between these two slashes these are forward slashes so this one is the opening slash and this one is the closing slash whatever is in between here is the pattern you want to find so let's say for example I put in five we see a here on the right side that we get ten matches this means that the symbol five or the character five has been matched ten times in our input strings in our input string sorry so we have one two three one two three one two three four that's ten altogether and the dash and the phone number is excluded because we're not looking for a dash right now now reg X doesn't let you just match static characters like this like a 5 or even a dash C if we put a dash we have two matches if I put in 0 1 2 3 4 we have zero matches or no match all right if you put a 5 you get 10 if you put a dash you get two matches because that's what matches in the red X red X doesn't limit you to static characters you can put in special symbols that reg X recognizes and can automate for you you can put in special symbols that reg X understands so here's one that may be useful to us you do a forward slash and you type D and what I love about this site is you can hover over any part of the expression and it tells you what it's all about so this for this backslash D this represents a digit a digit is anything from zero through nine so now we can see just like when we put in the five we had ten matches if we put in slash D we still get ten matches because we're looking for any digit you can also represent that in red X by using what's called a character set the character set is a box and anything in that box gets matched would be considered a match so with this box it's almost like creating an array you would have your opening and closing brackets and then inside of here you can put zero through nine and this is another way to look for all digits here zero through nine inside this character set and we see once again we have ten matches once you get used to reg X you might prefer this one but it's really up to you however you like it better so how can we match an entire telephone number what we want is when the user inputs a valid telephone number like this we want the entire thing to be considered a match we don't want ten matches we want just one match so reg X allows you to specify these things called quantifiers a quantifier tells reg X how many of a given token do you want to match so by default when you say /d for digit you match only one we have ten matches because there's ten numbers and we're matching them one at a time now when you're doing telephone numbers you want to match these in groups of three or in groups of four right because we have five five five then a separator five five five another separator then four more fives so the way you can specify how many digits at a time you want to match is with curly braces in between these curly braces you put a number I'm going to put in three now we can hover and see this is a quantifier in reg X and you can just read what it says here match 30 of the preceding token so whatever goes in between these curly braces that number here that's how many / DS we are going to match it in this case now we've gone from 10 matches to just three because 555 repeats itself three times in this string but this doesn't cover the back of the telephone number because that's four digits so this is incomplete we also have to account for the dashes our function would return false if this is all we had because this does not look like a valid telephone number even though it is so our reg X needs a bit more fixing well here's what we can do why don't we try just mimicking the shape of this to start so we match three digits now what if we had a - okay now we have two matches you see that because 5 5 5 - shows itself twice in this string now what if we did it this time with 4 ok we found just one match where it kind of got closer but a little bit farther at the same time because this sequence of three digits - and if and four digits shows itself once how do we include this part of the string well why don't we just rewind back copy this and paste it to the front and now we have a reg X that matches this entire phone number one match so what we have here is a regular expression that will pass any phone number that has a shape like this if it has this digit or rather 0 through 9 3 times a - this did any digit 3 more times followed by a - and then any digit four times so 3 - 3 - 4 that is the valid according to this reg X so let's see what happens if we to use it in our free code camp function so here's what we're gonna do we're gonna say Const rec x equals and remember you have to have your slashes this is how you denote a regular expression if you fill in these slashes now when you hover over reg X you can see that it is of type reg XP that is short for regular expression of course and every reg X in JavaScript has a method called test and so what test does is it takes a string and it just returns true if that string is valid according to that reg X test and it returns false if that string is not valid why don't we return the boolean of reg X test string we'll run all of our test cases see running tests here and believe it or not we should have a few passes see check this up so if it looks like this we do get back at boolean okay that's just a you know you if you return true off or false that test will pass so we don't care about this one but look at this one this matches this is considered a pass now why is that there's a one here actually I would like to find out myself let's go to the other tab let's paste this in this should not have been a match I think what you are supposed to do you use two more regular expression characters you put a carrot at the front this carrot means the beginning of this string has to look like this this denotes here's where the string begins and if you put a dollar sign this denotes where does this string end so basically from front to back your string has to match this you can't have anything in the front or anything trailing that messes it up so let's try to add one more time gonna update our red X I'm just gonna put the carrot here and I'll put the dollar sign at the end this is gonna make it a little bit stricter now let's see this this should pass Yesi okay now it fails because we're not matching for this type of string okay good this fails this fails this one passes because it matches our reg X perfectly but you see what I'm getting at here we at least got this one passing because we had a reg X that supports this so now basically if you just think about it you're gonna need to create one reg X or many reg X's that allow you to recognize all these different types and we will go through each type in this video but I thought I would share with you a solution that I found online I believe it was in the free code camp forums and it was a gigantic reg X that I honestly wouldn't want to put in a code base let me find it for you okay check out this monster I hardly know where it begins and where it ends and if we put in our other test cases this should pass so let's try this real quick so instead of doing this we're gonna put all this and we will run our test cases and see what happens huh looks okay so it looks like this reg X works okay this is not the end of the video we are gonna go into this and this is not even going to be our solution because I personally would prefer something that's more readable but we will dive into this so let's get the other inputs here so this should be valid this should be valid actually there should be a whole list up here okay let's just take this list and hopefully reg X pal can support it mmm you may need to put on a multi-line flag okay cool so we see that these are all supported numbers right so this reg X is basically a ton of conditionals inside ones statements okay like this question mark if you see a question mark in reg reg X that means optional so you can see here that they have a 1 if you have it's great if you don't have it that's ok because optional says if you have zero or one of the preceding token so if you do put a one or you don't put a one it's fine that's how it supports this phone number and that's how it supports the other ones that don't have a one in front of them now you have a space here which again this is optional because some phone numbers they do have a space some of them don't so like for example you should also be able to do one five five five five five five five five five this is also a valid match as you can see whether you have a space or not it's still that if you do two spaces or three yeah this should not be valid but this is valid so now you're going to have another optional space inside the parenthesis and you should be able to recognize this one by now you have the digit I think this website is acting up you have this digit and then up to or only three times exactly three times because you have to have three digits now what they did here was a character set you're saying here either a dash or a space after the first three digits so that's how this matches that's how this one matches and then after this a star which is interesting I believe that means it allows any amount of dashes which is strange okay so you can have as many spaces as you want I don't know if that's really the best thing to do but hey I mean it works ok so it's saying all of this or this is the or symbol okay this is called alternation reg X acts like a boolean or so you're saying all of this or all of this you see how this gets out of hand very quickly and it's basically the same thing you have the optional space here you have the three digits you have the character set but I believe this one allows for parentheses that's what supports this stuff I believe and then you have another space any number of times so this is this is crazy and then after that you have another three digits so that would be these guys over here same idea the character set we allow either a dash or a space and that whole thing is optional apparently and then at the very end you have four digits ending off your input which makes all of these valid so this honestly even if I was the one that wrote this I would have difficulty reading this and I'm not shooting down the author of this solution I just personally prefer for the sake of having a readable code base this is not how you'd want to go through it so let's try to investigate another solution that makes sense so I'm gonna get rid of this and we're gonna start with our original reg X which is right here now this reg X only supports this phone number what can you do to support the other ones well I think the easiest way would be to create a reg X for every variant because that gigantic reg X that we had here it pretty much had all of the conditionals and if this or that inside of one statements and that works and it will be more performant it is a faster solution that what I'm gonna propose but at this level unless you're validating millions and millions of phone numbers in one shot performance doesn't matter what you need is a solution that makes sense to whoever's reading it we're gonna start with this and we're just gonna start adding reg X's to it but not in the form of a one giant reg X we're actually just gonna do it as an array so here's what we're gonna do we're gonna say Const valid patterns is going to be an array and then we're going to put our first reg X inside here yeah then we're gonna have whoops we're gonna have more red X's down here and what we're going to return is valid patterns dot some-some is a method on all JavaScript arrays you sit what's called a predicate this is a function that returns true or false and it will tell you to jazz any elements inside this array pass whatever your condition is so we're gonna have any given pattern you put a function inside here there's a little parenthesis and every pattern is a red X right so we're gonna do pattern dot test string so we're gonna have several reg X's in here and we're pretty much looping through each red X and we're testing our input string on it if any one of them pass this entire thing will become true if all of them fail then this thing will return false so if we just run this right now we can see that we did fail a bunch of test cases of course let's see here okay so this past and this past so you see we're in the exact same position that we were before but now we can simply add reg X's to this array that should pass so let's see here and I'm also gonna put a comment so I'm going to say 5 5 5 5 5 5 5 5 5 5 C this denotes that this reg X is for this kind of telephone number and in my opinion this is way easier to read now we have to do just add another reg X to a number that should be supported so we see for example this one should return true we can copy that phone number we'll put it as a comment and then we'll create our reg X you can have a 1 here then you can have your 3 digits - 3 digits - 4 digits now this should be an exact match hold on you need to have your beginning and ending characters here let's run and we'll see if we get a check mark here this one gets a check mark see now if we want to support this one let's just copy this line and now we will support parentheses so you would do this and this but since parentheses means something special in Rex you actually have to escape them so instead of just parentheses you're gonna put a backslash before each one this tells red X hey I'm looking at parentheses I'm not talking about a special type of character so now let's see if this one passes hmm no not yet and the reason is because we should not have a dash here to see this number should not have a dash if we look at it okay yeah there's spaces it's this should be a space now if you run it hopefully we get a check mark and boom see this should be easy this is just a bunch of fives we'll put a comment here so for this red X you're gonna start and you're going to end with a digit ten times check mark please nice this should also return true so let's copy this one oops that was a mistake okay oh this red X look like you're going to have a space you're gonna have a pair of parentheses and inside of there three digits no space another three digits - four digits hopefully this passes checkmark please no not yet why what did I do wrong uh excuse me no space what was I thinking nice okay that is another check mark check mark check mark check mark all right this should also return true this is a 1 in front with a bunch of spaces comma okay create your reg X so we are going to have a a one space any three digits space same thing space and any four digits now let's run excellent okay what else is failing in here but you see it's really just a matter of rinse and repeat rinse and repeat for this you only need to know a couple of key things the fact that this stands for any digit this is how many times you want to see it and the fact that when you do parentheses you have to escape them because they mean something else and perhaps in a future video I will get into them but for this video we don't need to get into that syntax sometimes by not properly starting and finishing you will allow things that should not be allowed so let's make sure they all start with the carrots let's look for carrots that's good and let's look for dollar sign also good so let's see if this is still failing good this should return true okay so that's another phone number that we have to include so this is going to be one parentheses inside those parentheses are any three digits no space any three digits - any four digits and here we go we have passed every single red X all of these are considered valid and a few others and the rest are considered invalid so let's quickly review here we had this red X previously which did the trick it does work I can't deny it I can't put it down but in my opinion this is very difficult to read it is something that you have to sit there and manually parse and you're gonna forget it every couple of weeks we unless you write it down somewhere or break it up so what I opted for was a solution that is slightly slower I did run benchmarks and a solution like this runs probably five times faster than a solution like this because in reg X you have a loop under the hood looping through each character and now I've added a loop on top of a loop where for each red X we are looping so it is a little bit slower it's about five times slower if I remember correctly but you only feel the difference after about two million phone numbers in a row you're not really gonna feel the difference practically speaking in my opinion this is one of the times where I would sacrifice a small performance boost for a huge readability boost this is gonna save so many developers so many hours the more people you have in the codebase that are going to be touching this because now you can easily see what regular expression belongs to what I hope that makes sense I hope I explained it we didn't really dive too deep into reg X we just learned enough to be able to solve this challenge and I hope everything made sense like I said I'm on Twitter all the links be in the description if you want to support me if you want to message me if you have any questions or feedback about this video I would love to hear from you thank you so much and take care

Channel: CodeWithYazeed

Views: 4,153

Keywords: javascript, algorithms, data structures, freecodecamp, learn to code, free coding tutorial, tutorial

Id: t6Yr2PBmwC0

Length: 25min 42sec (1542 seconds)

Published: Tue Oct 01 2019