ES6+ Syntax

Topics Covered

Slides: slides.com/joelross/info340wi26-es6

JavaScript History

• ECMAScript is the official JavaScript standard
• ES6 (2015) was a major revision with widespread browser support
• Annual releases since 2016, named by year (ES2016, ES2017, etc.)
• Browser compatibility varies - check compat-table.github.io

Arrow Functions

Shortcut syntax using => for function declarations:

// Traditional function
const foo = function(params) { return 'foo ' + params; }

// Arrow function (block body)
const foo = (params) => { return 'foo ' + params; }

// Concise body (single expression, implicit return)
const foo = (params) => 'foo ' + params;

// Single parameter (parentheses optional)
const double = x => x * 2;

Best practice: Always use explicit block syntax { return ... } for readability.

Destructuring Assignment

Unpacking array or object values into separate variables:

// Array destructuring
const [x, y, z] = [1, 2, 3];
console.log(x); // 1

// Object destructuring
const {a, b, c} = {a: 1, b: 2, c: 3};
console.log(b); // 2

// Function parameter destructuring
function getFullName({first, last}) {
    return first + " " + last;
}
getFullName({first: "Ada", last: "Lovelace"}); // "Ada Lovelace"

Spread Operator (...)

Expands elements when declaring new arrays or objects:

// Spread in arrays
const original = ['a', 'b', 'c'];
const newArray = [...original, 'd', 'e'];
// ['a', 'b', 'c', 'd', 'e']

// Spread in objects
const person = {name: 'Ada', age: 36};
const personWithHat = {hat: 'bowler', ...person};
// {hat: 'bowler', name: 'Ada', age: 36}

// Copying arrays/objects
const copy = [...original];
const clone = {...person};

ES6 Modules

Self-contained scripts with isolated namespaces:

// Exporting (my-module.js)
export function foo() { return 'foo'; }
export const bar = 'bar';
export default function sayHello() { return 'Hello!'; }

// Importing
import {foo, bar} from './my-module.js';  // named imports
import greet from './my-module.js';        // default import
import * as myModule from './my-module.js'; // import all

Best practice: Export only necessary values; prefer named exports over default.

Development Tools

Use live-server to run a local HTTP server (required for ES6 modules):

npx live-server .