DEV Community

Cover image for 25 Unnoticeable Features of JavaScript

25 Unnoticeable Features of JavaScript

Mainul Hasan on March 13, 2024

Often, as developers, we write similar types of code, falling into a pattern that, while comfortable, can sometimes feel mundane. However, the wor...
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Beware...

x | 0 is not the same as Math.floor(x), neither is ~~x - as is sometimes written.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

They are the same as Math.trunc(x)

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli • Edited

for numbers up to 32 bits. bigger than 32 bits they are different.

developer.mozilla.org/en-US/docs/W...

Collapse
 
smart_egg profile image
Dmitriy A.

@mmainulhasan we need more Bitwise operators examples

Collapse
 
htho profile image
Hauke T.

Nice article. It would bei nice if you included links to the according MDN articles.

Your coclusion bothers me: eval, with, document.write() and __proto__ don't belong in anyones "toolkit". But: I'd really enjoy an an article named "Javascripts forbidden fruits".

If you care about your fellow developers and your future self - reading your Code, you also should avoid Labels, the comma operator, functions in blocks, void and any bitwise operators except for actual Bit Manipulation.

I personally dislike Automatic semicolons, because they might lead to hard-to-find Bugs.

Collapse
 
elsyng profile image
Ellis

Many aspects of js might definitely lead to hard-to-find bugs.

Collapse
 
jankapunkt profile image
Jan Küster

Aaaah nice, labelled break and continue, the fork and spoon of spaghetti code 🍝😄

Collapse
 
efpage profile image
Eckehard

break isn´t as bad as goto, there are situations where it can be most useful and not too much confusing. Adding some flags to break out a loop is not much clearer and has the same effect.

But it is worth to mention that in JS break without labels always breaks out to the outermost loop, so using labels can be a real life saver.

Collapse
 
fpaghar profile image
Fatemeh Paghar • Edited

one more feature of JS
Memoization for Performance Optimization
Memoization is a technique used to optimize the performance of functions by caching the results of expensive function calls and returning the cached result when the same inputs occur again. This can significantly reduce redundant calculations, especially in recursive or computationally intensive functions.

function fibonacci(n, memo = {}) {
  if (n in memo) return memo[n];
  if (n <= 1) return 1;
  return memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
}
console.log(fibonacci(10)); // Example usage

Enter fullscreen mode Exit fullscreen mode

By memorizing function results, developers can enhance the efficiency of their code, particularly in scenarios where functions are repeatedly called with the same inputs, as it minimizes unnecessary computation. This aligns with the theme of exploring advanced JavaScript features to improve code performance and productivity.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

This isn't a feature of JS, rather a general programming technique.

Collapse
 
fpaghar profile image
Fatemeh Paghar

Maybe ...
But there is memoization in Rect to prevent extra rendering with usecallback and use Memo. Maybe this technique is implemented as a feature.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

React is built from plain JS

Collapse
 
eshimischi profile image
eshimischi

Not a feature of JS itself, just a practice developed over the years, do not confuse

Collapse
 
aj-esh profile image
Ajeesh Sunil

Explained it gre8 though, in easy mode

Collapse
 
elsyng profile image
Ellis • Edited

Fun list, useful too.

I recognise two distinct groups, though:

  1. Actually quite well known features which many developers use on a daily basis now,
  2. Esoteric features which few developers do (or should) use.
Collapse
 
oculus42 profile image
Samuel Rouse

Thanks for the article! This is fun trip down memory lane of many old features now opposed strongly for daily use. You will see many of them in compiled production code, still.

18 and on are more like the new features that people should definitely know.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

JavaScript allows for chained assignments, which can assign a single value to multiple variables in one statement

Assignment in JS is not a statement unless combined with var, let, or const.

We use the assignment operator (=) to perform the assignment, and that assignment has a value, which is the second operand of the assignment operator (the value being assigned to the variable).

It's not that JS 'allows for chained assignments', they are possible as a direct result of the fact that an assignment using the assignment operator has a value, i.e. a = 2 has a value of 2.

So, in your example:

let a, b, c;
a = b = c = 5;
Enter fullscreen mode Exit fullscreen mode

The code sets c to the value of 5, b to the value of c = 5 (which we know from the value of the assignment is also 5), and a to the value of b = c = 5 (which is also 5).

Collapse
 
warkentien2 profile image
Philip Warkentien II

Good list, there were a few things I wasn't aware of. That said: #9 and #17 are the same. #3 missed the opportunity of showing a tagged template literal being used, since the setup is just another function, might be glanced over.

Collapse
 
legolasdk profile image
simon

When would one ever use "2 -- comma operator" ?

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Sometimes in for loops:

for (let i = 0, j = 10; i < j; i++, j--) {
  console.log(i, j);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
legolasdk profile image
simon

I dont think that is the same. let x = (1, 2); console.log(x); would be using the mentioned feature. But this will just log ‘2’

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

It's the same feature, you're just not using the return value.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Code golf

Collapse
 
artydev profile image
artydev

Thank you :-)

Collapse
 
silverium profile image
Soldeplata Saketos

number #25 is simply a lie

Image description

Collapse
 
wldomiciano profile image
Wellington Domiciano • Edited

Is not a lie, it's a feature in DevTools 111!

To better facilitate debugging, DevTools now supports evaluating expressions with private class members.
Source: developer.chrome.com/blog/new-in-d...

Your code produces an error when used in a <script> tag.

To reproduce the error in DevTools, try this:

(() => {
  class Counter {
    #count = 0;
    increment() {
      this.#count++;
    }
    getCount() {
      return this.#count;
    }
  }

  const a = new Counter();

  console.log(a.#count);
})()
Enter fullscreen mode Exit fullscreen mode

Sample code

Collapse
 
silverium profile image
Soldeplata Saketos • Edited

ah, thanks for pointing that out. In any case I dislike very much classes, but I am glad they added the true privacy for properties.

I am more fan for functional programming, factories, pure functions, etc.

To create a private member which is not even visible:

(()=>{
const superPrivateCounter = 0;
  return {
   getCount: () => superPrivateCounter;
}
})()
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tzdesign profile image
Tobi

Holy Shot. I’m using comma in swift expressions since for ever and never new it’s possible in js. I will definitely use it now

Collapse
 
tzdesign profile image
Tobi

Unfortunately it’s not like I thought it works in conditions. The last one will be returned. No wonder I did not see it in the wild.

Collapse
 
codingjlu profile image
codingjlu

The reason so many are "unnoticeable" is because they're considered bad practice and deprecated from the language.

Collapse
 
wangliwen profile image
WangLiwen

Nice.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

9 and 17 are the same

9 — in Operator for Property Checking

17 — The in Operator for Property Existence

Collapse
 
gauharnawab profile image
gauharnawab

Thanks for sharing

Collapse
 
silverium profile image
Soldeplata Saketos

I fail to understand the difference from point 9 and 17:

9 — in Operator for Property Checking
17 — The in Operator for Property Existence

Collapse
 
get_pieces profile image
Pieces 🌟

Great list!

Collapse
 
kevinleebuchan profile image
KevinLeeBuchan • Edited

Number 3 has no example. I can't tell what you're trying to communicate.

Collapse
 
raguram90 profile image
RamR

thanks, good article. #1,#2 and #9 are new to me.

Collapse
 
jerin_stephen profile image
Stephen BJ

awesome dude ,,,
more useful :P

Collapse
 
sreno77 profile image
Scott Reno

Nice list! I didn't know about a few of these.

Collapse
 
aliyumu62279511 profile image
Aliyu Muhammad

they are the same with math.floor

Collapse
 
gunabalans profile image
Gunabalan.S

Excellent compilation of features.

Collapse
 
stkarthik profile image
S.T. Karthik

1 — Labels for Loop and Block Statements
Was my first impression of this blog