[fusion_builder_container type=”flex” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” width_medium=”” width_small=”” width=”” min_width_medium=”” min_width_small=”” min_width=”” max_width_medium=”” max_width_small=”” max_width=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
📘 JavaScript Lesson: Understanding Variables
🧠 Lesson Objective
By the end of this lesson, you’ll be able to:
-
Define and declare variables in JavaScript.
-
Differentiate between variable keywords, names, and values.
-
Store different types of data in variables.
-
Write interactive code that uses variables.
🔍 What Are Variables in JavaScript?
A variable is like a box where you can store information to use later in your program. You might store a name, a number, or even a password. Think of it like writing something down so your browser doesn’t forget.
Without variables, a browser can’t remember anything. Every time you refresh a page, everything resets unless you’ve stored the data somewhere—like in a variable.
🧱 Basic Syntax of a JavaScript Variable
Here’s a simple variable:
Let’s break that down:
-
var → This is the keyword. It tells JavaScript, “Hey! I’m creating a variable.”
-
userName → This is the name of the variable. It’s how we refer to this piece of stored data.
-
= → This is the assignment operator. It means “give the value on the right to the variable on the left.”
-
"Bob" → This is the value being stored (a string in this case).
-
; → This ends the statement. It’s like a period in English.
🧪 More Examples
🟢 Example 1: Store a user’s age
➡️ We stored the number 30 in a variable called userAge.
🟢 Example 2: Store a website title
➡️ Here, "MiltonMarketing" is a string stored in the variable siteTitle.
🟢 Example 3: Use a variable in a sentence
[/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]dmFyIG5hbWUgPSAiQWxpY2UiOwp2YXIgZ3JlZXRpbmcgPSAiSGVsbG8sICIgKyBuYW1lICsgIiEiOwpjb25zb2xlLmxvZyhncmVldGluZyk7Cg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” width_medium=”” width_small=”” width=”” min_width_medium=”” min_width_small=”” min_width=”” max_width_medium=”” max_width_small=”” max_width=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
➡️ Output: Hello, Alice!
This combines two strings together using the + operator.
🧠 Rules for Naming Variables
When creating a variable name:
✅ It must begin with a letter (a–z, A–Z), an underscore _, or a dollar sign $.
❌ It can’t begin with a number (e.g., 1user is invalid).
✅ Use camelCase for multiple words (e.g., userPassword or currentScore).
❌ You can’t use spaces or symbols like - in a variable name.
[/fusion_text][fusion_table fusion_table_type=”1″ fusion_table_rows=”” fusion_table_columns=”” awb-switch-editor-focus=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_color=”” hue=”” saturation=”” lightness=”” alpha=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=””]
| Type |
Example |
Description |
| String |
“Hello” |
Text, enclosed in double or single quotes |
| Number |
42 |
Numeric value (integer or decimal) |
| Boolean |
true / false |
Logical value, either true or false |
| Null |
null |
Represents a deliberate non-value |
| Undefined |
undefined |
A variable that has been declared but not assigned a value |
[/fusion_table][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” width_medium=”” width_small=”” width=”” min_width_medium=”” min_width_small=”” min_width=”” max_width_medium=”” max_width_small=”” max_width=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
🔐 Example: Store a Password
Let’s say we want to store the correct password for a login screen:
Later in the program, we might use this to compare with what the user typed:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]dmFyIHVzZXJJbnB1dCA9ICJsZXRNZUluMTIzIjsKCmlmICh1c2VySW5wdXQgPT09IGNvcnJlY3RQYXNzd29yZCkgewogIGNvbnNvbGUubG9nKCJBY2Nlc3MgZ3JhbnRlZCEiKTsKfSBlbHNlIHsKICBjb25zb2xlLmxvZygiQWNjZXNzIGRlbmllZC4iKTsKfQo=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” width_medium=”” width_small=”” width=”” min_width_medium=”” min_width_small=”” min_width=”” max_width_medium=”” max_width_small=”” max_width=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
💡 Pro Tip: Use let and const in Modern JavaScript
Although this lesson uses var (which works), modern JavaScript often uses:
Example:
Use var only when needed for compatibility or learning basics.
📝 Final Practice Assignment
✍️ Instructions:
Write JavaScript code to do the following:
-
Create a variable named visitorName and assign your name to it.
-
Create a variable called welcomeMessage and store this message in it:
"Welcome back, " followed by the visitor’s name.
-
Print the message to the console.
-
Create a variable named loginAttempts and set it to 3.
-
Print this sentence using a variable:
"You have X login attempts remaining."
(where X is replaced by the value from loginAttempts)
✅ Answer Key
[/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]Ly8gU3RlcCAxCnZhciB2aXNpdG9yTmFtZSA9ICJCZXJuYXJkIjsKCi8vIFN0ZXAgMgp2YXIgd2VsY29tZU1lc3NhZ2UgPSAiV2VsY29tZSBiYWNrLCAiICsgdmlzaXRvck5hbWUgKyAiISI7CgovLyBTdGVwIDMKY29uc29sZS5sb2cod2VsY29tZU1lc3NhZ2UpOyAgLy8gT3V0cHV0OiBXZWxjb21lIGJhY2ssIEJlcm5hcmQhCgovLyBTdGVwIDQKdmFyIGxvZ2luQXR0ZW1wdHMgPSAzOwoKLy8gU3RlcCA1CmNvbnNvbGUubG9nKCJZb3UgaGF2ZSAiICsgbG9naW5BdHRlbXB0cyArICIgbG9naW4gYXR0ZW1wdHMgcmVtYWluaW5nLiIpOwovLyBPdXRwdXQ6IFlvdSBoYXZlIDMgbG9naW4gYXR0ZW1wdHMgcmVtYWluaW5nLgo=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” width_medium=”” width_small=”” width=”” min_width_medium=”” min_width_small=”” min_width=”” max_width_medium=”” max_width_small=”” max_width=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
📚 Summary
-
Variables store information in JavaScript.
-
You define a variable using a keyword (var, let, or const), a name, and a value.
-
Strings must be inside double quotes.
-
Variable names must follow specific rules.
-
You can use variables to build dynamic, interactive websites.
[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” width_medium=”” width_small=”” width=”” min_width_medium=”” min_width_small=”” min_width=”” max_width_medium=”” max_width_small=”” max_width=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Related Videos:
Related Posts:
Online JavaScript Compiler. Code on the go.
Storing and Modifying Information (CRUD)
JavaScript Glossary – Variables
Object-Oriented Programming (OOP)
Building a web page with HTML tags
Defining What an Application Is
Comparing Python to other languages
Introduction to JavaScript – Create a Variable: const
Python Essentials: A Beginner’s Guide to Coding with Python
Introduction to JavaScript – Create a Variable: let
Learn more about JavaScript Operators
Introduction to JavaScript – Libraries
How do I start a WordPress blog? (hosting wordpress)
MORE CSS PROPERTIES
Helping humans speak to the computer
Learn Code Introspection Python Programming
Introduction to JavaScript – Variables: Review
Introduction to JavaScript – Variables: String Interpolation
Python String Formatting
Redirect New Registered Users to a Specific Page – WordPress
Learn Modules and Packages in Python programming
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
