JavaScript is a constantly evolving language, with new updates and features being released every year. In this article, we will take a deep dive into some of the major events that happened in the JavaScript world in 2018.
ES2018 Features
ES2018, also known as ECMAScript 2018 or ES9, was released in June 2018. It introduced several new features to the language, including:
Asynchronous Iteration
Asynchronous iteration allows for better handling of asynchronous data streams. This feature is particularly useful when working with APIs that return large amounts of data over time. Here's an example:
-- -------------------- ---- -------
----- -------- --------- -
----- -------- - ----- ----------------------------------
----- ------ - --------------------------
----- ------ -
----- - ----- ----- - - ----- --------------
-- ------ ------
-------------------
-
-Rest/Spread Properties
The rest/spread properties feature allows you to use the spread syntax "..." with object literals. This makes it easier to merge objects or pick specific properties from them. Here's an example:
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
const { a, ...rest } = obj2;
console.log(rest); // { b: 2, c: 3 }Promise.finally()
The promise.finally() method allows you to run a piece of code regardless of whether the promise was fulfilled or rejected. Here's an example:
-- -------------------- ---- -------
---------------------------------
-------------- -- ----------------
---------- -- -
-- -- --------- ---- --- ----
--
------------ -- -
-- ------ --- -----
--
----------- -- -
-------------------- -----------
---React 16.3
React is a popular JavaScript library for building user interfaces. In March 2018, React 16.3 was released, which introduced several new features and improvements.
Context API
The Context API allows you to pass data down through the component tree without having to pass props manually at every level. Here's an example:
-- -------------------- ---- -------
----- --------- - ----------------------
-------- ----- -
----- ------ -------- - -------------
------ -
------------------- -------------
------ --
---------------------
--
-
-------- ------- -
----- ------- - ----------------------
------ -
-----
------------------------
------
--
-Refs with Function Components
With React 16.3, it became possible to use refs with function components instead of just class components. Here's an example:
-- -------------------- ---- -------
-------- ---------------------- -
----- ------- - -------------
-------- --------------- -
------------------------
-
------ -
-----
------ ------------- ----------- --
------- ----------------------------- --- --------------
------
--
-TypeScript 3.0
TypeScript is a superset of JavaScript that adds static typing and other features. In July 2018, TypeScript 3.0 was released, which introduced several new features and improvements.
Project References
Project references allow you to split your TypeScript codebase into smaller projects that can be built and tested independently. This can help to improve the overall performance of your build process. Here's an example:
-- -------------------- ---- -------
-- -------------
-
------------------ -
--------- -------
------------ ----
--
------------- -
- ------- ----------- -
-
-
-- ------------
------ - ----- - ---- ------------
----------------------------Tuple Types
Tuple types allow you to define an array with a fixed number of elements, each with its own type. This can help to improve the clarity and correctness of your code. Here's an example:
-- -------------------- ---- ------- ---- ----- - -------- -------- -------- ----------- ------ -- ------ - ----- -- - ---- - ----- ----- -- - ---- - ----- ------ ------------ - -- - -- - ---- - ----- --- ----- - --- --- ----- --- ----- - --- --- ------------------------ ----- -- - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------