JavaScript New Features
Mendel Rosenblum
CS142 Lecture Notes - JavaScript Programming 1
ECMAScript
● New standard for ECMAScript released yearly
○ Relatively easy to get a new feature into the language
● Transpiling: Translate new language to old style JavaScript
○ Allows front-end software to be coded with new features but run everywhere.
○ For example: Babel. Check out: https://babeljs.io/en/repl new JS in -> old JS out
● Frontend frameworks are aggressively using new language features
○ React.js - Encourages use of newer ECMAScript features
○ Angular - Encourages Typescript - Extended JavaScript with static types and type checking
CS142 Lecture Notes - JavaScript Programming 2
Lots of new features in ECMAScript
● Already seen a few
○ let, const, class, =>
● Here are a few more you might encounter:
○ Modules
○ Default parameters
○ Rest parameters ...
○ Spread operator ...
○ Destructuring assignment
○ Template string literals
○ Set, Map, WeakSet, WeakMap objects, async programming
CS142 Lecture Notes - JavaScript Programming 3
Modules - Variables global to a file not system
Old Way New Way
var exportedName = var x, y, x;
(function () { ...
var x, y, x; var exportedName = {x: x, y: y};
...
return {x: x, y: y}; export exportedName;
})();
Can explicitly define file's exports and then import
Use Immediately Invoked Function Expressions the module in another file. Two common ways:
using closures to make module variables
● Common.js (Node.js):
function scope and only return a single object to
module.exports/require()
access them.
● ECMAScript 6: export/import
CS142 Lecture Notes - JavaScript Basics 4
Default parameters - Parameters not specified
Old Way New Way
function myFunc(a,b) { function myFunc (a = 1, b = "Hello") {
a = a || 1;
}
b = b || "Hello";
}
Can explicitly define default values if parameter
is not defined.
Unspecified parameters are set to undefined.
You need to explicitly set them if you want a
different default.
CS142 Lecture Notes - JavaScript Basics 5
Rest parameters ...
Old Way New Way
function myFunc() { function myFunc (a,b,...theArgsArray) {
var a = arguments[0];
var c = theArgsArray[0];
var b = arguments[1];
var c = arguments[2];
}
arguments[N]
//
}
Additional parameters can be placed into a
Parameters not listed but passed can be named array.
accessed using the arguments array.
CS142 Lecture Notes - JavaScript Basics 6
Spread operator ...
Old Way New Way
var anArray = [1,2,3]; var anArray = [1,2,3];
myFunc.apply(null, anArray); myFunc(...anArray);
var o = [5].concat(anArray).concat([6]); var o = [5, ...anArray, 6];
Expand an array to pass its values to a function or Works on iterable types: strings & arrays
insert it into an array.
CS142 Lecture Notes - JavaScript Basics 7
Destructuring assignment
Old Way New Way
var a = arr[0]; let [a,b,c] = arr;
var b = arr[1];
var c = arr[2];
let {name, age, salary} = obj;
var name = obj.name;
var age = obj.age;
var salary = obj.salary;
function render(props) {
var name = props.name; function render({name, age}) {
var age = props.age;
CS142 Lecture Notes - JavaScript Basics 8
Template string literals
Old Way New Way
function formatGreetings(name, age) { function formatGreetings(name, age) {
var str = var str =
"Hi " + name + `Hi ${name} your age is ${age}`;
" your age is " + age;
... Also allows multi-line strings:
`This string has
Use string concatenation to build up string from
two lines`
variables.
Very useful in frontend code. Strings can be
delimited by " ", ' ', or ` `
CS142 Lecture Notes - JavaScript Basics 9
For of
Old Way New Way
var a = [5,6,7]; let sum = 0;
var sum = 0; for (ent of a) {
for (var i = 0; i < a.length; i++) { sum += ent;
sum += a[i]; }
}
Iterate over arrays, strings, Map, Set,
Iterator over an array
without using indexes.
CS142 Lecture Notes - JavaScript Basics 10
Some additional extensions
● Set, Map, WeakSet, WeakMap objects
○ Defined interfaces for common abstractions
● async/await and Promises
○ Asynchronous programming help
CS142 Lecture Notes - JavaScript Basics 11
