How the indexOf method works in Javascript

Question

I am taking a Javascript class and my instructor used the following code:

 if('question-'.indexOf('question-1')){
//code
 }

He claims this produces a true result and will execute the code in the code block (and it does work for him). I have tried running this in console, and I always get a -1 result. I am confused on how indexOf works in this case. (I know -1 means not found). But, in this case, some of the characters are there, just not every single one indicated in the string passed into indexOf. Does every single character have to be there and match? Or in this case was it producing a true result because some of the characters were there?

"*Does every single character have to be there and match?*" yes — VLAZ, Mar 24 '21 at 18:22
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf — ATP, Mar 24 '21 at 18:23
"*Or in this case was it producing a true result because some of the characters were there?*" it returns `-1` which is truth**y**. Only the number zero is falsy. — VLAZ, Mar 24 '21 at 18:23
That was my understanding. So confused how he is making his code work — Elizabeth, Mar 24 '21 at 18:23
It *doesn't* find a match, however, `if (-1)` still executes, because it's not a zero (or `false`, or `null` and other falsy values). — VLAZ, Mar 24 '21 at 18:25
If -1 is truthy then that would mean the code would run even if you were way off base, so it would always run, and the point of the if statement was to limit its running to when a certain value was clicked on — Elizabeth, Mar 24 '21 at 18:26
See: [Understanding JavaScript Truthy and Falsy](https://stackoverflow.com/q/35642809) and [All falsey values in JavaScript](https://stackoverflow.com/q/19839952) as well as [JS Comparison Table](https://dorey.github.io/JavaScript-Equality-Table/) (go to the `If()` tab) — VLAZ, Mar 24 '21 at 18:27
This is very misleading code: are you sure this is _exactly_ what your instructor showed? Because `indexOf` does not return true or false, it returns a number. If string A is not in string B, that number is -1, otherwise it's a number that is 0 or higher, and so you _cannot_ use `indexOf` on its own in an `if` because its return value does not map to true/false in terms of whether string A is in string B — Mike 'Pomax' Kamermans, Mar 24 '21 at 18:27
I know it does(return a number). He used this exact except technically with an e.target.id property — Elizabeth, Mar 24 '21 at 18:28
@Elizabeth you're correct. What's more, if a match is found at the first position in the string (e.g., `"hello world".indexOf("hello")`) the return value is `0` and that means that the `if` will *not* be executed. — VLAZ, Mar 24 '21 at 18:28
`indexOf` returning -1 needs to be checked explicitly if you want to use it in a boolean context, e.g.: `if (foo.indexOf(bar) >= 0)`. Maybe you want `.includes`, which does return a boolean you can use directly? — ggorlen, Mar 24 '21 at 18:28
the e.target.id would equal to 'question-1' being clicked on — Elizabeth, Mar 24 '21 at 18:28
You may want to prompt your instructor to explain type coercion, because this is not good code to show your students if you don't also explain how JS will convert values from one data type to another in order to resolve statements. The proper way to write the code you've been given is `if (A.indexOf(B) !== -1)` (or greater than -1, or greater-or-equal to 0, etc) with that explicit numerical check. When using `indexOf`, you're looking at numbers. If you want to use booleans, that's what `A.includes(B)` is for in modern JS. — Mike 'Pomax' Kamermans, Mar 24 '21 at 18:30
Should be flipped to produce `0`, `'question-1'.indexOf('question-')` — Mr. Polywhirl, Mar 24 '21 at 18:37
@Mr.Polywhirl, the problem is he is trying to target multiple buttons with the id's question-1, qusetion-2, etc. All these buttons when clicked on need to execute a certain function — Elizabeth, Mar 24 '21 at 18:41
So he was saying just by singling out 'question-' you would be able to know if a button had been targeted — Elizabeth, Mar 24 '21 at 18:42
These buttons are added dynamically with a new id 'question-number' so you don't know how many questions it will result in, it could go up to say, question-10, and so on, and you wouldn't be able to target the new ones being added this way — Elizabeth, Mar 24 '21 at 18:46

score 4 · Answer 1 · answered Mar 24 '21 at 18:24

Does every single character have to be there and match?

Yes.

Or in this case was it producing a true result because some of the characters were there?

No. It's producing -1, which is a "not found" result, but -1 is a truthy value.

if (-1) { console.log("-1 is a truthy value"); } // This will be logged
if (0) { console.log("0 is a truthy value"); } // This won't be logged
if (1) { console.log("1 is a truthy value"); } // This will be logged

I assume your instructor is trying to demonstrate to you that you can't treat the return value of indexOf as a boolean.

How the indexOf method works in Javascript

1 Answers1