Self-Learning JavaScript Journey

#beginners #javascript #webdev #productivity

In small short bursts of productivity and the ADHD urge to have exciting blurbs of newfound excitement of learning(who can relate!!? :-) ), I will do my best to share small tid-bits of my journey into learning JavaScript and working on myself to become the best web developer I can be!

I am using The Odin Project to help me in my journey and I have been loving what I have been doing so far.

Right now, I am working on learning the concept of "Test-Driven Development" which at first glance for me, I interpreted as software development that is largely developed. It was new to me that in the work place, tests are made of what code should be doing before the actual code is even written up! This is news to me since in college, they never really emphasized or told us about how the work life can differ so much on what classes may exhibit, in addition to we were never really given the opportunity to make our own test, but use test what was provided and build code around it for it to passed. So this is a steep learning curve for me that I am grateful to push myself towards.

The current incomplete coding challenge I am doing revolving around TDD is removing values from an array using JavaScript.

The following code I have works in removing a single value from an array:

In my current understanding, I have an array object that is not an array instance, and a rest parameter to be a placeholder for an arbitrary number of arguments I want to pass through.

const removeFromArray(array, ...multArgs) {

    let changeArray = [].slice.call(array);
    let indexArg = changeArray.indexOf(...multArgs);

    changeArray.splice(indexArg, 1);

    return changeArray;

    };


  module.exports = removeFromArray;

Since it successfully passed the first test, I moved on to the second test case I needed to do which was having multiple values removed instead of a single one.

My next approach was trying for a for-loop.
The notes I took were the following:

Whenever I deal with arrays, I always immediately go for for-loop knowing I have to iterate through the elements. It seems as the best approach to handle array elements, pending discovery of new functions/elements that can accomplish what I want.
Rest parameters I understand is a placeholder for an arbitrary number of arguments wanting to be passed through, hence the utilization.

My code is then slightly changed to the following where it currently fails both the single value and multiple value:

const removeFromArray(array, ...multArgs) {

    let changeArray = [].slice.call(array);
    let indexArg = changeArray.indexOf(...multArgs);

        for(let i = changeArray.length-1; i >= 0; i--){
             changeArray.splice(indexArg, 1);
}
        return changeArray;
 };


  module.exports = removeFromArray;

After asking someone to do feedback on this manner to improve, I have received helpful tips that I am still navigating through.

First thing I learned: Array.from.

According to documentation, it creates a new, shallow-copied Array instance from an array-like object.

In my own understanding: Its just another way to make my array parameter an array instance or a copy to say the least.

I am very weird in repeating concepts and things I see, but this is how it makes sense to my brain.

My coding journey continues on how I improve and reach a solution!

I hope to update you all soon on when I finally approach a working solution!

I have had some try to just send me a solution, but I know I cannot learn that way! I need to approach it on my own hand to feel accomplished so I appreciate anyone helping, but I appreciate if I am not handed stuff easily! :-)

Update as of 8:43 PM EST

I have reached to a solution thanks to having a productive pair program and a little nudge from people to get on the right track. This is important to me as a junior developer to have soundboard and active, live feedback. I tried rubber ducking, but it didn't help me much because the rubber ducky couldn't talk back to me. :-) But, I digress.

So! The following code has passed the multiple value test cases I had.

What I had did was take my function that was able to remove one value and make it its own function to where it can handle taking one value at a time in terms of handling multiple values.

I also learned about how tricky off by one errors can be. The code below I initially had my for statement in the typical

for(let i = 0; i < multArgs.length; i++){}

fashion and it ended up taking out an additional value that wasn't being indicated to remove! So to handle that off by one, I changed my for statement to

 for (let argument of multArgs){}

to handle that logical error.

I am so glad it started working!

However, not all of the test cases are working the ones it did not work with are the following:

what it doesn't work with yet:
ignores non present values
ignores non present values but still works and
only removes same type


//function that handles removing multiple values
//one at a time
function removeOneValue(array, valueToRemove) {
  let changeArray = Array.from(array);

  if (changeArray != -1) {
    let indexArg = changeArray.indexOf(valueToRemove);
    changeArray.splice(indexArg, 1);
  }

  return changeArray;

}

const removeFromArray = function (array, ...multArgs) {

  let changeArray = Array.from(array);

  //looping through all the arguments that is seen
  //this handles off by one error
  for (let argument of multArgs) {

    changeArray = removeOneValue(changeArray, argument);

  }

  return changeArray;
}



// module.exports = removeFromArray;

// Do not edit below this line
module.exports = removeFromArray;

So what is the issue? It lies within the code snippet that says:

if (changeArray != -1)

where there isn't a proper checking of non-present values. This is changed by updating it to:

(changeArray.indexOf(valueToRemove) != -1)

where if the index of the valueToRemove is present in changeArray, carry out the splicing, otherwise, ignore it and move on.

The updated code is shown below

//function that handles removing values one at a time
function removeOneValue(array, valueToRemove) {
  let changeArray = Array.from(array);
  let indexArg = changeArray.indexOf(valueToRemove);

//we want to check to make such index
//of value to remove is 
//present in change array or not
  if (changeArray.indexOf(valueToRemove) != -1) {
    changeArray.splice(indexArg, 1);
  }

  return changeArray;

}

const removeFromArray = function (array, ...multArgs) {

  let changeArray = Array.from(array);
  //looping through all the arguments that is seen
  //this handles off by one error
  for (let argument of multArgs) {
    changeArray = removeOneValue(changeArray, argument);
  }

  return changeArray;
}



// Do not edit below this line
module.exports = removeFromArray;

Overall, I am pretty proud of myself of sticking to seeing this through and accomplishing my hurdle and I am grateful for individuals in Tech community being a listening ear for me and pushing me to find the solution on my own and me not just giving up and finding a solution elsewhere.

Cheers!