Is my code bad,will i ever become a front end dev coding like this?

So i completed this Intermediate Algorithm Scripting challenge on freeCodeCamp where my function accepted two arrays (arr1,arr2) and i had to return a new array with the unique elements of these two arrays(numbers that were only in one of these two arrays).So my code was this:

function diffArray(arr1, arr2) {
var newArr = [];
for(let a1 in arr1){
if(arr2.includes(arr1[a1])===false){
newArr.push(arr1[a1]);`
}
}
for(let a2 in arr2){
if(arr1.includes(arr2[a2])===false){
newArr.push(arr2[a2]);
}
}

return newArr;
}

But i saw the solutions on the forum were different,using fewer lines which i know that this make the code faster executable. Here comes my question. Is it wrong that i solve all the challenges with much more lines,i know it is better for optimization issues to code blocks as small as you can but what if i cant?At least for now i think i am not able to solve complex challenges in few and fast lines.Will this affect my effort to become front end developer?Thanks!

P.S. Sorry for any grammar mistake,English not my native :slight_smile:

Is my code bad,will i ever become a front end dev coding like this?

well nobody started out perfect
coding is like a marathon it may start sloppy but can end in a well preformed running form :smiley:

. Here comes my question. Is it wrong that i solve all the challenges with much more lines,i know it is better for optimization issues to code blocks as small as you can but what if i cant?
Yes it is absolutly okay solving them all is already one huge leap forward.
Now here’s what i want u to do
save up all the code u are making now
in 2 months look back at it :3 and then reflect

At least for now i think i am not able to solve complex challenges in few and fast lines.Will this affect my effort to become front end developer?
no it won’t also stop comparing urself to others u are learning its okay to take ure time :3

2 Likes

Thank you.I will save my code then and i will check in a few months again!

That’s not how code execution works. Doesn’t make it faster. Less lines might be simpler, or it might not be. It might be easier to read for a human, or it might not be. It might be more efficient, or it might not be. It will be less lines, but that’s not a good thing in of itself, it’s just a thing. If making code fit in as few lines as possible becomes your primary motivation, what you end up with is completely unreadable code. Code is for humans to read, don’t forget this.

Keeping code terse is a generally good thing, because the less code there is, the easier it is to debug but only up to a certain point. So removing unecessary code, making it lean and efiicient and easy to read, that’s normally good. You will get better at this over time. You will struggle at first. Then you will learn more and start writing “clever” code that makes full use of what’s available in JS. Then you’ll realise that that is often difficult to read and debug and you’ll go back to writing “dumb” code that just does the job, but it will be much cleaner and better structured than when you started.

Golfing the code (making as short as is humanly possible, normally using obscure shortcuts and workarounds), that’s normally bad – you are not writing code in a very low-level language for an embedded device, you are writing JS.

eg I can write this, which is very short, but it’s not simpler (where I would say simpler means using basic JS syntactic structures, not abstractions), more readable or more efficient than a careful loop-based solution that pushes values into an output array:

function diffArray (xs, ys) {
  return [...xs.filter(x => !ys.includes(x)),
          ...ys.filter(y => !xs.includes(y))];
}
2 Likes

@DanCouper is spot on. You should focus on writing clean, easy to read code that you can go back and edit later. We always end up going back and editing or rewriting old code.

In your code for example, whitespace helps make your logic clearer:

Add Whitespace (Click to Expand)
function diffArray(arr1, arr2) {
  var newArr = [];
  for (let a1 in arr1) {
    if (arr2.includes(arr1[a1]) === false) {
      newArr.push(arr1[a1]);
    }
  }
  for (let a2 in arr2) {
    if (arr1.includes(arr2[a2]) === false) {
      newArr.push(arr2[a2]);
    }
  }

  return newArr;
}

And a small handful of comments might be a good idea too:

Add Comments (Click to Expand)
// Return array of unique elements in each argument array
function diffArray(arr1, arr2) {
  var newArr = [];

  // Check each array for unique entries
  for (let a1 in arr1) {
    if (arr2.includes(arr1[a1]) === false) {
      newArr.push(arr1[a1]);
    }
  }
  for (let a2 in arr2) {
    if (arr1.includes(arr2[a2]) === false) {
      newArr.push(arr2[a2]);
    }
  }

  return newArr;
}

And maybe some small tweaks for variable clarity:

Clearer Variable Names (Click to Expand)
// Return array of unique elements in each argument array
function diffArray(arr1, arr2) {
  let uniqueArr = [];

  // Check each array for unique entries
  for (let elem in arr1) {
    if (arr2.includes(arr1[elem]) === false) {
      uniqueArr.push(arr1[elem]);
    }
  }
  for (let elem in arr2) {
    if (arr1.includes(arr2[elem]) === false) {
      uniqueArr.push(arr2[elem]);
    }
  }

  return uniqueArr;
}

I’d focus on making these sorts of tweaks so it’s easier for you to read your code in the future. Your knowledge of JavaScript and coding will improve so your code will improve as you learn and practice more. But you need to be able to read your code so you can learn from and improve it.

Here are just a few style tweaks that might be easier to see after the above changes for clarity:

Use Negation Operator (Click to Expand)
// Return array of unique elements in each argument array
function diffArray(arr1, arr2) {
  let uniqueArr = [];

  // Check each array for unique entries
  for (let elem in arr1) {
    if (!arr2.includes(arr1[elem])) {
      uniqueArr.push(arr1[elem]);
    }
  }
  for (let elem in arr2) {
    if (!arr1.includes(arr2[elem])) {
      uniqueArr.push(arr2[elem]);
    }
  }

  return uniqueArr;
}
Drop {} for single line bodies (Click to Expand)
// Return array of unique elements in each argument array
function diffArray(arr1, arr2) {
  let uniqueArr = [];

  // Check each array for unique entries
  for (let elem in arr1)
    if (!arr2.includes(arr1[elem]))
      uniqueArr.push(arr1[elem]);
  for (let elem in arr2)
    if (!arr1.includes(arr2[elem]))
      uniqueArr.push(arr2[elem]);

  return uniqueArr;
}
2 Likes