5 interesting features of JavaScript you may not know
- Tram Ho
JavaScript must be nothing strange anymore, right guys. But do you know all its interesting features yet?
With each new release of JavaScript, there will be interesting features such as adding new methods, or new operators to help you code more concise and easier to read.
In this article, I will introduce to you 5 interesting features of JavaScript that you may not know. Come find out with me.
1. Numeric Separator
Before typing large numbers up to millions or billions, it was very difficult to read it. But now you can use _ to separate numbers so you can read them quickly.
1 2 3 4 5 6 7 8 | <span class="token comment">// trước đây rất khó để đọc số này.</span> <span class="token keyword">const</span> billion <span class="token operator">=</span> <span class="token number">1000000000</span><span class="token punctuation">;</span> <span class="token comment">// với tính năng mới nó dễ đọc hơn nhiều</span> <span class="token keyword">const</span> readableBillion <span class="token operator">=</span> <span class="token number">1_000_000_000</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>readableBillion<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1000000000;</span> |
This feature is actually quite useful, isn’t it?
2. replaceAll
In previous JavaScript to be able to replace all a string into another, we needed to use a regular expression, such as this:
1 2 3 4 5 6 7 | const str = 'please-replace-me'; str.replace('-', ' '); // please replace-me; // nếu muốn replace all thì phải sử dụng str.replace(/\-/g, ' '); // please replace me |
But now we have the method replaceAll
1 2 | str.replaceAll('-', ' '); // please replace me |
3. Object.entries
Object.keys, Object.values developers already use it a lot, but there are still Object.entries It’s also quite useful to iterate over each Object’s key:value pair
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span> gender<span class="token operator">:</span> <span class="token string">'Male'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Ngoài cách như này</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Thì các bạn có thể dùng</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// name is Foo</span> <span class="token comment">// gender is Male</span> |
4. designMode of chrome
This feature is a useful feature for Frontend developers as there is no need to inspect the element and fix it, we can now edit it directly on the web page.
Just open the console and type the following code
1 | document.designMode = 'on'; |
It is quite handy when you need to change the text to preview how the text will display on your web. Try this cool feature right now
5. Use the logical operator
Previously you used logical operators like ||, &&, ??, === put in conditional sentences if/else right. But there is a more useful way to use it.
Here’s how to use operators to be able to assign values to variables
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> a <span class="token operator">&&=</span> b<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span> <span class="token comment">// Tức là nó sẽ gán giá trị b cho a khi a truthly.</span> <span class="token comment">// Hoặc có cách khác là</span> a <span class="token operator">&&</span> <span class="token punctuation">(</span>a <span class="token operator">=</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2 dòng lệnh trên có thể diễn tả bằng đoạn code dưới.</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token punctuation">{</span> a <span class="token operator">=</span> b <span class="token punctuation">}</span> |
Or you can use operators to call functions.
1 2 3 4 5 | <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token punctuation">(</span>a <span class="token operator"><</span> b<span class="token punctuation">)</span> <span class="token operator">&&</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'a is less than b'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Similar to the rest of the operators you can also do.
Summary
Above I have introduced to you interesting features for developers.
Hope it can be of great help to you. Hope you have a productive day at work and study.
See you in my next posts. Thank you all.