What do you know about variables in JS?

Hey friend 👋.

Are you tired of searching for a concise and straightforward resource to learn about variables?
Do you have questions that remain unanswered?
Look no further. This article will provide you with a clear understanding of the topic and guide you toward the best approach. Say goodbye to confusion and let me help you gain the knowledge you seek.

We will talk today in this article about one of the simplest and most important elements in the world of programming, which is the cornerstone in moving forward in this field, and that is (variables).

I know the internet is full of information on this topic, but I will try to shed light on some of the vague and confusing ideas for some.

In this article, you will learn:

What are the variables and why do we use them, and what are the naming conditions?
What are the most popular naming convention, and what is the best practice for naming conventions?
What are the data types, and what are the differences between them?
Finally, what are the types of variables in JS, and what are the differences between them?

What are variables?

A variable is a place is reserving in memory (RAM) to store a specific value in it that is used during program execution. The value we put inside the variable is considered a temporary value, as it is deleted from memory as soon as the program stops working.

The previous image is for taking a general idea of the variable's memorization mechanism and does not accurately represent reality.

What is the purpose of using them?

They help improve the efficiency of the program … in some cases, but their misuse leads to the opposite.
In addition to that, variables help make the program more accurate and smooth in operation and make the code more organized and easy to read.

The Conditions of naming conventions for variables in JavaScript:

Variable names must start with a letter, a dollar sign ($), or an underscore (_).
Special characters (@, &, %, ...) cannot be used in the name (only the underscore "_", Dollar sign "$" can be used regardless of the beginning or middle of the name).

(underscore, underline) "_": Usually used as a naming convention to indicate that this variable should be private and should not be used outside of the object or function in which defined include it.
(Dollar sign) "$": Used at the beginning of a variable's name to indicate that the element is a jQuery object or to distinguish it from other variables.

These conventions are not complex code in the JavaScript language but are traditional standards that programmers follow to clarify their intentions and improve the code's readability.

(number sign, hash) "#": It is used at the beginning of the name of the element within the class to indicate that it is a private element within that class to take advantage of the "Encapsulation" property in Classes.

Variable names cannot start with a number.
Variables are case-sensitive.

It is impossible to use keywords such as (if, function, var, ..)
Blank spaces cannot be used in the variable's name.
The variable name must be unique in the current file.

Variable naming conventions:

snake_case: 'All words are lowercase and each word is separated by an underscore character.',
SCREAMING_SNAKE_CASE, UPPER_SNAKE_CASE: 'Same as the Snake case, but the letters case is always uppercase.',
PascalCase: 'First letter from each word is always uppercase.',
camelCase: 'Capital letters can only appear at the start of the second word and the word does not end on a capital letter.',
kebab-case, Skewer-case: 'All letters are in a lowercase case where each word is separated by a hyphen.',
SCREAMING-KEBAB-CASE, UPPEER-SKEWER-CASE, COBOL-CASE: 'Same as Kebab case, but the case is always uppercase.',
flatcase, nocase, sentencecase, lowercase: 'All words are in lowercase and never separate from each other.',
UPPERCASE: 'Same as Flat case, but the case of letters is always uppercase.',
Train-Case: 'The first letter of each word is capitalized, and the words are linked with a hyphen.'

The conventions may vary from one source to another and may increase or decrease depending on the sorting method.

What are the best practices for naming in JS?
Camel case: for variable, function, method, parameter, or property.
Pascal case: for classes in JavaScript.
Upper case snake case: for constants.

Data types in JS:

JavaScript is one of the languages that can automatically detect the type of variables data without having to specify because it is considered a loosely (weakly) typed programming language, unlike many other programming languages like C#.

This is a list of all data types that can be used or encountered when dealing with JS:
1- String
2- Number
3- Object (Array)
4- Object
5- Boolean
6- Undefined: It is the default value for variables that have been declared but have not been assigned a value.
7- Null: It is a value that can be assigned to variables to indicate that there is no value.
8- Specific Types: NaN (Not a Number), Infinity

Types of variables in JS:

There are only three types of variables that can be used in JS
They differ from each other in features and use cases
This is a brief table showing the differences between these types:

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||                   Types                    |                 Var                |                  Let                  |                            Const                           ||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||                 Redeclare                  |                 Yes                |              No => Error              |                         No => Error                        ||
||--------------------------------------------|------------------------------------|---------------------------------------|------------------------------------------------------------||
||  Access Before Declare (Hoisting Concept)  |              Undefined             |                 Error                 |                            Error                           ||
||--------------------------------------------|------------------------------------|---------------------------------------|------------------------------------------------------------||
||   Variable Scope Drama [Added To Window]   |  (Yes) ["Access from every ware"]  |  (No) ["Don't add To Window Object"]  |             (No) ["Don't add To Window Object"]            ||
||--------------------------------------------|------------------------------------|---------------------------------------|------------------------------------------------------------||
||           Block & Function Scope           |         Function Scope only        |        Block And Function Scope       |                  Block And Function Scope                  ||
||--------------------------------------------|------------------------------------|---------------------------------------|------------------------------------------------------------||
||                                            |                                    |                                       | Used for Unchanged Value ["Can't Reassign it"] [Read only] ||
||                    Notes                   |       Not recommended to use       |           Most commonly used          | Can not keep it without value ["Can't be Undefined"]       ||
||                                            |                                    |                                       |                                                            ||
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Congratulations, you've made it to the end! You now have a solid understanding of many essential concepts related to variables. With this foundation, you'll be able to continue your learning journey with greater ease and confidence.

To keep it engaging and brief, I've only touched on some ideas while others are mentioned in passing.
It serves as an introduction to more in-depth discussions on topics such as Local and global scope, Lexical scope, Pass-by-value vs Pass-by-reference, Closures, and more.
These concepts will be talked about step by step to provide a complete picture of the topic.

I hope you found this article useful for you.
I always welcome your feedback, so please feel free to share your thoughts, opinions, and suggestions to help me continuously improve.
If you notice any incorrect information, please do not hesitate to let me know so that I can review and correct it promptly.

Blog