Unit 5 : Lists Questions

CS Principles Unit and Lesson Discussion
1

I have 2 questions:

  1. is there a way to display the name of the item was removed from the list.
    var colors = [“red”, “blue”, “white”];
    removeItem(colors, 1);

Example output would be: Item Removed: blue

  1. When do you use getNumber vs getText? I have used getText for numbers in a dropdown list and it works? When will it error? I am guessing when a conditional is used? I want to clarify this for my students. Thank you!
2

removeItem doesn’t return anything. You would expect a function like that to return the eliminated item. It doesn’t.

So you have to save the item before you remove it or output the item before you remove it.

var colors = ['red', 'blue', 'white'];
console.log("Item Removed: " + colors[1]);
removeItem(colors, 1);
3

getNumber and getText attempt to cast the input as a specific value type.

So if you call getNumber it will return either a number or NaN. The value NaN is a value that means you put text into the input box and tried to turn it into a number. Not a Number. There will be no error thrown you just don’t get a number.

If you call getText it will return a string. No errors.

The tricky part comes when you use those values you got. Javascript, which App Lab is based on, has very generous dynamic casting. Which means you can use strings and numbers together and Javascript will mostly do the right thing. It will change numbers into strings for you.

This takes us back to Unit 4 Lesson 1 where we looked at adding numbers and strings together. The same types of things happen with conditionals. 2 == “2” is true. Just as you would expect because it changes 2 into “2” and “2” is equal to “2”. 2 + 2 == 2 + “2” is false because 2 + 2 evaluates to 4 and 2 + “2” evaluates to “22”. When you compare 4 == “22” it changes 4 into “4” which is not equal to “22”.

There is of course that pesky NaN. NaN == NaN is always false.

4

if removeItem does not return anything, you could define your own.

function removeItem(arr, index){
    return arr.splice(index, 1)[0]
}
var colors = [“red”, “blue”, “white”];
console.log(removeItem(colors, 1)); // --> "blue"

In javascript (and literally any other programming language), there is a difference between a string and a number. A string will be surrounded by quotes "string" and a number will be just a number 12345
However, a number could be a string "12345". Say an input’s value was “12345”.
getText() would return “12345”, the string
while getNumber() would return 12345, the number

What’s the difference between a number as a string and a regular number?
Many things. For example, concatenation. The plus sign operator (+) is used to concatenate strings and add numbers. However, when ‘adding’ a string and a number, the number will be converted to a string, and concatenated to the other string.

var num = "12345"
console.log(num+67) // --> "1234567"

num = 12345
console.log(num+67); // --> 12412

You should use getNumber() when the value of the dropdown/input/textarea is a number.
You should use getText() when the value of the dropdown/input/textarea is not a number.

getNumber() shouldn’t error, but the way you or a user builds the code around it might. As said above, NaN is definitely not what you want as a response from getNumber(). Since NaN is not a string, you can’t NaN.substring() or NaN.split(). Doing so will give an error.