var vs. let vs. const

Start with 3 core concpets:

• variable declaration vs. variable intialization
• gloabl and function scope
• hoisting

variable declaration vs. intialization

In JavaScript variable decleared with undefined value if no value is assigned when creating them.

var declared
console.log(declared) // undefined

When we first assign a value to a variable is called variable intialization.

var intialization = 'value initialized'

scope

Scope deals with where we can access functions and variables.

If we create a variable with var inside of a function then that variable is only accessible inside of that function. It is scoped to the function in which it is declared.

Here's an example to illustrate this:

function example() {
  var x = 10;
  console.log(x); // Output: 10
}

example();
console.log(x); // Error: x is not defined

hoisting

variables declared with var are subjects to hoisting. JavaScript will move variable declaration to top of the function and assign default value as undefined

example(){
  console.log(x) //Output: undefined
  var x = 10
  console.log() // Output: 10
}

example()

In this example, we try to log the value of x before it is declared and assigned a value. The first console.log statement outputs undefined because the variable x is hoisted to the top of the function, but it is not yet assigned a value. The second console.log statement outputs 10 because x is now assigned the value of 10.

var vs let

Now that we undestand all of these, here are the important difference between var and let .

Let's go through each feature in more detail:

1. Variable Declaration:

• let: Variables declared with let are block-scoped. This means that they are only accessible within the block in which they are declared, such as a loop or an if statement.
• var: Variables declared with var are function-scoped. They are accessible within the entire function in which they are declared.

2. Variable Initialization:

• let: Variables declared with let do not have a default value. They remain undefined until a value is assigned to them.
• var: Similarly, variables declared with var also do not have a default value and remain undefined until a value is assigned.

3. Scope:

• let: Variables declared with let have block scope. This means that they are only accessible within the block in which they are declared, including nested blocks.
• var: Variables declared with var have function scope. They are accessible within the entire function in which they are declared, but not outside of it.

4. Hoisting:

• let: Variables declared with let are not hoisted. This means that they cannot be accessed before they are declared in the code.
• var: Variables declared with var are hoisted to the top of the function in which they are declared. This allows them to be accessed before they are declared in the code, although their value will be undefined until assigned.

It's important to note that the introduction of let in ES6 was aimed at addressing some of the issues with var, such as block scoping and hoisting. let provides more predictable and safer behavior when it comes to variable declaration and scope.

let vs. const

In JavaScript, variables declared with const are block-scoped, just like variables declared with let. However, there is one key difference: variables declared with const cannot be reassigned once they are assigned a value.

const x = 10;
console.log(x); // Output: 10

x = 20; // Error: Assignment to constant variable

Destructuring

Let's start with JavaScript Object and how does it work. JavaScript objects are a type of data structure in JavaScript that allows us to store multiple values as a complex data structure. Objects are used to represent a "thing" in your code that has a set of properties and methods that act on those properties.

An object is created using curly braces {} and can contain properties and methods. A property is a key-value pair where the key is always a string and the value can be any data type. A method is a function that is a property of an object.

Here is an example of a JavaScript object:

var programmer = {
  name: 'John Doe',
  age: 30,
  languages: ['JavaScript', 'Python', 'C++'],
  favoriteLanguage: function() {
    return this.languages[0];
  }
};

console.log(programmer.name); // Output: John Doe
console.log(programmer.age); // Output: 30
console.log(programmer.languages); // Output: ['JavaScript', 'Python', 'C++']
console.log(programmer.favoriteLanguage()); // Output: JavaScript

Object Destructuring

Object destructuring allows you to extract properties from an object and bind them to variables. Here's an example:

var programmer = {
  name: 'John Doe',
  age: 30,
  languages: ['JavaScript', 'Python', 'C++']
};

var { name, age, languages } = programmer; // object destructuring 

console.log(name); // Output: John Doe
console.log(age); // Output: 30
console.log(languages); // Output: ['JavaScript', 'Python', 'C++']

Array destructuring

var languages = ['JavaScript', 'Python', 'C++'];

var [firstLang, secondLang, thirdLang] = languages; // array destructuring

console.log(firstLang); // Output: JavaScript
console.log(secondLang); // Output: Python
console.log(thirdLang); // Output: C++

Template literals

Template literals, also known as template strings, are a feature in JavaScript that allows for more flexible and readable string interpolation. They provide a convenient way to embed expressions and variables within a string.

const name = 'John';
const age = 30;

const greeting = Hello, my name is ${name} and I am ${age} years old.;

Arrow function