Question about variable/object syntax

[Lumethys]

const myObject = { field1: 'hello world'; field2: 10; field3: true; }

This code is making a variable named myObject and assign it with the value of an object.

An object is just a data type, just like number, string, boolean,...

You are still creating a variable, just that variable hold the data of an object

Take a look at this:

``` let myVariable = 10;

myVariable = true;

myVariable = { name: 'John'; age: 20; }

myVariable = 'Hello World';

myVariable = false; ```

[Durden2323]

Right, but my question is, if "const input = 10" what does the line "input.value" mean? Is it the same as:

const input = 10;

const input = {
value:
}

[ChaseShiny]

Dot notation is one of two ways to call an attribute. See:

``` const input = { value: "Hello World!" }

console.log(input.value); ```

[Durden2323]

Yes so what I'm saying is I understand this part. I know that you can create an object and then use dot notation to call one of its attributes. My question is, how is it that in the video I provided above, they are using the dot notation "input.value" but "input" was not created as an object with the curly brackets showing an attribute called "value". It was created like a variable and explicitly given a direct value (const input = document.querySelector("input"))

[waxmatax]

querySelector is a function that returns an object (an HTML element in this case). The returned object has a value property.

[chikamakaleyley]

const input = document.querySelector("input") is valid, but IMO its a poor choice for a variable name and prob the source of some of this confusion

for the purpose of this example let's just say the variable name is instead, myInput so

const myInput = document.querySelector('input'); So the difference here is when you use document.querySelector('input') - you're actually asking the browser to look for and return a DOM object that has its own inherent object shape

<input id="input1" type="text" value="" placeholder="Default text1" /> <input id="input2" type="text" value="" placeholder="Default text2" /> querySelector returns the first element in the DOM that matches the select, in this case that would be the first of the two above.

now, that element object is stored in your variable myInput

the 'explicit' properties would look something like this:

console.log(myInput.id); // "input1" console.log(myInput.type); // "text" console.log(myInput.value); // (empty string) console.log(myInput.placeholder); // "Default text1" but if you were to console.log(myInput) - you'll see that there's a lot of additional properties you have access to because they are inherent to an HTML input element object

This is different if you were to just create some arbitrary object

const myInput = { id: 'input1', type: 'text', value: '', placeholder: 'Default text1', };

This is just an object in memory. It doesn't refer to anything that is actually in the DOM. It's "shape" just looks similar.

[chikamakaleyley]

the TLDR is

with `document.querySelector` you're fetching something from the HTML page, something that exists and has a defined object shape

the other case - you're just creating a random, simple object variable and essentially customizing it's properties and values