When learning JavaScript, you will learn tons of built-in function, like forEach(), map(), repeat(), indexOf()..etc. Undoubtedly, these functions are useful and fast methods to solve problems. However, do you really learn how them work? In fact, these functions are evolved from for-loop, if-else statement, and function. So, once you grasp these three pillars, I believe you will understand built-in function well.
The following are some example which I use three basic method to get same results as built-in functions.
According to MDN, map function creates a new array from the original one and apply a function to each one of elements of the first array.
As you can see, in the basic method, we have an array for [1, 2, 3, 4, 5, 6] and a function which has the function for doubling elements. After that, we create a function named map and use for-loop to make every element from original array double. Finally, we sent all doubled elements to the result variable.
The indexOf() is used to search the specified item in an array. If finding the element, it will return the index of the item, otherwise return -1 if can’t find the one in the array.
We create a function called indexOf and the logic behind is that if there is an element in the array which is same as the target we are searching, please return the index of it. If we can’t find the element in the array, please return -1. Maybe you will have a question that why we put “return -1” out of for-loop. The reason is that we need to check all elements, then return -1 if nothing matched.
The filter function is to create a new array filled with all element from the original array which pass the test. In other words, it will keep the element which returns true.
It is like map function that we need to give two parameters, one is an array, the other is a callback function. So, in the for-loop, it will determine that each element in arr passes the notEqualToThree function. If true, then push it to result.
The join() function will create a string which is concatenating all of the element from the array. It will need a separator to separate the element. If we don’t specify the separator, the default is a comma. In the basic method, we are trying to simulate the default situation, so there is a comma for separator. The logic here is if checking to the last index, then just put the element. Otherwise, the element will be put with the separator.
As mentioned previously, they are about array-built-in function. Next let’s go to the string-built-in function.
The padEnd method is used to pad the current string with a given string and the given length defines the total length. In basic method, it is divided into three parts. In the first part, it determines whether the length of string is longer than total length. If longer, it will only return the given string. Secondly, we will add parameter addString to parameter str. At this stage, new_str == “abcdefdefdef”. Thirdly, using for-loop to create a string which length equals total length. The third step also can remove the extra letters. So, the final result is “abcdefdefd”.
The slice() method returns a portion of the original string and the given number (the below example for 1 and 5) is the start-index and end index of the portion. The portion does not include the letter of end-index.
Let’s take look at the basic method. The if-else statement illustrates that if the end index of the string is 5, but you want to the end at 6, 7, or any bigger number. The endpoint will keep 5. Next, use for-loop to determine the start and the end.
The goal of this article is to help you understand how the built-in function works. Take the slice() or filter() for example. When we see the built-in method, you might think wow, it is easy to solve the problem by only single line of code. As mentioned, the method behind them are three key basic pillars, for-loop, if-else statement, and function. Let’s take an instance from our real life, assume we want to plant a tree, we need three key method, dig a hole, place a seed, and refill soil. Maybe these three steps are time-consuming, but it is the fundamentals of any faster method.
Hoping my article is helpful for you to lay the foundation of coding. We code together and learn together!
