John Resig - Secrets of the JavaScript Ninja

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com

2016 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Mannings policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.

Manning Publications Co.20 Baldwin RoadPO Box 761Shelter Island, NY 11964

Development editor: Dan MaharryTechnical development editor: Gregor ZurowskiReview editor: Ozren HarlovicProject editor: Tiffany TaylorCopy editor: Sharon WilkeyProofreader: Alyson BrenerTechnical proofreaders: Mathias Bynens,Jon BorgmanTypesetter: Gordan SalinovicCover designer: Marija Tudor

ISBN 9781617292859

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 EBM 21 20 19 18 17 16

Template literals embed expressions into strings: `${ninja}`.

Block-scoped variables:

• Use the new let keyword to create block-level variables: let ninja = "Yoshi".
• Use the new const keyword to create block-level constant variables whose value cant be reassigned to a completely new value: const ninja = "Yoshi".

Function parameters:

• Rest parameters create an array from arguments that werent matched to parameters:function multiMax(first, ...remaining){ /*...*/}multiMax(2, 3, 4, 5); //first: 2; remaining: [3, 4, 5]
• Default parameters specify default parameter values that are used if no value is supplied during invocation:function do(ninja, action = "skulk" ){ return ninja + " " + action;}do("Fuma"); //"Fuma skulk"

Spread operators expand an expression where multiple items are needed: [...items, 3, 4, 5].

Arrow functions let us create functions with less syntactic clutter. They dont have their own this parameter. Instead, they inherit it from the context in which they were created:

const values = [0, 3, 2, 5, 7, 4, 8, 1];values.sort((v1,v2) => v1 - v2); /*OR*/ values.sort((v1,v2) => { return v1 - v2;});value.forEach(value => console.log(value));

Generators generate sequences of values on a per-request basis. Once a value is generated, the generator suspends its execution without blocking. Use yield to generate values:

function *IdGenerator(){ let id = 0; while(true){ yield ++id; }}

Promises are placeholders for the result of a computation. A promise is a guarantee that eventually well know the result of some computation. The promise can either succeed or fail, and once it has done so, there will be no more changes:

• Create a new promise with new Promise((resolve, reject) => {});.
• Call the resolve function to explicitly resolve a promise. Call the reject function to explicitly reject a promise. A promise is implicitly rejected if an error occurs.
• The promise object has a then method that returns a promise and takes in two callbacks, a success callback and a failure callback:myPromise.then(val => console.log("Success"), err => console.log("Error"));
• Chain in a catch method to catch promise failures: myPromise.catch(e => alert(e));.

Classes act as syntactic sugar around JavaScripts prototypes:

class Person { constructor(name){ this.name = name; } dance(){ return true; }}class Ninja extends Person { constructor(name, level){ super(name); this.level = level; } static compare(ninja1, ninja2){ return ninja1.level - ninja2.level; }}

Proxies control access to other objects. Custom actions can be executed when an object is interacted with (for example, when a property is read or a function is called):

const p = new Proxy(target, { get: (target, key) => { /*Called when property accessed through proxy*/ }, set: (target, key, value) => { /*Called when property set through proxy*/ }});

Maps are mappings between a key and a value:

• new Map() creates a new map.
• Use the set method to add a new mapping, the get method to fetch a mapping, the has method to check whether a mapping exists, and the delete method to remove a mapping.

Sets are collections of unique items:

• new Set() creates a new set.
• Use the add method to add a new item, the delete method to remove an item, and the size property to check the number of items in a set.

for...of loops iterate over collections and generators.

Destructuring extracts data from objects and arrays:

• const {name: ninjaName} = ninja;
• const [firstNinja] = ["Yoshi"];

Modules are larger units of organizing code that allow us to divide programs into clusters:

export class Ninja{}; //Export an itemexport default class Ninja{} //Default exportexport {ninja};//Export existing variablesexport {ninja as samurai}; //Rename an exportimport Ninja from "Ninja.js"; //Import a default exportimport {ninja} from "Ninja.js"; //Import named exportsimport * as Ninja from "Ninja.js"; //Import all named exportsimport {ninja as iNinja} from "Ninja.js"; //Import with a new name

Finally, from a master, a book that delivers what an aspiring JavaScript developer requires to learn the art of crafting effective cross-browser JavaScript.

Glenn Stokol, Senior Principal Curriculum Developer, Oracle Corporation

Consistent with the jQuery motto, Write less, do more.

Andr Roberge, Universit Saint-Anne

Interesting and original techniques.

Scott Sauyet, Four Winds Software

Read this book, and youll no longer blindly plug in a snippet of code and marvel at how it worksyoull understand why it works.

Joe Litton, Collaborative Software Developer, JoeLitton.net

Will help you raise your JavaScript to the realm of the masters.

Christopher Haupt, greenstack.com

The stuff ninjas need to know.

Chad Davis, author of Struts 2 in Action

Required reading for any JavaScript Master.

John J. Ryan III, Princigration LLC

This book is a must-have for any serious JS coder. Your knowledge of the language will dramatically expand.