Why does JavaScript even need multiple syntaxes to access an object property?

Question

//As an example, you got the object John

var John = {
name: "John",
age: 25
};

//and want to access the age property. You can do that with either this syntax:
document.write(John.age);
//or this syntax:
document.write(John['age'])

and I don't understand why the creators of JS felt like it was necessary to give you 2 ways to do that when it's harder to learn. SelfLearns' JS course doesn't name a benefit of having both of them either.

Answer 1

Keys might have blank spaces and so on, here you need the ["string"] syntax.

This adds flexibility when you read data or when you create keys dynamically.

https://code.sololearn.com/cRRfoygMONnP/?ref=app

Answer 2

The dot version is usually more readable. When defining the objects it's usually better to avoid property names with blank spaces or starting with numeric values etc.

I'd say the dot version is the "more concise" way when you think of js objects as actual objects in the oop sense (e.g. having properties and methods)

Answer 3

Lisa
I see. It explains the variant with ['quotes and brackets'] but why does the .dotted variant exist then?

Answer 4

@ Lisa
thank you for your answers
it kind of frustrates me that JS is like this
I don't like learning about a programming languages' formalities but instead about how to automate things from the client side and do so with as little friction as possible
and neither JS, nor HTML or CSS felt frictionless and logically consistent for me to learn
I know it's an issue of patience and other flaws of mine, too to a degree
don't really know what to do about that whole situation, maybe consider different material

I also wonder if there's another programming language I'm going to have an easier time with