book

JavaScript Cookbook, 3rd Edition

by Adam D. Scott, Matthew MacDonald, Shelley Powers

July 2021

Intermediate to advanced

535 pages

11h 55m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Includes

Has Sandbox

Book AudienceBook OrganizationConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
Choosing a Code EditorProblemSolutionDiscussionSee AlsoUsing the Developer Console in Your BrowserProblemSolutionDiscussionSee AlsoRunning Blocks of Code in the Developer ConsoleProblemSolutionDiscussionSee AlsoUsing Strict Mode to Catch Common MistakesProblemSolutionDiscussionSee AlsoFilling in HTML Boilerplate with Emmet ShortcutsProblemSolutionDiscussionInstalling the npm Package Manager (with Node.js)ProblemSolutionDiscussionSee AlsoExtra: Using a Terminal and ShellDownloading a Package with npmProblemSolutionDiscussionExtra: Understanding package.jsonUpdating a Package with npmProblemSolutionDiscussionSetting Up a Local Test ServerProblemSolutionDiscussionSee AlsoEnforcing Code Standards with a LinterProblemSolutionDiscussionStyling Code Consistently with a FormatterProblemSolutionDiscussionExperimenting in a JavaScript PlaygroundProblemSolutionDiscussion
Checking for an Existing, Nonempty StringProblemSolutionDiscussionConverting a Numeric Value to a Formatted StringProblemSolutionDiscussionSee AlsoInserting Special CharactersProblemSolutionDiscussionSee AlsoInserting EmojisProblemSolutionDiscussionUsing Template Literals for Clearer String ConcatenationProblemSolutionDiscussionPerforming a Case-Insensitive String ComparisonProblemSolutionDiscussionChecking If a String Contains a Specific SubstringProblemSolutionDiscussionReplacing All Occurrences of a StringProblemSolutionDiscussionSee AlsoReplacing HTML Tags with Named EntitiesProblemSolutionDiscussionSee AlsoUsing a Regular Expression to Replace Patterns in a StringProblemSolutionDiscussionExtra: Regular ExpressionsExtracting a List from a StringProblemSolutionDiscussionSee AlsoFinding All Instances of a PatternProblemSolutionDiscussionExtra: Highlighting MatchesRemoving Whitespace from the Beginning and End of a StringProblemSolutionDiscussionSee AlsoConverting the First Letter of a String to UppercaseProblemSolutionDiscussionSee AlsoValidating an Email AddressProblemSolutionDiscussionSee Also
Generating Random NumbersProblemSolutionDiscussionSee AlsoGenerating Cryptographically Secure Random NumbersProblemSolutionDiscussionRounding to a Specific Decimal PlaceProblemSolutionDiscussionSee AlsoPreserving Accuracy in Decimal ValuesProblemSolutionDiscussionSee AlsoConverting a String to a NumberProblemSolutionDiscussionConverting a Decimal to a Hexadecimal ValueProblemSolutionDiscussionConverting Between Degrees and RadiansProblemSolutionDiscussionCalculating the Length of a Circular ArcProblemSolutionDiscussionManipulating Very Large Numbers with BigIntProblemSolutionDiscussion
Getting the Current Date and TimeProblemSolutionDiscussionSee AlsoConverting a String to a DateProblemSolutionDiscussionSee AlsoAdding Days to a DateProblemSolutionDiscussionSee AlsoComparing Dates and Testing Dates for EqualityProblemSolutionDiscussionSee AlsoCalculating the Time Elapsed Between Two DatesProblemSolutionDiscussionSee AlsoFormatting a Date Value as a StringProblemSolutionDiscussionSee Also
Checking If an Object Is an ArrayProblemSolutionDiscussionIterating Over All the Elements in an ArrayProblemSolutionDiscussionChecking If Two Arrays Are EqualProblemSolutionDiscussionBreaking Down an Array into Separate VariablesProblemSolutionDiscussionSee AlsoPassing an Array to a Function That Expects a List of ValuesProblemSolutionDiscussionSee AlsoCloning an ArrayProblemSolutionDiscussionSee AlsoMerging Two ArraysProblemSolutionDiscussionSee AlsoCopying a Portion of an Array by PositionProblemSolutionDiscussionSee AlsoExtracting Array Items That Meet Specific CriteriaProblemSolutionDiscussionSee AlsoEmptying an ArrayProblemSolutionDiscussionRemoving Duplicate ValuesProblemSolutionDiscussionSee AlsoFlattening a Two-Dimensional ArrayProblemSolutionDiscussionSearching Through an Array for Exact MatchesProblemSolutionDiscussionSee AlsoSearching Through an Array for Items That Meet Specific CriteriaProblemSolutionDiscussionSee AlsoRemoving or Replacing Array ElementsProblemSolutionDiscussionSorting an Array of Objects by a Property ValueProblemSolutionDiscussionTransforming Every Element of an ArrayProblemSolutionDiscussionCombining an Array’s Values in a Single CalculationProblemSolutionDiscussionSee AlsoValidating Array ContentsProblemSolutionDiscussionSee AlsoCreating a Collection of Nonduplicated ValuesProblemSolutionDiscussionCreating a Key-Indexed Collection of ItemsProblemSolutionDiscussion
Passing a Function as an Argument to Another FunctionProblemSolutionDiscussionSee AlsoUsing Arrow FunctionsProblemSolutionDiscussionSee AlsoProviding a Default Parameter ValueProblemSolutionDiscussionCreating a Function That Accepts Unlimited ArgumentsProblemSolutionDiscussionSee AlsoUsing Named Function ParametersProblemSolutionDiscussionSee AlsoCreating a Function That Stores its State with a ClosureProblemSolutionDiscussionSee AlsoCreating a Generator Function That Yields Multiple ValuesProblemSolutionDiscussionSee AlsoExtra: Building a Repeatable Pseudorandom Number GeneratorReducing Redundancy by Using Partial ApplicationProblemSolutionDiscussionAdvanced: A Partial Function FactoryExtra: Using bind() to Partially Provide ArgumentsFixing this with Function BindingProblemSolutionDiscussionExtra: self = thisImplementing a Recursive AlgorithmProblemSolutionDiscussion
Checking if an Object Is a Certain TypeProblemSolutionDiscussionUsing an Object Literal to Bundle DataProblemSolutionDiscussionSee AlsoExtra: Computed Property NamesChecking If an Object Has a PropertyProblemSolutionDiscussionSee AlsoIterating Over All the Properties of an ObjectProblemSolutionDiscussionSee AlsoTesting for an Empty ObjectProblemSolutionDiscussionMerging the Properties of Two ObjectsProblemSolutionDiscussionCustomizing the Way a Property Is DefinedProblemSolutionDiscussionSee AlsoPreventing Any Changes to an ObjectProblemSolutionDiscussionIntercepting and Changing Actions on an Object with a ProxyProblemSolutionDiscussionCloning an ObjectProblemSolutionDiscussionSee AlsoMaking a Deep Copy of an ObjectProblemSolutionDiscussionCreating Absolutely Unique Object Property KeysProblemSolutionDiscussionCreating Enums with SymbolProblemSolutionDiscussionSee Also
Creating a Reusable ClassProblemSolutionDiscussionSee AlsoExtra: Multiple ConstructorsAdding Properties to a ClassProblemSolutionDiscussionSee AlsoExtra: Private FieldsGiving a Class a Better String RepresentationProblemSolutionDiscussionUsing the Constructor Pattern to Make a Custom ClassProblemSolutionDiscussionSee AlsoSupporting Method Chaining in Your ClassProblemSolutionDiscussionAdding Static Methods to a ClassProblemSolutionDiscussionUsing a Static Method to Create ObjectsProblemSolutionDiscussionInheriting Functionality from Another ClassProblemSolutionDiscussionExtra: Prototype ChainsOrganizing Your JavaScript Classes with ModulesProblemSolutionDiscussionSee Also

Updating the Page During a LoopProblemSolutionDiscussionSee AlsoUsing a Function That Returns a PromiseProblemSolutionDiscussionSee AlsoPromisifying an Asynchronous Function That Uses a CallbackProblemSolutionDiscussionSee AlsoExecuting Multiple Promises ConcurrentlyProblemSolutionDiscussionWaiting for a Promise to Finish with Await and AsyncProblemSolutionDiscussionCreating an Asynchronous Generator FunctionProblemSolutionDiscussionSee AlsoUsing a Web Worker to Perform a Background TaskProblemSolutionDiscussionSee AlsoAdding Progress Support to a Web WorkerProblemSolutionDiscussionSee Also
Catching and Neutralizing an ErrorProblemSolutionSolutionSee AlsoCatching Different Types of ErrorsProblemSolutionDiscussionSee AlsoCatching Asynchronous ErrorsProblemSolutionDiscussionSee AlsoDetecting Unhandled ErrorsProblemSolutionDiscussionExtra: Logging ToolsThrowing a Standard ErrorProblemSolutionDiscussionSee AlsoThrowing a Custom ErrorProblemSolutionDiscussionSee AlsoWriting Unit Tests for Your CodeProblemSolutionDiscussionSee AlsoExtra: Writing Tests FirstTracking Test Code CoverageProblemSolutionDiscussion
Debugging JavaScriptProblemSolutionDiscussionAnalyzing Runtime PerformanceProblemSolutionDiscussionIdentifying Unused JavaScriptProblemSolutionDiscussionUsing Lighthouse to Measure Best PracticesProblemSolutionDiscussion
Accessing a Given Element and Finding Its Parent and Child ElementsProblemSolutionDiscussionTraversing the Results from querySelectorAll() with forEach()ProblemSolutionDiscussionAdding Click Functionality to an ElementProblemSolutionDiscussionFinding All Elements That Share an AttributeProblemSolutionDiscussionAccessing All Elements of a Specific TypeProblemSolutionDiscussionSee AlsoDiscovering Child Elements Using the Selectors APIProblemSolutionDiscussionSee AlsoChanging an Element’s Class ValueProblemSolutionDiscussionSetting an Element’s Style AttributeProblemSolutionDiscussionExtra: Accessing an Existing Style SettingAdvancedAdding Text to a New ParagraphProblemSolutionDiscussionInserting a New Element in a Specific DOM LocationProblemSolutionDiscussionChecking If a Checkbox Is CheckedProblemSolutionDiscussionAdding Up Values in an HTML TableProblemSolutionDiscussionExtra: forEach and querySelectorAllExtra: Modularization of GlobalsDeleting Rows from an HTML TableProblemSolutionDiscussionHiding Page SectionsProblemSolutionDiscussionCreating Hover-Based Pop-Up Info WindowsProblemSolutionDiscussionValidating Form DataProblemSolutionDiscussionExtra: HTML5 Form Validation TechniquesHighlighting Form Errors and AccessibilityProblemSolutionDiscussionSee AlsoCreating an Accessible Automatically Updated RegionProblemSolutionDiscussion
Requesting Remote Data with FetchProblemSolutionDiscussionUsing XMLHttpRequestProblemSolutionDiscussionSubmitting a FormProblemSolutionDiscussionPopulating a Selection List from the ServerProblemSolutionDiscussionParsing Returned JSONProblemSolutionDiscussionFetching and Parsing XMLProblemSolutionDiscussionSending Binary Data and Loading into an ImageProblemSolutionDiscussionSharing HTTP Cookies Across DomainsProblemSolutionDiscussionUsing Websockets to Establish a Two-Way Communication Between Client and ServerProblemSolutionDiscussionSee AlsoLong Polling a Remote Data SourceProblemSolutionDiscussion
Persisting Information with CookiesProblemSolutionDiscussionUsing sessionStorage for Client-Side StorageProblemSolutionDiscussionSee AlsoCreating a localStorage Client-Side Data Storage ItemProblemSolutionDiscussionSee AlsoPersisting Larger Chunks of Data on the Client Using IndexedDBProblemSolutionDiscussionSimplifying IndexedDB with a LibraryProblemSolutionDiscussion
Adding JavaScript to SVGProblemSolutionDiscussionExtra: Using SVG LibrariesAccessing SVG from a Web Page ScriptProblemSolutionDiscussionCreating an SVG Bar Chart with D3ProblemSolutionDiscussionIntegrating SVG and the Canvas Element in HTMLProblemSolutionDiscussionExtra: Canvas? Or SVG?Running a Routine When an Audio File Begins PlayingProblemSolutionDiscussionControlling Video from JavaScript with the video ElementProblemSolutionDiscussion
Bundling JavaScriptProblemSolutionDiscussionExtra: Using npm ModulesJavaScript and the Mobile WebProblemSolutionDiscussionSee AlsoWriting a Progressive Web ApplicationProblemSolutionDiscussionTesting and Profiling a Progressive Web ApplicationProblemSolutionDiscussionGetting the Value of the Current URLProblemSolutionDiscussionRedirecting a URLProblemSolutionDiscussionCopying Text to a User’s ClipboardProblemSolutionDiscussionEnabling a Mobile-Like Notification in the Desktop BrowserProblemSolutionDiscussionExtra: Web Notifications and the Page Visibility APILoading a File Locally in the BrowserProblemSolutionDiscussionExtending the Possible with Web ComponentsProblemSolutionDiscussionChoosing a Front-End FrameworkProblemSolutionReactVueSvelteAngular
Managing Node Versions with Node Version ManagerProblemSolutionDiscussionResponding to a Simple Browser RequestProblemSolutionDiscussionInteractively Trying Out Node Code Snippets with REPLProblemSolutionDiscussionExtra: Wait a Second, What Global Object?Reading and Writing File DataProblemSolutionDiscussionAdvancedGetting Input from the TerminalProblemSolutionDiscussionSee AlsoGetting the Path to the Current ScriptProblemSolutionDiscussionWorking with Node Timers and Understanding the Node Event LoopProblemSolutionDiscussion
Searching for a Specific Node Module via npmProblemSolutionDiscussionConverting Your Library into a Node ModuleProblemSolutionDiscussionSee AlsoTaking Your Code Across Module EnvironmentsProblemSolutionDiscussionSee AlsoCreating an Installable Node ModuleProblemSolutionDiscussionExtra: The README File and Markdown SyntaxWriting Multiplatform LibrariesProblemSolutionDiscussionUnit Testing Your ModulesProblemSolutionDiscussion
Using Environment VariablesProblemSolutionDiscussionManaging Callback HellProblemSolutionDiscussionAccessing Command-Line Functionality Within a Node ApplicationProblemSolutionDiscussionExtra: Using Child Processes with WindowsPassing Command-Line ArgumentsProblemSolutionDiscussionCreating a Command-Line Utility with Help from CommanderProblemSolutionDiscussionKeeping a Node Instance Up and RunningProblemSolutionDiscussionMonitoring Application Changes and Restarting During Local DevelopmentProblemsSolutionDiscussionScheduling Repeat TasksProblemSolutionDiscussionTesting the Performance and Capability of Your WebSockets ApplicationProblemSolutionDiscussion
Fetching Remote DataProblemSolutionDiscussionScreen ScrapingProblemSolutionDiscussionAccessing JSON-Formatted Data via a RESTful APIProblemSolutionDiscussionSee Also
Using Express to Respond to RequestsProblemSolutionDiscussionUsing the Express-GeneratorProblemSolutionDiscussionRoutingProblemSolutionDiscussionWorking with OAuthProblemSolutionDiscussionOAuth 2 User Authentication with Passport.jsProblemSolutionDiscussionServing Up Formatted DataProblemSolutionDiscussionBuilding a RESTful APIProblemSolutionDiscussionBuilding a GraphQL APIProblemSolutionDiscussion

Content preview from JavaScript Cookbook, 3rd Edition

Chapter 17. Node Basics

The dividing line between “old” and “new” JavaScript occurred when Node.js (referred to primarily as just Node) was released to the world. Yes, the ability to dynamically modify page elements was an essential milestone, as was the emphasis on establishing a path forward to new versions of ECMAScript, but it was Node that really made us look at JavaScript in a whole new way. And it’s a way I like—I’m a big fan of Node and server-side JavaScript development.

In this chapter, we’ll explore the basics of Node. At a minimum, you will need to have Node installed, as covered in “Installing the npm Package Manager (with Node.js)” or “Managing Node Versions with Node Version Manager”.

Managing Node Versions with Node Version Manager

Problem

You need to install and manage multiple versions of Node on your development machine.

Solution

Use Node Version Manager (NVM), which allows you to install and use any distributed version of Node on a per-shell basis. NVM is compatible with Linux, macOS, and Windows Subsystem for Linux.

To install NVM, run the install script using either curl or wget in your system’s terminal application:

## using curl:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

## using wget:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Note

If you are developing on Windows, we recommend using nvm-windows, which is unaffiliated with the NVM project, but provides similar functionality ...