{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/exciting-new-features-in-javascript","result":{"data":{"markdownRemark":{"excerpt":"Javascript community is going very well with the TC39 (Technical Committee 39), and it's proposal system. And javascript is now evolving…","html":"

Javascript community is going very well with the TC39 (Technical Committee 39), and it's proposal system. And javascript is now evolving fast, and we can expect some amazing features. I will talk about some of the most useful and exciting features which will make our life easy.

\n

1. Optional Chaining ?

\n

I'm sure you faced an error like this.

\n

cannot read property 'amazing' of undefined.

\n

and these errors are pervasive when accessing dynamic object with deep nesting, we can combat this in javascript by using the && operator to check, but it can get quite messy sometimes, here's the old and new way

\n
const js = {\n  can: {\n    do: \"anything\",\n    will: \"do anything\",\n  },\n}\n\n// old way\nconst canDoAnything = js && js.can && js.can.do\n\n// new way\nconst canDoAnythingNew = js?.can?.do
\n

3. Private fields #

\n
\n

Partially Available in Chrome & NodeJS 12

\n
\n

Finally, we can avoid _underscore naming conventions and use actual private variables in classes. Yes, the syntax is a bit weird and controversial at first, but hey, first time for everything! the new version of chrome supports class #fields only, but the class #methods() is coming soon

\n
\n

Check the TC39 proposal for class fields

\n
\n
\n

Check the TC39 proposal for private methods

\n
\n

here's how it looks

\n
// private fields must start with '#'\n// and they arent accessible outside the class block\n\nclass Ship {\n  #x;\n  #y;\n\n  constructor(x, y) {\n    this.#x = x;\n    this.#y = y;\n  }\n\n  // private methods are comming soon\n  #boost() {\n    this.#x++;\n    this.#y++;\n  }\n}\n\nconst ship = new Ship(1, 1);\nconsole.log(ship.#x); // -> Error
\n

4. Top Level await

\n

This one is interesting because top level await allows you to use \"await\" without an outer async function, which means you don't have to wrap an anonymous async function for every async operation.

\n

\"Top Level await' is very handy while debugging async stuff (like fetch) in console without wrapping it in an async function.

\n
\n

Check the TC39 proposal for Top Level Await

\n
\n

and there are many use cases which are mentioned in the tc39 repo

\n
// top level window\nawait fetch(\"https://somesite.com/api/data\") // -> Response {..}
\n

5. BigInt

\n
\n

Available in Chrome & NodeJS 12

\n
\n

Javascript always has been tribble at Math because we cannot reliably store numbers larger than 2 ^ 53, which limits its capabilities in many regions, for example, graphics and data processing.

\n
\n

Check the TC39 proposal for BigInt

\n
\n

here's how the syntax looks

\n
// can define BigInt by appending 'n' to a number literal\nconst theBiggestInt = 9997199254748991n\n\n// using the constructor with a literal\nconst alsoHuge = BigInt(9997199254748991n)\n\n// or with a string\nconst hugeButString = BigInt(\"9997199254748991n\")
\n

You can also do the same +, -, /, *, % operations on BigInt as you would expect from regular numbers, but you can't mix BigInt with numbers in most operations. Comparing Number and BigInt works, but not adding them.

\n

6. globalThis

\n

I know this one might not be too much exciting for you, but trust me globalThis is essential for standardizing the global object in javascript.

\n

let's say we need to get the globalObject for browser, node, all other alien stuff.

\n
\n

Check the TC39 proposal for globalThis

\n
\n

Before globalThis, the only reliable cross-platform way to get the global object for an environment was Function('return this')(). However, this causes CSP violations in some settings, so es6-shim uses a check like this, for example:

\n
var getGlobal = function() {\n  // in node, it's named 'global'. If we're in a shell, 'this' might work.\n  // some times also self. and in browsers its window\n  if (typeof self !== \"undefined\") {\n    return self\n  }\n  if (typeof window !== \"undefined\") {\n    return window\n  }\n  if (typeof global !== \"undefined\") {\n    return global\n  }\n  throw new Error(\"unable to locate global object\")\n}
\n

Now, this can get quite messy because we have to check for every environment and find the actual global. You might think that its not a big issue, but it is a massive issue because the problem here is about standardization.

\n

And for that reason, globalThis is introduced. the new syntax will look like this

\n
// taken from mdn\nfunction canMakeHTTPRequest() {\n  return typeof globalThis.XMLHttpRequest === \"function\"\n}\n\nconsole.log(canMakeHTTPRequest())\n// expected output (in a browser): true
\n
\n

That's all, folks!

\n

Now, some of them are supported in the latest browsers and nodejs 12, but some of them are stage 3, so maybe we can see some changes.

\n

if you have any questions or if I missed some cool features, comment down below. <3

","timeToRead":4,"id":"a4c47775-2bd4-536b-a5dd-4fe53a3dab40","frontmatter":{"date":"August 07, 2019","title":"Exciting New Features In Javascript"}}},"pageContext":{"slug":"/blog/exciting-new-features-in-javascript"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}