JavaScript Variable to Hold Reference to Paragraph Element

Lesson 33

Learn to create a const variable in the JavaScript programming language to hold a reference to an object that represents a paragraph element.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

# Summary of Image Gallery and Variables Introduction

In this transcript, the speaker discusses the concept of **variables** in JavaScript, highlighting their importance in writing efficient and readable code.

## Key Points

- **Avoiding Redundancy**: The speaker emphasizes the tediousness of duplicating code, like style changes to paragraphs, and introduces variables as a solution.
  
- **Definition of Variables**: 
  - The syntax for creating a variable is:
    ```javascript
    const variableName = value;
    ```
  - In this case, a variable named `paragraphElement` is suggested to store a reference to a paragraph element.

- **Benefits of Using Variables**:
  - **Efficiency**: By storing a single operation (like a DOM lookup) in a variable, you avoid executing the same operation multiple times, which improves performance.
  - **Readability**: Using descriptive names for variables makes it easier to understand what they represent. Poorly named variables (like just `a`) can confuse readers of the code.

- **Special Syntax**: 
  - Variable references should not be in quotes. Quoting would imply looking for a string literal rather than referencing the variable’s value.

- **Execution Flow**: The speaker explains that JavaScript executes code from top to bottom. Therefore, defining a variable at the top allows it to be reused easily in subsequent lines.

## Conclusion

The use of variables in JavaScript simplifies code maintenance, enhances performance by minimizing repeated operations, and improves code readability when descriptive naming conventions are followed.

Video Transcript

Now to do the image gallery thing you want it to do, I need to introduce concept of variables. Remember how we had before for the paragraph? ID paragraph. The paragraph. And I was changing the properties and I wrote it twice. One for the color, one for the background color yellow. And you can see the paragraph. Oops. Paragraph. Paragraph. Paragraph. Okay, you can see the paragraph there. Notice I wrote the same thing twice, right? Which would be kind of tedious if I keep writing the same thing over and over. So if you don't want to write the same thing you can actually store this value somewhere to be reused over and over. And that's the concept of variables. So the syntax is const space. Oops, all the case. Any name you want, let's say paragraph. Paragraph.Element. And then double equals and then the right hand side is what you want to assign to this variable. Let me copy this. So let's walk through this. So whatever is returned by get element by the P. We can store that somewhere to reference later. And to do that we do use variables. So I created this variable. I call it paragraph element. You can call it any way, any name you want. The syntax is, like I said, they have an equal sign. The right hand side is the new value. And the left hand side is what you want to assign to. Now we need to have the const because that's the syntax for JavaScript. Const meaning this is something constant that is only defined once. Once we have this name we can reference anywhere we want. So in this case line three, when I say, I can have this, you see it's the same thing in the right hand side, right? So I can replace this whole thing with just paragraph element. Notice there's no quotes around it because this does not mean literally like the word paragraph element. This means something special and that's something special with the paragraph element variable that stores reference or pointer, something that's pointing to the paragraph element here. Okay. So that's why before I told you about strings that if you want the literal word red, for example, you have to have the quotes. Otherwise it would think, oh, are you trying to, it's trying to think where's the variable called red? I don't see it defined anywhere previously. Okay, so you always have to have quotes around it if you want the literal word red. Now, you see we did line four, the same thing. So we can just reuse that variable. So what happens here, more details is it always runs the program from the top to the bottom, right? So we're in line one and okay, we get the element by ID and we put that inside paragraph element. Now the benefit of doing this is we only do this operation once, whereas if you had this here, line three, line four, it would try to find the element once, it would try to find the lemma element again twice. So it's doing two separate operations. Whereas if I have the variable, I only did it once and I don't need to do that operation again. Go through the document, you know, search for that element. And that's another benefit of variables. When you want to reuse values, you don't have to compute them again or do an operation again. Also helps readability, you know, if you name your variables a very descriptive name. So usually you want to give a very descriptive name for the thing you're storing to actually mean it, right? Don't write just, okay, I'm going to write variable a and then say a dot sire a dot color. What is a? This is not a good name because you don't want to read it. You don't understand what it is. You know, you have to dig through it and take a lot of time just to understand what this means. That's why we always want to give the script the names to variables so we understand right away what they mean.