Question 1.
This is a block from my code, and as stated in the comments, I found out that each element/object in myLibrary array is named Book instead of book like I expected. Why is that?
Because I'd assume that the created object name should be 'book', since I assigned my Book constructor to 'book'.
And also I found out that console.log(book) isn't printing anything on the console, and I don't understand why.
function addBookToLibrary() { let title = document.getElementById("title").value; let author = document.getElementById("author").value; let pages = document.getElementById("pages").value; let isRead = document.getElementById("read");
if (isRead.checked === true) { isRead = "Read"; } else isRead = "Not read yet";
//Each element/object is named Book? Isn't it should be 'book'? //I'm creating an object using a Book constructor function, no?
const book = new Book(title, author, pages, isRead); console.log(book);
console.log(Book);
myLibrary.push(book);
return myLibrary;}
that should be natural, the name should be a pointer to the prototype which would be Book.prototype, hence why it's being named Book.
\=> So the object that is created from a constructor function follows the name of the constructor and not the variable the constructor is being assigned to.
\=> that should be the default behavior, like howobject literal would say Object and an array would say Array.
\=> 'book' variable is just a pointer to a value, so when you do 'myLibrary.push(book)', what you're pushing is the value, not the variable. And the value that you're pushing happens to be an object whose prototype is 'Book', which is what you're seeing.
\=> book's prototype is technically Book. prototype, but you can just say "book is an instance of Book which is why it is saying Book, in the same way {} is an instance of Object so it would say "Object"
\=>Object.getPrototypeOf(instance_here) to check the prototype of an instance.
Question 2.
I want to be able to remove each Book object in myLibrary array when I click the remove button. Currently, only the card is being removed from the web page, not the actual Book object.
The expected behavior is when I click the remove button, the associated Book object should be gone from the array. I can't think of ways to achieve this, I can shift() and pop() from the array but if I want to remove the Book object that's associated with the remove button I click, I need a way to link between the two I think, but I can't think of any.
Does anyone have any pointers?
I do want to follow the suggestion from the lesson to use data attributes, but idk if I can apply that to my current code.
\=> Remove the book from the array, and update/show that modified array to the web page!
\=> Element.ChildElementCount !!!
\=> Remove the DOM elements, and recreate them using the modified array!
Question 3.
I'm trying to understand forEach method and callback functions that get passed into it, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach This bit from the docs, where it says its return value is 'discarded' what does that exactly mean? It doesn't exist?
\=> forEach returns undefined . The return value of callback function will also be discarded because of that.
\=> 'Always returning undefined?'