DEV Community: wekesamuel

Upgrade Your JavaScript Skills with These Essential ES6 Syntax

wekesamuel — Thu, 26 Aug 2021 08:15:21 +0000

Upgrade Your JavaScript Skills with These Essential ES6 Syntax Techniques!

The 2015 revision of ECMAScript, commonly called ES6, is one of the most important updates for the JavaScript language. This update introduced new features that made JS coding more efficient and readable. Although there are a few debatable features in ES6, most of them are worth acquainting yourself with.

Here are the top ES6 syntaxes you should know about.

Arrow Function

Arrow functions in ES6 are a significant improvement from the previous syntax. Not only do they allow you to create anonymous functions easily, but they also provide a more concise syntax.

For example:

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

In this example, the arrow function defines the function “add,” which takes two parameters and returns their values. The syntax in this code is shorter compared to ES5, which would look like this:

var add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // Outputs: 5

It is essential to note that arrow functions do not have their own “this” since they bind to the “this” of the parent context. This ES6 revision helps avoid serious bugs that used to occur with the traditional function syntax. The next code illustrates this feature:

const person = {
  name: ‘John’,
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};
person.sayName(); // Output: John

Here, the arrow function is used as a callback function for the setTimeout method. Since arrow functions automatically bind to the this keyword of their parent context, you can access the name property of the person object inside the arrow function.

Let and Const

let and const are updated ways of declaring variables, making var obsolete in this work.

Let

let is used in declaring or initializing block-scoped variables, meaning they can only be accessed within their specific block. This contrasts the var keyword, whose variables were function-scoped, leading to variable hoisting. An example of let declared block-scope variable is as follows:

function example() {
  let x = 1;

  if (true) {
    let x = 2;
    console.log(x); // Output: 2
  }

  console.log(x); // Output: 1
}

We are using the let keyword to declare a block-scoped variable x. When we enter the if block, we declare a new block-scoped variable x with a value of 2. If we log the value of x inside the if block, we get 2. Conversely, when we log the value of x outside the if block, we get 1, the value of the outer block-scoped variable x.

The above code would look like this if it were declared using var instead of let:

function example() {
  var x = 1;

  if (true) {
    var x = 2;
    console.log(x); // Output: 2
  }

  console.log(x); // Output: 2
}

Since var in this code has function scope, the inner x variable in the if block would override the outer x variable. Consequently, both console.log statements would output 2 rather than 2 and 1 as they do in the previous example. This issue can lead to bugs and unexpected behaviour, which is why let and const were introduced in ES6 to provide more predictable scoping rules.

Const

const has relatively the same function as let, but it declares a constant variable that cannot be reassigned. This feature can be helpful in declaring values that should not be changed, such as constants or configuration values.
For example:

const PI = 3.14159;

Since PI is declared as a constant variable, it cannot be reassigned to a new value.

Destructuring Assignment

Destructuring assignment is an ES6 syntax that allows the extraction of values from arrays or objects and assigning them to variables in a single statement. This technique is crucial since it can simplify code significantly.
For example, consider the following code written in a traditional way:

const numbers = [1, 2, 3, 4];

const a = numbers[0];
const b = numbers[1];
const c = numbers[2];
const d = numbers[3];

console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(c); // Output: 3
console.log(d); // Output: 4

With a destructuring assignment, the above code looks like this:

const numbers = [1, 2, 3, 4];

const [a, b, c, d] = numbers;

console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(c); // Output: 3
console.log(d); // Output: 4

As you can see, without destructuring assignment, you must manually assign each value to a separate variable using array index notation, which can be highly problematic when working with larger arrays or more complex data structures. Using destructuring assignment to extract the values from the numbers array and assign them to variables a, b, c, and d results in a more concise and readable code.

Template Literals

Template literals allow you to embed expressions inside a string, making creating dynamic and complex strings easier. They can be handy when working with dynamic content, such as building SQL queries. Moreover, they can help simplify code by reducing the need for complex string concatenation. For example:

const firstName = 'Sam';
const lastName = 'Walter';
const age = 30;


// Without template literals
const greeting = 'Hello, my name is ' + firstName + ' ' + lastName + ' and I am ' + age + ' years old.';

// With template literals
const greeting2 = `Hello, my name is ${firstName} ${lastName} and I am ${age} years old.`;

console.log(greeting); // Output: “Hello, my name is Sam Walter and I am 30 years old.”
console.log(greeting2); // Output: “Hello, my name is Sam Walter and I am 30 years old.”

Here, template literals generate a string that includes the values of firstName, lastName, and age. The resulting code is much more concise and easier to read than the equivalent code using string concatenation.

Spread Operator

The spread operator is a useful ES6 syntax that allows you to spread the elements of an iterable (e.g. an array) into a new array or function call. For instance:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // Output: [1, 2, 3, 4, 5, 6]

function sum(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];
console.log(sum(...nums)); // Output: 6

In the first code, the spread operator concatenates two arrays into a new array. In the second example, it is used to pass the elements of the nums array as individual arguments to the sum function.

Conclusion

ES6 introduced several essential syntaxes to help you write more efficient and readable code in JS. Here, we have explored some critical syntaxes you should know as a beginner, including let and const keywords, arrow functions, template literals, destructuring, and the spread operator. By mastering these features, you will be well on your way to becoming a better JS programmer.

A Beginner’s Guide to Closures in JavaScript

wekesamuel — Wed, 21 Apr 2021 10:15:47 +0000

One of JavaScripts most valuable features is closures. This feature allows developers to create self-contained functions with access to their surrounding context in a particular code. When appropriately implemented, closures can improve code quality, encapsulate variables, and create reusable code. At the end of this article, you will learn how closures work and their benefits in JS code.

What are Closures?

Closures are functions that offer you access to the outer scope of a function from its inner function. This capability means that a closure can access variables in its surrounding environment, despite those variables being outside a functions specified limits.

To create a closure, you need to define a function inside another function and return it. Subsequently, the returned function will be linked to the outer functions variables, even after the external function has closed. Take a look at the following example to understand this phenomenon better:

function makeGreeting(name) {
  // name is a variable in the outer scope
  return function() {
    // this inner function is a closure
    console.log("Hello " + name);
  };
}

let greetAlice = makeGreeting("Alice");
let greetBob = makeGreeting("Bob");

greetAlice(); // Hello Alice
greetBob(); // Hello Bob

Here, you have a function makeGreeting that takes a parameter name and returns another function. The returned function is an inner function that logs Hello + name. When you call makeGreeting with different arguments, you create two other closures: greetAlice and greetBob. Each closure has access to its own name variable from the outer scope. Even though makeGreeting has returned and its execution context is gone, the inner functions still carry their name variables. This capability is achieved because they have closed over them.

Benefits of Closures

Closures provide several benefits to JS code. The most notable is encapsulation, which allows you to hide implementation details and create self-contained functions. These functions can only expose the necessary functionality. Consequently, encapsulation makes your code more readable, maintainable, and reusable.

Closures can also be used to create private variables in JavaScript. By defining variables inside a function that returns another function, you can create private variables that cannot be accessed outside a specific function. This process can help you prevent unintended changes to the variables value and improve the security of your code. The following illustrates this feature:

function counter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const incrementCounter = counter();
incrementCounter(); // Output: 1
incrementCounter(); // Output: 2
incrementCounter(); // Output: 3

Here, you define a counter function that has a private count variable. The counter function returns another function called increment, which increments the count variable and logs it to the console. You then assign the increment function to a variable called incrementCounter. When you call incrementCounter() multiple times, it increments the count variable and logs the new value to the console. The count variable is private and cannot be accessed outside the counter function, meaning you cannot accidentally modify it or read its value.

Conclusion

Closures are a powerful feature in JavaScript that allows you to create self-contained functions with access to their surrounding context. Closures provide several benefits, including encapsulation, private variables, and improved code quality. By using closures, you can write cleaner, more readable, and more maintainable code.