Understanding Javascript Variables Declaration: The Significant of Var, Let, Const, In Modern Development.

Variable is a unique identifier of words or letter put together to store data in your programs. Variable are always declare before use (using let and const), they are the container for storing values and are also use to make reference to functions. Unique name should be given to variables base on what you are working on, for easy identification and making the codebase easy to understand by other or fellow programmers.

let message = "Hello world!"
const countries= ["Usa", "United Kingdom", "Canada"]
const fruits = ["Apple", "Pine Apple", "Banana"]

Here!!! message, countries, and fruits are variables. They are sensitive and case sensitive during usage and you can't use Javascript keywords to declara a variables like if, else, for, switch, try, catch. e.t.c. They are reserve words in Javascript and use for their specific purpose. A variable without a value is an undefined varaible.

let message
const countries
const fruits

Here!!! message, countries, and fruits are undefined because value have not been assign to them and they hold no meaningful data, but the variables have been initialized and they are undefined.

Javascript Naming Convention When Declaring Variables

let fruits  // lowercase
let FRUITS // uppercase
//combining 2 words
let FruitJuice // pascal case
let fruitJuice // camel case
let fruit_juice // snake case

// observe the variable naming convention

however, the camelCase, "lower case" and the snake_case is commonly used and accepted for naming variables and functions in Javascript.

Understanding Different Types of Scope In Javascript For Variable Declaration.

1. Global Scop: The variable can be declared anywhere and can be accesible from anywhere. They are often declared oustside of the function or block "{}"
2. Function Scope: variable declared with in the function can be accessible with in the function.
3. Block Scope: variable declare with in the block can be accessible with in the block e.g loops, if else statement curly braces "{}".

let name = "john doe"  // global scope

if (true) {
// block scoped
} 

function name {
// function scoped
}

const name () => {
// function scoped
}

Javascript Best Practices For Modern Development Using Var, Let, and Const,

VAR

Var method of declaring variables in Javascript was used from year 1995 to 2015 and sometimes use now, can also be found in some legacy code base, it was use for old browser and it has drawbacks.

Feature of Var
when declaring variable using Var it can be used before it is declared in the code

var number// declaration is hoisted 
console.log(number) // outputs undefined instead of error
number = 8; // 
console.log(number) //output 8

variable declared with var are not limited to the block in which they are defined, they can be used outside of the block in which they are defined. However, this can lead to unintentional variable leaks and conflicts

if (true) {
// block scope
var number= 30
}
console.log(number) // outputs 30  //outside of the block scope

in response to these problems, particularly the lack of block scope, ECMA script 6 (ES6) added let and const as improved variable scoping techniques for more understandable and predictable code. let and const are typically preferred over var(function scope) in contemporary javascript and let and const provided block scope.

LET

Let is a keyword that is use in javascript, it declare a block scope when use the variable must be declared before use (No hoisting). Let works well with loops, functions, if else ststaement, and curly braces "{}". when using let you can't re-declared same variable name once the initial variable name has been declared in the same scope.

let name = "john doe"
let name = "musa doe" // SyntaxError: Identifier 'name' has already been declared

This will throw an error because name has already been declared, but it is possible in var and it will take up the new value. however, you can re-declared variable with the same name in deifferent scope "not in the same scope".

let name= "john doe" // global scope
if (true) {
// block scope
let name= "musa doe"
console.log(name); // musa doe
}
// global scope
console.log(name) // john doe

Furthermore, variable declared with let can be re-assiged with in the same scope it was declared, you can change its value as long you are in the sme scope, You can also access the variable with in the block that they are defined.

let name = "john doe" // global scope
if (true) {
// block scope
let name = "musa doe"
    name = "jane doe"
console.log(name); // jane doe
}
// global scope
name = "mary doe"
console.log(name) // mary doe

CONST

when you declare a variable in javascript using const you can't re-declare that variable again, const declaration of variable is only declared once with in the same scope but same variable name can be re-declared in different scope.

const fruit = "mangoe"
const fruit = "apple" // SyntaxError: Identifier 'fruit' has already been declared

when a variable is assign using const, you can't re-assign that variable to a new value again after the initial assignment.

const gender = "male"
      gender = "female" // uncaught syntax error

This is possible using let but it is not possible using const. const declaration of variable is constant. However you can modify the content of an object or an array.

const fruits = ["Apple", "mangoe", "banana"]
fruits [2] = "water melon" // you can change the element
console.log(fruits[2]) // water melon

const fruits = ["Apple", "mangoe", "banana"]
 fruits = ["Apple", "mangoe", "water melon"] // uncaught syntax error

This will throw an error because you can't re-assign variable in the same scope, but you can change an element / manipulate an element in the array using the variable name. This also apply to an object using const.

const classGroup = {
fruits: "apple",
name: "john doe",
phone: "iphone",
country: "canada",
};
classGroup.phone = "samsung";
console.log (classGroup.phone); // samsung

when declaring a variable and you know that the value of the variable will not changed use const, especially for an array, object and funtion.

Re- assignement: var ✓, let ✓, const ✗.
Re-declaration: var ✓, let ✗, const ✗.
Function-scope: var ✓, let ✓, const ✓.
Block-sope: var ✗, let ✓, const ✓.
Hoisting: var ✓, let ✗, const ✗.
Global-scope: var ✓, let ✗, const ✗.
Global object property.[window]: var ✓, let ✗, const ✗.