Why am i getting a type error, both these codes look identical to me

Question

Hello this is an exercise from one of freecodecamps challenges. The challenge requires me to modify the given code to remove dependecy on the global variable. I am trying to spread the input array but i keep getting a type error, note the solution to this particular exercise is almost identical to my code yet theirs doesnt receive a type error when using the spread operator. Is there something I'm missing? First my code:

// The global variable
var bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];

// Change code below this line
function add (arr,bookName) {
  let arrCopy = arr.push(bookName);
  return arrCopy;
  
  
  // Change code above this line
}

// Change code below this line
function remove (arr,bookName) {
  let newArr = [...arr];
  if (newArr.indexOf(bookName) >= 0) {
    newArr.splice(newArr.indexOf(bookName),1);
    return newArr;
  }
  
}

var newBookList = add(bookList, 'A Brief History of Time');
var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies');
var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies');

console.log(bookList);

Now their solution that doesn't invoke a type error:

var bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];

/* This function should add a book to the list and return the list */
// New parameters should come before bookName

// Add your code below this line
function add(arr, bookName) {
  let newArr = [...arr]; // Copy the bookList array to a new array.
  newArr.push(bookName); // Add bookName parameter to the end of the new array.
  return newArr; // Return the new array.
}

/* This function should remove a book from the list and return the list */
// New parameters should come before the bookName one

// Add your code below this line
function remove(arr, bookName) {
  let newArr = [...arr]; // Copy the bookList array to a new array.
  if (newArr.indexOf(bookName) >= 0) {
    // Check whether the bookName parameter is in new array.
    newArr.splice(newArr.indexOf(bookName), 1); // Remove the given paramater from the new array.
    return newArr; // Return the new array.
  }
}

var newBookList = add(bookList, 'A Brief History of Time');
var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies');
var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies');

console.log(bookList);

Is there a difference? I have been looking at this for far too long and decided to seek help here

The `add` method is different and `Array.push` returns the new length of the array. Your `arrCopy` will be a number like 4 or 5. — , Dec 29 '20 at 18:30
As always, carefully read [the documentation on functions like `push`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) to be sure you're using them correctly. That function **does not** return a new array. — tadman, Dec 29 '20 at 18:31
These do not seem identical at all. Look at your `add` function. — codemonkey, Dec 29 '20 at 18:32
[Duplicate](https://google.com/search?q=site%3Astackoverflow.com+js+array.push+does+not+return+array) of [`push` method returns a number and not an array](https://stackoverflow.com/q/43737728/4642212). — Sebastian Simon, Dec 29 '20 at 20:01

score 0 · Accepted Answer · answered Dec 29 '20 at 18:46

0

This took me forever, but here is your answer. The add function returns a number, which is not what you want. You want it to return an array. So, change

// Change code below this line
function add (arr,bookName) {
  let arrCopy = arr.push(bookName);
  return arrCopy;
  
  
  // Change code above this line
}

To

// Change code below this line
function add (arr,bookName) {
  let arrCopy = [...arr]
  arrCopy.push(bookName);
  return arrCopy;
  
  
  // Change code above this line
}

answered Dec 29 '20 at 18:46

MatthewProSkils

364
2
13

Thank you so much, it must've been a headache for you but I am still learning the ropes and I could've just copy pasted but I needed to know what the problem was, as you can see from the question I really thought both were identical. – Frank Imade Dec 29 '20 at 19:35
While I was attempting debugging I thought the problem with my code laid in the reduce function because the info on the type error was cannot use spread non iterable values or something like that, you'd get thesame error if you pasted my code on your IDE or something. – Frank Imade Dec 29 '20 at 19:38
Yeah. It drove me crazy – MatthewProSkils Jan 15 '21 at 00:28

Why am i getting a type error, both these codes look identical to me

1 Answers1