What's New in JavaScript ES2020?

Let’s see some new JavaScript features coming in ES2020 or ECMAScript 2020 or ES11 standard. ES2020 brings tons of sweet improvements, let’s see all of them real quick here!

Many people apprehend that there’s a typical procedure for Javascript’s latest releases and a committee behind that. during this post, i’ll justify who makes the ultimate appeal any new specification, what’s the procedure for it, and what is new in ES2020.

The language specification that drives JavaScript is named ECMAScript. there’s a team behind that referred to as Technical Committee thirty****-****nine [TC39] that reviews each specification before adopting.

Every modification goes through a method with stages of maturity.

Stage 0: Ideas/Strawman
Stage 1: Proposals
Stage 2: Drafts
Stage 3: Candidates
Stage 4: Finished/Approved

A feature that reaches Stage four can presumably be a part of the language specification.

In this article, we’re going to review some of the latest and greatest features coming with ES2020.

Let’s dive into the items that are recently into the specification underneath ES2020.

Installation

Since many people don’t think to update their browsers to make their developer’s lives easier, we’ll need to use babel to get started using features that are not available across the board for users. For simplicity’s sake, I’ll use the Parcel bundler to get everything running as quickly as possible.

$ yarn add parcel-bundler

"scripts": {
  "start": "parcel index.html"
},

Sadly, at the time of this writing we’re too far ahead of our time and there doesn’t seem to be a working preset for ES2020. If you throw these in a .babelrc file and save, Parcel should handle installing everything for you.

{
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-syntax-bigint"
  ]
}

Array.prototype

Array.prototype.flat() planned to flatten arrays recursively up to the required depth and returns a replacement array.

Syntax: Array.prototype.flat(depth)
depth — Default worth one, Use time to flatten all nested arrays.

const numbers = [1, 2, [3, 4, [5, 6]]];
// Considers default depth of 1
numbers.flat(); 
> [1, 2, 3, 4, [5, 6]]
// With depth of 2
numbers.flat(2); 
> [1, 2, 3, 4, 5, 6]
// Executes two flat operations
numbers.flat().flat(); 
> [1, 2, 3, 4, 5, 6]
// Flattens recursively until the array contains no nested arrays
numbers.flat(Infinity)
> [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap() maps every part employing a mapping perform and flattens the result into a replacement array. It’s clone of the map operation followed by a flat of depth one.

Syntax: Array.prototype.flatMap(callback)
callback: perform that produces a part of the new Array.

const numbers = [1, 2, 3];
numbers.map(x => [x * 2]);
> [[2], [4], [6]]
numbers.flatMap(x => [x * 2]);
> [2, 4, 6]

Private Class Variables

One of the main purposes of classes is to contain our code into more reusable modules. Because you’ll create a class that’s used in many different places you may not want everything inside it to be available globally.

Now, by adding a simple hash symbol in front of our variable or function we can reserve them entirely for internal use inside the class.

class Message {
  #message = "Howdy"

  greet() { console.log(this.#message) }
}

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // Private name #message is not defined

Object.fromEntries

Object.fromEntries performs the reverse of Object.entries . It transforms a listing of key-value pairs into AN object.

Syntax: Object.fromEntries(iterable)
iterable: AN iterable like Array or Map or objects implementing the iterable protocol

const records = [['name','Mathew'], ['age', 32]];
const obj = Object.fromEntries(records);
> { name: 'Mathew', age: 32}
Object.entries(obj);
> [['name','Mathew'], ['age', 32]];

Promise.allSettled

When we’re working with multiple promises, especially when they are reliant on each other, it could be useful to log what’s happening to each to debug errors. With Promise.allSettled, we can create a new promise that only returns when all of the promises passed to it are complete. This will give us access to an array with some data on each promise.

const p1 = new Promise((res, rej) => setTimeout(res, 1000));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

// [
//   Object { status: "fulfilled", value: undefined},
//   Object { status: "rejected", reason: undefined}
// ]

BigInt

We won’t go into the technical details, but because of how JavaScript handles numbers, when you go high enough things start to get a bit wonky. The largest number JavaScript can handle is 2^53, which we can see with MAX_SAFE_INTEGER.

const max = Number.MAX_SAFE_INTEGER;

console.log(max); // 9007199254740991

Anything above that and things start to get a little weird…

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

We can get around this with the new BigInt datatype. By throwing the letter ‘n’ on the end we can start using and interacting with insanely large numbers. We’re not able to intermix standard numbers with BigInt numbers, so any math will need to be also done with BigInts.

const bigNum = 100000000000000000000000000000n;

console.log(bigNum * 2n); // 200000000000000000000000000000n

String.prototype.

trimStart() removes whitespace from the start of a string and trimEnd() removes whitespace from the tip of a string.

const greeting = ` Hello Javascript! `;
greeting.length;
> 19
greeting = greeting.trimStart();
> 'Hello Javascript! '
greeting.length;
> 18
greeting = 'Hello World!   ';
greeting.length;
> 15
greeting = greeting.trimEnd();
> 'Hello World!'
greeting.length;
> 12

Nullish Coalescing Operator

Because JavaScript is dynamically typed, you’ll need to keep JavaScript’s treatment of truthy/falsy values in mind when assigning variables. If we have a object with some values, sometimes we want to allow for values that are technically falsy, like an empty string or the number 0. Setting default values quickly gets annoying since it’ll override what should be valid values.

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

Instead of double pipes we can use the double question marks operator to be a bit more type strict, which only allows the default when the value is null or undefined.

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

Optional Chaining Operator

Similar to the nullish coalescing operator, JavaScript may not act how we want when dealing with falsy values. We can return a value if what we want is undefined, but what if the path to it is undefined?

By adding a question mark before our dot notation we can make any part of a value’s path optional so we can still interact with it.

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
console.log(person?.profile?.name ?? "Anonymous");
console.log(person?.profile?.age ?? 18);

Dynamic Import

If you had a file full of utility functions, some of them may rarely be used and importing all of their dependencies could just be a waste of resources. Now we can use async/await to dynamically import our dependencies when we need them.

This will not work with our current Parcel setup, since we’re using imports which will only work in a Node.js environment.

const add = (num1, num2) => num1 + num2;

export { add };

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);

Conclusion

Now you’re ready to start amazing or perhaps confusing your coworkers with JavaScript features that aren’t even in most browsers, yet (unless they are if you are reading this from the future 😉).

#javascript #es6 #web-development #angular #node-js

What is GEEK

Buddha Community

What's New in JavaScript ES2020?
Justen  Hintz

Justen Hintz

1663559281

To-do List App with HTML, CSS and JavaScript

Learn how to create a to-do list app with local storage using HTML, CSS and JavaScript. Build a Todo list application with HTML, CSS and JavaScript. Learn the basics to JavaScript along with some more advanced features such as LocalStorage for saving data to the browser.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List With Local Storage</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="new-task">
        <input type="text" placeholder="Enter The Task Here..." />
        <button id="push">Add</button>
      </div>
      <div id="tasks"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #0b87ff;
}
.container {
  width: 90%;
  max-width: 34em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#new-task {
  position: relative;
  background-color: #ffffff;
  padding: 1.8em 1.25em;
  border-radius: 0.3em;
  box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1em;
}
#new-task input {
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  border: none;
  border-bottom: 2px solid #d1d3d4;
  padding: 0.8em 0.5em;
  color: #111111;
  font-weight: 500;
}
#new-task input:focus {
  outline: none;
  border-color: #0b87ff;
}
#new-task button {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1em;
  background-color: #0b87ff;
  color: #ffffff;
  outline: none;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
}
#tasks {
  background-color: #ffffff;
  position: relative;
  padding: 1.8em 1.25em;
  margin-top: 3.8em;
  width: 100%;
  box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
  border-radius: 0.6em;
}
.task {
  background-color: #ffffff;
  padding: 0.3em 0.6em;
  margin-top: 0.6em;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #d1d3d4;
  cursor: pointer;
}
.task span {
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
}
.task button {
  color: #ffffff;
  padding: 0.8em 0;
  width: 2.8em;
  border-radius: 0.3em;
  border: none;
  outline: none;
  cursor: pointer;
}
.delete {
  background-color: #fb3b3b;
}
.edit {
  background-color: #0b87ff;
  margin-left: auto;
  margin-right: 3em;
}
.completed {
  text-decoration: line-through;
}

Javascript:

//Initial References
const newTaskInput = document.querySelector("#new-task input");
const tasksDiv = document.querySelector("#tasks");
let deleteTasks, editTasks, tasks;
let updateNote = "";
let count;

//Function on window load
window.onload = () => {
  updateNote = "";
  count = Object.keys(localStorage).length;
  displayTasks();
};

//Function to Display The Tasks
const displayTasks = () => {
  if (Object.keys(localStorage).length > 0) {
    tasksDiv.style.display = "inline-block";
  } else {
    tasksDiv.style.display = "none";
  }

  //Clear the tasks
  tasksDiv.innerHTML = "";

  //Fetch All The Keys in local storage
  let tasks = Object.keys(localStorage);
  tasks = tasks.sort();

  for (let key of tasks) {
    let classValue = "";

    //Get all values
    let value = localStorage.getItem(key);
    let taskInnerDiv = document.createElement("div");
    taskInnerDiv.classList.add("task");
    taskInnerDiv.setAttribute("id", key);
    taskInnerDiv.innerHTML = `<span id="taskname">${key.split("_")[1]}</span>`;
    //localstorage would store boolean as string so we parse it to boolean back
    let editButton = document.createElement("button");
    editButton.classList.add("edit");
    editButton.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
    if (!JSON.parse(value)) {
      editButton.style.visibility = "visible";
    } else {
      editButton.style.visibility = "hidden";
      taskInnerDiv.classList.add("completed");
    }
    taskInnerDiv.appendChild(editButton);
    taskInnerDiv.innerHTML += `<button class="delete"><i class="fa-solid fa-trash"></i></button>`;
    tasksDiv.appendChild(taskInnerDiv);
  }

  //tasks completed
  tasks = document.querySelectorAll(".task");
  tasks.forEach((element, index) => {
    element.onclick = () => {
      //local storage update
      if (element.classList.contains("completed")) {
        updateStorage(element.id.split("_")[0], element.innerText, false);
      } else {
        updateStorage(element.id.split("_")[0], element.innerText, true);
      }
    };
  });

  //Edit Tasks
  editTasks = document.getElementsByClassName("edit");
  Array.from(editTasks).forEach((element, index) => {
    element.addEventListener("click", (e) => {
      //Stop propogation to outer elements (if removed when we click delete eventually rhw click will move to parent)
      e.stopPropagation();
      //disable other edit buttons when one task is being edited
      disableButtons(true);
      //update input value and remove div
      let parent = element.parentElement;
      newTaskInput.value = parent.querySelector("#taskname").innerText;
      //set updateNote to the task that is being edited
      updateNote = parent.id;
      //remove task
      parent.remove();
    });
  });

  //Delete Tasks
  deleteTasks = document.getElementsByClassName("delete");
  Array.from(deleteTasks).forEach((element, index) => {
    element.addEventListener("click", (e) => {
      e.stopPropagation();
      //Delete from local storage and remove div
      let parent = element.parentElement;
      removeTask(parent.id);
      parent.remove();
      count -= 1;
    });
  });
};

//Disable Edit Button
const disableButtons = (bool) => {
  let editButtons = document.getElementsByClassName("edit");
  Array.from(editButtons).forEach((element) => {
    element.disabled = bool;
  });
};

//Remove Task from local storage
const removeTask = (taskValue) => {
  localStorage.removeItem(taskValue);
  displayTasks();
};

//Add tasks to local storage
const updateStorage = (index, taskValue, completed) => {
  localStorage.setItem(`${index}_${taskValue}`, completed);
  displayTasks();
};

//Function To Add New Task
document.querySelector("#push").addEventListener("click", () => {
  //Enable the edit button
  disableButtons(false);
  if (newTaskInput.value.length == 0) {
    alert("Please Enter A Task");
  } else {
    //Store locally and display from local storage
    if (updateNote == "") {
      //new task
      updateStorage(count, newTaskInput.value, false);
    } else {
      //update task
      let existingCount = updateNote.split("_")[0];
      removeTask(updateNote);
      updateStorage(existingCount, newTaskInput.value, false);
      updateNote = "";
    }
    count += 1;
    newTaskInput.value = "";
  }
});

Related Videos

Build a Todo list app in HTML, CSS & JavaScript | JavaScript for Beginners tutorial

Build a Todo List App in HTML, CSS & JavaScript with LocalStorage | JavaScript for Beginners

To Do List using HTML CSS JavaScript | To Do List JavaScript

Create A Todo List App in HTML CSS & JavaScript | Todo App in JavaScript

#html #css #javascript

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Anon Sike

Anon Sike

1599804911

Favorite New Features in ES2020 - JavaScript tutorial

JavaScript’s development had been running at a slower pace ahead of the introduction of ES6 (also known as ECMAScript 2015).Now, in 2020, the latest JavaScript features have been finalized and released as ECMAScript 2020 (or ES2020). While ES2020 does not include as many features as they introduced in ES6, it has introduced a number of useful additions. In this article, I will discuss my favorite new features from ES2020.

Optional Chaining

Optional Chaining syntax allows you to access deeply nested objects without worrying about whether the property exists or not. While working with objects, you must be familiar with an error of this kind:

TypeError: Cannot read property <xyz> of undefined

The above error means that you are trying to access the property of an undefined variable. To avoid such errors, your code will look like this:

Image for post

Instead of checking each node, optional chaining handles these cases with ease. Below is the same example using optional chaining:

Image for post

You can also check arrays and functions using Optional Chaining. An example is given below:

Image for post


globalThis

JavaScript is used in a variety of environments such as web browsers, Node.js, Web Workers, and so on. Each of these environments has its own object model and a different syntax to access it. ES2020brings us the **globalThis **property which always refers to the global object, no matter where you are executing your code. This property really shines when you aren’t sure what environment the code is going to run in.

The following is the example of using setTimeout function in Node.js using globalThis:

Image for post

Below, the same method is used in web browser:

Image for post


Dynamic Imports

Dynamic Imports is one of my favorite feature of ES2020. As the name implies, you can import modules dynamically. Using dynamic imports, the code is delivered via smaller bundles as required (instead of downloading a single large bundle as has been previously required).

When using dynamic imports, the import keywords can be called as a function, which returns a promise. Below is an example of how you can dynamically import a module when the user clicks on a button:

Image for post


Promise.allSettled()

This method returns a promise that resolves after all of the given promises are either fulfilled or rejected. It is typically used where asynchronous tasks do not depend upon one another to complete successfully, as illustrated in the following example:

Image for post


Nullish Coalescing Operator

The syntax for this operator is

let student = {}
let name = student.name ?? ‘John’

This operator will return a Right Hand Side operand when the Left Hand Side operand is either undefined or null. In the example above, the operator will set the value of name as ‘John’ as student.name is undefined.

At first glance this looks exactly the same as a logical OR operator ( || ), however, logical OR operator Right Hand Side operand when Left Hand Side Operand is false (undefined, null, “”, 0, false, NaN). Below is the comparison of both operators:

Image for post

Chaining Nullish Coalescing Operator ( ?? ) with AND ( && ) or OR ( || ) operators

It’s not possible to chain AND ( && ) and OR ( || ) operators directly with ?? operator. If you need to combine them, then you must wrap && or || operator in the parenthesis

Image for post


Conclusion

The introduction of ES2020’s new features add even more flexibility and power to the constantly evolving JavaScript. This article explored some of my favorite features but there are a number of others that I’d suggest you look into to see what might suit you best. I hope you found this article useful and that you are as excited as I am about using these features!

#javascript #javascript-development #ecmascript-2020 #es2020