I have an array inside an array, and somehow it doesn't recognize the different values as separate, so that if I try to print the 2nd value it prints me the 2nd letter of the first value.
var name = ["John", "Alex"];
var food = ['pizza', 'banana', "cheese", ["bmw", "tesla"], name];
document.write(food[4][1]);
The array ['bmw', 'tesla'] works fine, its the name-array that acts weird.
food[4][0] outputs J (from John)
food[4][5] outputs A (from Alex).
It depends where you run the var name = ["John", "Alex"]; statement.
If you put it into a function then it works as you expect it.
But if you run it in the browser's console then it is executed in the global scope. The variables declared in the global scope, are properties of the global window object. But the window object already has a property named name and it's type cannot be changed. If you assign to it a value that is not string, its method toString() is used to convert it to a string.
This is why the statement:
var name = ["John", "Alex"];
assigns a new value to window.name and, because its type cannot be changed, the array ["John", "Alex"] is converted to the string "John,Alex" and assigned to window.name.
Use a different name for the variable (names, f.e.) and it will work as you expect it even in the global context.
You should also avoid using the name of JavaScript built-in objects, properties, and methods:
as i understand you should avoid name keyword to use because it is reserved. try to use names it should work.
Thats because food[4] is not array but string "John,Alex"
food[4].split(',')[0] outputs "John"
food[4].split(',')[1] outputs Alex
var s work in browser's global scope and the coincidence of using a variable named like an existing window property. axiac's answer nails it, you should read it