DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Zeyad Etman
Zeyad Etman

Posted on

Another way to write your JavaScript

Originally published on my Blog

Hi all, in this post I'll share with you some frontend code, that we can write it in another way,
And everything is working well, doesn't break the rules or putting smells in code, is cool.

1. Generate an array of sequential numbers [1, 2, 3, ...., n]

If we want to generate an array like this [1, 2, 3, 4, 5, 6, ...., n], We can write code using new Array() with
Array.fill() so it'll be

const N = 10;
new Array(N).fill().map((_, indx) => indx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

Why new Array(N).map() doesn't work?

Cool, But if we're working on a large array of sequential numbers, Is this method will be the best?
Mmmm, No! because new Array() creates a holey array
which is slow compared to packed arrays. So we can avoid this and re-write this method
using Array.from()
So the code will be

const N = 10;
Array.from({ length: N }, (_, indx) => indx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

new array()
source:
https://slidrio-decks.global.ssl.fastly.net/1259/original.pdf?1521622174
slide: 102

you can check the holey array in your Chrome Console, so if we write this new Array(10) your console will display
[empty Γ— 10] which is an array of empty values.

More Resources:

  1. https://v8.dev/blog/elements-kinds
  2. https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n

2. Number formatting

Sometimes you want to write a money with specific currency EGP 1000 or a size of something 50 kB one of the ways to write it,
simply const money = '1000 EGP'. But there's a nicer way to write formatted numbers using Intl.NumberFormat. So this strings will be

const money = new Intl.NumberFormat("en", {
  style: "currency",
  currency: "EGP",
  useGrouping: false,
  maximumSignificantDigits: 1
}).format(1000);
// "EGPΒ 1000"

const storage = new Intl.NumberFormat("en", {
  style: "unit",
  unit: "kilobyte"
}).format(50);
// "50 kB"
Enter fullscreen mode Exit fullscreen mode

Note: style units works on chrome 77+, so you can use babel to compile it.

This is so cool, if you're working on multiple locale and want to switch between them in a better and fully customized way.
More info from V8 Blog: Intl.NumberFormat

3. Styling NonInteracitve elements on focus

You can't do this using css/html without tabindex and according to MDN:

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using an <div> element to describe a button, instead of the <button> element.

and w3 says:

The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.

So the best practice for this is using addEventListener() in JavaScript, But if you want to use tabindex don't forget to add tabindex to inner html content.

Another solution

You don't have to use tabindex if you just want to change the div border.
you can use :focus-within and just change the border.

.search-box {
  margin-left: 1%;
  outline: red;
  border: 1px solid #fc3;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus-within {
  border: 2px solid #53c9fc;
}
Enter fullscreen mode Exit fullscreen mode
<div class="search-box">
  <Row>
    <div class="search-box-icon"></div>
    <input class="search-input" placeholder="search in listbox" />
  </Row>
</div>
Enter fullscreen mode Exit fullscreen mode

I published this as an answer on stackoverflow

Finally, I believe that everyone of us has a style writing code, his favorite practices that they don't break the rules,
or putting smells in code.

Top comments (6)

Collapse
 
thematrixan profile image
Mateusz Lesiak • Edited on

Generate an array of sequential numbers [1, 2, 3, ...., n]

You can achieve that also with this:

[...Array(5)].map((n, i) => i) // (5)Β [0, 1, 2, 3, 4]
Collapse
 
zeyadetman profile image
Zeyad Etman

Yes, but this case I talked about it in the first section, it creates an array of empty values. which is slow when you do operations over it.

Collapse
 
nageshwaruideveloper profile image
Nageshwar Reddy Pandem

Thank you zeyad. Today i learnt some new things. Thanks for the post.

Collapse
 
dvddpl profile image
Davide de Paolis

wow. i always used Array.from only for Sets and Maps. interesting tip you give here!
Also Intl.NumberFormat is pretty slick!

thanx for posting

Collapse
 
niralmunjariya profile image
Niral Munjariya

Cool!
Thank you Zeyad.
I learned many new things that I haven't used earlier.

Collapse
 
mateiadrielrafael profile image
Matei Adriel

Thanks for shoiwng me something new! (The number formating) I hope you'll write a follow-up cause this is really cool:)

Let's Get Wacky


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category

β†’ Join the Hackathon <-