All JavaScript and TypeScript Features of the last 3 years
<p>This article goes through almost all of the changes of the last 3 years (and some from earlier) in JavaScript / <a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-262/" rel="noopener ugc nofollow" target="_blank">ECMAScript </a>and <a href="https://www.typescriptlang.org/" rel="noopener ugc nofollow" target="_blank">TypeScript </a>.</p>
<p>Not all of the following features will be relevant to you or even practical, but they should instead serve to show what’s possible and to deepen your understanding of these languages.</p>
<p>There are a lot of TypeScript features I left out because they can be summarized as “This didn’t work like you would expect it to, but now it does”. So if something didn’t work in the past, try it again now.</p>
<ul>
<li>JavaScript / ECMAScript (oldest first)</li>
<li>TypeScript (oldest first)</li>
</ul>
<h1>Content</h1>
<h1>ECMAScript</h1>
<h2>Past (Still relevant older introductions)</h2>
<ul>
<li><strong>Tagged template literals</strong>: By prepending a function name in front of a template literal, the function will be passed the parts of the template literals and the template values. This has some interesting uses.</li>
</ul>
<pre>
// Let's say we want to write a way to log arbitrary strings containing a number but format the number.
// We can use tagged templates for that.
function formatNumbers(strings: TemplateStringsArray, number: number): string {
return strings[0] + number.toFixed(2) + strings[1];
}
console.log(formatNumbers`This is the value: ${0}, it's important.`); // This is the value: 0.00, it's important.
// Or if we wanted to "translate" (change to lowercase here) translation keys within strings.
function translateKey(key: string): string {
return key.toLocaleLowerCase();
}
function translate(strings: TemplateStringsArray, ...expressions: string[]): string {
return strings.reduce((accumulator, currentValue, index) => accumulator + currentValue + translateKey(expressions[index] ?? ''), '');
}
console.log(translate`Hello, this is ${'NAME'} to say ${'MESSAGE'}.`); // Hello, this is name to say message.
// Or if we wanted to "translate" (change to lowercase here) translation keys within strings.
function translateKey(key: string): string {
return key.toLocaleLowerCase();
}
function translate(strings: TemplateStringsArray, ...expressions: string[]): string {
return strings.reduce((accumulator, currentValue, index) => accumulator + currentValue + translateKey(expressions[index] ?? ''), '');
}
console.log(translate`Hello, this is ${'NAME'} to say ${'MESSAGE'}.`); // Hello, this is name to say message.</pre>
<ul>
<li><strong>Symbols</strong>: Unique keys for objects: <code>Symbol("foo") === Symbol("foo"); // false</code>. Used internally.</li>
</ul>
<p><a href="https://betterprogramming.pub/all-javascript-and-typescript-features-of-the-last-3-years-629c57e73e42">Click Here</a> </p>