Variables

In order to save the DOM references to your HTML elements, you must store them in variables.

Let’s breakdown the syntax to declare a variable in JavaScript.

const varName = value;

const: A keyword used to declare a variable. JavaScript supports three declaration keywords: var (the original, function-scoped form), and let and const (block-scoped, introduced in ES6/ES2015). Modern code typically prefers const by default and uses let when reassignment is needed. We will explain in more detail below the difference between these variable types.
varName: Name of your variable.
=: Similar to most programming languages, the = symbol is used to define and set a variable name to a specific value.
;: All JavaScript lines of code and statements must end with a semicolon ;.

To define an empty variable, declare it with let and end with a semicolon (e.g let varName;). Note that const declarations must be initialized at the point of declaration.

`var`, `let`, and `const`

In some programming languages, like Java and C++, when declaring a variable you must specify the data type (integer, String, float, boolean, etc. ) In JavaScript, a variable does not need to be specifically defined in its declaration. Instead the keyword var, const, and let define how a variable can be used and/or changed.

var: Variables declared with var are function-scoped (or global if declared outside any function). They can be reassigned and redeclared within their scope. var is a legacy keyword — modern JavaScript codebases generally prefer let and const.
let: Variables declared with let are block-scoped — they are only accessible within the block (typically defined by curly brackets {}) in which they’re declared. A let variable’s value can be reassigned, but it cannot be redeclared within the same scope.
const: Variables declared with const are also block-scoped, but their binding cannot be reassigned after they’re initialized. Note that this does not make the value immutable — properties of an object assigned to a const can still be changed.

When storing DOM variables, take a moment to think about which type of variable you would use to store DOM references to HTML elements.

You should use the const variable type! We don’t want to be able to redefine or change the variable holding the reference to our HTML elements. This is why we should choose the const variable type.

Let’s look at an example of using the querySelector method.

Example: index.html

<html>
    <head>
        <title>My Document</title>
    </head>
    <body>
        <h1>Header</h1>
        <p>Paragraph</p>
    </body>
</html>

Let’s say we want to store a reference to the p element.

Since there are no attributes attached to this element, no id or class name, this eliminates the use of the getElementById method.
We can only use the querySelector or querySelectorAll method. However, since there is only a single instance of a p element, we will elect to use the querySelector method with the element selector associated with its tag name p.

const pElem = document.querySelector('p');

Notice that we use either single or double quotation marks as a parameter to the querySelector method.