DEV Community

Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: JavaScript Variables

JavaScript Variables

In JavaScript, variables are data storage containers. A variable must be declared before it can be used in a JavaScript program. The var keyword is used to declare variables, as shown below.

Code:

  • var x = 5;
  • var y = 6;
  • var z = x + y;

Variables x, y, and z are declared with the var keyword in this example. As a result of the above example, you can anticipate:

  • x holds the value 5
  • y holds the value 6 and
  • z holds the value 11.

Declaring all variables at the start of a script is good programming practice.

JavaScript Identifiers

All variables in JavaScript must have distinct names. Identifiers are the names given to these distinct names. Short names (like x and y) or more descriptive names can be used as identifiers (age, sum, totalVolume). The following are the general guidelines for naming variables (unique identifiers):

  • Letters, numerals, underscores, and dollar signs can all be used in names.
  • Each name must start with a letter.
  • Names can also start with the letters \$ or .
  • Case is important while typing names (y and Y are different variables)
  • Names containing reserved terms (such as JavaScript keywords) are not allowed.

There are a lot of variables in a single statement.

Many variables can be declared in a single sentence. Start the statement with var and use a comma to separate the variables:

Code:

var person = 'John Doe',
  carName = 'Volvo',
  price = 200;

Enter fullscreen mode Exit fullscreen mode

A declaration can span multiple lines:

Code :

var person = 'John Doe',
  carName = 'Volvo',
  price = 200,
  Value = undefined;

Enter fullscreen mode Exit fullscreen mode

Variables are frequently declared in computer programs without a value. The value can be calculated or provided later, such as user input. The value of a variable declared without a value is undefined. Following the execution of this statement, the variable carName will have the value undefined:

Code :

var carName;

Enter fullscreen mode Exit fullscreen mode

Re-Declaring JavaScript Variables:

A JavaScript variable's value will not be lost if you re-declare it. Following the execution of these statements, the variable carName will still have the value "Volvo".

Code:

var carName = 'Volvo';
var carName;

Enter fullscreen mode Exit fullscreen mode

Strings can also be added, but they will be concatenated:

Code:

var x = 'John' + ' ' + 'Doe';

Enter fullscreen mode Exit fullscreen mode

If you put a number in quotes, it will be interpreted as a string and concatenated with the rest of the numbers.

JavaScript Dollar Sign $

Remember that identifiers (names) in JavaScript must begin with:

  • An alphabetical letter (A-Z or a-z)
  • A dollar symbol "$"
  • A dollar symbol "$"

Because the dollar sign is treated as a letter in JavaScript, identifiers containing \$ are valid variable names.

Code:

var $$$ = 'Hello World';
var $ = 2;
var $myMoney = 5;

Enter fullscreen mode Exit fullscreen mode

Although the dollar symbol is not widely used in JavaScript, professional programmers frequently use it as an alias for a JavaScript library's main function.

The main function $ in the JavaScript library jQuery, for example, is used to select HTML elements. $("p"); in jQuery indicates "select all p elements".

JavaScript Underscore _

Because the underscore is treated as a letter in JavaScript, identifiers containing are valid variable names.

Code:

var _lastName = 'Johnson';
var _x = 2;
var _100 = 5;

Enter fullscreen mode Exit fullscreen mode

Although using the underscore as another name for private (hidden) variables is uncommon in JavaScript, it is a regular practice among skilled programmers.

Contrast Bootstrap UI Kit

Contrast React Bootstrap PRO is a Multipurpose pro template, UI
kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

You may find the following resources useful:

Top comments (0)