book

Speaking JavaScript

by Axel Rauschmayer

February 2014

Beginner to intermediate

460 pages

8h 32m

English

O'Reilly Media, Inc.

Read now

Unlock full access

What You Need to Know About This BookTips for Reading This BookThe Four Parts of This BookJavaScript Command LinesNotational ConventionsDescribing syntaxReferring to methodsCommand-line interactionTips, notes, and warningsQuickly Finding DocumentationSafari® Books OnlineHow to Contact UsAcknowledgmentsPreparing for JavaScriptHelp with JavaScriptReviewers
BackgroundJavaScript Versus ECMAScriptInfluences and Nature of the LanguageSyntaxAn Overview of the SyntaxStatements Versus ExpressionsSemicolonsCommentsVariables and AssignmentAssignmentCompound Assignment OperatorsIdentifiers and Variable NamesValuesPrimitive Values Versus ObjectsPrimitive ValuesObjectsundefined and nullChecking for undefined or nullCategorizing Values Using typeof and instanceofBooleansTruthy and FalsyBinary Logical OperatorsEquality OperatorsNumbersOperatorsStringsString OperatorsString MethodsStatementsConditionalsLoopsFunctionsFunction Declarations Are HoistedThe Special Variable argumentsToo Many or Too Few ArgumentsOptional ParametersEnforcing an ArityConverting arguments to an ArrayException HandlingStrict ModeVariable Scoping and ClosuresVariables Are Function-ScopedVariables Are HoistedClosuresThe IIFE Pattern: Introducing a New ScopeIIFE use case: inadvertent sharing via closuresObjects and ConstructorsSingle ObjectsArbitrary Property KeysExtracting MethodsFunctions Inside a MethodConstructors: Factories for ObjectsArraysArray LiteralsArray MethodsIterating over ArraysRegular ExpressionsMethod test(): Is There a Match?Method exec(): Match and Capture GroupsMethod replace(): Search and ReplaceMathOther Functionality of the Standard Library
Is JavaScript Freely Available?Is JavaScript Elegant?Is JavaScript Useful?Graphical User InterfacesOther Technologies Complementing JavaScriptDoes JavaScript Have Good Tools?Is JavaScript Fast Enough?Is JavaScript Widely Used?Does JavaScript Have a Future?Conclusion
Quirks and Unorthodox FeaturesElegant PartsInfluences

An Overview of the SyntaxCommentsExpressions Versus StatementsExpressionsStatementsConditional statement versus conditional expressionsUsing ambiguous expressions as statementsEvaluating an object literal via eval()Immediately invoking a function expressionControl Flow Statements and BlocksRules for Using SemicolonsNo Semicolon After a Statement Ending with a BlockThe Empty StatementAutomatic Semicolon InsertionExample: ASI via illegal tokenExample: ASI via closing bracePitfall: ASI can unexpectedly break up statementsPitfall: ASI might unexpectedly not be triggeredLegal IdentifiersInvoking Methods on Number LiteralsStrict ModeSwitching on Strict ModeStrict Mode: Recommended, with CaveatsVariables Must Be Declared in Strict ModeFunctions in Strict ModeFunctions must be declared at the top level of a scopeStricter rules for function parametersThe arguments objects has fewer propertiesthis is undefined in nonmethod functionsSetting and Deleting Immutable Properties Fails with an Exception in Strict ModeUnqualified Identifiers Can’t Be Deleted in Strict Modeeval() Is Cleaner in Strict ModeFeatures That Are Forbidden in Strict Mode
JavaScript’s Type SystemJavaScript’s TypesStatic Versus DynamicStatic Typing Versus Dynamic TypingStatic Type Checking Versus Dynamic Type CheckingCoercionPrimitive Values Versus ObjectsPrimitive ValuesObjectsundefined and nullOccurrences of undefined and nullOccurrences of undefinedOccurrences of nullChecking for undefined or nullChecking for nullChecking for undefinedChecking for either undefined or nullThe History of undefined and nullChanging undefinedWrapper Objects for PrimitivesWrapper Objects Are Different from PrimitivesWrapping and Unwrapping PrimitivesPrimitives Borrow Their Methods from WrappersType CoercionType Coercion Can Hide BugsFunctions for Converting to Boolean, Number, String, and ObjectAlgorithm: ToPrimitive()—Converting a Value to a PrimitiveExamples: ToPrimitive() in action
Operators and ObjectsAssignment OperatorsCompound Assignment OperatorsEquality Operators: === Versus ==Strict Equality (===, !==)Pitfall: NaNStrict inequality (!==)Normal (Lenient) Equality (==, !=)Lenient inequality (!=)Pitfall: lenient equality is different from conversion to booleanPitfall: lenient equality and stringsPitfall: lenient equality and objectsThere Are No Valid Use Cases for ==Use case: checking for undefined or nullUse case: working with numbers in stringsUse case: comparing wrapper instances with primitivesOrdering OperatorsThe AlgorithmThe Plus Operator (+)The AlgorithmOperators for Booleans and NumbersSpecial OperatorsThe Conditional Operator ( ? : )The Comma OperatorThe void OperatorWhat is void used for?Why does JavaScript have a void operator?Categorizing Values via typeof and instanceoftypeof: Categorizing PrimitivesPitfall: typeof nullThe history of typeof nullChecking whether a variable existsinstanceof: Checking Whether an Object Is an Instance of a Given ConstructorObject Operators
Converting to BooleanManually Converting to BooleanTruthy and Falsy ValuesPitfall: all objects are truthyHistory: Why are objects always truthy?Logical OperatorsBinary Logical Operators: And (&&) and Or (||)Logical And (&&)Logical Or (||)Pattern: providing a default valueExample 1: a default for a parameterExample 2: a default for a propertyExample 3: a default for the result of a functionLogical Not (!)Equality Operators, Ordering OperatorsThe Function Boolean
Number LiteralsExponentInvoking Methods on LiteralsConverting to NumberManually Converting to NumberparseFloat()Special Number ValuesNaNPitfall: checking whether a value is NaNInfinityError: a number’s magnitude is too largeError: division by zeroComputing with InfinityChecking for InfinityTwo ZerosBest practice: pretend there’s only one zeroDistinguishing the two zerosThe Internal Representation of NumbersSpecial ExponentsHandling Rounding ErrorsIntegers in JavaScriptRanges of IntegersRepresenting Integers as Floating-Point NumbersBest practiceSafe IntegersDefinitions in ECMAScript 6Safe results of arithmetic computationsConverting to IntegerIntegers via Math.floor(), Math.ceil(), and Math.round()Integers via the Custom Function ToInteger()32-bit Integers via Bitwise OperatorsBitwise Or (|)Shift operatorsShould I use bitwise operators to coerce to integer?Integers via parseInt()The radixExplanationSummaryArithmetic OperatorsBitwise OperatorsBackground KnowledgeBinary complementsSigned 32-bit integersInputting and outputting binary numbersBitwise Not OperatorBinary Bitwise OperatorsBitwise Shift OperatorsThe Function NumberNumber Constructor PropertiesNumber Prototype MethodsNumber.prototype.toFixed(fractionDigits?)Number.prototype.toPrecision(precision?)Number.prototype.toString(radix?)Decimal exponential notationNumber.prototype.toExponential(fractionDigits?)Functions for NumbersSources for This Chapter
String LiteralsEscaping in String LiteralsCharacter AccessConverting to StringManually Converting to StringPitfall: conversion is not invertibleComparing StringsConcatenating StringsConcatenation: The Plus (+) OperatorConcatenation: Joining an Array of String FragmentsThe Function StringString Constructor MethodString Instance Property lengthString Prototype MethodsExtract SubstringsTransformSearch and CompareTest, Match, and Replace with Regular Expressions
Declaring and Assigning VariablesThe Bodies of Loops and ConditionalsLoopsMechanisms to Be Used with Loopswhiledo-whileforfor-inBest practice: don’t use for-in for arraysBest practice: be careful with for-in for objectsfor each-inConditionalsif-then-elseChaining if statementsPitfall: dangling elseswitchThe with StatementSyntax and SemanticsThe with Statement Is DeprecatedTechniques for avoiding the with statementThe Rationale for the DeprecationThe debugger Statement
What Is Exception Handling?Exception Handling in JavaScriptthrowtry-catch-finallyExamplesError ConstructorsStack TracesImplementing Your Own Error Constructor
The Three Roles of Functions in JavaScriptTerminology: “Parameter” Versus “Argument”Defining FunctionsFunction ExpressionsNamed function expressionsFunction DeclarationsThe Function ConstructorHoistingThe Name of a FunctionWhich Is Better: A Function Declaration or a Function Expression?More Control over Function Calls: call(), apply(), and bind()func.apply(thisValue, argArray)func.bind(thisValue, arg1, ..., argN)Handling Missing or Extra ParametersAll Parameters by Index: The Special Variable argumentsDeprecated features of argumentsMandatory Parameters, Enforcing a Minimum ArityOptional ParametersSimulating Pass-by-Reference ParametersPitfall: Unexpected Optional ParametersNamed ParametersNamed Parameters as DescriptionsOptional Named ParametersSimulating Named Parameters in JavaScript
Declaring a VariableBackground: Static Versus DynamicBackground: The Scope of a VariableVariables Are Function-ScopedVariable Declarations Are HoistedIntroducing a New Scope via an IIFEIIFE Variation: Prefix OperatorsIIFE Variation: Already Inside Expression ContextIIFE Variation: An IIFE with ParametersIIFE ApplicationsGlobal VariablesBest Practice: Avoid Creating Global VariablesModule Systems Lead to Fewer GlobalsThe Global ObjectCross-Platform ConsiderationsUse Cases for windowUse case: marking global variablesUse case: built-insUse case: style checkersUse case: checking whether a global variable existsUse case: creating things in global scopeEnvironments: Managing VariablesClosures: Functions Stay Connected to Their Birth ScopesHandling Closures via EnvironmentsPitfall: Inadvertently Sharing an Environment
Layer 1: Single ObjectsKinds of PropertiesObject LiteralsDot Operator (.): Accessing Properties via Fixed KeysGetting propertiesCalling methodsSetting propertiesDeleting propertiesThe return value of deleteUnusual Property KeysBracket Operator ([]): Accessing Properties via Computed KeysGetting properties via the bracket operatorCalling methods via the bracket operatorSetting properties via the bracket operatorDeleting properties via the bracket operatorConverting Any Value to an Objectthis as an Implicit Parameter of Functions and MethodsCalling Functions While Setting this: call(), apply(), and bind()Function.prototype.call(thisValue, arg1?, arg2?, ...)Function.prototype.apply(thisValue, argArray)Function.prototype.bind(thisValue, arg1?, ..., argN?)apply() for ConstructorsManually simulating an apply() for constructorsA library methodAn alternative approachPitfall: Losing this When Extracting a MethodHow to get a warningHow to properly extract a methodCallbacks and extracted methodsPitfall: Functions Inside Methods Shadow thisWorkaround 1: that = thisWorkaround 2: bind()Workaround 3: a thisValue for forEach()Layer 2: The Prototype Relationship Between ObjectsInheritanceOverridingSharing Data Between Objects via a PrototypeGetting and Setting the PrototypeCreating a new object with a given prototypeReading the prototype of an objectChecking whether one object a prototype of another oneFinding the object where a property is definedThe Special Property __proto__Setting and Deleting Affects Only Own PropertiesSetting a propertyDeleting an inherited propertyChanging properties anywhere in the prototype chainIteration and Detection of PropertiesListing Own Property KeysListing All Property KeysChecking Whether a Property ExistsExamplesThe effects of enumerabilityThe effects of inheritanceComputing the number of own properties of an objectBest Practices: Iterating over Own PropertiesAccessors (Getters and Setters)Defining Accessors via an Object LiteralDefining Accessors via Property DescriptorsAccessors and InheritanceProperty Attributes and Property DescriptorsProperty AttributesDefault valuesProperty DescriptorsGetting and Defining Properties via DescriptorsCopying an ObjectProperties: Definition Versus AssignmentInherited Read-Only Properties Can’t Be Assigned ToEnumerability: Best PracticesProtecting ObjectsPreventing ExtensionsSealingFreezingPitfall: Protection Is ShallowLayer 3: Constructors—Factories for InstancesThe new Operator Implemented in JavaScriptTerminology: The Two PrototypesThe constructor Property of InstancesUse cases for the constructor propertyBest practiceThe instanceof OperatorPitfall: objects that are not instances of ObjectPitfall: crossing realms (frames or windows)Tips for Implementing ConstructorsProtection against forgetting new: strict modeReturning arbitrary objects from a constructorData in Prototype PropertiesAvoid Prototype Properties with Initial Values for Instance PropertiesBest practice: don’t share default valuesCreating instance properties on demandAvoid Nonpolymorphic Prototype PropertiesPolymorphic Prototype PropertiesKeeping Data PrivatePrivate Data in the Environment of a Constructor (Crockford Privacy Pattern)Public propertiesPrivate valuesPrivileged methodsAn exampleThe pros and cons of the Crockford privacy patternPrivate Data in Properties with Marked KeysPrivate Data in Properties with Reified KeysKeeping Global Data Private via IIFEsAttaching private global data to a singleton objectKeeping global data private to all of a constructorAttaching global data to a methodLayer 4: Inheritance Between ConstructorsInheriting Instance PropertiesInheriting Prototype PropertiesEnsuring That instanceof WorksOverriding a MethodMaking a SupercallAvoiding Hardcoding the Name of the SuperconstructorExample: Constructor Inheritance in UseExample: The Inheritance Hierarchy of Built-in ConstructorsAntipattern: The Prototype Is an Instance of the SuperconstructorMethods of All ObjectsConversion to PrimitiveObject.prototype.toLocaleString()Prototypal Inheritance and PropertiesGeneric Methods: Borrowing Methods from PrototypesAccessing Object.prototype and Array.prototype via LiteralsExamples of Calling Methods GenericallyArray-Like Objects and Generic MethodsPatterns for working with array-like objectsA List of All Generic MethodsPitfalls: Using an Object as a MapPitfall 1: Inheritance Affects Reading PropertiesChecking whether a property existsCollecting property keysGetting a property valuePitfall 2: Overriding Affects Invoking MethodsPitfall 3: The Special Property __proto__The dict Pattern: Objects Without Prototypes Are Better MapsNormal objectsPrototype-less objectsRecommendationBest PracticesCheat Sheet: Working with Objects
OverviewArrays Are Maps, Not TuplesArrays Can Also Have PropertiesCreating ArraysThe Array ConstructorCreating an empty array with a given lengthInitializing an array with elements (avoid!)Multidimensional ArraysArray IndicesThe in Operator and IndicesDeleting Array ElementsArray Indices in DetaillengthManually Increasing the Length of an ArrayDecreasing the Length of an ArrayClearing an arrayClearing shared arraysThe Maximum LengthHoles in ArraysCreating HolesSparse Arrays Versus Dense ArraysWhich Operations Ignore Holes, and Which Consider Them?Array iteration methodsOther array methodsThe for-in loopFunction.prototype.apply()Removing Holes from ArraysArray Constructor MethodArray Prototype MethodsAdding and Removing Elements (Destructive)Sorting and Reversing Elements (Destructive)Comparing NumbersComparing StringsComparing ObjectsConcatenating, Slicing, Joining (Nondestructive)Searching for Values (Nondestructive)Iteration (Nondestructive)Examination MethodsTransformation MethodsReduction MethodsPitfall: Array-Like ObjectsBest Practices: Iterating over Arrays
Regular Expression SyntaxAtoms: GeneralAtoms: Character ClassesAtoms: GroupsQuantifiersAssertionsDisjunctionUnicode and Regular ExpressionsCreating a Regular ExpressionLiteral Versus ConstructorFlagsInstance Properties of Regular ExpressionsExamples of Creating Regular ExpressionsRegExp.prototype.test: Is There a Match?String.prototype.search: At What Index Is There a Match?RegExp.prototype.exec: Capture GroupsFirst Match (Flag /g Not Set)All Matches (Flag /g Set)String.prototype.match: Capture Groups or Return All Matching SubstringsString.prototype.replace: Search and ReplaceReplacement Is a StringReplacement Is a FunctionProblems with the Flag /gTips and TricksQuoting TextPitfall: Without an Assertion (e.g., ^, $), a Regular Expression Is Found AnywhereMatching Everything or NothingMatching everythingMatching nothingManually Implementing LookbehindRegular Expression Cheat Sheet
The Date ConstructorDate Constructor MethodsDate Prototype MethodsTime Unit Getters and SettersVarious Getters and SettersConvert a Date to a StringDate Time FormatsDate Formats (No Time)Time Formats (No Date)Date Time FormatsTime Values: Dates as Milliseconds Since 1970-01-01Converting a Date to a Number
Math PropertiesNumerical FunctionsTrigonometric FunctionsOther Functions
BackgroundData FormatHistoryGrammarJSON.stringify(value, replacer?, space?)Data Ignored by JSON.stringify()The toJSON() MethodJSON.parse(text, reviver?)Transforming Data via Node VisitorsJSON.stringify()JSON.parse()
ConstructorsError ConstructorsNonconstructor FunctionsEncoding and Decoding TextCategorizing and Parsing NumbersDynamically Evaluating JavaScript Code via eval() and new Function()Evaluating Code Using eval()Use eval() in strict modeIndirect eval() evaluates in global scopeEvaluating Code Using new Function()eval() Versus new Function()Best PracticesLegitimate use casesConclusionThe Console APIHow Standardized Is the Console API Across Engines?Simple LoggingChecking and CountingFormatted LoggingProfiling and TimingNamespaces and Special Values
Unicode HistoryImportant Unicode ConceptsCode PointsUnicode EncodingsJavaScript Source Code and UnicodeSource Code InternallySource Code ExternallyJavaScript Strings and UnicodeEscape SequencesRefering to Astral Plane Characters via EscapesCounting CharactersUnicode NormalizationJavaScript Regular Expressions and UnicodeMatching Any Code Unit and Any Code PointLibrariesRecommended Reading and Chapter Sources
New FeaturesSyntactic ChangesNew Functionality in the Standard LibraryMetaprogrammingNew MethodsJSONTips for Working with Legacy Browsers
Existing Style GuidesGeneral TipsCode Should Be ConsistentCode Should Be Easy to UnderstandCommonly Accepted Best PracticesBrace StylesAllman style1TBS (One True Brace Style)JavaScriptPrefer Literals to ConstructorsDon’t Be CleverConditional operatorAbbreviating if statementsIncrement operatorChecking for undefinedConverting a number to an integerAcceptable ClevernessDefault valuesGeneric methodsECMAScript 5: trailing commasECMAScript 5: reserved wordsControversial RulesSyntaxVariablesObject OrientationMiscellaneousConclusion
TerminologyObstacle 1: Instances with Internal PropertiesWorkaround for Obstacle 1CaveatsObstacle 2: A Constructor That Can’t Be Called as a FunctionWorkaround for Obstacle 2Another Solution: Delegation
The Basics of JSDocSyntaxNaming TypesBasic TagsDocumenting Functions and MethodsInline Type Information (“Inline Doc Comments”)Documenting Variables, Parameters, and Instance PropertiesDocumenting ClassesDefining a Class via a Constructor FunctionDefining a Class via an Object LiteralDefining a Class via an Object Literal with an @constructs MethodSubclassingOther Useful Tags
Shims Versus PolyfillsFour Language LibrariesThe ECMAScript Internationalization APIThe ECMAScript Internationalization API, Edition 1What Kind of Standard Is It?When Can I Use It?Further ReadingDirectories for JavaScript Resources
Module SystemsPackage ManagersQuick and Dirty Modules

Content preview from Speaking JavaScript

Colophon

The animal on the cover of Speaking JavaScript is a Papuan Hornbill (Rhyticeros plicatus), a large bird inhabiting the forest canopy in Eastern Indonesia and New Guinea. This species is also known as Blyth’s hornbill after Edward Blyth (1810–1873), an English zoologist and Curator of the Museum of the Asiatic Society of Bengal.

The male hornbill is quite unusual in appearance due to its reddish-orange or golden-yellow plumage that surrounds the head and neck. Females differ by having a black head and neck. Both sexes have a largely black body, except for the contrasting short, white tail, and the bare, bluish-white skin around the eyes and throat. Hornbills also have red eyes, although those of the male are far brighter.

The variety of honking and grunting calls of the Papuan hornbill are believed to have led to reports of this bird laughing. In flight, the sound of its wings is loud and distinctive, a rushing noise that has been compared to the sound of steam escaping from a steam locomotive. Unsurprisingly, considering its rather large size and striking appearance, the Papuan hornbill is said to be a conspicuous bird, which can be seen flying high over the forest, frequently emitting its distinctive call.

These impressive birds are hunted on their native islands for food and as a trophy, and their skulls are sometimes worn as ornaments. Like other hornbills, its diet consists mainly of fruits—especially figs—occasionally supplemented with insects and other small animals. ...