0x00. ES6 Basics

let versus var - for...in vs for...of- Hoisting - Lexical scope - spread -rest -default parameters

Index.

1. JavaScript let, var, and const

2. Generator Functions in JavaScript

3. Loops: for...in vs for...of

4. Hoisting in JavaScript

5. Lexical Scoping in JavaScript

6. Enhancing Functions in ES6

7. Destructuring in ES6

JavaScript let, var and const:

I'll explain the difference between let and var in JavaScript with an example, focusing on their scope and behavior. Here's a table summarizing their key differences:

Example Illustrating the Differences

Consider the following example to understand how var and let behave differently:

• The variable x declared with var is function-scoped, so it's accessible outside the if block within the same function.

• The variable y declared with let is block-scoped, so it's not accessible outside the if block, leading to a ReferenceError.

Best Practices: Modern JavaScript development favors let (and const) over var due to their clearer scoping rules and to avoid issues related to hoisting and re-declarations.

---

Generator Function in Js:

Generator functions in JavaScript are a special type of function that can pause and resume their execution. They are defined using the function* syntax and use the yield keyword to yield control back to the calling context.

Example:

In this example, each call to generator.next() resumes the function execution from where it was last paused by yield.

Generator functions are powerful for scenarios where you need a function that you can pause and resume, often used in asynchronous programming and handling streams of data.

---

for...in vs for...of

Both for...in and for...of are looping constructs in JavaScript, but they serve different purposes.

for...in

• Iterates over all enumerable property keys of an object.

• Best used for looping through properties of an object.

• It iterates over the keys (property names) of an object.

Example:

for...in: Iterates over keys (property names) of an object.

for...of: Iterates over values of an iterable object.

for...in: Useful for iterating over object properties (including inherited enumerable properties).

for...of: Useful for iterating over data structures like arrays, strings, maps, where the order of elements is important.

---

Hoisting

Hoisting in JavaScript is a behavior where variable and function declarations are moved to the top of their enclosing scope during the compilation phase, before the code has been executed.

Variable Hoisting

In JavaScript, only declarations are hoisted, not initializations.

Let's look at `var`, `let`, and `const`:

Here, the declaration `var a` is hoisted to the top but not its initialization (`a = 5`), so `a` is `undefined` when logged.

`let` and `const`

let and const are also hoisted, but they are not initialized. They remain in a "temporal dead zone" from the start of the block until the declaration is encountered.

console.log(b); // ReferenceError: Cannot access 'b' before initialization

let b = 10;

Here, `let b` is hoisted but not initialized, so accessing `b` before its declaration throws an error.

Function Hoisting

1. Function Declarations

- The entire function declaration is hoisted to the top of its enclosing scope.

- You can call a function before it's been declared in the code.

Example:

hello(); // "Hello, World!"

function hello() {

console.log("Hello, World!");

}

In this case, the entire `hello` function is hoisted to the top, so calling `hello` before its declaration works fine.

2. Function Expressions

Function expressions (including arrow functions), however, are not hoisted.

- If you try to call a function expression before its declaration, it results in a `TypeError`.

Here, `myFunc` is a function expression assigned to a `var` variable. The variable `myFunc` is hoisted and initialized as `undefined`, not the function itself.

---

Lexical Scope

In JavaScript, nested functions have access to variables declared in their outer scope. This hierarchical chaining of scopes, determined at the time of writing the code, is the essence of lexical scoping.

Example Demonstrating Lexical Scoping:

function outerFunction()
 { 
    let outerVar = 'I am from outer'; 
    function innerFunction() 
      { 
         console.log(outerVar); // Accesses outerVar from the outerFunction scope 
      } innerFunction(); } outerFunction();

In this example, innerFunction has access to outerVar from outerFunction's scope due to lexical scoping. The scope chain is determined by the physical nesting of the functions in the code.

---

Rest parameters, Default parameters, Spread Operator and Destructuring

1. Spread Operator (...)

The spread operator is used to expand elements of an iterable (like an array) into individual elements in situations where multiple items are expected.

Uses:

• In Arrays: To combine or clone arrays.

• In Function Calls: To pass an array of values as separate arguments.

• In Object Literals: To combine properties of objects.

2. Rest Parameters

Rest parameters allow a function to accept an indefinite number of arguments as an array, providing a way to handle function parameters more flexibly.

In this function, ...strings is a rest parameter that collects all arguments passed to concatenateStrings into an array.

3. Default Parameters

Default parameters allow you to set default values for function parameters. These default values are used if no value or undefined is passed to the function.

Example:

Here, name = "Guest" is the default parameter. If greet is called without arguments, name is assigned the default value "Guest".

4. Destructuring

Destructuring allows unpacking values from arrays or properties from objects into distinct variables.

Array Destructuring Example:

Here, first and second are assigned the first and second elements of the numbers array, respectively.

Object Destructuring Example:

const person = { name: 'Alice', age: 25 };
const { name, age } = person;

console.log(name, age); // "Alice" 25

The Spread Operator is used to expand collections into individual elements.

Rest Parameters allow functions to accept an indefinite number of arguments.

Default Parameters enable setting default values for function parameters.

Destructuring is a convenient way to extract elements or properties into variables.

---

Property Value Shorthand in ES6

This feature allows you to omit the value of a property in an object literal if the value has the same name as the property key.

Traditional Object Property Assignment

Before ES6, if you wanted to create an object using variables, you had to explicitly define the property name and value, even if they were the same:

In this example, the createPerson function takes name and age as arguments and returns an object. The object's properties name and age have the same names as the function's parameters.

ES6 Property Value Shorthand

With ES6, you can simplify the object creation:

This shorthand syntax is particularly useful in modern JavaScript development, where concise and readable code is highly valued.

---

ES6 Computed Property Names:

This feature is especially useful when you want to create objects with property names based on some dynamic values.

With ES6, you can directly use a dynamic key in the object literal:

In this example, [key] is a computed property name. Whatever the value of key is at runtime will be used as the property name of the new object.

Another Example:

Here's another example where the property name is computed using an expression:

In this case, the object obj will have properties whose names are dynamically constructed using the propertyPrefix string and additional substrings.

---

ES6 method property shorthand

ES6 introduces a shorthand syntax for defining method properties in objects. This is part of the overall goal of ES6 to make JavaScript more concise and readable. With method property shorthand, you can omit the function keyword and the colon (:) when defining methods inside an object.

Traditional Method Syntax (Before ES6):

ES6 Method Property Shorthand:

ES6 simplifies this syntax by allowing you to define methods without the function keyword and the colon:

In this example, `myMethod` is a method inside `myObject`. The shorthand syntax makes the object structure cleaner and more intuitive, especially when there are multiple methods.

---

Extra Resources: