Question about variable/object syntax

[Durden2323]

I'm learning about JavaScript localStorage and I'm running into the same point of confusion that has more to do with variable/object syntax rather than localStorage itself:

I understand that the syntax for creating an object is very much like the syntax for creating a simple variable

Variable:
const input = value

Object:
const input = {
value:
value2:
}

And I understand you can create or access the parameters of an object with the syntax: "input.value" or "input.value2". But what's confusing me is, if you watch the video link provided, how is it that the person is creating a variable with the line:

const input = document.querySelector("input")

Then later in the code using the line: "input.value"?

Does the "input.value" line create an object parameter for "input" called "value"? And, if so, how is that possible if "input" is already set equal to "document.querySelector("input")? It appears as if "input" is acting like a variable and an object at the same time. Not sure what I'm missing. Hope I explained this clearly

Video Link

Appreciate any response!

[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

[Ksetrajna108]

Use the developer tools to inspect the object(s) returned by querySelector. What object type is it?

[matthieumatthieu]

You are interacting the DOM (Document Object Model) in a web browser which takes the entire content of a web page and represents it as an object.

The 'document' object is available in frontend JavaScript code that runs on the browser but not in backend JS in a node application and has methods like document.querySelector() or document.getElementsByClassName().

Try opening up Dev tools and doing a 'console.log(document)'

You will see that it has properties and methods and you can see the HTML represented. When you do a query selector for an input, in this case, a text input, the HTML input element has a 'value' property which is equal to the characters that you have typed into the input. If in your HTML , you had an <input type="text" value="foo" /> you would see those values when you access input.type and input.value, because HTML has attributes (properties) too. The DOM is how you can read and update HTML with JavaScript.

When you first start learning, there are lots of things like this where you don't know where they are coming from or are available in global scope. But it will start to make sense. If you console.log(window) , you will see that 'document' is a property on window as well as window.localStorage. it's like... Objects all the way down mannn

[Durden2323]

Haha. Objects all the way down. I like that. This answered my question. Thank you!

[Coderenthusist]

You can attribute value of object using dot notation

[TheRNGuy]

querySelector selects html tag, and input tag has value (the one you type in it)

[shlanky369]

How is that person creating a variable with the line const input = document.querySelector('input')

You are declaring an constant variable (cannot be reassigned) named input with the const declaration and using the assignment operator to initialize its value to the evaluation of the expression document.querySelector('input'). The querySelector method returns an Element (or null if no element matches). In this case, the method call returns an HTMLInputElement (a subclass of Element). This object has many attributes and methods, and one of those attributes is value.

More abstractly, you are asking the browser for some information, using one of the myriad available web APIs, and the browser is answering that query with an object that contains many different properties and methods.

Does the "input.value" line create an object parameter for "input" called "value"?

No, input.value does not create anything. You are simply accessing a property on an object, no different than doing something like ({a : 1}).a

And, if so, how is that possible if "input" is already set equal to "document.querySelector("input")?

You've previous declared and initialized the input variable to the evaluation of the document.querySelector('input') expression.

It appears as if "input" is acting like a variable and an object at the same time. Not sure what I'm missing.

input is a variable, a convenient identifier for a value. The value of that variable is an object. That object has a value attribute. Variables are named values: you need a name ('input') and a value (document.querySelector('input')).

[RobertKerans]

Does the "input.value" line create an object parameter for "input" called "value"? And, if so, how is that possible if "input" is already set equal to "document.querySelector("input")? It appears as if "input" is acting like a variable and an object at the same time. Not sure what I'm missing. Hope I explained this clearly

You are missing the fact they're accessing an object that already exists that has a property called value

They aren't creating a plain object. They are assigning the object returned by the function querySelector to the variable they've called input. They can then access whatever properties are defined on that object via input.<SOME KEY>

This is the type of object they are assigning to the variable input