I know, I know, I feel like I'm spamming about Javascript but to be honest, I'ev spent all my free time over the past few weeks learning about this language so now I have tons of content I'd like to share with this community, both to show off (like the big showoff I am) and also to see if there's anybody interested in this topic both to correct me in my mistakes and also to discuss about the topic (I'm in dire need of discussions about Javascript) so, I'm spamming Hive with my less-than-interesting JS posts.
I already solved the 20 problems freecodecamp has on their website related to JS and I'm more than happy, both because I did it without help (apart from getting some hints at stackoverflow and some video material) and also because I'm slowly but steadily getting closer to my goal of learning Javascript and become a frontend developer (and afterwards, fullstack, but one step at a time).
This post includes 4 more JS problems that you can find in freecodecamp and I'm including all my notes, logic and how I came to solve them, hopefullly you'll find them educational for those who are looking to learn this language, and for those who are already versed in the topic, maybe you'll find it curious to see how I reached my solutions and perhaps you can give me some feedback or parallel solutions.
As with every post related to coding, I'll update my How long does it take to become a developer table so you get an idea how much time I've spent learning and also, in case you want to become a dev yourself, you get a general idea of how much sweat, tears, blood and time you should consider giving to this life project.
| Concept | Time spent |
|---|---|
| Researching Howto | 8 hours |
| Downloading programs | 2 hours |
| Learning Javascript | 49 hours (so far) |
This timeline is a bit broken because I'm actually around 60 hours into JS learning but when I finished problem 15 I was a little bit under 50 hours (hopefully I'll stay on top of this and post more about what I've done between hours 50 and 60 soon).
Here's a quick list of the problems and what they are about so you don't have to go over the whole post if you don't find any of them interesting:
- Falsy Bouncer - Remove all falsy values from an array
- Seek Destroy - You'll be provided with an initial array followed by one or more arguments outside of it. Remove all elements from that initial array that are of the same value as the given elements.
- Where do I Belong - Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
Solving the problems
Falsy Bouncer
We have to remove all falsy values from an array. Falsy values in Javascript are "false", "null", "0", "", "undefined", and "NaN".
First we will solve this with a regular "for loop"
function bouncer(arr) {
var truthies = [];
for (var elem of arr){
console.log(elem);
}
}
bouncer([7, "ate", "", false, 9]);
Output:
7
ate
false
9
*/
But we don't want to just log them, we want to remove those that are falsies, so:
function bouncer(arr) {
var truthies = [];
for (var elem of arr){
if (elem) truthies.push(elem);
// We are checking if elem is truthy. The "if" checks if the element logs out true, if so, then it pushes it into the new array that doesn't have falsies.
}
return truthies;
}
console.log(bouncer([7, "ate", "", false, 9]));
Output: [ 7, "ate", 9]
Now we can solve this with the .filter method
The .filter method works as follows:
var nums = [1, 2, 3, 4, 5, 6];
// Let's say we want all the numbers below 4
nums.filter(function(item) {
// .filter takes in a function, and that function takes a parameter (item)
return item < 4;
// And in this function we give the conditions. What kind of items do we want back?
});
What we are basically doing with this code is: Looping through all the array, and checking if each item is greater than 4, and if that is true it pushes it to the new array.
For the .filter method:
function bouncer(arr) {
return arr.filter(function(elem) {
return elem;
});
}
console.log(bouncer([7, "ate", "", false, 9, undefined, "hello"]));
We are checking if each element returns true, if it does, we include it in the output array. Remember that the elements that give out true, they run automatically such as 5, "house" etc.
Ouput: [ 7, 'ate', 9, 'hello' ] ==> Without falsies
Seek and Destroy
You will be provided with an inital array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.Remove
Basically, what we have to do is check what elements are part of the nested Array, and then check the outer Array. If there are elements in the nested array that exist in the outer array, we are going to remove them and print the remaining numbers.
We should strive for the output: [1, 1]
Note: The number of arguments doesn't necessarily need to match the number of parameters. You can pass in as many arguments as you want.
What we first need to do is get the items from the outside of the array, however many there are, into an array format, so we can run a method to them like .index or .includes to check if they exist in the array.
We use the arguments keyword (arguments)<= it takes everything that's passed into your function when you call it, in an object format.
function destroyer(arr) {
console.log(arguments);
return arr;
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
Output: [Arguments] { '0': [ 1, 2, 3, 1, 2, 3 ], '1': 2, '2': 3 } Property 0 = is the array, property 1 is 2, property 2 is 3.
So what we need is the outside arguments in an array format, so we can later compare them to those inside the array.
The first way to do this is:
function destroyer(arr) {
var args = Array.from(arguments)
console.log(args);
return arr;
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
Output:
[ [ 1, 2, 3, 1, 2, 3 ], 2, 3 ] These are the arguments (args)
[ 1, 2, 3, 1, 2, 3 ] This is the nested array
We need to get rid of the first one and get the rest, the optional arguments that we have to remove from the nested array. We can use .slice or .splice
function destroyer(arr) {
var args = Array.from(arguments);
var targets = args.slice(1);
// What we are saying here is: Give me everything from index 1 and on, since the 0 index is the Array, and the second index (1) is the 2, we get 2, 3
// If we console.log(targets) we will get [2, 3]
console.log(args);
return arr;
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
We could also use splice
function destroyer(arr) {
var args = Array.from(arguments);
args.splice(0, 1);
// We are telling it to remove everything from index 0 to 1, and it will change the original array, giving us what is left
console.log(args);
return arr;
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
Output:
[ 2, 3 ]
[ 1, 2, 3, 1, 2, 3 ] */
Now since we have stored the args outside the array and removed the first element (the array), we have the targets (args.splice)
function destroyer(arr) {
var args = Array.from(arguments);
args.splice(0, 1);
var targets = args;
var result = [];
for (var num of arr) {
// We go through the array with this loop
if (targets.indexOf(num) === -1) {
// If it doesn't exist in the outside of the array, we push the element into the new array.
result.push(num);
}
}
return result;
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
Now, we can use the .filter method to get to the same result, there is more than one way into Rome
function destroyer(arr) {
var args = Array.from(arguments);
args.splice(0, 1);
var targets = args;
return arr.filter(function(num) {
// We call it num but it can be named whatever we want
return targets.indexOf(num) === -1;
// Only if it doesn't exist in the targets
})
// .filter takes in a function and that function takes in a parameter
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
It ain't much but it's honest code. What's your take?
