Forem: EswaraPrakash Vaithiyanathan

ES2022 JavaScript Features

EswaraPrakash Vaithiyanathan — Tue, 12 Oct 2021 07:13:35 +0000

Changes to be released in ES2022

Here are some of the changes currently being made to Finished Proposal.

Class Fields

These changes are available in TypeScript since version 3.8
Private instance methods and accessors
Private methods and accessors (getter / setter) are added
#Add a prefix to the method name to make it a private method. Keeping the state and behavior of the class private can prevent unintentional changes on the caller side.
Class Public Instance Fields & Private Instance Fields
You will be able to define private fields
In contrast to public fields that can be referenced and written from the outside, only the class that defines the field can access it.

class  X  { // private field   #foo; method (
  ) { Console .log ( this . #foo)   } }

const testObj = new X (); 
testObj.method () 
// Output result: undefined
 testObj. # Foo 
// Output result: // Uncaught SyntaxError: Private field' # foo 
' must be declared in an enclosing class

Static class fields and private static methods
You will also be able to define static methods and properties in JavaScript.
These are called directly from the class, not the instance you created.
Variables and methods with the same name can be defined in different classes, so you can name them without worrying about conflicts like global variables.

class  CustomDate  { // ... static epoch = new CustomDate ( 0 );}

RegExp Match Indices

indicesProperties are added to the substring array
Until now, the string extraction operation has returned an array containing the information of the matched string and the index information of the matched string, but in more advanced scenarios this is not enough.
Returns an index array containing start / end index pairs for each part of the array that matches the regular expression For performance reasons, it only takes effect when the flag is set.
TypeScript didn't seem to support this notation yet

const re1 = / a + (? <Z> z)? / d; 
// indices represents the relative value from the beginning of the input string 
const s1 = "xaaaz" ; 
const m1 = re1.exec (s1); 
m1 .indices [ 0 ] [ 0 ] === 1 ; 
m1.indices [ 0 ] [ 1 ] === 5 ; 
s1.slice (... m1.indices [ 0 ]) === "aaaz" ;

Top-level await

It will be possible to consider it as an asynchronous function on a module-by-module basis.
Previously, async / await could only be defined on a module's functional basis. If this is left as it is, if the loading of the module in which the asynchronous function is written is later than the timing when the function call is executed, it will be undefined returned with.
By operating the entire module as an asynchronous function, you can prevent the function execution from occurring before the module is loaded.
Available from version 3.8 on TypeScript

// Dependencies can be determined depending on the environment in which it is executed, and 
const strings = await  import ( `/i18n/ $ {navigator.language} ` ); 
// Modules can represent resources 
const connection = await dbConnector ();

With the release of ES2022, some features are still in the process of being assessed for Stage 3.

Based on the impression, such as described above, the advance likely new features and to Stage 4 until a future release of ES2022 Active Proposals (Stage 3) in the current study from theArbitrarily I picked it up in my own way!
I'm looking forward to next year's release.

.at ()

It is a proposal to enable "negative subscripts" of arrays. Makes negative numbers count backwards from the last element when implemented with arr.at (-1)
It has been coveted by many developers so far. It seems that Python can also do it, so I think there is a high need for such simple and easy-to-use functions.

Scalable Object.prototype.hasOwnProperty ()

It Object.prototype.hasOwnPropertyis a proposal to make Object easier to use. Can be implemented as below
It was difficult to implement using prototype, so I personally felt that it was hot to be able to use it as a built-in method of Object.

if ( Object .hasOwn (object, "foo" )) { console .log ( "has property foo" ) }

In addition, within the company, a new function called Temporal, which has been proposed for several years, is finally advancing to Stage 3 and it is exciting.

Some of New ES12(ES2021) JavaScript Features.

EswaraPrakash Vaithiyanathan — Mon, 20 Sep 2021 03:21:15 +0000

Changes released in ES2021
The changes released in ES2021 are as follows.

String.prototype.replaceAll()

Perform string replacement for all applicable parts
Existing replace()methods are valid only for the first part to be replaced, so if you wanted to replace everything you had to use a regular expression
With this method, you can prevent replacement omissions due to regular expression mistakes, and it is easy to understand what you want to do at a glance.

let str = "I like programming. I like my job."
str.replaceAll ( "like" , "love" ) 
// Output result: "I love programming. I love my job."

It is not yet supported by TypeScript by default, but you can use it by changing the setting in tsconfig.json as follows. (Other changes to ES2021 will also be available)

{ "compilerOptions" : { "lib" : [ "ES2021" ],    }, }

Promise.any()

When any one of the promises running at the same time is processed resolved, that promise will be returned.
If all promises are reject, then AggregateError(the type when one operation needs to return multiple errors) is returned.
If you want to know that the process was successful but you don't need to know which one, using any seems to be useful.
This is also not yet supported by default in TypeScript. tsconfig.json It can be used by changing the settings as described above .

Promise .any ([ new Promise ( ( resolve, reject ) => 
setTimeout (reject, 100 , '1st' )), 
new Promise (( resolve, reject ) => setTimeout (resolve, 200, '2nd')) ]) 
.then ( value => console .log ( `first completed process: $ {value} `)) 
.catch (err => console .log (err))
// Output result 
// First completed process: 2nd

WeakRefs
Makes the following feasible:

Creating a "weak reference" to an object
User-defined finalizer execution after objects are garbage collected.
A "weak reference" is a reference to an object that does not interfere with the execution of garbage collection.

Normally, when an object is created, it is kept in memory (a "strong reference"), but a "weak reference" is subject to garbage collection collection when memory needs to be freed.

If you use these two well, you can prevent memory leaks of data that is no longer referenced, such as deleted objects.
However, the functionality of garbage collection is complex (when and how garbage collection occurs depends on the implementation of the JavaScript engine you are using ) and should be carefully considered for proper use. Officially, there is a note that it is better to avoid using it if possible.
It wasn't mentioned in the official TypeScript documentation, but according to this issue , it's available in version 4.1 and later.
I tried to execute the following code in PlayGround, but it was certainly able to compile with 4.1 or later version.

const obj = new  Map (); 
const cache = new WeakRef (obj); 
// Output result 
// v4.0.5 
// Cannot find name'WeakRef'. 
// v4.1.5 
// None

Logical Assignment Operators
You will be able to write as follows

No extra branching is required when entering the initial value, and the implementation is refreshing.
Available from version 4.0 on TypeScript

// a || (a = b);
 a || = b;

// a && (a = b);
 a && = b;

// a ?? (a = b);
 a ?? = b;

Numeric separators

_Can be inserted between the numbers. (Even if you enter it, it will be recognized as a numerical value)
This is possible with all numeric literals, not just decimal numbers. This makes the numbers easier to read
Available from version 2.7 in TypeScript.

1_000_000_000            // 1.0101_475_938.38 // 
1.01           million, decimal point can also be used

GitHub Gist API Public Gist Demo

EswaraPrakash Vaithiyanathan — Fri, 20 Aug 2021 05:48:57 +0000

Details

Use Gist API to create a simple single-page application. A user should be able to enter a username and get the full list of public Gists for that user. The following are a list of functional requirements.

Use the API provided by GitHub Gist API Document Link.

• Search: When a user enters a username, it should be able to get a full list of public Gists by that user.

• Filetype: Convert the filetypes of the files in the gist into a tag/badge, (e.g, if the returned gist has list of files containing python and JavaScript files, the gist should have the respective tags/badges).

• Fork: Username/Avatar of the last 3 users who forked it with avatar linking to the fork.

This Simple Application is Developed using React JS and antd UI Kit. for API calls I used JS Async/Await to fetch data.

Source Code: https://github.com/eswaraprakash/GIST-Demo
Working application Link : https://w4hwh.csb.app/

Feedbacks are welcome. Thanks.

React useContext and useReducer Hooks.

EswaraPrakash Vaithiyanathan — Sat, 24 Jul 2021 12:41:58 +0000

A simple example of React useContext and useReducer Hooks available in React that can be used as a replacement for Redux.

Instead of using Redux as state management. We can use the inbuilt hooks that are available in React itself. Eventually, you can replace or move the project that is dependent on Redux to the inbuilt hooks.

The useContext hook is used to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level. Context defined will be available to all the child components without involving “props”. React Context is a powerful state management feature in React. Instead of passing the props down through each component, React Context allows you to broadcast props to the components below.

The useReducer hook is used for complex state manipulations and state transitions. … useReducer is a React hook function that accepts a reducer function, and an initial state. const [state, dispatch] = useReducer(reducer, initialState);This hook function returns an array with 2 values.

I am using the usual use case of the Todo List example for easy understanding.

Step 1: Initial State and Actions

//Initial State and Actions
const initialState = {
  todoList: []
};

const actions = {
  ADD_TODO_ITEM: "ADD_TODO_ITEM",
  REMOVE_TODO_ITEM: "REMOVE_TODO_ITEM",
  TOGGLE_COMPLETED: "TOGGLE_COMPLETED"
};

Step 2: Reducers to Handle Actions

//Reducer to Handle Actions
const reducer = (state, action) => {
  switch (action.type) {
    case actions.ADD_TODO_ITEM:
      return {
        todoList: [
          ...state.todoList,
          {
            id: new Date().valueOf(),
            label: action.todoItemLabel,
            completed: false
          }
        ]
      };
    case actions.REMOVE_TODO_ITEM: {
      const filteredTodoItem = state.todoList.filter(
        (todoItem) => todoItem.id !== action.todoItemId
      );
      return { todoList: filteredTodoItem };
    }
    case actions.TOGGLE_COMPLETED: {
      const updatedTodoList = state.todoList.map((todoItem) =>
        todoItem.id === action.todoItemId
          ? { ...todoItem, completed: !todoItem.completed }
          : todoItem
      );
      return { todoList: updatedTodoList };
    }
    default:
      return state;
  }
};

Breakdown of the Code: We use the usual Switch Case Statements to Evaluate the Actions.

First Case ADD_TODO_ITEM -action spread the existing list and add a new todo item to the list with id(unique-ish), label(user-entered value), and completed flag.
Second Case REMOVE_TODO_ITEM -action filter out the to-do item that needs to be removed based on the id.
Third Case TOGGLE_COMPLETED - action loop through all the to-do items and toggle the completed flag based on the id.

Step 3: Create the Context and Provider to Dispatch the Actions.

//Context and Provider
const TodoListContext = React.createContext();

const Provider = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  const value = {
    todoList: state.todoList,
    addTodoItem: (todoItemLabel) => {
      dispatch({ type: actions.ADD_TODO_ITEM, todoItemLabel });
    },
    removeTodoItem: (todoItemId) => {
      dispatch({ type: actions.REMOVE_TODO_ITEM, todoItemId });
    },
    markAsCompleted: (todoItemId) => {
      dispatch({ type: actions.TOGGLE_COMPLETED, todoItemId });
    }
  };

  return (
    <TodoListContext.Provider value={value}>
      {children}
    </TodoListContext.Provider>
  );
};

In this step, we create the TodoListContext and a Provider function that returns the TodoListContext’s Provider.

Here is the Breakdown of the Code.

Here we pass the reducer function and theinitialState to the useReducer hook. This will return state and dispatch. The state will have the initialState. And the dispatch is used to trigger our actions, just like in redux.
In the value object, we have todoList state, and three functions addTodoItem, removeTodoItem, and markAsCompleted which trigger ADD_TODO_ITEM, REMOVE_TODO_ITEM, and TOGGLE_COMPLETED actions respectively.
We pass the value object as a prop to the TodoListContext's Provider, so that we can access it using useContext.

Step 4: Create the Two Components that will use the store.
AddTodo & TodoList

// AddTodo Component with Input field and Add Button
const AddTodo = () => {
  const [inputValue, setInputValue] = React.useState("");
  const { addTodoItem } = React.useContext(TodoListContext);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        placeholder={"Type and add todo item"}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button
        onClick={() => {
          addTodoItem(inputValue);
          setInputValue("");
        }}
      >
        Add
      </button>
    </>
  );
};

In thisAddTodocomponent, we use the useContext to subscribe to our TodoListContext and getting addTodoItem dispatch function.

//TodoList Component to show the list
const TodoList = () => {
  const { todoList, removeTodoItem, markAsCompleted } = React.useContext(
    TodoListContext
  );
  return (
    <ul>
      {todoList.map((todoItem) => (
        <li
          className={`todoItem ${todoItem.completed ? "completed" : ""}`}
          key={todoItem.id}
          onClick={() => markAsCompleted(todoItem.id)}
        >
          {todoItem.label}
          <button
            className="delete"
            onClick={() => removeTodoItem(todoItem.id)}
          >
            X
          </button>
        </li>
      ))}
    </ul>
  );
};

In TodoList component, we are using useContext to subscribe to the TodoListContext and getting the todoList state, removeTodoItemand andmarkAsCompleted dispatch functions. We are mapping through todoList and rendering the to-do items and a remove(X) button next to them. On clicking on an item we are marking it as complete and when clicking on X the button we are removing it from the list.

Step 5: Final step, wrapping the above two components to the Provider.

//Final Wrapper 
export default function App() {
  return (
    <Provider>
      <AddTodo />
      <TodoList />
    </Provider>
  );
}

Here’s the working sample version of the code and the preview. You can Open the Sandbox for the full version of the code.

Example Link for the Code in CodeSandbox