Scribd
Upload
95 views11 pages

Javascript New Features: Mendel Rosenblum

The document discusses new features in JavaScript and ECMAScript standards. It describes how newer JavaScript features can be transpiled to older JavaScript to enable their use. It provides examples of several new features, including modules, default parameters, rest parameters, spread operators, destructuring assignment, template literals, and for-of loops. Frontend frameworks are adopting newer features through tools like Babel and TypeScript.

Uploaded by

SIL Blackout
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
95 views11 pages

Javascript New Features: Mendel Rosenblum

The document discusses new features in JavaScript and ECMAScript standards. It describes how newer JavaScript features can be transpiled to older JavaScript to enable their use. It provides examples of several new features, including modules, default parameters, rest parameters, spread operators, destructuring assignment, template literals, and for-of loops. Frontend frameworks are adopting newer features through tools like Babel and TypeScript.

Uploaded by

SIL Blackout
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like