JavaScript Variables

In JavaScript, a variable is a container that holds a value. Variables are used to store data, such as numbers, strings, and objects.

They are created using the var, let or const keywords, followed by the variable name and an assignment operator = to assign a value to the variable.

For example, the following code creates a variable called name and assigns it the value "Anthony Howard":

let name = "Anthony Howard";

The var keyword is used to create variables that are scoped to the nearest function or the global scope, while let and const are used to create variables that are block-scoped.

Variables declared with const cannot be reassigned, while let variables can be reassigned.

const pi = 3.14;
pi = 3.14159; // This will throw an error

let age = 30;
age = 31; // This is allowed

It is a good practice to use const when the variable is never reassigned, and let when the variable is reassigned.

How to declare JavaScript variables

There are three ways to declare variables in JavaScript:

Using var:

The var keyword is used to declare variables that are scoped to the nearest function or the global scope. Variables declared with var are hoisted, which means they can be accessed before they are declared in the code.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

Using let:

The let keyword is used to declare variables that are block-scoped. Variables declared with let are not hoisted, which means they cannot be accessed before they are declared in the code.

console.log(y); // ReferenceError
let y = 10;
console.log(y); // 10

Using const:

The const keyword is used to declare variables that are block-scoped and cannot be reassigned. Like variables declared with let, variables declared with const cannot be accessed before they are declared in the code.

console.log(z); // ReferenceError
const z = 15;
z = 20; // TypeError
console.log(z); // 15

It is a best practice to use const when the variable is never reassigned, and let when the variable is reassigned.

What are JavaScript Identifiers

In JavaScript, an identifier is a name given to a variable, function, or property. Identifiers are used to refer to these elements in the code, and are made up of a combination of letters, digits, and special characters like $ or _.

There are some rules to follow when naming identifiers in JavaScript:

  • Identifiers must start with a letter, dollar sign $, or underscore _.
  • Identifiers cannot contain spaces or special characters like punctuation marks or mathematical symbols.
  • Identifiers cannot be the same as JavaScript keywords (e.g. var, let, if, while, etc.).
  • Identifiers are case-sensitive, meaning that name and Name are considered different identifiers.

Here are some examples of valid JavaScript identifiers:

let variableName;
const $price;
let _private;

It's also worth mentioning that camelCase is the usual convention for variable/property names in JavaScript, where the first word is in lowercase and each word after that starts with a capital letter.

Multiple variables in one statement

In JavaScript, you can use the let or const keyword to declare multiple variables in one statement, by separating them with commas.

For example:

let x = 1, y = 2, z = 3;

or

const a = 4, b = 5, c = 6;

You can also use var keyword, but it's recommended to use let and const instead of var as they provide better variable scoping.

Re-Declaring JavaScript Variables

Re-declaring a variable in JavaScript means creating a new variable with the same name as an existing variable. Depending on the keyword used to declare the variable, re-declaring a variable can have different effects on the existing variable.

If you re-declare a variable using the var keyword, the value of the existing variable will be overwritten.

For example:

var x = 1;
var x = 2;
console.log(x); // Output: 2

If you re-declare a variable using the let keyword, the variable will be treated as a new variable and the previous variable will still be accessible. However, it will result in a SyntaxError if you try to re-declare a variable in the same block scope.

For example:

let x = 1;
let x = 2; // SyntaxError: Identifier 'x' has already been declared

If you re-declare a variable using the const keyword, it will result in a SyntaxError because const variables cannot be re-declared.

const x = 1;
const x = 2; // SyntaxError: Identifier 'x' has already been declared

In summary, it is best practice to avoid re-declaring variables in JavaScript, especially when using let and const as it can lead to unexpected behavior and errors.

JavaScript Dollar Sign $

The dollar sign $ is not a special character in JavaScript, it is just a valid character that can be used in variable and function names. However, it is commonly used as an identifier for the jQuery library, a popular JavaScript library for handling DOM manipulation and other browser interactions.

jQuery uses the $ symbol as a shorthand for the "jQuery" object, which you can use to access the jQuery functions that perform various operations on the page.

For example, the following code selects all the elements with the class example and hides them:

$(".example").hide();

It's also common to see $ as a variable name in JavaScript libraries or frameworks that use the dollar sign as an alias to other objects, such as window.$, jQuery.$, Zepto.$ or lodash.$, etc.

It is possible to use the $ in JavaScript variable names, but it is not recommended as it can be confused with jQuery, also it's a common convention to use $ as an indicator that a variable is a jQuery object.

Also note that, you can use jQuery instead of $ if you want to avoid any potential conflicts with other libraries that use the $ symbol.

JavaScript Underscore _

The underscore _ is a valid character in JavaScript variable and function names, just like the dollar sign $. It is commonly used as a convention to indicate that a variable, function or method is "private" or intended for internal use only.

In JavaScript, there is no built-in mechanism for private variables or methods like in some other languages, but developers often use the convention of prefixing the name of a variable, function or method with an underscore to indicate that it should not be accessed or modified from outside the object or class it belongs to.

For example, a variable named _myVariable might be intended for internal use only and not be accessible from outside the object or class it belongs to.

It's also common to see underscore _ as a variable name in JavaScript libraries or frameworks that use the underscore as an alias to other objects, such as lodash._, etc.

In addition, underscore is a popular utility library in JavaScript, which provides many functional programming helpers such as _.each, _.map, _.reduce, etc. The library is often used to manipulate arrays and objects.

It's worth noting that, using an underscore prefix does not actually make a variable or function private, it's just a convention to indicate that it should be treated as private.

JS Basics