the modern javascript tutorial
https://javascript.info/
The Modern JavaScript Tutorial
2023-03-24
None
<div><div><p>Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP.</p>
<p>We concentrate on the language itself here, with the minimum of environment-specific notes.</p>
</div></div>||||I|||| EN
 * AR عربي
 * EN English
 * ES Español
 * FA فارسی
 * FR Français
 * ID Indonesia
 * IT Italiano
 * JA 日本語
 * KO 한국어
 * RU Русский
 * TR Türkçe
 * UK Українська
 * ZH 简体中文

 We want to make this open-source project available for people all around the world.

 Help to translate the content of this tutorial to your language!

 Buy EPUB/PDF
 Search
 Search
 Tutorial map
 Light theme Dark theme
 Share
 عربيEnglishEspañolفارسیFrançaisIndonesiaItaliano日本語한국어РусскийTürkçeУкраїнська简体中文

 The Modern JavaScript Tutorial

 How it's done now. From the basics to advanced topics with simple, but detailed explanations.

 Search
 Last updated on March 24, 2023
 Buy EPUB/PDF
 Share:
 20369 ★ github Discord Chat

 Table of contents

 Main course contains 2 parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.

 Part 1 The JavaScript language Part 2 Browser: Document, Events, Interfaces Part 3 Additional articles

 The JavaScript language

 Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP.

 We concentrate on the language itself here, with the minimum of environment-specific notes.

 An introduction
 * An Introduction to JavaScript
 * Manuals and specifications
 * Code editors
 * Developer console
 JavaScript Fundamentals
 * Hello, world!
 * Code structure
 * The modern mode, "use strict"
 * Variables
 * Data types
 * Interaction: alert, prompt, confirm
 * Type Conversions
 * Basic operators, maths
 * Comparisons
 * Conditional branching: if, '?'
 * Logical operators
 * Nullish coalescing operator '??'
 * Loops: while and for
 * The "switch" statement
 * Functions
 * Function expressions
 * Arrow functions, the basics
 * JavaScript specials
 * More…
 Code quality
 * Debugging in the browser
 * Coding Style
 * Comments
 * Ninja code
 * Automated testing with Mocha
 * Polyfills and transpilers
 Objects: the basics
 * Objects
 * Object references and copying
 * Garbage collection
 * Object methods, "this"
 * Constructor, operator "new"
 * Optional chaining '?.'
 * Symbol type
 * Object to primitive conversion
 Data types
 * Methods of primitives
 * Numbers
 * Strings
 * Arrays
 * Array methods
 * Iterables
 * Map and Set
 * WeakMap and WeakSet
 * Object.keys, values, entries
 * Destructuring assignment
 * Date and time
 * JSON methods, toJSON
 * More…
 Advanced working with functions
 * Recursion and stack
 * Rest parameters and spread syntax
 * Variable scope, closure
 * The old "var"
 * Global object
 * Function object, NFE
 * The "new Function" syntax
 * Scheduling: setTimeout and setInterval
 * Decorators and forwarding, call/apply
 * Function binding
 * Arrow functions revisited
 * More…
 Object properties configuration
 * Property flags and descriptors
 * Property getters and setters
 Prototypes, inheritance
 * Prototypal inheritance
 * F.prototype
 * Native prototypes
 * Prototype methods, objects without __proto__
 Classes
 * Class basic syntax
 * Class inheritance
 * Static properties and methods
 * Private and protected properties and methods
 * Extending built-in classes
 * Class checking: "instanceof"
 * Mixins
 Error handling
 * Error handling, "try...catch"
 * Custom errors, extending Error
 Promises, async/await
 * Introduction: callbacks
 * Promise
 * Promises chaining
 * Error handling with promises
 * Promise API
 * Promisification
 * Microtasks
 * Async/await
 Generators, advanced iteration
 * Generators
 * Async iteration and generators
 Modules
 * Modules, introduction
 * Export and Import
 * Dynamic imports
 Miscellaneous
 * Proxy and Reflect
 * Eval: run a code string
 * Currying
 * Reference Type
 * BigInt
 * Unicode, String internals

 Browser: Document, Events, Interfaces

 Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.

 Document
 * Browser environment, specs
 * DOM tree
 * Walking the DOM
 * Searching: getElement*, querySelector*
 * Node properties: type, tag and contents
 * Attributes and properties
 * Modifying the document
 * Styles and classes
 * Element size and scrolling
 * Window sizes and scrolling
 * Coordinates
 * More…
 Introduction to Events
 * Introduction to browser events
 * Bubbling and capturing
 * Event delegation
 * Browser default actions
 * Dispatching custom events
 UI Events
 * Mouse events
 * Moving the mouse: mouseover/out, mouseenter/leave
 * Drag'n'Drop with mouse events
 * Pointer events
 * Keyboard: keydown and keyup
 * Scrolling
 Forms, controls
 * Form properties and methods
 * Focusing: focus/blur
 * Events: change, input, cut, copy, paste
 * Forms: event and method submit
 Document and resource loading
 * Page: DOMContentLoaded, load, beforeunload, unload
 * Scripts: async, defer
 * Resource loading: onload and onerror
 Miscellaneous
 * Mutation observer
 * Selection and Range
 * Event loop: microtasks and macrotasks

 Additional articles

 List of extra topics that assume you've covered the first two parts of tutorial. There is no clear hierarchy here, you can read articles in the order you want.
 Frames and windows
 * Popups and window methods
 * Cross-window communication
 * The clickjacking attack
 Binary data, files
 * ArrayBuffer, binary arrays
 * TextDecoder and TextEncoder
 * Blob
 * File and FileReader
 Network requests
 * Fetch
 * FormData
 * Fetch: Download progress
 * Fetch: Abort
 * Fetch: Cross-Origin Requests
 * Fetch API
 * URL objects
 * XMLHttpRequest
 * Resumable file upload
 * Long polling
 * WebSocket
 * Server Sent Events
 * More…
 Storing data in the browser
 * Cookies, document.cookie
 * LocalStorage, sessionStorage
 * IndexedDB
 Animation
 * Bezier curve
 * CSS-animations
 * JavaScript animations
 Web components
 * From the orbital height
 * Custom elements
 * Shadow DOM
 * Template element
 * Shadow DOM slots, composition
 * Shadow DOM styling
 * Shadow DOM and events
 Regular expressions
 * Patterns and flags
 * Character classes
 * Unicode: flag "u" and class \p{...}
 * Anchors: string start ^ and end $
 * Multiline mode of anchors ^ $, flag "m"
 * Word boundary: \b
 * Escaping, special characters
 * Sets and ranges [...]
 * Quantifiers +, *, ? and {n}
 * Greedy and lazy quantifiers
 * Capturing groups
 * Backreferences in pattern: \N and \k<name>
 * Alternation (OR) |
 * Lookahead and lookbehind
 * Catastrophic backtracking
 * Sticky flag "y", searching at position
 * Methods of RegExp and String
 * More…
 Share
 Tutorial map

 Comments

 read this before commenting…
 * If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
 * If you can't understand something in the article – please elaborate.
 * To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)
 * © 2007—2023 Ilya Kantor
 * about the project
 * contact us
 * terms of usage
 * privacy policy
EN
 * AR عربي
 * EN English
 * ES Español
 * FA فارسی
 * FR Français
 * ID Indonesia
 * IT Italiano
 * JA 日本語
 * KO 한국어
 * RU Русский
 * TR Türkçe
 * UK Українська
 * ZH 简体中文
 We want to make this open-source project available for people all around the world.
 Help to translate the content of this tutorial to your language!
 Buy EPUB/PDF
 Search
 Search
 Tutorial map
 Light theme Dark theme
 Share
 عربيEnglishEspañolفارسیFrançaisIndonesiaItaliano日本語한국어РусскийTürkçeУкраїнська简体中文
 The Modern JavaScript Tutorial
 How it's done now. From the basics to advanced topics with simple, but detailed explanations.
 Search
 Last updated on March 24, 2023
 Buy EPUB/PDF
 Share:
 20369 ★ github Discord Chat
 Table of contents
 Main course contains 2 parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.
 Part 1 The JavaScript language Part 2 Browser: Document, Events, Interfaces Part 3 Additional articles
 The JavaScript language
 Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP.
 We concentrate on the language itself here, with the minimum of environment-specific notes.
 An introduction
 * An Introduction to JavaScript
 * Manuals and specifications
 * Code editors
 * Developer console
 JavaScript Fundamentals
 * Hello, world!
 * Code structure
 * The modern mode, "use strict"
 * Variables
 * Data types
 * Interaction: alert, prompt, confirm
 * Type Conversions
 * Basic operators, maths
 * Comparisons
 * Conditional branching: if, '?'
 * Logical operators
 * Nullish coalescing operator '??'
 * Loops: while and for
 * The "switch" statement
 * Functions
 * Function expressions
 * Arrow functions, the basics
 * JavaScript specials
 * More…
 Code quality
 * Debugging in the browser
 * Coding Style
 * Comments
 * Ninja code
 * Automated testing with Mocha
 * Polyfills and transpilers
 Objects: the basics
 * Objects
 * Object references and copying
 * Garbage collection
 * Object methods, "this"
 * Constructor, operator "new"
 * Optional chaining '?.'
 * Symbol type
 * Object to primitive conversion
 Data types
 * Methods of primitives
 * Numbers
 * Strings
 * Arrays
 * Array methods
 * Iterables
 * Map and Set
 * WeakMap and WeakSet
 * Object.keys, values, entries
 * Destructuring assignment
 * Date and time
 * JSON methods, toJSON
 * More…
 Advanced working with functions
 * Recursion and stack
 * Rest parameters and spread syntax
 * Variable scope, closure
 * The old "var"
 * Global object
 * Function object, NFE
 * The "new Function" syntax
 * Scheduling: setTimeout and setInterval
 * Decorators and forwarding, call/apply
 * Function binding
 * Arrow functions revisited
 * More…
 Object properties configuration
 * Property flags and descriptors
 * Property getters and setters
 Prototypes, inheritance
 * Prototypal inheritance
 * F.prototype
 * Native prototypes
 * Prototype methods, objects without __proto__
 Classes
 * Class basic syntax
 * Class inheritance
 * Static properties and methods
 * Private and protected properties and methods
 * Extending built-in classes
 * Class checking: "instanceof"
 * Mixins
 Error handling
 * Error handling, "try...catch"
 * Custom errors, extending Error
 Promises, async/await
 * Introduction: callbacks
 * Promise
 * Promises chaining
 * Error handling with promises
 * Promise API
 * Promisification
 * Microtasks
 * Async/await
 Generators, advanced iteration
 * Generators
 * Async iteration and generators
 Modules
 * Modules, introduction
 * Export and Import
 * Dynamic imports
 Miscellaneous
 * Proxy and Reflect
 * Eval: run a code string
 * Currying
 * Reference Type
 * BigInt
 * Unicode, String internals
 Browser: Document, Events, Interfaces
 Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.
 Document
 * Browser environment, specs
 * DOM tree
 * Walking the DOM
 * Searching: getElement*, querySelector*
 * Node properties: type, tag and contents
 * Attributes and properties
 * Modifying the document
 * Styles and classes
 * Element size and scrolling
 * Window sizes and scrolling
 * Coordinates
 * More…
 Introduction to Events
 * Introduction to browser events
 * Bubbling and capturing
 * Event delegation
 * Browser default actions
 * Dispatching custom events
 UI Events
 * Mouse events
 * Moving the mouse: mouseover/out, mouseenter/leave
 * Drag'n'Drop with mouse events
 * Pointer events
 * Keyboard: keydown and keyup
 * Scrolling
 Forms, controls
 * Form properties and methods
 * Focusing: focus/blur
 * Events: change, input, cut, copy, paste
 * Forms: event and method submit
 Document and resource loading
 * Page: DOMContentLoaded, load, beforeunload, unload
 * Scripts: async, defer
 * Resource loading: onload and onerror
 Miscellaneous
 * Mutation observer
 * Selection and Range
 * Event loop: microtasks and macrotasks
 Additional articles
 List of extra topics that assume you've covered the first two parts of tutorial. There is no clear hierarchy here, you can read articles in the order you want.
 Frames and windows
 * Popups and window methods
 * Cross-window communication
 * The clickjacking attack
 Binary data, files
 * ArrayBuffer, binary arrays
 * TextDecoder and TextEncoder
 * Blob
 * File and FileReader
 Network requests
 * Fetch
 * FormData
 * Fetch: Download progress
 * Fetch: Abort
 * Fetch: Cross-Origin Requests
 * Fetch API
 * URL objects
 * XMLHttpRequest
 * Resumable file upload
 * Long polling
 * WebSocket
 * Server Sent Events
 * More…
 Storing data in the browser
 * Cookies, document.cookie
 * LocalStorage, sessionStorage
 * IndexedDB
 Animation
 * Bezier curve
 * CSS-animations
 * JavaScript animations
 Web components
 * From the orbital height
 * Custom elements
 * Shadow DOM
 * Template element
 * Shadow DOM slots, composition
 * Shadow DOM styling
 * Shadow DOM and events
 Regular expressions
 * Patterns and flags
 * Character classes
 * Unicode: flag "u" and class \p{...}
 * Anchors: string start ^ and end $
 * Multiline mode of anchors ^ $, flag "m"
 * Word boundary: \b
 * Escaping, special characters
 * Sets and ranges [...]
 * Quantifiers +, *, ? and {n}
 * Greedy and lazy quantifiers
 * Capturing groups
 * Backreferences in pattern: \N and \k
 * Alternation (OR) |
 * Lookahead and lookbehind
 * Catastrophic backtracking
 * Sticky flag "y", searching at position
 * Methods of RegExp and String
 * More…
 Share
 Tutorial map
 Comments
 read this before commenting…
 * If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
 * If you can't understand something in the article – please elaborate.
 * To insert few words of code, use the  tag, for several lines – wrap them in  tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)
 * © 2007—2023 Ilya Kantor
 * about the project
 * contact us
 * terms of usage
 * privacy policy
The Modern JavaScript Tutorial
https://javascript.info
https://github.com/javascript-tutorial
The Modern JavaScript Tutorial
2023-02-06
None
<div><div>
 <ul>
 <li>
 
 <div>
 <ul>
 <li>
 <a href="/features/actions">
 
 <div>
 <p>Actions</p><p>
 Automate any workflow
 </p></div>
 
</a></li>
 <li>
 <a href="/features/packages">
 
 <div>
 <p>Packages</p><p>
 Host and manage packages
 </p></div>
 
</a></li>
 <li>
 <a href="/features/security">
 
 <div>
 <p>Security</p><p>
 Find and fix vulnerabilities
 </p></div>
 
</a></li>
 <li>
 <a href="/features/codespaces">
 
 <div>
 <p>Codespaces</p><p>
 Instant dev environments
 </p></div>
 
</a></li>
 <li>
 <a href="/features/copilot">
 
 <div>
 <p>Copilot</p><p>
 Write better code with AI
 </p></div>
 
</a></li>
 <li>
 <a href="/features/code-review">
 
 <div>
 <p>Code review</p><p>
 Manage code changes
 </p></div>
 
</a></li>
 <li>
 <a href="/features/issues">
 
 <div>
 <p>Issues</p><p>
 Plan and track work
 </p></div>
 
</a></li>
 <li>
 <a href="/features/discussions">
 
 <div>
 <p>Discussions</p><p>
 Collaborate outside of code
 </p></div>
 
</a></li>
 </ul>
 <ul>
 <li>Explore</li>
 <li>
 <a href="/features">
 All features
 
</a></li>
 <li>
 <a href="https://docs.github.com/">
 Documentation
 
</a></li>
 <li>
 <a href="https://skills.github.com/">
 GitHub Skills
 
</a></li>
 <li>
 <a href="https://github.blog/">
 Blog
 
</a></li>
 </ul>
 </div>
</li>
 <li>
 
 <div>
 <ul>
 <li>For</li>
 <li>
 <a href="/enterprise">
 Enterprise
 
</a></li>
 <li>
 <a href="/team">
 Teams
 
</a></li>
 <li>
 <a href="/enterprise/startups">
 Startups
 
</a></li>
 <li>
 <a href="https://education.github.com/">
 Education
 
</a></li>
 </ul>
 <ul>
 <li>By Solution</li>
 <li>
 <a href="/solutions/ci-cd/">
 CI/CD &amp; Automation
 
</a></li>
 <li>
 <a href="https://resources.github.com/devops/">
 DevOps
 
</a></li>
 <li>
 <a href="https://resources.github.com/devops/fundamentals/devsecops/">
 DevSecOps
 
</a></li>
 </ul>
 <ul>
 <li>Case Studies</li>
 <li>
 <a href="/customer-stories">
 Customer Stories
 
</a></li>
 <li>
 <a href="https://resources.github.com/">
 Resources
 
</a></li>
 </ul>
 </div>
</li>
 <li>
 
 <div>
 <ul>
 <li>
 <a href="/sponsors">
 
 <div>
 <p>GitHub Sponsors</p><p>
 Fund open source developers
 </p></div>
 
</a></li>
 </ul>
 <ul>
 <li>
 <a href="/readme">
 
 <div>
 <p>The ReadME Project</p><p>
 GitHub community articles
 </p></div>
 
</a></li>
 </ul>
 <ul>
 <li>Repositories</li>
 <li>
 <a href="/topics">
 Topics
 
</a></li>
 <li>
 <a href="/trending">
 Trending
 
</a></li>
 <li>
 <a href="/collections">
 Collections
 
</a></li>
 </ul>
 </div>
</li>
 <li>
 <a href="/pricing">Pricing</a>
</li>
 </ul>
 </div>||||I|||| Skip to content
 Toggle navigation
 Sign up
 javascript-tutorial
 * Product
 + Actions
 Automate any workflow
 + Packages
 Host and manage packages
 + Security
 Find and fix vulnerabilities
 + Codespaces
 Instant dev environments
 + Copilot
 Write better code with AI
 + Code review
 Manage code changes
 + Issues
 Plan and track work
 + Discussions
 Collaborate outside of code
 + Explore
 + All features
 + Documentation
 + GitHub Skills
 + Blog
 * Solutions
 + For
 + Enterprise
 + Teams
 + Startups
 + Education
 + By Solution
 + CI/CD & Automation
 + DevOps
 + DevSecOps
 + Case Studies
 + Customer Stories
 + Resources
 * Open Source
 + GitHub Sponsors
 Fund open source developers
 + The ReadME Project
 GitHub community articles
 + Repositories
 + Topics
 + Trending
 + Collections
 * Pricing
 * In this organization All GitHub ↵
 Jump to ↵
 * No suggested jump to results
 * In this organization All GitHub ↵
 Jump to ↵
 * Search All GitHub ↵
 Jump to ↵
 * In this organization All GitHub ↵
 Jump to ↵
 Sign in
 Sign up
 {{ message }}

 The Modern JavaScript Tutorial

 The Modern JavaScript Tutorial
 * 710 followers
 * https://javascript.info
 * iliakan@javascript.info
 * Overview
 * Repositories
 * Projects
 * Packages
 * People
 More
 * Overview
 * Repositories
 * Projects
 * Packages
 * People

 Popular repositories

 1. en.javascript.info Public

 Modern JavaScript Tutorial

 HTML 20k 3.5k

 2. zh.javascript.info Public

 现代 JavaScript 教程（The Modern JavaScript Tutorial）

 HTML 7.8k 991

 3. ru.javascript.info Public

 Современный учебник JavaScript

 HTML 3.4k 867

 4. ko.javascript.info Public

 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean )

 HTML 1.5k 798

 5. es.javascript.info Public

 Spanish translation of javascript.info site.

 HTML 406 198

 6. server Public

 Server for the Modern Javascript Tutorial

 JavaScript 397 120

 Repositories

 Type
 Select type
 All Public Sources Forks Archived Mirrors Templates
 Language
 Select language
 All CSS HTML JavaScript
 Sort
 Select order
 Last updated Name Stars
 * ja.javascript.info Public

 現代の JavaScript チュートリアル

 HTML 345 72 2 1 Updated Feb 6, 2023
 * it.javascript.info Public

 Modern JavaScript Tutorial in Italian

 HTML 64 49 3 (1 issue needs help) 2 Updated Feb 6, 2023
 * id.javascript.info Public

 Tutorial JavaScript Modern dalam Bahasa Indonesia

 HTML 113 80 3 2 Updated Feb 6, 2023
 * hy.javascript.info Public

 Modern JavaScript Tutorial in Armenian

 HTML 7 9 1 1 Updated Feb 6, 2023
 * hu.javascript.info Public

 Modern JavaScript Tutorial in Hungarian

 HTML 1 6 1 1 Updated Feb 6, 2023
 * hr.javascript.info Public

 Modern JavaScript Tutorial in Croatian

 HTML 2 0 1 1 Updated Feb 6, 2023
 * hi.javascript.info Public

 Modern JavaScript Tutorial in Hindi

 HTML 25 48 1 (1 issue needs help) 7 Updated Feb 6, 2023
 * he.javascript.info Public

 Modern JavaScript Tutorial in Hebrew

 HTML 3 4 2 1 Updated Feb 6, 2023
 * fr.javascript.info Public

 Modern JavaScript Tutorial

 HTML 144 84 3 (1 issue needs help) 4 Updated Feb 6, 2023
 * fi.javascript.info Public

 Modern JavaScript Tutorial in Finnish

 HTML 1 2 3 1 Updated Feb 6, 2023
 View all repositories

 People

 View all

 Top languages

 Loading…

 Most used topics

 javascript tutorial hacktoberfest portuguese romanian

 Footer

 © 2023 GitHub, Inc.

 Footer navigation

 * Terms
 * Privacy
 * Security
 * Status
 * Docs
 * Contact GitHub
 * Pricing
 * API
 * Training
 * Blog
 * About
 You can’t perform that action at this time.
 You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Actions 
 Automate any workflow
  
 
 
 
 
 
 
 Packages 
 Host and manage packages
  
 
 
 
 
 
 
 Security 
 Find and fix vulnerabilities
  
 
 
 
 
 
 
 Codespaces 
 Instant dev environments
  
 
 
 
 
 
 
 Copilot 
 Write better code with AI
  
 
 
 
 
 
 
 Code review 
 Manage code changes
  
 
 
 
 
 
 
 Issues 
 Plan and track work
  
 
 
 
 
 
 
 Discussions 
 Collaborate outside of code
  
 
 
 
 
 Explore
 
 
 All features
 
 
 
 
 Documentation
 
 
 
 
 GitHub Skills
 
 
 
 
 Blog
 
 
 
 
 
 
 
 
 For
 
 
 Enterprise
 
 
 
 
 Teams
 
 
 
 
 Startups
 
 
 
 
 Education
 
 
 
 
 By Solution
 
 
 CI/CD &amp; Automation
 
 
 
 
 DevOps
 
 
 
 
 DevSecOps
 
 
 
 
 Case Studies
 
 
 Customer Stories
 
 
 
 
 Resources
 
 
 
 
 
 
 
 
 
 
 
 
 GitHub Sponsors 
 Fund open source developers
  
 
 
 
 
 
 
 
 
 The ReadME Project 
 GitHub community articles
  
 
 
 
 
 Repositories
 
 
 Topics
 
 
 
 
 Trending
 
 
 
 
 Collections
 
 
 
 
 
 Pricing
The Modern JavaScript Tutorial
https://github.com/javascript-tutorial
https://www.udemy.com/course/modern-javascript/
The Modern JavaScript Bootcamp: Complete JavaScript Tutorial
2020-11-01
None
<div><div><p><strong>Have you tried to learn JavaScript before?</strong></p>
<p>JavaScript is the most popular programming language out there, but that doesn’t mean it’s easy to learn. You end up wasting time on out-of-date courses and incomplete YouTube tutorials that talk about a JavaScript features without showing how to use them when building real-world applications.</p>
<p>Sound familiar?</p>
<p><strong>I built this course to teach you how to build and launch your own JavaScript web applications. </strong></p>
<p>The Modern JavaScript Bootcamp starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.</p>
<p>This comprehensive course covers the modern ES6 and ES7 JavaScript features used in the real world. You’ll gain an understanding of the latest cutting-edge language features. </p>
<p>Getting experience writing code on your own is a big part of learning JavaScript. <strong>That’s why I’ve included over 80 challenges designed to get you writing code, adding app features, and solving a wide range of problems.</strong> These challenges will give you the skills and confidence needed to create your own web application.</p>
<p>There are no starter projects here. You’ll see what it takes to launch a JavaScript application, from the first line of code to the final deployed application.</p>
<p><strong>Who’s this course for?</strong></p>
<p><strong>1. People who are brand new to JavaScript. </strong>You want to dive into the world of programming and learn JavaScript. This might be your first programming course, or maybe you’ve worked with other languages before. Either way, you’re ready for this bootcamp.</p>
<p><strong>2. People who currently use JavaScript but want a better sense of mastery over the language. </strong>You picked up little tricks and snippets of code because you needed to solve a problem. Now you’re ready to master JavaScript as well as explore the latest from ES6 and ES7.</p>
<p><strong>You’ll learn JavaScript by doing, not watching.</strong></p>
<p>This course is not about watching videos, it’s about writing code. From the start, you’ll be building out each project from scratch as well as completing over 80 challenges designed to test and reinforce what you’ve learned.</p>
<p>During the class, you’ll build three JavaScript applications:</p>
<p>1. The first app, a note-taking app, is our starter application. You’ll learn the fundamentals of JavaScript and see exactly what it takes to build a program that allows users to add, edit, delete, and save their notes.</p>
<p>2. The second app, a to-do application, you’ll be building on your own. This will test your skills and ensure that you have the real-world experience and problem-solving skills that are essential for writing JavaScript code.</p>
<p>3. The last app, a hangman word game, is used to explore the world of asynchronous JavaScript. You’ll learn how to set up applications that rely on data from third-party services that can offer up dynamic, real-time information such as the user’s current location.</p>
<p><strong>Stay current in an ever changing world.</strong></p>
<p>The world of JavaScript is always changing, and that’s why I work to keep this course as up-to-date as possible. You can join knowing you’ll be learning the fundamentals of the language as well as the new language features that keep coming out.</p>
<p>This course uses the latest language features from ES6 and ES7.</p>
<p><strong>Everything you need comes in one easy-to-use package.</strong></p>
<p>There’s no need to worry if you’re learning the right skills to land that JavaScript job or launch that JavaScript app. I’ve mapped out everything you need to know in an interactive, easy-to-follow package designed to get you up and running in a couple of weeks.</p>
<p>By the end, you’ll be able to build and launch your own applications.</p>
<p><strong>There’s no better time to learn JavaScript.</strong></p>
<p>You’ve made a smart choice, because JavaScript is the most popular programming language out there. This is no exaggeration. This popularity and growth means more jobs and opportunities than ever before.</p>
<p>JavaScript powers the web. That means every company out there uses JavaScript, and the demand for JavaScript developers is only increasing. Companies from Google and Apple to Udemy itself all use JavaScript extensively. </p>
<p>JavaScript doesn’t stop with the web. It has quickly become a universal programming language capable of anything. JavaScript can be used to create desktop apps, server-side applications, native iOS/Android applications, and so much more. This course is your ticket into that ecosystem. </p>
<p><strong>Get access to fast support if you get stuck.</strong></p>
<p>There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question that comes my way.</p>
<p>I’ll work with you to get you unstuck and back on track. It’s one of the reasons students love taking my courses. Don’t take my word for it. Check out the student reviews below.</p>
<p><em>“This is the absolute best course I've taken on Udemy. Andrew is amazing at explaining things concisely, and the flow of the course is perfect. He doesn't skip over anything and he doesn't over-explain anything. On top of all that, he responds to questions so quickly that you won't be stuck at any point."</em> - Tanya Gamarian</p>
<p><em>"The lessons are of high quality and even more important, he actually takes time to answer your questions!"</em> - Thomas Vercamer</p>
<p>I guarantee that this is the most up-to-date and engaging JavaScript course available, and it comes with a Udemy 30-day money-back guarantee.</p>
<p>I can’t wait to see you on the inside!</p>
<p>- Andrew</p></div></div>||||I|||| Skip to content
 Categories
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 Search for anything
 Development
 Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
 Business
 Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
 Finance & Accounting
 Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
 IT & Software
 IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
 Office Productivity
 Microsoft Apple Google SAP Oracle Other Office Productivity
 Personal Development
 Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
 Design
 Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
 Marketing
 Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
 Lifestyle
 Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
 Photography & Video
 Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
 Health & Fitness
 Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
 Music
 Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
 Teaching & Academics
 Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
 Web Development JavaScript React JS CSS Angular Node.Js ASP.NET Core Typescript HTML5
 AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS CompTIA Security+ Cisco CCNA AWS Certified Developer - Associate
 Microsoft Power BI SQL Data Modeling Business Analysis Tableau Data Analysis Data Warehouse DAX Business Intelligence
 Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
 Google Flutter Android Development iOS Development React Native Dart (programming language) Swift SwiftUI Kotlin Mobile App Development
 Graphic Design Photoshop Adobe Illustrator Canva Drawing Procreate Digital Illustration App Digital Painting InDesign Design Theory
 Life Coach Training Personal Development Neuro-Linguistic Programming Personal Transformation Sound Therapy Life Purpose Mindfulness CBT Cognitive Behavioral Therapy Emotional Intelligence
 Business Fundamentals Entrepreneurship Fundamentals Freelancing Online Business Startup Business Strategy Business Plan Home Business Blogging
 Digital Marketing Social Media Marketing Marketing Strategy Google Analytics Copywriting ChatGPT Startup Internet Marketing Email Marketing
 Preview this course

 DevelopmentWeb DevelopmentJavaScript
 Preview this course

 The Modern JavaScript Bootcamp

 Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7!
 Rating: 4.6 out of 5 4.6 (12,768 ratings)
 50,147 students
 Created by Andrew Mead
 Last updated 11/2020
 English
 English [Auto], Korean [Auto] , 4 more

 What you'll learn

 * Learn JavaScript by building three real-world web applications
 * Gain a deep understanding of how JavaScript works behind the scenes
 * Explore the latest cutting-edge features from ES6 and ES7
 * Test your skills and gain confidence by completing over 80 coding challenges
 * Learn how to deploy your application to the web so you can share them with everyone
 * Learn how to use Promises and Async/Await with asynchronous JavaScript
 * Get more done by learning how to debug and fix your code when things go wrong
 * Get access to a free 80 page PDF guide with lecture notes, code samples, and documentation links

 Requirements

 * No programming experience is required to take this course. I’ll walk you through the entire process from scratch!
 * All you need is a computer (Windows, macOS, or Linux) with an internet connection (Windows, macOS, or Linux)

 Description

 Have you tried to learn JavaScript before?

 JavaScript is the most popular programming language out there, but that doesn’t mean it’s easy to learn. You end up wasting time on out-of-date courses and incomplete YouTube tutorials that talk about a JavaScript features without showing how to use them when building real-world applications.

 Sound familiar?

 I built this course to teach you how to build and launch your own JavaScript web applications.

 The Modern JavaScript Bootcamp starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.

 This comprehensive course covers the modern ES6 and ES7 JavaScript features used in the real world. You’ll gain an understanding of the latest cutting-edge language features.

 Getting experience writing code on your own is a big part of learning JavaScript. That’s why I’ve included over 80 challenges designed to get you writing code, adding app features, and solving a wide range of problems. These challenges will give you the skills and confidence needed to create your own web application.

 There are no starter projects here. You’ll see what it takes to launch a JavaScript application, from the first line of code to the final deployed application.

 Who’s this course for?

 1. People who are brand new to JavaScript. You want to dive into the world of programming and learn JavaScript. This might be your first programming course, or maybe you’ve worked with other languages before. Either way, you’re ready for this bootcamp.

 2. People who currently use JavaScript but want a better sense of mastery over the language. You picked up little tricks and snippets of code because you needed to solve a problem. Now you’re ready to master JavaScript as well as explore the latest from ES6 and ES7.

 You’ll learn JavaScript by doing, not watching.

 This course is not about watching videos, it’s about writing code. From the start, you’ll be building out each project from scratch as well as completing over 80 challenges designed to test and reinforce what you’ve learned.

 During the class, you’ll build three JavaScript applications:

 1. The first app, a note-taking app, is our starter application. You’ll learn the fundamentals of JavaScript and see exactly what it takes to build a program that allows users to add, edit, delete, and save their notes.

 2. The second app, a to-do application, you’ll be building on your own. This will test your skills and ensure that you have the real-world experience and problem-solving skills that are essential for writing JavaScript code.

 3. The last app, a hangman word game, is used to explore the world of asynchronous JavaScript. You’ll learn how to set up applications that rely on data from third-party services that can offer up dynamic, real-time information such as the user’s current location.

 Stay current in an ever changing world.

 The world of JavaScript is always changing, and that’s why I work to keep this course as up-to-date as possible. You can join knowing you’ll be learning the fundamentals of the language as well as the new language features that keep coming out.

 This course uses the latest language features from ES6 and ES7.

 Everything you need comes in one easy-to-use package.

 There’s no need to worry if you’re learning the right skills to land that JavaScript job or launch that JavaScript app. I’ve mapped out everything you need to know in an interactive, easy-to-follow package designed to get you up and running in a couple of weeks.

 By the end, you’ll be able to build and launch your own applications.

 There’s no better time to learn JavaScript.

 You’ve made a smart choice, because JavaScript is the most popular programming language out there. This is no exaggeration. This popularity and growth means more jobs and opportunities than ever before.

 JavaScript powers the web. That means every company out there uses JavaScript, and the demand for JavaScript developers is only increasing. Companies from Google and Apple to Udemy itself all use JavaScript extensively.

 JavaScript doesn’t stop with the web. It has quickly become a universal programming language capable of anything. JavaScript can be used to create desktop apps, server-side applications, native iOS/Android applications, and so much more. This course is your ticket into that ecosystem.

 Get access to fast support if you get stuck.

 There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question that comes my way.

 I’ll work with you to get you unstuck and back on track. It’s one of the reasons students love taking my courses. Don’t take my word for it. Check out the student reviews below.

 “This is the absolute best course I've taken on Udemy. Andrew is amazing at explaining things concisely, and the flow of the course is perfect. He doesn't skip over anything and he doesn't over-explain anything. On top of all that, he responds to questions so quickly that you won't be stuck at any point." - Tanya Gamarian

 "The lessons are of high quality and even more important, he actually takes time to answer your questions!" - Thomas Vercamer

 I guarantee that this is the most up-to-date and engaging JavaScript course available, and it comes with a Udemy 30-day money-back guarantee.

 I can’t wait to see you on the inside!

 - Andrew

 Who this course is for:

 * Learning JavaScript for the first time? Already using JavaScript and want to master the language? This course is for you!
 * This course if for anyone who wants to use JavaScript to launch an application, switch careers, or freelance as a JavaScript developer.
 Show more Show less

 Instructor

 Andrew Mead
 A Full-stack Developer & Teacher
 * 4.5 Instructor Rating
 * 110,109 Reviews
 * 412,871 Students
 * 4 Courses

 I'm Andrew, a full-stack developer living in beautiful Philadelphia!

 I launched my first Udemy course in 2014 and had a blast teaching and helping others. Since then, I've launched 3 courses with over 110,000 students and over 18,000 5-star reviews.

 I currently teach JavaScript, React, and Node.

 Before I ever heard about Udemy or thought about teaching, I created a web app development company. I've helped companies of all sizes launch production web applications to their customers. I've had the honor of working with awesome companies like Siemens, Mixergy, and Parkloco.

 I have a Computer Science degree from Temple University, and I've been programming for just over a decade. I love creating, programming, launching, learning, teaching, and biking.

 I can't wait to see you inside one of my courses!

 Show more Show less

 Top companies choose Udemy Business to build in-demand career skills.
 English
 * Udemy Business
 * Teach on Udemy
 * Get the app
 * About us
 * Contact us
 * Careers
 * Blog
 * Help and Support
 * Affiliate
 * Investors
 * Terms
 * Privacy policy
 * Sitemap
 * Accessibility statement
 © 2023 Udemy, Inc.
Have you tried to learn JavaScript before? 
JavaScript is the most popular programming language out there, but that doesn’t mean it’s easy to learn. You end up wasting time on out-of-date courses and incomplete YouTube tutorials that talk about a JavaScript features without showing how to use them when building real-world applications.
Sound familiar?
 I built this course to teach you how to build and launch your own JavaScript web applications.  
The Modern JavaScript Bootcamp starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.
This comprehensive course covers the modern ES6 and ES7 JavaScript features used in the real world. You’ll gain an understanding of the latest cutting-edge language features. 
Getting experience writing code on your own is a big part of learning JavaScript. That’s why I’ve included over 80 challenges designed to get you writing code, adding app features, and solving a wide range of problems. These challenges will give you the skills and confidence needed to create your own web application.
There are no starter projects here. You’ll see what it takes to launch a JavaScript application, from the first line of code to the final deployed application.
 Who’s this course for? 
 1. People who are brand new to JavaScript. You want to dive into the world of programming and learn JavaScript. This might be your first programming course, or maybe you’ve worked with other languages before. Either way, you’re ready for this bootcamp.
 2. People who currently use JavaScript but want a better sense of mastery over the language. You picked up little tricks and snippets of code because you needed to solve a problem. Now you’re ready to master JavaScript as well as explore the latest from ES6 and ES7.
 You’ll learn JavaScript by doing, not watching. 
This course is not about watching videos, it’s about writing code. From the start, you’ll be building out each project from scratch as well as completing over 80 challenges designed to test and reinforce what you’ve learned.
During the class, you’ll build three JavaScript applications:
1. The first app, a note-taking app, is our starter application. You’ll learn the fundamentals of JavaScript and see exactly what it takes to build a program that allows users to add, edit, delete, and save their notes.
2. The second app, a to-do application, you’ll be building on your own. This will test your skills and ensure that you have the real-world experience and problem-solving skills that are essential for writing JavaScript code.
3. The last app, a hangman word game, is used to explore the world of asynchronous JavaScript. You’ll learn how to set up applications that rely on data from third-party services that can offer up dynamic, real-time information such as the user’s current location.
 Stay current in an ever changing world. 
The world of JavaScript is always changing, and that’s why I work to keep this course as up-to-date as possible. You can join knowing you’ll be learning the fundamentals of the language as well as the new language features that keep coming out.
This course uses the latest language features from ES6 and ES7.
 Everything you need comes in one easy-to-use package. 
There’s no need to worry if you’re learning the right skills to land that JavaScript job or launch that JavaScript app. I’ve mapped out everything you need to know in an interactive, easy-to-follow package designed to get you up and running in a couple of weeks.
By the end, you’ll be able to build and launch your own applications.
 There’s no better time to learn JavaScript. 
You’ve made a smart choice, because JavaScript is the most popular programming language out there. This is no exaggeration. This popularity and growth means more jobs and opportunities than ever before.
JavaScript powers the web. That means every company out there uses JavaScript, and the demand for JavaScript developers is only increasing. Companies from Google and Apple to Udemy itself all use JavaScript extensively. 
JavaScript doesn’t stop with the web. It has quickly become a universal programming language capable of anything. JavaScript can be used to create desktop apps, server-side applications, native iOS/Android applications, and so much more. This course is your ticket into that ecosystem. 
 Get access to fast support if you get stuck. 
There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question that comes my way.
I’ll work with you to get you unstuck and back on track. It’s one of the reasons students love taking my courses. Don’t take my word for it. Check out the student reviews below.
 “This is the absolute best course I've taken on Udemy. Andrew is amazing at explaining things concisely, and the flow of the course is perfect. He doesn't skip over anything and he doesn't over-explain anything. On top of all that, he responds to questions so quickly that you won't be stuck at any point." - Tanya Gamarian
 "The lessons are of high quality and even more important, he actually takes time to answer your questions!" - Thomas Vercamer
I guarantee that this is the most up-to-date and engaging JavaScript course available, and it comes with a Udemy 30-day money-back guarantee.
I can’t wait to see you on the inside!
- Andrew
The Modern JavaScript Bootcamp: Complete JavaScript Tutorial
https://www.udemy.com/course/modern-javascript/
https://www.courseduck.com/the-modern-javascript-tutorial-114
The Modern JavaScript Tutorial | CourseDuck
2023-01-01
None
<div><div> <div>
<h2>A community driven text-based JavaScript tutorial. Constantly updated and written in plain English. Very useful if you prefer to learn a language by reading rather than watching video.</h2>
<p>Created by: <a href="https://www.courseduck.com/ilya-kantor">Ilya Kantor </a></p> <p>Produced in 2011 </p>
</div>
<section>
<ul>
<li>
<a href="https://www.courseduck.com/">
</a>
<i></i>
</li>
<li>
<a href="https://www.courseduck.com/programming/">
</a>
<i></i>
</li>
<li>
<a href="https://www.courseduck.com/programming/javascript/">
</a>
</li>
</ul>
</section>
<div>
<div>
<h3> <p> Quality Score</p></h3>
<div>
<p>
</p>
<p>
</p>
</div>
</div>
<div>
<div>
<h4>
<p> Live Chat with CourseDuck's Co-Founder for Help
</p>
</h4>
</div>
<div>
<p></p>
</div>
</div>
<div>
<div>
<div>
<h4> <p> Course Description</p></h4>
</div>
<div>
<h4>
<p>Best Text Based Tutorial</p></h4>
</div>
</div>
<div>
<p>
</p>
</div>
</div>
<div>
<div>
<h3><p> Instructor Details</p></h3>
</div>
<div>
<div>
<p> </p>
</div>
<div>
<ul>
<h4><a href="https://www.courseduck.com/ilya-kantor">Ilya Kantor </a></h4>
<li> 4.9 Rating</li>
<li> 11 Reviews</li>
</ul>
</div>
</div>
<div>
<p>
Frontend developer and trainer.* 20+ years overall programming experience (12+ frontend).* 15+ years overall teaching experience (8+ frontend dev trainings, the rest is maths)* Ph.D in Computer Science, Masters degree in maths. </p>
</div>
</div>
<div>
<div>
<h3> <p> Students also recommend</p></h3>
</div>
<div>
<div>
<div>
<p>
</p>
</div>
<div>
<ul>
<li>
<h4><a href="https://www.courseduck.com/introduction-to-javascript-116/">Introduction to JavaScript (2015)</a></h4><a href="https://www.courseduck.com/introduction-to-javascript-116/">
</a></li><a href="https://www.courseduck.com/introduction-to-javascript-116/">
<li>
<p> </p>
</li>
<br/>
<li>
<ul>
<li> Provider: freeCodeCamp</li>
</ul>
</li>
</a></ul></div><a href="https://www.courseduck.com/introduction-to-javascript-116/">
<p> Free</p>
</a></div><div><a href="https://www.courseduck.com/introduction-to-javascript-116/">
<div>
<p>
</p>
</div>
</a><div><ul><a href="https://www.courseduck.com/introduction-to-javascript-116/">
</a><li><a href="https://www.courseduck.com/introduction-to-javascript-116/">
</a><h4><a href="https://www.courseduck.com/introduction-to-javascript-116/"></a><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">JavaScript Tutorial for Beginners by The Net Ninja (2015)</a></h4><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">
</a></li><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">
<li>
<p> </p>
</li>
<li>
<ul>
<li> Provider: YouTube</li>
<li> Time: 5h</li>
</ul>
</li>
</a></ul></div><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">
<p> Free</p>
</a></div><div><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">
<div>
<p>
</p>
</div>
</a><div><ul><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">
</a><li><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/">
</a><h4><a href="https://www.courseduck.com/javascript-tutorial-for-beginners-by-the-net-ninja-1001/"></a><a href="https://www.courseduck.com/code-programming-with-p5-js-for-beginners-257/">Code! Programming with p5.js for Beginners (2019)</a></h4><a href="https://www.courseduck.com/code-programming-with-p5-js-for-beginners-257/">
</a></li><a href="https://www.courseduck.com/code-programming-with-p5-js-for-beginners-257/">
<li>
<p> </p>
</li>
<li>
<ul>
<li> Provider: YouTube</li>
<li> Time: 7h</li>
</ul>
</li>
</a></ul></div><a href="https://www.courseduck.com/code-programming-with-p5-js-for-beginners-257/">
<p> Free</p>
</a></div></div>
</div>
<div>
<div>
<h3> 
<p>Reviews</p></h3>
</div>
<div>
<p>
</p>
</div>
</div>
</div>
<div>
<p>
<h3>javascript.info Coupon Price Tracker</h3>
</p>
<div>
<p>
</p>
</div>
<div>
<p></p>
</div>
<p>For any issues or feature requests please email CourseDuck's Co-Founder at <a href="mailto:michaelk@courseduck.com">michaelk@courseduck.com</a></p>
</div>
</div></div>||||I|||| Udemy Courses as low as $14.99 USD - View Coupon
 Categories
 * Blog
 * Write a Review
 * About
 * Nerd Gifts
 * Contact
 Categories Blog Write a Review About Us Programmer Gifts Contact Us My Account

 The Modern JavaScript Tutorial

 A community driven text-based JavaScript tutorial. Constantly updated and written in plain English. Very useful if you prefer to learn a language by reading rather than watching video.

 4.9
 ( 11 Reviews )

 Created by: Ilya Kantor

 Produced in 2011

 * Home
 * programming
 * javascript

 Quality Score

 Content Quality
 0 / 0
 Video Quality
 0 / 0
 Qualified Instructor
 0 / 0
 Course Pace
 0 / 0
 Course Depth & Coverage
 0 / 0

 Overall Score : 98 / 100

 Live Chat with CourseDuck's Co-Founder for Help

 Need help deciding on a javascript course? Or looking for more detail on Ilya Kantor's The Modern JavaScript Tutorial? Feel free to chat below.
 Join CourseDuck's Online Learning Discord Community

 Course Description

 javascript Awards Best Text Based Tutorial

 How it's done now. From the basics to advanced topics with simple, but detailed explanations.
 Intermediate Level

 Instructor Details

 Ilya Kantor

 * 4.9 Rating
 * 11 Reviews

 Frontend developer and trainer.* 20+ years overall programming experience (12+ frontend).* 15+ years overall teaching experience (8+ frontend dev trainings, the rest is maths)* Ph.D in Computer Science, Masters degree in maths.

 Students also recommend

 * Introduction to JavaScript (2015)

 * 4.1 (42 Reviews)


 * 
 + Provider: freeCodeCamp

 Free

 * JavaScript Tutorial for Beginners by The Net Ninja (2015)

 * 4.9 (21 Reviews)

 * 
 + Provider: YouTube
 + Time: 5h

 Free

 * Code! Programming with p5.js for Beginners (2019)

 * 4.2 (14 Reviews)

 * 
 + Provider: YouTube
 + Time: 7h

 Free

 More Courses

 Reviews

 4.9

 11 total reviews

 5 star 4 star 3 star 2 star 1 star
 % Complete
 % Complete
 % Complete
 % Complete
 % Complete
 Reset Filter
 Write a Review

 By bot00110 on 3/25/2017

 I stumbled upon javascript.info a year back when I was just getting into programming.Even with missing answers and broken links, it was immensely helpful. this is the first thing I recommend people learning javascript.

 By YvesMuyaBenda on 12/8/2017

 Javascript.info is both a very complete reference, and starts from the very basics, so is friendly to absolute beginners in Javascript. I suggest also that is a more friendly reference for required background knowledge than Crockford's Javscript the Good Parts and a better reference than Haverbeke's Eloquent Javascript.

 By Ayush Nigam on 6/15/2017

 This is the best source for javascript for beginners and experienced.

 By Mayank Pukhral on 7/20/2018

 This website will teach you each and every concept in a very detailed manner and will be very easy to grasp all the concepts.

 By Manisha Basra on 12/2/2018

 JavaScript.info really have good content for beginners. But along with theoretical knowledge of the concept you should practice coding, like you completed javascript fundamental topic you should practice solving some problems for example, reverse a string, if a string is palindrome, if a number is even or odd.

 By Barber231 on 11/9/2017

 The explainations are great, and accomplish what a lot of other tutorials fail at: explaining why you do things.Most tutorials just keep tell you how to do things, but do explain why you're doing them. They don't paint the big picture.

 By yankexe on 6/28/2018

 I have tried learning JS from a lot of places online but when I came across this site everything changed for me. All of the contents are well curated and topics are explained in simple terms along with figures sometimes to explain the concept.

 By PMMN on 2/11/2019

 It's a really good in depth explanation for a lot of things that not many other resources cover. I'd go back and forth between this and eloquent JavaScript for serious theoretical understanding of how js actually works.

 By karamarimo on 11/23/2017

 wow i can't believe we can read such an amazing tutorial for free. in-depth, lots of examples, lots of figures, covers everything you should know.

 By Suman B K on 8/6/2018

 I would say above is the best tutorial site for every javascript devs from newbies to even experts.

 By dylanhamada on 4/25/2019

 This book has helped me plug some gaps in my still inadequate knowledge of JS, and has been a great complementary piece to FCC. Every lesson Ive looked at so far also includes exercises that reinforce an understanding of the concepts being taught.

 Load More

 Visit Course Write a Review
 * Price: Free 0 Track Price
 * Provider: javascript.info
 * Year: 2011
 * Level: Intermediate
 * Language: English, Japanese, Russian, Chinese

 javascript.info Coupon Price Tracker

 Email Address * Email me if the price is less than:

 For any issues or feature requests please email CourseDuck's Co-Founder at michaelk@courseduck.com

 This Week's Top Course


 Full Stack Web Development

 Top Subjects

 * Programming
 * JavaScript
 * Python
 * Data Science
 * Machine Learning
 * Excel

 Small Print

 * Terms & Conditions
 * Privacy Policy
 * Udemy Coupon
 * Blog

 Company

 * About Us
 * Contact Us
 * Facebook
 * Twitter
 * LinkedIn
 * Discord

 Our Mission

 As featured on Harvard EDU, Stackify and Inc - CourseDuck's mission is to provide visitors with the confidence that they are picking the best course, tutorial or certificate for their future.


 Subscribe to Receive Our High-end Weekly Newsletter

 Copyright © 2023 Course Duck - All Rights Reserved.
A community driven text-based JavaScript tutorial. Constantly updated and written in plain English. Very useful if you prefer to learn a language by reading rather than watching video.
Created by: Ilya Kantor   Produced in 2011 
 
 
  Quality Score 
 Live Chat with CourseDuck's Co-Founder for Help
 
  Course Description 
Best Text Based Tutorial 
  Instructor Details 
 
 Ilya Kantor  
 4.9 Rating
 11 Reviews
Frontend developer and trainer.* 20+ years overall programming experience (12+ frontend).* 15+ years overall teaching experience (8+ frontend dev trainings, the rest is maths)* Ph.D in Computer Science, Masters degree in maths. 
  Students also recommend 
 Introduction to JavaScript (2015)  
  
 
 Provider: freeCodeCamp
   
 Free
   
   
  
    JavaScript Tutorial for Beginners by The Net Ninja (2015)  
  
 
 Provider: YouTube
 Time: 5h
   
 Free
   
   
  
    Code! Programming with p5.js for Beginners (2019)  
  
 
 Provider: YouTube
 Time: 7h
   
 Free
  
 
Reviews 
javascript.info Coupon Price Tracker
 
For any issues or feature requests please email CourseDuck's Co-Founder at michaelk@courseduck.com
The Modern JavaScript Tutorial | CourseDuck
https://www.courseduck.com/the-modern-javascript-tutorial-114
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_overview
JavaScript language overview - JavaScript | MDN
2023-11-15T00:00:00Z

<html><body><div><article><header></header><div><p>JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">object prototypes</a> and classes. It also supports functional programming since functions are <a href="https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function">first-class</a> objects that can be easily created via expressions and passed around like any other object.</p>
<p>This page serves as a quick overview of various JavaScript language features, written for readers with background in other languages, such as C or Java.</p></div><section><h2><a href="#data_types">Data types</a></h2><div><p>Let&#39;s start off by looking at the building blocks of any language: the types. JavaScript programs manipulate values, and those values all belong to a type. JavaScript offers seven <em>primitive types</em>:</p>
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#number_type">Number</a>: used for all number values (integer and floating point) except for <em>very</em> big integers.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#bigint_type">BigInt</a>: used for arbitrarily large integers.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type">String</a>: used to store text.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#boolean_type">Boolean</a>: <code>true</code> and <code>false</code> — usually used for conditional logic.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#symbol_type">Symbol</a>: used for creating unique identifiers that won&#39;t collide.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#undefined_type">Undefined</a>: indicating that a variable has not been assigned a value.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#null_type">Null</a>: indicating a deliberate non-value.</li>
</ul>
<p>Everything else is known as an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#objects">Object</a>. Common object types include:</p>
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a></li>
</ul>
<p>Functions aren&#39;t special data structures in JavaScript — they are just a special type of object that can be called.</p></div></section><section><h3><a href="#numbers">Numbers</a></h3><div><p>JavaScript has two built-in numeric types: Number and BigInt.</p>
<p>The Number type is a <a href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">IEEE 754 64-bit double-precision floating point value</a>, which means integers can be safely represented between <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER">-(2<sup>53</sup> − 1)</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER">2<sup>53</sup> − 1</a> without loss of precision, and floating point numbers can be stored all the way up to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE">1.79 × 10<sup>308</sup></a>. Within numbers, JavaScript does not distinguish between floating point numbers and integers.</p>
<div><pre><code>console<span>.</span><span>log</span><span>(</span><span>3</span> <span>/</span> <span>2</span><span>)</span><span>;</span> <span>// 1.5, not 1</span>
</code></pre></div>
<p>So an <em>apparent integer</em> is in fact <em>implicitly a float</em>. Because of IEEE 754 encoding, sometimes floating point arithmetic can be imprecise.</p>
<div><pre><code>console<span>.</span><span>log</span><span>(</span><span>0.1</span> <span>+</span> <span>0.2</span><span>)</span><span>;</span> <span>// 0.30000000000000004</span>
</code></pre></div>
<p>For operations that expect integers, such as bitwise operations, the number will be converted to a 32-bit integer.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_literals">Number literals</a> can also have prefixes to indicate the base (binary, octal, decimal, or hexadecimal), or an exponent suffix.</p>
<div><pre><code>console<span>.</span><span>log</span><span>(</span><span>0b111110111</span><span>)</span><span>;</span> <span>// 503</span>
console<span>.</span><span>log</span><span>(</span><span>0o767</span><span>)</span><span>;</span> <span>// 503</span>
console<span>.</span><span>log</span><span>(</span><span>0x1f7</span><span>)</span><span>;</span> <span>// 503</span>
console<span>.</span><span>log</span><span>(</span><span>5.03e2</span><span>)</span><span>;</span> <span>// 503</span>
</code></pre></div>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a> type is an arbitrary length integer. Its behavior is similar to C&#39;s integer types (e.g. division truncates to zero), except it can grow indefinitely. BigInts are specified with a number literal and an <code>n</code> suffix.</p>
<div><pre><code>console<span>.</span><span>log</span><span>(</span><span>-</span><span>3n</span> <span>/</span> <span>2n</span><span>)</span><span>;</span> <span>// -1n</span>
</code></pre></div>
<p>The standard <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators">arithmetic operators</a> are supported, including addition, subtraction, remainder arithmetic, etc. BigInts and numbers cannot be mixed in arithmetic operations.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object provides standard mathematical functions and constants.</p>
<div><pre><code>Math<span>.</span><span>sin</span><span>(</span><span>3.5</span><span>)</span><span>;</span>
<span>const</span> circumference <span>=</span> <span>2</span> <span>*</span> Math<span>.</span><span>PI</span> <span>*</span> r<span>;</span>
</code></pre></div>
<p>There are three ways to convert a string to a number:</p>
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt"><code>parseInt()</code></a>, which parses the string for an integer.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat"><code>parseFloat()</code></a>, which parses the string for a floating-point number.</li>
 <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number"><code>Number()</code></a> function, which parses a string as if it&#39;s a number literal and supports many different number representations.</li>
</ul>
<p>You can also use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">unary plus <code>+</code></a> as a shorthand for <code>Number()</code>.</p>
<p>Number values also include <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> (short for &#34;Not a Number&#34;) and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. Many &#34;invalid math&#34; operations will return <code>NaN</code> — for example, if attempting to parse a non-numeric string, or using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log"><code>Math.log()</code></a> on a negative value. Division by zero produces <code>Infinity</code> (positive or negative).</p>
<p><code>NaN</code> is contagious: if you provide it as an operand to any mathematical operation, the result will also be <code>NaN</code>. <code>NaN</code> is the only value in JavaScript that&#39;s not equal to itself (per IEEE 754 specification).</p></div></section><section><h3><a href="#strings">Strings</a></h3><div><p>Strings in JavaScript are sequences of Unicode characters. This should be welcome news to anyone who has had to deal with internationalization. More accurately, they are <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters">UTF-16 encoded</a>.</p>
<div><pre><code>console<span>.</span><span>log</span><span>(</span><span>&#34;Hello, world&#34;</span><span>)</span><span>;</span>
console<span>.</span><span>log</span><span>(</span><span>&#34;你好，世界！&#34;</span><span>)</span><span>;</span> <span>// Nearly all Unicode characters can be written literally in string literals</span>
</code></pre></div>
<p>Strings can be written with either single or double quotes — JavaScript does not have the distinction between characters and strings. If you want to represent a single character, you just use a string consisting of that single character.</p>
<div><pre><code>console<span>.</span><span>log</span><span>(</span><span>&#34;Hello&#34;</span><span>[</span><span>1</span><span>]</span> <span>===</span> <span>&#34;e&#34;</span><span>)</span><span>;</span> <span>// true</span>
</code></pre></div>
<p>To find the length of a string (in <a href="https://developer.mozilla.org/en-US/docs/Glossary/Code_unit">code units</a>), access its <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length"><code>length</code></a> property.</p>
<p>Strings have <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods">utility methods</a> to manipulate the string and access information about the string. Because all primitives are immutable by design, these methods return new strings.</p>
<p>The <code>+</code> operator is overloaded for strings: when one of the operands is a string, it performs string concatenation instead of number addition. A special <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">template literal</a> syntax allows you to write strings with embedded expressions more succinctly. Unlike Python&#39;s f-strings or C#&#39;s interpolated strings, template literals use backticks (not single or double quotes).</p>
<div><pre><code><span>const</span> age <span>=</span> <span>25</span><span>;</span>
console<span>.</span><span>log</span><span>(</span><span>&#34;I am &#34;</span> <span>+</span> age <span>+</span> <span>&#34; years old.&#34;</span><span>)</span><span>;</span> <span>// String concatenation</span>
console<span>.</span><span>log</span><span>(</span><span><span>`</span><span>I am </span><span><span>${</span>age<span>}</span></span><span> years old.</span><span>`</span></span><span>)</span><span>;</span> <span>// Template literal</span>
</code></pre></div></div></section><section><h3><a href="#other_types">Other types</a></h3><div><p>JavaScript distinguishes between <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null"><code>null</code></a>, which indicates a deliberate non-value (and is only accessible through the <code>null</code> keyword), and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, which indicates absence of value. There are many ways to obtain <code>undefined</code>:</p>
<ul>
 <li>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> statement with no value (<code>return;</code>) implicitly returns <code>undefined</code>.</li>
 <li>Accessing a nonexistent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> property (<code>obj.iDontExist</code>) returns <code>undefined</code>.</li>
 <li>A variable declaration without initialization (<code>let x;</code>) will implicitly initialize the variable to <code>undefined</code>.</li>
</ul>
<p>JavaScript has a Boolean type, with possible values <code>true</code> and <code>false</code> — both of which are keywords. Any value can be converted to a boolean according to the following rules:</p>
<ol>
 <li><code>false</code>, <code>0</code>, empty strings (<code>&#34;&#34;</code>), <code>NaN</code>, <code>null</code>, and <code>undefined</code> all become <code>false</code>.</li>
 <li>All other values become <code>true</code>.</li>
</ol>
<p>You can perform this conversion explicitly using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean"><code>Boolean()</code></a> function:</p>
<div><pre><code><span>Boolean</span><span>(</span><span>&#34;&#34;</span><span>)</span><span>;</span> <span>// false</span>
<span>Boolean</span><span>(</span><span>234</span><span>)</span><span>;</span> <span>// true</span>
</code></pre></div>
<p>However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an <code>if</code> statement (see <a href="#control_structures">Control structures</a>). For this reason, we sometimes speak of &#34;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a>&#34; and &#34;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy">falsy</a>&#34;, meaning values that become <code>true</code> and <code>false</code>, respectively, when used in boolean contexts.</p>
<p>Boolean operations such as <code>&amp;&amp;</code> (logical <em>and</em>), <code>||</code> (logical <em>or</em>), and <code>!</code> (logical <em>not</em>) are supported; see <a href="#operators">Operators</a>.</p>
<p>The Symbol type is often used to create unique identifiers. Every symbol created with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol"><code>Symbol()</code></a> function is guaranteed to be unique. In addition, there are registered symbols, which are shared constants, and well-known symbols, which are utilized by the language as &#34;protocols&#34; for certain operations. You can read more about them in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbol reference</a>.</p></div></section><section><h2><a href="#variables">Variables</a></h2><div><p>Variables in JavaScript are declared using one of three keywords: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a>.</p>
<p><code>let</code> allows you to declare block-level variables. The declared variable is available from the <em>block</em> it is enclosed in.</p>
<div><pre><code><span>let</span> a<span>;</span>
<span>let</span> name <span>=</span> <span>&#34;Simon&#34;</span><span>;</span>
<span>// myLetVariable is *not* visible out here</span>
<span>for</span> <span>(</span><span>let</span> myLetVariable <span>=</span> <span>0</span><span>;</span> myLetVariable <span>&lt;</span> <span>5</span><span>;</span> myLetVariable<span>++</span><span>)</span> <span>{</span>
 <span>// myLetVariable is only visible in here</span>
<span>}</span>
<span>// myLetVariable is *not* visible out here</span>
</code></pre></div>
<p><code>const</code> allows you to declare variables whose values are never intended to change. The variable is available from the <em>block</em> it is declared in.</p>
<div><pre><code><span>const</span> Pi <span>=</span> <span>3.14</span><span>;</span> <span>// Declare variable Pi</span>
console<span>.</span><span>log</span><span>(</span>Pi<span>)</span><span>;</span> <span>// 3.14</span>
</code></pre></div>
<p>A variable declared with <code>const</code> cannot be reassigned.</p>
<div><pre><code><span>const</span> Pi <span>=</span> <span>3.14</span><span>;</span>
Pi <span>=</span> <span>1</span><span>;</span> <span>// will throw an error because you cannot change a constant variable.</span>
</code></pre></div>
<p><code>const</code> declarations only prevent <em>reassignments</em> — they don&#39;t prevent <em>mutations</em> of the variable&#39;s value, if it&#39;s an object.</p>
<div><pre><code><span>const</span> obj <span>=</span> <span>{</span><span>}</span><span>;</span>
obj<span>.</span>a <span>=</span> <span>1</span><span>;</span> <span>// no error</span>
console<span>.</span><span>log</span><span>(</span>obj<span>)</span><span>;</span> <span>// { a: 1 }</span>
</code></pre></div>
<p><code>var</code> declarations can have surprising behaviors (for example, they are not block-scoped), and they are discouraged in modern JavaScript code.</p>
<p>If you declare a variable without assigning any value to it, its value is <code>undefined</code>. You can&#39;t declare a <code>const</code> variable without an initializer, because you can&#39;t change it later anyway.</p>
<p><code>let</code> and <code>const</code> declared variables still occupy the entire scope they are defined in, and are in a region known as the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz">temporal dead zone</a> before the actual line of declaration. This has some interesting interactions with variable shadowing, which don&#39;t occur in other languages.</p>
<div><pre><code><span>function</span> <span>foo</span><span>(</span><span>x<span>,</span> condition</span><span>)</span> <span>{</span>
 <span>if</span> <span>(</span>condition<span>)</span> <span>{</span>
 console<span>.</span><span>log</span><span>(</span>x<span>)</span><span>;</span>
 <span>const</span> x <span>=</span> <span>2</span><span>;</span>
 console<span>.</span><span>log</span><span>(</span>x<span>)</span><span>;</span>
 <span>}</span>
<span>}</span>
<span>foo</span><span>(</span><span>1</span><span>,</span> <span>true</span><span>)</span><span>;</span>
</code></pre></div>
<p>In most other languages, this would log &#34;1&#34; and &#34;2&#34;, because before the <code>const x = 2</code> line, <code>x</code> should still refer to the parameter <code>x</code> in the upper scope. In JavaScript, because each declaration occupies the entire scope, this would throw an error on the first <code>console.log</code>: &#34;Cannot access &#39;x&#39; before initialization&#34;. For more information, see the reference page of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>.</p>
<p>JavaScript is <em>dynamically typed</em>. Types (as described in <a href="#data_types">the previous section</a>) are only associated with values, but not with variables. For <code>let</code>-declared variables, you can always change its type through reassignment.</p>
</div></section><section><h2><a href="#operators">Operators</a></h2><div><p>JavaScript&#39;s numeric operators include <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code> (remainder), and <code>**</code> (exponentiation). Values are assigned using <code>=</code>. Each binary operator also has a compound assignment counterpart such as <code>+=</code> and <code>-=</code>, which extend out to <code>x = x operator y</code>.</p>
<p>You can use <code>++</code> and <code>--</code> to increment and decrement respectively. These can be used as a prefix or postfix operators.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition"><code>+</code> operator</a> also does string concatenation:</p>
<div><pre><code><span>&#34;hello&#34;</span> <span>+</span> <span>&#34; world&#34;</span><span>;</span> <span>// &#34;hello world&#34;</span>
</code></pre></div>
<p>If you add a string to a number (or other value) everything is converted into a string first. This might trip you up:</p>
<div><pre><code><span>&#34;3&#34;</span> <span>+</span> <span>4</span> <span>+</span> <span>5</span><span>;</span> <span>// &#34;345&#34;</span>
<span>3</span> <span>+</span> <span>4</span> <span>+</span> <span>&#34;5&#34;</span><span>;</span> <span>// &#34;75&#34;</span>
</code></pre></div>
<p>Adding an empty string to something is a useful way of converting it to a string itself.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators">Comparisons</a> in JavaScript can be made using <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> and <code>&gt;=</code>, which work for both strings and numbers. For equality, the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality">double-equals operator</a> performs type coercion if you give it different types, with sometimes interesting results. On the other hand, the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">triple-equals operator</a> does not attempt type coercion, and is usually preferred.</p>
<div><pre><code><span>123</span> <span>==</span> <span>&#34;123&#34;</span><span>;</span> <span>// true</span>
<span>1</span> <span>==</span> <span>true</span><span>;</span> <span>// true</span>
<span>123</span> <span>===</span> <span>&#34;123&#34;</span><span>;</span> <span>// false</span>
<span>1</span> <span>===</span> <span>true</span><span>;</span> <span>// false</span>
</code></pre></div>
<p>The double-equals and triple-equals also have their inequality counterparts: <code>!=</code> and <code>!==</code>.</p>
<p>JavaScript also has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#bitwise_shift_operators">bitwise operators</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#binary_logical_operators">logical operators</a>. Notably, logical operators don&#39;t work with boolean values only — they work by the &#34;truthiness&#34; of the value.</p>
<div><pre><code><span>const</span> a <span>=</span> <span>0</span> <span>&amp;&amp;</span> <span>&#34;Hello&#34;</span><span>;</span> <span>// 0 because 0 is &#34;falsy&#34;</span>
<span>const</span> b <span>=</span> <span>&#34;Hello&#34;</span> <span>||</span> <span>&#34;world&#34;</span><span>;</span> <span>// &#34;Hello&#34; because both &#34;Hello&#34; and &#34;world&#34; are &#34;truthy&#34;</span>
</code></pre></div>
<p>The <code>&amp;&amp;</code> and <code>||</code> operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objects before accessing their attributes:</p>
<div><pre><code><span>const</span> name <span>=</span> o <span>&amp;&amp;</span> o<span>.</span><span>getName</span><span>(</span><span>)</span><span>;</span>
</code></pre></div>
<p>Or for caching values (when falsy values are invalid):</p>
<div><pre><code><span>const</span> name <span>=</span> cachedName <span>||</span> <span>(</span>cachedName <span>=</span> <span>getName</span><span>(</span><span>)</span><span>)</span><span>;</span>
</code></pre></div>
<p>For a comprehensive list of operators, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators">guide page</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">reference section</a>. You may be especially interested in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence">operator precedence</a>.</p></div></section><section><h2><a href="#grammar">Grammar</a></h2><div><p>JavaScript grammar is very similar to the C family. There are a few points worth mentioning:</p>
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers">Identifiers</a> can have Unicode characters, but they cannot be one of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">reserved words</a>.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#comments">Comments</a> are commonly <code>//</code> or <code>/* */</code>, while many other scripting languages like Perl, Python, and Bash use <code>#</code>.</li>
 <li>Semicolons are optional in JavaScript — the language <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion">automatically inserts them</a> when needed. However, there are certain caveats to watch out for, since unlike Python, semicolons are still part of the syntax.</li>
</ul>
<p>For an in-depth look at the JavaScript grammar, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">reference page for lexical grammar</a>.</p></div></section><section><h2><a href="#control_structures">Control structures</a></h2><div><p>JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code> and <code>else</code></a>; you can chain them together:</p>
<div><pre><code><span>let</span> name <span>=</span> <span>&#34;kittens&#34;</span><span>;</span>
<span>if</span> <span>(</span>name <span>===</span> <span>&#34;puppies&#34;</span><span>)</span> <span>{</span>
 name <span>+=</span> <span>&#34; woof&#34;</span><span>;</span>
<span>}</span> <span>else</span> <span>if</span> <span>(</span>name <span>===</span> <span>&#34;kittens&#34;</span><span>)</span> <span>{</span>
 name <span>+=</span> <span>&#34; meow&#34;</span><span>;</span>
<span>}</span> <span>else</span> <span>{</span>
 name <span>+=</span> <span>&#34;!&#34;</span><span>;</span>
<span>}</span>
name <span>===</span> <span>&#34;kittens meow&#34;</span><span>;</span>
</code></pre></div>
<p>JavaScript doesn&#39;t have <code>elif</code>, and <code>else if</code> is really just an <code>else</code> branch comprised of a single <code>if</code> statement.</p>
<p>JavaScript has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a> loops and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a> loops. The first is good for basic looping; the second is for loops where you wish to ensure that the body of the loop is executed at least once:</p>
<div><pre><code><span>while</span> <span>(</span><span>true</span><span>)</span> <span>{</span>
 <span>// an infinite loop!</span>
<span>}</span>
<span>let</span> input<span>;</span>
<span>do</span> <span>{</span>
 input <span>=</span> <span>get_input</span><span>(</span><span>)</span><span>;</span>
<span>}</span> <span>while</span> <span>(</span><span>inputIsNotValid</span><span>(</span>input<span>)</span><span>)</span><span>;</span>
</code></pre></div>
<p>JavaScript&#39;s <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loop</a> is the same as that in C and Java: it lets you provide the control information for your loop on a single line.</p>
<div><pre><code><span>for</span> <span>(</span><span>let</span> i <span>=</span> <span>0</span><span>;</span> i <span>&lt;</span> <span>5</span><span>;</span> i<span>++</span><span>)</span> <span>{</span>
 <span>// Will execute 5 times</span>
<span>}</span>
</code></pre></div>
<p>JavaScript also contains two other prominent for loops: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>, which iterates over <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterables</a>, most notably arrays, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>, which visits all <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">enumerable</a> properties of an object.</p>
<div><pre><code><span>for</span> <span>(</span><span>const</span> value <span>of</span> array<span>)</span> <span>{</span>
 <span>// do something with value</span>
<span>}</span>
<span>for</span> <span>(</span><span>const</span> property <span>in</span> object<span>)</span> <span>{</span>
 <span>// do something with object property</span>
<span>}</span>
</code></pre></div>
<p>The <code>switch</code> statement can be used for multiple branches based on equality checking.</p>
<div><pre><code><span>switch</span> <span>(</span>action<span>)</span> <span>{</span>
 <span>case</span> <span>&#34;draw&#34;</span><span>:</span>
 <span>drawIt</span><span>(</span><span>)</span><span>;</span>
 <span>break</span><span>;</span>
 <span>case</span> <span>&#34;eat&#34;</span><span>:</span>
 <span>eatIt</span><span>(</span><span>)</span><span>;</span>
 <span>break</span><span>;</span>
 <span>default</span><span>:</span>
 <span>doNothing</span><span>(</span><span>)</span><span>;</span>
<span>}</span>
</code></pre></div>
<p>Similar to C, case clauses are conceptually the same as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label">labels</a>, so if you don&#39;t add a <code>break</code> statement, execution will &#34;fall through&#34; to the next level. However, they are not actually jump tables — any expression can be part of the <code>case</code> clause, not just string or number literals, and they would be evaluated one-by-one until one equals the value being matched. Comparison takes place between the two using the <code>===</code> operator.</p>
<p>Unlike some languages like Rust, control-flow structures are statements in JavaScript, meaning you can&#39;t assign them to a variable, like <code>const a = if (x) { 1 } else { 2 }</code>.</p>
<p>JavaScript errors are handled using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a> statement.</p>
<div><pre><code><span>try</span> <span>{</span>
 <span>buildMySite</span><span>(</span><span>&#34;./website&#34;</span><span>)</span><span>;</span>
<span>}</span> <span>catch</span> <span>(</span>e<span>)</span> <span>{</span>
 console<span>.</span><span>error</span><span>(</span><span>&#34;Building site failed:&#34;</span><span>,</span> e<span>)</span><span>;</span>
<span>}</span>
</code></pre></div>
<p>Errors can be thrown using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw"><code>throw</code></a> statement. Many built-in operations may throw as well.</p>
<div><pre><code><span>function</span> <span>buildMySite</span><span>(</span><span>siteDirectory</span><span>)</span> <span>{</span>
 <span>if</span> <span>(</span><span>!</span><span>pathExists</span><span>(</span>siteDirectory<span>)</span><span>)</span> <span>{</span>
 <span>throw</span> <span>new</span> <span>Error</span><span>(</span><span>&#34;Site directory does not exist&#34;</span><span>)</span><span>;</span>
 <span>}</span>
<span>}</span>
</code></pre></div>
<p>In general, you can&#39;t tell the type of the error you just caught, because anything can be thrown from a <code>throw</code> statement. However, you can usually assume it&#39;s an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> instance, as is the example above. There are some subclasses of <code>Error</code> built-in, like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError"><code>RangeError</code></a>, that you can use to provide extra semantics about the error. There&#39;s no conditional catch in JavaScript — if you only want to handle one type of error, you need to catch everything, identify the type of error using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a>, and then rethrow the other cases.</p>
<div><pre><code><span>try</span> <span>{</span>
 <span>buildMySite</span><span>(</span><span>&#34;./website&#34;</span><span>)</span><span>;</span>
<span>}</span> <span>catch</span> <span>(</span>e<span>)</span> <span>{</span>
 <span>if</span> <span>(</span>e <span>instanceof</span> <span>RangeError</span><span>)</span> <span>{</span>
 console<span>.</span><span>error</span><span>(</span><span>&#34;Seems like a parameter is out of range:&#34;</span><span>,</span> e<span>)</span><span>;</span>
 console<span>.</span><span>log</span><span>(</span><span>&#34;Retrying...&#34;</span><span>)</span><span>;</span>
 <span>buildMySite</span><span>(</span><span>&#34;./website&#34;</span><span>)</span><span>;</span>
 <span>}</span> <span>else</span> <span>{</span>
 <span>// Don&#39;t know how to handle other error types; throw them so</span>
 <span>// something else up in the call stack may catch and handle it</span>
 <span>throw</span> e<span>;</span>
 <span>}</span>
<span>}</span>
</code></pre></div>
<p>If an error is uncaught by any <code>try...catch</code> in the call stack, the program will exit.</p>
<p>For a comprehensive list of control flow statements, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">reference section</a>.</p></div></section><section><h2><a href="#objects">Objects</a></h2><div><p>JavaScript objects can be thought of as collections of key-value pairs. As such, they are similar to:</p>
<ul>
 <li>Dictionaries in Python.</li>
 <li>Hashes in Perl and Ruby.</li>
 <li>Hash tables in C and C++.</li>
 <li>HashMaps in Java.</li>
 <li>Associative arrays in PHP.</li>
</ul>
<p>JavaScript objects are hashes. Unlike objects in statically typed languages, objects in JavaScript do not have fixed shapes — properties can be added, deleted, re-ordered, mutated, or dynamically queried at any time. Object keys are always <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">strings</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbols</a> — even array indices, which are canonically integers, are actually strings under the hood.</p>
<p>Objects are usually created using the literal syntax:</p>
<div><pre><code><span>const</span> obj <span>=</span> <span>{</span>
 <span>name</span><span>:</span> <span>&#34;Carrot&#34;</span><span>,</span>
 <span>for</span><span>:</span> <span>&#34;Max&#34;</span><span>,</span>
 <span>details</span><span>:</span> <span>{</span>
 <span>color</span><span>:</span> <span>&#34;orange&#34;</span><span>,</span>
 <span>size</span><span>:</span> <span>12</span><span>,</span>
 <span>}</span><span>,</span>
<span>}</span><span>;</span>
</code></pre></div>
<p>Object properties can be <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors">accessed</a> using dot (<code>.</code>) or square brackets (<code>[]</code>). When using the dot notation, the key must be a valid <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers">identifier</a>. Square brackets, on the other hand, allow indexing the object with a dynamic key value.</p>
<div><pre><code><span>// Dot notation</span>
obj<span>.</span>name <span>=</span> <span>&#34;Simon&#34;</span><span>;</span>
<span>const</span> name <span>=</span> obj<span>.</span>name<span>;</span>
<span>// Bracket notation</span>
obj<span>[</span><span>&#34;name&#34;</span><span>]</span> <span>=</span> <span>&#34;Simon&#34;</span><span>;</span>
<span>const</span> name <span>=</span> obj<span>[</span><span>&#34;name&#34;</span><span>]</span><span>;</span>
<span>// Can use a variable to define a key</span>
<span>const</span> userName <span>=</span> <span>prompt</span><span>(</span><span>&#34;what is your key?&#34;</span><span>)</span><span>;</span>
obj<span>[</span>userName<span>]</span> <span>=</span> <span>prompt</span><span>(</span><span>&#34;what is its value?&#34;</span><span>)</span><span>;</span>
</code></pre></div>
<p>Property access can be chained together:</p>
<div><pre><code>obj<span>.</span>details<span>.</span>color<span>;</span> <span>// orange</span>
obj<span>[</span><span>&#34;details&#34;</span><span>]</span><span>[</span><span>&#34;size&#34;</span><span>]</span><span>;</span> <span>// 12</span>
</code></pre></div>
<p>Objects are always references, so unless something is explicitly copying the object, mutations to an object would be visible to the outside.</p>
<div><pre><code><span>const</span> obj <span>=</span> <span>{</span><span>}</span><span>;</span>
<span>function</span> <span>doSomething</span><span>(</span><span>o</span><span>)</span> <span>{</span>
 o<span>.</span>x <span>=</span> <span>1</span><span>;</span>
<span>}</span>
<span>doSomething</span><span>(</span>obj<span>)</span><span>;</span>
console<span>.</span><span>log</span><span>(</span>obj<span>.</span>x<span>)</span><span>;</span> <span>// 1</span>
</code></pre></div>
<p>This also means two separately created objects will never be equal (<code>!==</code>), because they are different references. If you hold two references of the same object, mutating one would be observable through the other.</p>
<div><pre><code><span>const</span> me <span>=</span> <span>{</span><span>}</span><span>;</span>
<span>const</span> stillMe <span>=</span> me<span>;</span>
me<span>.</span>x <span>=</span> <span>1</span><span>;</span>
console<span>.</span><span>log</span><span>(</span>stillMe<span>.</span>x<span>)</span><span>;</span> <span>// 1</span>
</code></pre></div>
<p>For more on objects and prototypes, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code> reference page</a>. For more information on the object initializer syntax, see its <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">reference page</a>.</p>
<p>This page has omitted all details about object prototypes and inheritance because you can usually achieve inheritance with <a href="#classes">classes</a> without touching the underlying mechanism (which you may have heard to be abstruse). To learn about them, see <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p></div></section><section><h2><a href="#arrays">Arrays</a></h2><div><p>Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using <code>[]</code> syntax) but they have one magic property called <code>length</code>. This is always one more than the highest index in the array.</p>
<p>Arrays are usually created with array literals:</p>
<div><pre><code><span>const</span> a <span>=</span> <span>[</span><span>&#34;dog&#34;</span><span>,</span> <span>&#34;cat&#34;</span><span>,</span> <span>&#34;hen&#34;</span><span>]</span><span>;</span>
a<span>.</span>length<span>;</span> <span>// 3</span>
</code></pre></div>
<p>JavaScript arrays are still objects — you can assign any properties to them, including arbitrary number indices. The only &#34;magic&#34; is that <code>length</code> will be automatically updated when you set a particular index.</p>
<div><pre><code><span>const</span> a <span>=</span> <span>[</span><span>&#34;dog&#34;</span><span>,</span> <span>&#34;cat&#34;</span><span>,</span> <span>&#34;hen&#34;</span><span>]</span><span>;</span>
a<span>[</span><span>100</span><span>]</span> <span>=</span> <span>&#34;fox&#34;</span><span>;</span>
console<span>.</span><span>log</span><span>(</span>a<span>.</span>length<span>)</span><span>;</span> <span>// 101</span>
console<span>.</span><span>log</span><span>(</span>a<span>)</span><span>;</span> <span>// [&#39;dog&#39;, &#39;cat&#39;, &#39;hen&#39;, empty × 97, &#39;fox&#39;]</span>
</code></pre></div>
<p>The array we got above is called a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays"><em>sparse array</em></a> because there are uninhabited slots in the middle, and will cause the engine to deoptimize it from an array to a hash table. Make sure your array is densely populated!</p>
<p>Out-of-bounds indexing doesn&#39;t throw. If you query a non-existent array index, you&#39;ll get a value of <code>undefined</code> in return:</p>
<div><pre><code><span>const</span> a <span>=</span> <span>[</span><span>&#34;dog&#34;</span><span>,</span> <span>&#34;cat&#34;</span><span>,</span> <span>&#34;hen&#34;</span><span>]</span><span>;</span>
console<span>.</span><span>log</span><span>(</span><span>typeof</span> a<span>[</span><span>90</span><span>]</span><span>)</span><span>;</span> <span>// undefined</span>
</code></pre></div>
<p>Arrays can have any elements and can grow or shrink arbitrarily.</p>
<div><pre><code><span>const</span> arr <span>=</span> <span>[</span><span>1</span><span>,</span> <span>&#34;foo&#34;</span><span>,</span> <span>true</span><span>]</span><span>;</span>
arr<span>.</span><span>push</span><span>(</span><span>{</span><span>}</span><span>)</span><span>;</span>
<span>// arr = [1, &#34;foo&#34;, true, {}]</span>
</code></pre></div>
<p>Arrays can be iterated with the <code>for</code> loop, as you can in other C-like languages:</p>
<div><pre><code><span>for</span> <span>(</span><span>let</span> i <span>=</span> <span>0</span><span>;</span> i <span>&lt;</span> a<span>.</span>length<span>;</span> i<span>++</span><span>)</span> <span>{</span>
 <span>// Do something with a[i]</span>
<span>}</span>
</code></pre></div>
<p>Or, since arrays are iterable, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> loop, which is synonymous to C++/Java&#39;s <code>for (int x : arr)</code> syntax:</p>
<div><pre><code><span>for</span> <span>(</span><span>const</span> currentValue <span>of</span> a<span>)</span> <span>{</span>
 <span>// Do something with currentValue</span>
<span>}</span>
</code></pre></div>
<p>Arrays come with a plethora of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array methods</a>. Many of them would iterate the array — for example, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map()</code></a> would apply a callback to every array element, and return a new array:</p>
<div><pre><code><span>const</span> babies <span>=</span> <span>[</span><span>&#34;dog&#34;</span><span>,</span> <span>&#34;cat&#34;</span><span>,</span> <span>&#34;hen&#34;</span><span>]</span><span>.</span><span>map</span><span>(</span><span>(</span><span>name</span><span>)</span> <span>=&gt;</span> <span><span>`</span><span>baby </span><span><span>${</span>name<span>}</span></span><span>`</span></span><span>)</span><span>;</span>
<span>// babies = [&#39;baby dog&#39;, &#39;baby cat&#39;, &#39;baby hen&#39;]</span>
</code></pre></div></div></section><section><h2><a href="#functions">Functions</a></h2><div><p>Along with objects, functions are the core component in understanding JavaScript. The most basic function declaration looks like this:</p>
<div><pre><code><span>function</span> <span>add</span><span>(</span><span>x<span>,</span> y</span><span>)</span> <span>{</span>
 <span>const</span> total <span>=</span> x <span>+</span> y<span>;</span>
 <span>return</span> total<span>;</span>
<span>}</span>
</code></pre></div>
<p>A JavaScript function can take 0 or more parameters. The function body can contain as many statements as you like and can declare its own variables which are local to that function. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p>
<p>Functions can be called with more or fewer parameters than it specifies. If you call a function without passing the parameters it expects, they will be set to <code>undefined</code>. If you pass more parameters than it expects, the function will ignore the extra parameters.</p>
<div><pre><code><span>add</span><span>(</span><span>)</span><span>;</span> <span>// NaN</span>
<span>// Equivalent to add(undefined, undefined)</span>
<span>add</span><span>(</span><span>2</span><span>,</span> <span>3</span><span>,</span> <span>4</span><span>)</span><span>;</span> <span>// 5</span>
<span>// added the first two; 4 was ignored</span>
</code></pre></div>
<p>There are a number of other parameter syntaxes available. For example, the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter syntax</a> allows collecting all the extra parameters passed by the caller into an array, similar to Python&#39;s <code>*args</code>. (Since JS doesn&#39;t have named parameters on the language level, there&#39;s no <code>**kwargs</code>.)</p>
<div><pre><code><span>function</span> <span>avg</span><span>(</span><span><span>...</span>args</span><span>)</span> <span>{</span>
 <span>let</span> sum <span>=</span> <span>0</span><span>;</span>
 <span>for</span> <span>(</span><span>const</span> item <span>of</span> args<span>)</span> <span>{</span>
 sum <span>+=</span> item<span>;</span>
 <span>}</span>
 <span>return</span> sum <span>/</span> args<span>.</span>length<span>;</span>
<span>}</span>
<span>avg</span><span>(</span><span>2</span><span>,</span> <span>3</span><span>,</span> <span>4</span><span>,</span> <span>5</span><span>)</span><span>;</span> <span>// 3.5</span>
</code></pre></div>
<p>In the above code, the variable <code>args</code> holds all the values that were passed into the function.</p>
<p>The rest parameter will store all arguments <em>after</em> where it&#39;s declared, but not before. In other words, <code>function avg(firstValue, ...args)</code> will store the first value passed into the function in the <code>firstValue</code> variable and the remaining arguments in <code>args</code>.</p>
<p>If a function accepts a list of arguments and you already hold them in an array, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">spread syntax</a> in the function call to <em>spread</em> the array as a list of elements. For instance: <code>avg(...numbers)</code>.</p>
<p>We mentioned that JavaScript doesn&#39;t have named parameters. It&#39;s possible, though, to implement them using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">object destructuring</a>, which allows objects to be conveniently packed and unpacked.</p>
<div><pre><code><span>// Note the { } braces: this is destructuring an object</span>
<span>function</span> <span>area</span><span>(</span><span><span>{</span> width<span>,</span> height <span>}</span></span><span>)</span> <span>{</span>
 <span>return</span> width <span>*</span> height<span>;</span>
<span>}</span>
<span>// The { } braces here create a new object</span>
console<span>.</span><span>log</span><span>(</span><span>area</span><span>(</span><span>{</span> <span>width</span><span>:</span> <span>2</span><span>,</span> <span>height</span><span>:</span> <span>3</span> <span>}</span><span>)</span><span>)</span><span>;</span>
</code></pre></div>
<p>There&#39;s also the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"><em>default parameter</em></a> syntax, which allows omitted parameters (or those passed as <code>undefined</code>) to have a default value.</p>
<div><pre><code><span>function</span> <span>avg</span><span>(</span><span>firstValue<span>,</span> secondValue<span>,</span> thirdValue <span>=</span> <span>0</span></span><span>)</span> <span>{</span>
 <span>return</span> <span>(</span>firstValue <span>+</span> secondValue <span>+</span> thirdValue<span>)</span> <span>/</span> <span>3</span><span>;</span>
<span>}</span>
<span>avg</span><span>(</span><span>1</span><span>,</span> <span>2</span><span>)</span><span>;</span> <span>// 1, instead of NaN</span>
</code></pre></div></div></section><section><h3><a href="#anonymous_functions">Anonymous functions</a></h3><div><p>JavaScript lets you create anonymous functions — that is, functions without names. In practice, anonymous functions are typically used as arguments to other functions, immediately assigned to a variable that can be used to invoke the function, or returned from another function.</p>
<div><pre><code><span>// Note that there&#39;s no function name before the parentheses</span>
<span>const</span> <span>avg</span> <span>=</span> <span>function</span> <span>(</span><span><span>...</span>args</span><span>)</span> <span>{</span>
 <span>let</span> sum <span>=</span> <span>0</span><span>;</span>
 <span>for</span> <span>(</span><span>const</span> item <span>of</span> args<span>)</span> <span>{</span>
 sum <span>+=</span> item<span>;</span>
 <span>}</span>
 <span>return</span> sum <span>/</span> args<span>.</span>length<span>;</span>
<span>}</span><span>;</span>
</code></pre></div>
<p>That makes the anonymous function invocable by calling <code>avg()</code> with some arguments — that is, it&#39;s semantically equivalent to declaring the function using the <code>function avg() {}</code> declaration syntax.</p>
<p>There&#39;s another way to define anonymous functions — using an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a>.</p>
<div><pre><code><span>// Note that there&#39;s no function name before the parentheses</span>
<span>const</span> <span>avg</span> <span>=</span> <span>(</span><span><span>...</span>args</span><span>)</span> <span>=&gt;</span> <span>{</span>
 <span>let</span> sum <span>=</span> <span>0</span><span>;</span>
 <span>for</span> <span>(</span><span>const</span> item <span>of</span> args<span>)</span> <span>{</span>
 sum <span>+=</span> item<span>;</span>
 <span>}</span>
 <span>return</span> sum <span>/</span> args<span>.</span>length<span>;</span>
<span>}</span><span>;</span>
<span>// You can omit the `return` when simply returning an expression</span>
<span>const</span> <span>sum</span> <span>=</span> <span>(</span><span>a<span>,</span> b<span>,</span> c</span><span>)</span> <span>=&gt;</span> a <span>+</span> b <span>+</span> c<span>;</span>
</code></pre></div>
<p>Arrow functions are not semantically equivalent to function expressions — for more information, see its <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">reference page</a>.</p>
<p>There&#39;s another way that anonymous functions can be useful: it can be simultaneously declared and invoked in a single expression, called an <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">Immediately invoked function expression (IIFE)</a>:</p>
<div><pre><code><span>(</span><span>function</span> <span>(</span><span>)</span> <span>{</span>
 <span>// …</span>
<span>}</span><span>)</span><span>(</span><span>)</span><span>;</span>
</code></pre></div>
<p>For use-cases of IIFEs, you can read <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures">emulating private methods with closures</a>.</p></div></section><section><h3><a href="#recursive_functions">Recursive functions</a></h3><div><p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p>
<div><pre><code><span>function</span> <span>countChars</span><span>(</span><span>elm</span><span>)</span> <span>{</span>
 <span>if</span> <span>(</span>elm<span>.</span>nodeType <span>===</span> <span>3</span><span>)</span> <span>{</span>
 <span>// TEXT_NODE</span>
 <span>return</span> elm<span>.</span>nodeValue<span>.</span>length<span>;</span>
 <span>}</span>
 <span>let</span> count <span>=</span> <span>0</span><span>;</span>
 <span>for</span> <span>(</span><span>let</span> i <span>=</span> <span>0</span><span>,</span> child<span>;</span> <span>(</span>child <span>=</span> elm<span>.</span>childNodes<span>[</span>i<span>]</span><span>)</span><span>;</span> i<span>++</span><span>)</span> <span>{</span>
 count <span>+=</span> <span>countChars</span><span>(</span>child<span>)</span><span>;</span>
 <span>}</span>
 <span>return</span> count<span>;</span>
<span>}</span>
</code></pre></div>
<p>Function expressions can be named as well, which allows them to be recursive.</p>
<div><pre><code><span>const</span> charsInBody <span>=</span> <span>(</span><span>function</span> <span>counter</span><span>(</span><span>elm</span><span>)</span> <span>{</span>
 <span>if</span> <span>(</span>elm<span>.</span>nodeType <span>===</span> <span>3</span><span>)</span> <span>{</span>
 <span>// TEXT_NODE</span>
 <span>return</span> elm<span>.</span>nodeValue<span>.</span>length<span>;</span>
 <span>}</span>
 <span>let</span> count <span>=</span> <span>0</span><span>;</span>
 <span>for</span> <span>(</span><span>let</span> i <span>=</span> <span>0</span><span>,</span> child<span>;</span> <span>(</span>child <span>=</span> elm<span>.</span>childNodes<span>[</span>i<span>]</span><span>)</span><span>;</span> i<span>++</span><span>)</span> <span>{</span>
 count <span>+=</span> <span>counter</span><span>(</span>child<span>)</span><span>;</span>
 <span>}</span>
 <span>return</span> count<span>;</span>
<span>}</span><span>)</span><span>(</span>document<span>.</span>body<span>)</span><span>;</span>
</code></pre></div>
<p>The name provided to a function expression as above is only available to the function&#39;s own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p>
<p>If you are used to functional programming, beware of the performance implications of recursion in JavaScript. Although the language specification specifies <a href="https://en.wikipedia.org/wiki/Tail_call">tail-call optimization</a>, only JavaScriptCore (used by Safari) has implemented it, due to the difficulty of recovering stack traces and debuggability. For deep recursion, consider using iteration instead to avoid stack overflow.</p></div></section><section><h3><a href="#functions_are_first-class_objects">Functions are first-class objects</a></h3><div><p>JavaScript functions are first-class objects. This means that they can be assigned to variables, passed as arguments to other functions, and returned from other functions. In addition, JavaScript supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">closures</a> out-of-the-box without explicit capturing, allowing you to conveniently apply functional programming styles.</p>
<div><pre><code><span>// Function returning function</span>
<span>const</span> <span>add</span> <span>=</span> <span>(</span><span>x</span><span>)</span> <span>=&gt;</span> <span>(</span><span>y</span><span>)</span> <span>=&gt;</span> x <span>+</span> y<span>;</span>
<span>// Function accepting function</span>
<span>const</span> babies <span>=</span> <span>[</span><span>&#34;dog&#34;</span><span>,</span> <span>&#34;cat&#34;</span><span>,</span> <span>&#34;hen&#34;</span><span>]</span><span>.</span><span>map</span><span>(</span><span>(</span><span>name</span><span>)</span> <span>=&gt;</span> <span><span>`</span><span>baby </span><span><span>${</span>name<span>}</span></span><span>`</span></span><span>)</span><span>;</span>
</code></pre></div>
<p>Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we&#39;ve seen earlier in the Objects section.</p></div></section><section><h3><a href="#inner_functions">Inner functions</a></h3><div><p>JavaScript function declarations are allowed inside other functions. An important detail of nested functions in JavaScript is that they can access variables in their parent function&#39;s scope:</p>
<div><pre><code><span>function</span> <span>parentFunc</span><span>(</span><span>)</span> <span>{</span>
 <span>const</span> a <span>=</span> <span>1</span><span>;</span>
 <span>function</span> <span>nestedFunc</span><span>(</span><span>)</span> <span>{</span>
 <span>const</span> b <span>=</span> <span>4</span><span>;</span> <span>// parentFunc can&#39;t use this</span>
 <span>return</span> a <span>+</span> b<span>;</span>
 <span>}</span>
 <span>return</span> <span>nestedFunc</span><span>(</span><span>)</span><span>;</span> <span>// 5</span>
<span>}</span>
</code></pre></div>
<p>This provides a great deal of utility in writing more maintainable code. If a called function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside it. This keeps the number of functions that are in the global scope down.</p>
<p>This is also a great counter to the lure of global variables. When writing complex code, it is often tempting to use global variables to share values between multiple functions, which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together without polluting your global namespace.</p></div></section><section><h2><a href="#classes">Classes</a></h2><div><p>JavaScript offers the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> syntax that&#39;s very similar to languages like Java.</p>
<div><pre><code><span>class</span> <span>Person</span> <span>{</span>
 <span>constructor</span><span>(</span><span>name</span><span>)</span> <span>{</span>
 <span>this</span><span>.</span>name <span>=</span> name<span>;</span>
 <span>}</span>
 <span>sayHello</span><span>(</span><span>)</span> <span>{</span>
 <span>return</span> <span><span>`</span><span>Hello, I&#39;m </span><span><span>${</span><span>this</span><span>.</span>name<span>}</span></span><span>!</span><span>`</span></span><span>;</span>
 <span>}</span>
<span>}</span>
<span>const</span> p <span>=</span> <span>new</span> <span>Person</span><span>(</span><span>&#34;Maria&#34;</span><span>)</span><span>;</span>
console<span>.</span><span>log</span><span>(</span>p<span>.</span><span>sayHello</span><span>(</span><span>)</span><span>)</span><span>;</span>
</code></pre></div>
<p>JavaScript classes are just functions that must be instantiated with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> operator. Every time a class is instantiated, it returns an object containing the methods and properties that the class specified. Classes don&#39;t enforce any code organization — for example, you can have functions returning classes, or you can have multiple classes per file. Here&#39;s an example of how ad hoc the creation of a class can be: it&#39;s just an expression returned from an arrow function. This pattern is called a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends#mix-ins">mixin</a>.</p>
<div><pre><code><span>const</span> <span>withAuthentication</span> <span>=</span> <span>(</span><span>cls</span><span>)</span> <span>=&gt;</span>
 <span>class</span> <span>extends</span> cls <span>{</span>
 <span>authenticate</span><span>(</span><span>)</span> <span>{</span>
 <span>// …</span>
 <span>}</span>
 <span>}</span><span>;</span>
<span>class</span> <span>Admin</span> <span>extends</span> <span>withAuthentication</span><span>(</span>Person<span>)</span> <span>{</span>
 <span>// …</span>
<span>}</span>
</code></pre></div>
<p>Static properties are created by prepending <code>static</code>. Private properties are created by prepending a hash <code>#</code> (not <code>private</code>). The hash is an integral part of the property name. (Think about <code>#</code> as <code>_</code> in Python.) Unlike most other languages, there&#39;s absolutely no way to read a private property outside the class body — not even in derived classes.</p>
<p>For a detailed guide on various class features, you can read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes">guide page</a>.</p></div></section><section><h2><a href="#asynchronous_programming">Asynchronous programming</a></h2><div><p>JavaScript is single-threaded by nature. There&#39;s no <a href="https://en.wikipedia.org/wiki/Parallel_computing">paralleling</a>; only <a href="https://en.wikipedia.org/wiki/Concurrent_computing">concurrency</a>. Asynchronous programming is powered by an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop">event loop</a>, which allows a set of tasks to be queued and polled for completion.</p>
<p>There are three idiomatic ways to write asynchronous code in JavaScript:</p>
<ul>
 <li>Callback-based (such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout"><code>setTimeout()</code></a>)</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>-based</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code></a>/<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a>, which is a syntactic sugar for Promises</li>
</ul>
<p>For example, here&#39;s what a file-read operation might look like in JavaScript:</p>
<div><pre><code><span>// Callback-based</span>
fs<span>.</span><span>readFile</span><span>(</span>filename<span>,</span> <span>(</span><span>err<span>,</span> content</span><span>)</span> <span>=&gt;</span> <span>{</span>
 <span>// This callback is invoked when the file is read, which could be after a while</span>
 <span>if</span> <span>(</span>err<span>)</span> <span>{</span>
 <span>throw</span> err<span>;</span>
 <span>}</span>
 console<span>.</span><span>log</span><span>(</span>content<span>)</span><span>;</span>
<span>}</span><span>)</span><span>;</span>
<span>// Code here will be executed while the file is waiting to be read</span>
<span>// Promise-based</span>
fs<span>.</span><span>readFile</span><span>(</span>filename<span>)</span>
 <span>.</span><span>then</span><span>(</span><span>(</span><span>content</span><span>)</span> <span>=&gt;</span> <span>{</span>
 <span>// What to do when the file is read</span>
 console<span>.</span><span>log</span><span>(</span>content<span>)</span><span>;</span>
 <span>}</span><span>)</span>
 <span>.</span><span>catch</span><span>(</span><span>(</span><span>err</span><span>)</span> <span>=&gt;</span> <span>{</span>
 <span>throw</span> err<span>;</span>
 <span>}</span><span>)</span><span>;</span>
<span>// Code here will be executed while the file is waiting to be read</span>
<span>// Async/await</span>
<span>async</span> <span>function</span> <span>readFile</span><span>(</span><span>filename</span><span>)</span> <span>{</span>
 <span>const</span> content <span>=</span> <span>await</span> fs<span>.</span><span>readFile</span><span>(</span>filename<span>)</span><span>;</span>
 console<span>.</span><span>log</span><span>(</span>content<span>)</span><span>;</span>
<span>}</span>
</code></pre></div>
<p>The core language doesn&#39;t specify any asynchronous programming features, but it&#39;s crucial when interacting with the external environment — from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API">asking user permissions</a>, to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetching data</a>, to <a href="https://nodejs.org/api/fs.html">reading files</a>. Keeping the potentially long-running operations async ensures that other processes can still run while this one waits — for example, the browser will not freeze while waiting for the user to click a button to grant permission.</p>
<p>If you have an async value, it&#39;s not possible to get its value synchronously. For example, if you have a promise, you can only access the eventual result via the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then"><code>then()</code></a> method. Similarly, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a> can only be used in an async context, which is usually an async function or a module. Promises are <em>never blocking</em> — only the logic depending on the promise&#39;s result will be deferred; everything else continues to execute in the meantime. If you are a functional programmer, you may recognize promises as <a href="https://en.wikipedia.org/wiki/Monad_(functional_programming)">monads</a> which can be mapped with <code>then()</code> (however, they are not <em>proper</em> monads because they auto-flatten; i.e. you can&#39;t have a <code>Promise&lt;Promise&lt;T&gt;&gt;</code>).</p>
<p>In fact, the single-threaded model has made Node.js a popular choice for server-side programming due to its non-blocking IO, making handling a large number of database or file-system requests very performant. However, CPU-bound (computationally intensive) tasks that are pure JavaScript will still block the main thread. To achieve real paralleling, you may need to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">workers</a>.</p>
<p>To learn more about asynchronous programming, you can read about <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises">using promises</a> or follow the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">asynchronous JavaScript</a> tutorial.</p></div></section><section><h2><a href="#modules">Modules</a></h2><div><p>JavaScript also specifies a module system supported by most runtimes. A module is usually a file, identified by its file path or URL. You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a> statements to exchange data between modules:</p>
<div><pre><code><span>import</span> <span>{</span> foo <span>}</span> <span>from</span> <span>&#34;./foo.js&#34;</span><span>;</span>
<span>// Unexported variables are local to the module</span>
<span>const</span> b <span>=</span> <span>2</span><span>;</span>
<span>export</span> <span>const</span> a <span>=</span> <span>1</span><span>;</span>
</code></pre></div>
<p>Unlike Haskell, Python, Java, etc., JavaScript module resolution is entirely host-defined — it&#39;s usually based on URLs or file paths, so relative file paths &#34;just work&#34; and are relative to the current module&#39;s path instead of some project root path.</p>
<p>However, the JavaScript language doesn&#39;t offer standard library modules — all core functionalities are powered by global variables like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code></a> instead. This is due to the long history of JavaScript lacking a module system, and the fact that opting into the module system involves some changes to the runtime setup.</p>
<p>Different runtimes may use different module systems. For example, <a href="https://nodejs.org/en/">Node.js</a> uses the package manager <a href="https://www.npmjs.com/">npm</a> and is mostly file-system based, while <a href="https://deno.land/">Deno</a> and browsers are fully URL-based and modules can be resolved from HTTP URLs.</p>
<p>For more information, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">modules guide page</a>.</p></div></section><section><h2><a href="#language_and_runtime">Language and runtime</a></h2><div><p>Throughout this page, we&#39;ve constantly mentioned that certain features are <em>language-level</em> while others are <em>runtime-level</em>.</p>
<p>JavaScript is a general-purpose scripting language. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#javascript_the_core_language_ecmascript">core language specification</a> focuses on pure computational logic. It doesn&#39;t deal with any input/output — in fact, without extra runtime-level APIs (most notably <a href="https://developer.mozilla.org/en-US/docs/Web/API/console/log_static"><code>console.log()</code></a>), a JavaScript program&#39;s behavior is entirely unobservable.</p>
<p>A runtime, or a host, is something that feeds data to the JavaScript engine (the interpreter), provides extra global properties, and provides hooks for the engine to interact with the outside world. Module resolution, reading data, printing messages, sending network requests, etc. are all runtime-level operations. Since its inception, JavaScript has been adopted in various environments, such as browsers (which provide APIs like <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>), Node.js (which provides APIs like <a href="https://nodejs.org/api/fs.html">file system access</a>), etc. JavaScript has been successfully integrated in web (which was its primary purpose), mobile apps, desktop apps, server-side apps, serverless, embedded systems, and more. While you learn about JavaScript core features, it&#39;s also important to understand host-provided features in order to put the knowledge to use. For example, you can read about all <a href="https://developer.mozilla.org/en-US/docs/Web/API">web platform APIs</a>, which are implemented by browsers, and sometimes non-browsers.</p></div></section><section><h2><a href="#further_exploration">Further exploration</a></h2><div><p>This page offers a very basic insight into how various JavaScript features compare with other languages. If you want to learn more about the language itself and the nuances of each feature, you can read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p>
<p>There are some essential parts of the language that we have omitted due to space and complexity, but you can explore on your own:</p>
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">Closures</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">Regular expressions</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators">Iteration</a></li>
</ul></div></section></article></div></body></html>
JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with object prototypes and classes. It also supports functional programming since functions are first-class objects that can be easily created via expressions and passed around like any other object.
This page serves as a quick overview of various JavaScript language features, written for readers with background in other languages, such as C or Java.    Data types   Let&#39;s start off by looking at the building blocks of any language: the types. JavaScript programs manipulate values, and those values all belong to a type. JavaScript offers seven primitive types:
  Number: used for all number values (integer and floating point) except for very big integers.
  BigInt: used for arbitrarily large integers.
  String: used to store text.
  Boolean: true and false — usually used for conditional logic.
  Symbol: used for creating unique identifiers that won&#39;t collide.
  Undefined: indicating that a variable has not been assigned a value.
  Null: indicating a deliberate non-value.
Everything else is known as an Object. Common object types include:
   Function  
   Array  
   Date  
   RegExp  
   Error  
Functions aren&#39;t special data structures in JavaScript — they are just a special type of object that can be called.     Numbers   JavaScript has two built-in numeric types: Number and BigInt.
The Number type is a IEEE 754 64-bit double-precision floating point value, which means integers can be safely represented between -(253 − 1) and 253 − 1 without loss of precision, and floating point numbers can be stored all the way up to 1.79 × 10308 . Within numbers, JavaScript does not distinguish between floating point numbers and integers.
  console. log ( 3 / 2 ) ; // 1.5, not 1
  
So an apparent integer is in fact implicitly a float. Because of IEEE 754 encoding, sometimes floating point arithmetic can be imprecise.
  console. log ( 0.1 + 0.2 ) ; // 0.30000000000000004
  
For operations that expect integers, such as bitwise operations, the number will be converted to a 32-bit integer.
 Number literals can also have prefixes to indicate the base (binary, octal, decimal, or hexadecimal), or an exponent suffix.
  console. log ( 0b111110111 ) ; // 503
console. log ( 0o767 ) ; // 503
console. log ( 0x1f7 ) ; // 503
console. log ( 5.03e2 ) ; // 503
  
The BigInt type is an arbitrary length integer. Its behavior is similar to C&#39;s integer types (e.g. division truncates to zero), except it can grow indefinitely. BigInts are specified with a number literal and an n suffix.
  console. log ( - 3n / 2n ) ; // -1n
  
The standard arithmetic operators are supported, including addition, subtraction, remainder arithmetic, etc. BigInts and numbers cannot be mixed in arithmetic operations.
The  Math  object provides standard mathematical functions and constants.
  Math. sin ( 3.5 ) ;
const circumference = 2 * Math. PI * r;
  
There are three ways to convert a string to a number:
   parseInt() , which parses the string for an integer.
   parseFloat() , which parses the string for a floating-point number.
 The  Number()  function, which parses a string as if it&#39;s a number literal and supports many different number representations.
You can also use the unary plus +  as a shorthand for Number().
Number values also include  NaN  (short for &#34;Not a Number&#34;) and  Infinity . Many &#34;invalid math&#34; operations will return NaN — for example, if attempting to parse a non-numeric string, or using  Math.log()  on a negative value. Division by zero produces Infinity (positive or negative).
 NaN is contagious: if you provide it as an operand to any mathematical operation, the result will also be NaN. NaN is the only value in JavaScript that&#39;s not equal to itself (per IEEE 754 specification).     Strings   Strings in JavaScript are sequences of Unicode characters. This should be welcome news to anyone who has had to deal with internationalization. More accurately, they are UTF-16 encoded.
  console. log ( &#34;Hello, world&#34; ) ;
console. log ( &#34;你好，世界！&#34; ) ; // Nearly all Unicode characters can be written literally in string literals
  
Strings can be written with either single or double quotes — JavaScript does not have the distinction between characters and strings. If you want to represent a single character, you just use a string consisting of that single character.
  console. log ( &#34;Hello&#34; [ 1 ] === &#34;e&#34; ) ; // true
  
To find the length of a string (in code units), access its  length  property.
Strings have utility methods to manipulate the string and access information about the string. Because all primitives are immutable by design, these methods return new strings.
The + operator is overloaded for strings: when one of the operands is a string, it performs string concatenation instead of number addition. A special template literal syntax allows you to write strings with embedded expressions more succinctly. Unlike Python&#39;s f-strings or C#&#39;s interpolated strings, template literals use backticks (not single or double quotes).
   const age = 25 ;
console. log ( &#34;I am &#34; + age + &#34; years old.&#34; ) ; // String concatenation
console. log (  ` I am   ${age}   years old. `  ) ; // Template literal
       Other types   JavaScript distinguishes between  null , which indicates a deliberate non-value (and is only accessible through the null keyword), and  undefined , which indicates absence of value. There are many ways to obtain undefined:
 A  return  statement with no value (return;) implicitly returns undefined.
 Accessing a nonexistent object property (obj.iDontExist) returns undefined.
 A variable declaration without initialization (let x;) will implicitly initialize the variable to undefined.
JavaScript has a Boolean type, with possible values true and false — both of which are keywords. Any value can be converted to a boolean according to the following rules:
  false, 0, empty strings (&#34;&#34;), NaN, null, and undefined all become false.
 All other values become true.
You can perform this conversion explicitly using the  Boolean()  function:
   Boolean ( &#34;&#34; ) ; // false
Boolean ( 234 ) ; // true
  
However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an if statement (see Control structures). For this reason, we sometimes speak of &#34;truthy&#34; and &#34;falsy&#34;, meaning values that become true and false, respectively, when used in boolean contexts.
Boolean operations such as &amp;&amp; (logical and), || (logical or), and ! (logical not) are supported; see Operators.
The Symbol type is often used to create unique identifiers. Every symbol created with the  Symbol()  function is guaranteed to be unique. In addition, there are registered symbols, which are shared constants, and well-known symbols, which are utilized by the language as &#34;protocols&#34; for certain operations. You can read more about them in the symbol reference.     Variables   Variables in JavaScript are declared using one of three keywords:  let ,  const , or  var .
 let allows you to declare block-level variables. The declared variable is available from the block it is enclosed in.
   let a;
let name = &#34;Simon&#34; ;
// myLetVariable is *not* visible out here
for ( let myLetVariable = 0 ; myLetVariable &lt; 5 ; myLetVariable++ ) {
 // myLetVariable is only visible in here
}
// myLetVariable is *not* visible out here
  
 const allows you to declare variables whose values are never intended to change. The variable is available from the block it is declared in.
   const Pi = 3.14 ; // Declare variable Pi
console. log (Pi) ; // 3.14
  
A variable declared with const cannot be reassigned.
   const Pi = 3.14 ;
Pi = 1 ; // will throw an error because you cannot change a constant variable.
  
 const declarations only prevent reassignments — they don&#39;t prevent mutations of the variable&#39;s value, if it&#39;s an object.
   const obj = { } ;
obj.a = 1 ; // no error
console. log (obj) ; // { a: 1 }
  
 var declarations can have surprising behaviors (for example, they are not block-scoped), and they are discouraged in modern JavaScript code.
If you declare a variable without assigning any value to it, its value is undefined. You can&#39;t declare a const variable without an initializer, because you can&#39;t change it later anyway.
 let and const declared variables still occupy the entire scope they are defined in, and are in a region known as the temporal dead zone before the actual line of declaration. This has some interesting interactions with variable shadowing, which don&#39;t occur in other languages.
   function foo ( x, condition ) {
 if (condition) {
 console. log (x) ;
 const x = 2 ;
 console. log (x) ;
 }
}
foo ( 1 , true ) ;
  
In most other languages, this would log &#34;1&#34; and &#34;2&#34;, because before the const x = 2 line, x should still refer to the parameter x in the upper scope. In JavaScript, because each declaration occupies the entire scope, this would throw an error on the first console.log: &#34;Cannot access &#39;x&#39; before initialization&#34;. For more information, see the reference page of  let .
JavaScript is dynamically typed. Types (as described in the previous section) are only associated with values, but not with variables. For let-declared variables, you can always change its type through reassignment.
    Operators   JavaScript&#39;s numeric operators include +, -, *, /, % (remainder), and ** (exponentiation). Values are assigned using =. Each binary operator also has a compound assignment counterpart such as += and -=, which extend out to x = x operator y.
You can use ++ and -- to increment and decrement respectively. These can be used as a prefix or postfix operators.
The  + operator also does string concatenation:
   &#34;hello&#34; + &#34; world&#34; ; // &#34;hello world&#34;
  
If you add a string to a number (or other value) everything is converted into a string first. This might trip you up:
   &#34;3&#34; + 4 + 5 ; // &#34;345&#34;
3 + 4 + &#34;5&#34; ; // &#34;75&#34;
  
Adding an empty string to something is a useful way of converting it to a string itself.
 Comparisons in JavaScript can be made using &lt;, &gt;, &lt;= and &gt;=, which work for both strings and numbers. For equality, the double-equals operator performs type coercion if you give it different types, with sometimes interesting results. On the other hand, the triple-equals operator does not attempt type coercion, and is usually preferred.
   123 == &#34;123&#34; ; // true
1 == true ; // true
123 === &#34;123&#34; ; // false
1 === true ; // false
  
The double-equals and triple-equals also have their inequality counterparts: != and !==.
JavaScript also has bitwise operators and logical operators. Notably, logical operators don&#39;t work with boolean values only — they work by the &#34;truthiness&#34; of the value.
   const a = 0 &amp;&amp; &#34;Hello&#34; ; // 0 because 0 is &#34;falsy&#34;
const b = &#34;Hello&#34; || &#34;world&#34; ; // &#34;Hello&#34; because both &#34;Hello&#34; and &#34;world&#34; are &#34;truthy&#34;
  
The &amp;&amp; and || operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objects before accessing their attributes:
   const name = o &amp;&amp; o. getName ( ) ;
  
Or for caching values (when falsy values are invalid):
   const name = cachedName || (cachedName = getName ( ) ) ;
  
For a comprehensive list of operators, see the guide page or reference section. You may be especially interested in the operator precedence.     Grammar   JavaScript grammar is very similar to the C family. There are a few points worth mentioning:
  Identifiers can have Unicode characters, but they cannot be one of the reserved words.
  Comments are commonly // or /* */, while many other scripting languages like Perl, Python, and Bash use #.
 Semicolons are optional in JavaScript — the language automatically inserts them when needed. However, there are certain caveats to watch out for, since unlike Python, semicolons are still part of the syntax.
For an in-depth look at the JavaScript grammar, see the reference page for lexical grammar.     Control structures   JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by  if and else ; you can chain them together:
   let name = &#34;kittens&#34; ;
if (name === &#34;puppies&#34; ) {
 name += &#34; woof&#34; ;
} else if (name === &#34;kittens&#34; ) {
 name += &#34; meow&#34; ;
} else {
 name += &#34;!&#34; ;
}
name === &#34;kittens meow&#34; ;
  
JavaScript doesn&#39;t have elif, and else if is really just an else branch comprised of a single if statement.
JavaScript has  while  loops and  do...while  loops. The first is good for basic looping; the second is for loops where you wish to ensure that the body of the loop is executed at least once:
   while ( true ) {
 // an infinite loop!
}
let input;
do {
 input = get_input ( ) ;
} while ( inputIsNotValid (input) ) ;
  
JavaScript&#39;s  for loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.
   for ( let i = 0 ; i &lt; 5 ; i++ ) {
 // Will execute 5 times
}
  
JavaScript also contains two other prominent for loops:  for...of , which iterates over iterables, most notably arrays, and  for...in , which visits all enumerable properties of an object.
   for ( const value of array) {
 // do something with value
}
for ( const property in object) {
 // do something with object property
}
  
The switch statement can be used for multiple branches based on equality checking.
   switch (action) {
 case &#34;draw&#34; :
 drawIt ( ) ;
 break ;
 case &#34;eat&#34; :
 eatIt ( ) ;
 break ;
 default :
 doNothing ( ) ;
}
  
Similar to C, case clauses are conceptually the same as labels, so if you don&#39;t add a break statement, execution will &#34;fall through&#34; to the next level. However, they are not actually jump tables — any expression can be part of the case clause, not just string or number literals, and they would be evaluated one-by-one until one equals the value being matched. Comparison takes place between the two using the === operator.
Unlike some languages like Rust, control-flow structures are statements in JavaScript, meaning you can&#39;t assign them to a variable, like const a = if (x) { 1 } else { 2 }.
JavaScript errors are handled using the  try...catch  statement.
   try {
 buildMySite ( &#34;./website&#34; ) ;
} catch (e) {
 console. error ( &#34;Building site failed:&#34; , e) ;
}
  
Errors can be thrown using the  throw  statement. Many built-in operations may throw as well.
   function buildMySite ( siteDirectory ) {
 if ( ! pathExists (siteDirectory) ) {
 throw new Error ( &#34;Site directory does not exist&#34; ) ;
 }
}
  
In general, you can&#39;t tell the type of the error you just caught, because anything can be thrown from a throw statement. However, you can usually assume it&#39;s an  Error  instance, as is the example above. There are some subclasses of Error built-in, like  TypeError  and  RangeError , that you can use to provide extra semantics about the error. There&#39;s no conditional catch in JavaScript — if you only want to handle one type of error, you need to catch everything, identify the type of error using  instanceof , and then rethrow the other cases.
   try {
 buildMySite ( &#34;./website&#34; ) ;
} catch (e) {
 if (e instanceof RangeError ) {
 console. error ( &#34;Seems like a parameter is out of range:&#34; , e) ;
 console. log ( &#34;Retrying...&#34; ) ;
 buildMySite ( &#34;./website&#34; ) ;
 } else {
 // Don&#39;t know how to handle other error types; throw them so
 // something else up in the call stack may catch and handle it
 throw e;
 }
}
  
If an error is uncaught by any try...catch in the call stack, the program will exit.
For a comprehensive list of control flow statements, see the reference section.     Objects   JavaScript objects can be thought of as collections of key-value pairs. As such, they are similar to:
 Dictionaries in Python.
 Hashes in Perl and Ruby.
 Hash tables in C and C++.
 HashMaps in Java.
 Associative arrays in PHP.
JavaScript objects are hashes. Unlike objects in statically typed languages, objects in JavaScript do not have fixed shapes — properties can be added, deleted, re-ordered, mutated, or dynamically queried at any time. Object keys are always strings or symbols — even array indices, which are canonically integers, are actually strings under the hood.
Objects are usually created using the literal syntax:
   const obj = {
 name : &#34;Carrot&#34; ,
 for : &#34;Max&#34; ,
 details : {
 color : &#34;orange&#34; ,
 size : 12 ,
 } ,
} ;
  
Object properties can be accessed using dot (.) or square brackets ([]). When using the dot notation, the key must be a valid identifier. Square brackets, on the other hand, allow indexing the object with a dynamic key value.
   // Dot notation
obj.name = &#34;Simon&#34; ;
const name = obj.name;
// Bracket notation
obj[ &#34;name&#34; ] = &#34;Simon&#34; ;
const name = obj[ &#34;name&#34; ] ;
// Can use a variable to define a key
const userName = prompt ( &#34;what is your key?&#34; ) ;
obj[userName] = prompt ( &#34;what is its value?&#34; ) ;
  
Property access can be chained together:
  obj.details.color; // orange
obj[ &#34;details&#34; ] [ &#34;size&#34; ] ; // 12
  
Objects are always references, so unless something is explicitly copying the object, mutations to an object would be visible to the outside.
   const obj = { } ;
function doSomething ( o ) {
 o.x = 1 ;
}
doSomething (obj) ;
console. log (obj.x) ; // 1
  
This also means two separately created objects will never be equal (!==), because they are different references. If you hold two references of the same object, mutating one would be observable through the other.
   const me = { } ;
const stillMe = me;
me.x = 1 ;
console. log (stillMe.x) ; // 1
  
For more on objects and prototypes, see the  Object reference page. For more information on the object initializer syntax, see its reference page.
This page has omitted all details about object prototypes and inheritance because you can usually achieve inheritance with classes without touching the underlying mechanism (which you may have heard to be abstruse). To learn about them, see Inheritance and the prototype chain.     Arrays   Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called length. This is always one more than the highest index in the array.
Arrays are usually created with array literals:
   const a = [ &#34;dog&#34; , &#34;cat&#34; , &#34;hen&#34; ] ;
a.length; // 3
  
JavaScript arrays are still objects — you can assign any properties to them, including arbitrary number indices. The only &#34;magic&#34; is that length will be automatically updated when you set a particular index.
   const a = [ &#34;dog&#34; , &#34;cat&#34; , &#34;hen&#34; ] ;
a[ 100 ] = &#34;fox&#34; ;
console. log (a.length) ; // 101
console. log (a) ; // [&#39;dog&#39;, &#39;cat&#39;, &#39;hen&#39;, empty × 97, &#39;fox&#39;]
  
The array we got above is called a  sparse array  because there are uninhabited slots in the middle, and will cause the engine to deoptimize it from an array to a hash table. Make sure your array is densely populated!
Out-of-bounds indexing doesn&#39;t throw. If you query a non-existent array index, you&#39;ll get a value of undefined in return:
   const a = [ &#34;dog&#34; , &#34;cat&#34; , &#34;hen&#34; ] ;
console. log ( typeof a[ 90 ] ) ; // undefined
  
Arrays can have any elements and can grow or shrink arbitrarily.
   const arr = [ 1 , &#34;foo&#34; , true ] ;
arr. push ( { } ) ;
// arr = [1, &#34;foo&#34;, true, {}]
  
Arrays can be iterated with the for loop, as you can in other C-like languages:
   for ( let i = 0 ; i &lt; a.length; i++ ) {
 // Do something with a[i]
}
  
Or, since arrays are iterable, you can use the  for...of  loop, which is synonymous to C++/Java&#39;s for (int x : arr) syntax:
   for ( const currentValue of a) {
 // Do something with currentValue
}
  
Arrays come with a plethora of array methods. Many of them would iterate the array — for example,  map()  would apply a callback to every array element, and return a new array:
   const babies = [ &#34;dog&#34; , &#34;cat&#34; , &#34;hen&#34; ] . map ( ( name ) =&gt;  ` baby   ${name}  `  ) ;
// babies = [&#39;baby dog&#39;, &#39;baby cat&#39;, &#39;baby hen&#39;]
       Functions   Along with objects, functions are the core component in understanding JavaScript. The most basic function declaration looks like this:
   function add ( x, y ) {
 const total = x + y;
 return total;
}
  
A JavaScript function can take 0 or more parameters. The function body can contain as many statements as you like and can declare its own variables which are local to that function. The  return  statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns undefined.
Functions can be called with more or fewer parameters than it specifies. If you call a function without passing the parameters it expects, they will be set to undefined. If you pass more parameters than it expects, the function will ignore the extra parameters.
   add ( ) ; // NaN
// Equivalent to add(undefined, undefined)
add ( 2 , 3 , 4 ) ; // 5
// added the first two; 4 was ignored
  
There are a number of other parameter syntaxes available. For example, the rest parameter syntax allows collecting all the extra parameters passed by the caller into an array, similar to Python&#39;s *args. (Since JS doesn&#39;t have named parameters on the language level, there&#39;s no **kwargs.)
   function avg (  ...args ) {
 let sum = 0 ;
 for ( const item of args) {
 sum += item;
 }
 return sum / args.length;
}
avg ( 2 , 3 , 4 , 5 ) ; // 3.5
  
In the above code, the variable args holds all the values that were passed into the function.
The rest parameter will store all arguments after where it&#39;s declared, but not before. In other words, function avg(firstValue, ...args) will store the first value passed into the function in the firstValue variable and the remaining arguments in args.
If a function accepts a list of arguments and you already hold them in an array, you can use the spread syntax in the function call to spread the array as a list of elements. For instance: avg(...numbers).
We mentioned that JavaScript doesn&#39;t have named parameters. It&#39;s possible, though, to implement them using object destructuring, which allows objects to be conveniently packed and unpacked.
   // Note the { } braces: this is destructuring an object
function area (  { width, height }  ) {
 return width * height;
}
// The { } braces here create a new object
console. log ( area ( { width : 2 , height : 3 } ) ) ;
  
There&#39;s also the  default parameter  syntax, which allows omitted parameters (or those passed as undefined) to have a default value.
   function avg ( firstValue, secondValue, thirdValue = 0  ) {
 return (firstValue + secondValue + thirdValue) / 3 ;
}
avg ( 1 , 2 ) ; // 1, instead of NaN
       Anonymous functions   JavaScript lets you create anonymous functions — that is, functions without names. In practice, anonymous functions are typically used as arguments to other functions, immediately assigned to a variable that can be used to invoke the function, or returned from another function.
   // Note that there&#39;s no function name before the parentheses
const avg = function (  ...args ) {
 let sum = 0 ;
 for ( const item of args) {
 sum += item;
 }
 return sum / args.length;
} ;
  
That makes the anonymous function invocable by calling avg() with some arguments — that is, it&#39;s semantically equivalent to declaring the function using the function avg() {} declaration syntax.
There&#39;s another way to define anonymous functions — using an arrow function expression.
   // Note that there&#39;s no function name before the parentheses
const avg = (  ...args ) =&gt; {
 let sum = 0 ;
 for ( const item of args) {
 sum += item;
 }
 return sum / args.length;
} ;
// You can omit the `return` when simply returning an expression
const sum = ( a, b, c ) =&gt; a + b + c;
  
Arrow functions are not semantically equivalent to function expressions — for more information, see its reference page.
There&#39;s another way that anonymous functions can be useful: it can be simultaneously declared and invoked in a single expression, called an Immediately invoked function expression (IIFE):
   ( function ( ) {
 // …
} ) ( ) ;
  
For use-cases of IIFEs, you can read emulating private methods with closures.     Recursive functions   JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.
   function countChars ( elm ) {
 if (elm.nodeType === 3 ) {
 // TEXT_NODE
 return elm.nodeValue.length;
 }
 let count = 0 ;
 for ( let i = 0 , child; (child = elm.childNodes[i] ) ; i++ ) {
 count += countChars (child) ;
 }
 return count;
}
  
Function expressions can be named as well, which allows them to be recursive.
   const charsInBody = ( function counter ( elm ) {
 if (elm.nodeType === 3 ) {
 // TEXT_NODE
 return elm.nodeValue.length;
 }
 let count = 0 ;
 for ( let i = 0 , child; (child = elm.childNodes[i] ) ; i++ ) {
 count += counter (child) ;
 }
 return count;
} ) (document.body) ;
  
The name provided to a function expression as above is only available to the function&#39;s own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.
If you are used to functional programming, beware of the performance implications of recursion in JavaScript. Although the language specification specifies tail-call optimization, only JavaScriptCore (used by Safari) has implemented it, due to the difficulty of recovering stack traces and debuggability. For deep recursion, consider using iteration instead to avoid stack overflow.     Functions are first-class objects   JavaScript functions are first-class objects. This means that they can be assigned to variables, passed as arguments to other functions, and returned from other functions. In addition, JavaScript supports closures out-of-the-box without explicit capturing, allowing you to conveniently apply functional programming styles.
   // Function returning function
const add = ( x ) =&gt; ( y ) =&gt; x + y;
// Function accepting function
const babies = [ &#34;dog&#34; , &#34;cat&#34; , &#34;hen&#34; ] . map ( ( name ) =&gt;  ` baby   ${name}  `  ) ;
  
Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we&#39;ve seen earlier in the Objects section.     Inner functions   JavaScript function declarations are allowed inside other functions. An important detail of nested functions in JavaScript is that they can access variables in their parent function&#39;s scope:
   function parentFunc ( ) {
 const a = 1 ;
 function nestedFunc ( ) {
 const b = 4 ; // parentFunc can&#39;t use this
 return a + b;
 }
 return nestedFunc ( ) ; // 5
}
  
This provides a great deal of utility in writing more maintainable code. If a called function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside it. This keeps the number of functions that are in the global scope down.
This is also a great counter to the lure of global variables. When writing complex code, it is often tempting to use global variables to share values between multiple functions, which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together without polluting your global namespace.     Classes   JavaScript offers the class syntax that&#39;s very similar to languages like Java.
   class Person {
 constructor ( name ) {
 this .name = name;
 }
 sayHello ( ) {
 return  ` Hello, I&#39;m   ${ this .name}  ! `  ;
 }
}
const p = new Person ( &#34;Maria&#34; ) ;
console. log (p. sayHello ( ) ) ;
  
JavaScript classes are just functions that must be instantiated with the  new  operator. Every time a class is instantiated, it returns an object containing the methods and properties that the class specified. Classes don&#39;t enforce any code organization — for example, you can have functions returning classes, or you can have multiple classes per file. Here&#39;s an example of how ad hoc the creation of a class can be: it&#39;s just an expression returned from an arrow function. This pattern is called a mixin.
   const withAuthentication = ( cls ) =&gt;
 class extends cls {
 authenticate ( ) {
 // …
 }
 } ;
class Admin extends withAuthentication (Person) {
 // …
}
  
Static properties are created by prepending static. Private properties are created by prepending a hash # (not private). The hash is an integral part of the property name. (Think about # as _ in Python.) Unlike most other languages, there&#39;s absolutely no way to read a private property outside the class body — not even in derived classes.
For a detailed guide on various class features, you can read the guide page.     Asynchronous programming   JavaScript is single-threaded by nature. There&#39;s no paralleling; only concurrency. Asynchronous programming is powered by an event loop, which allows a set of tasks to be queued and polled for completion.
There are three idiomatic ways to write asynchronous code in JavaScript:
 Callback-based (such as  setTimeout() )
   Promise -based
   async / await , which is a syntactic sugar for Promises
For example, here&#39;s what a file-read operation might look like in JavaScript:
   // Callback-based
fs. readFile (filename, ( err, content ) =&gt; {
 // This callback is invoked when the file is read, which could be after a while
 if (err) {
 throw err;
 }
 console. log (content) ;
} ) ;
// Code here will be executed while the file is waiting to be read
// Promise-based
fs. readFile (filename)
 . then ( ( content ) =&gt; {
 // What to do when the file is read
 console. log (content) ;
 } )
 . catch ( ( err ) =&gt; {
 throw err;
 } ) ;
// Code here will be executed while the file is waiting to be read
// Async/await
async function readFile ( filename ) {
 const content = await fs. readFile (filename) ;
 console. log (content) ;
}
  
The core language doesn&#39;t specify any asynchronous programming features, but it&#39;s crucial when interacting with the external environment — from asking user permissions, to fetching data, to reading files. Keeping the potentially long-running operations async ensures that other processes can still run while this one waits — for example, the browser will not freeze while waiting for the user to click a button to grant permission.
If you have an async value, it&#39;s not possible to get its value synchronously. For example, if you have a promise, you can only access the eventual result via the  then()  method. Similarly,  await  can only be used in an async context, which is usually an async function or a module. Promises are never blocking — only the logic depending on the promise&#39;s result will be deferred; everything else continues to execute in the meantime. If you are a functional programmer, you may recognize promises as monads which can be mapped with then() (however, they are not proper monads because they auto-flatten; i.e. you can&#39;t have a Promise&lt;Promise&lt;T&gt;&gt;).
In fact, the single-threaded model has made Node.js a popular choice for server-side programming due to its non-blocking IO, making handling a large number of database or file-system requests very performant. However, CPU-bound (computationally intensive) tasks that are pure JavaScript will still block the main thread. To achieve real paralleling, you may need to use workers.
To learn more about asynchronous programming, you can read about using promises or follow the asynchronous JavaScript tutorial.     Modules   JavaScript also specifies a module system supported by most runtimes. A module is usually a file, identified by its file path or URL. You can use the  import  and  export  statements to exchange data between modules:
   import { foo } from &#34;./foo.js&#34; ;
// Unexported variables are local to the module
const b = 2 ;
export const a = 1 ;
  
Unlike Haskell, Python, Java, etc., JavaScript module resolution is entirely host-defined — it&#39;s usually based on URLs or file paths, so relative file paths &#34;just work&#34; and are relative to the current module&#39;s path instead of some project root path.
However, the JavaScript language doesn&#39;t offer standard library modules — all core functionalities are powered by global variables like  Math  and  Intl  instead. This is due to the long history of JavaScript lacking a module system, and the fact that opting into the module system involves some changes to the runtime setup.
Different runtimes may use different module systems. For example, Node.js uses the package manager npm and is mostly file-system based, while Deno and browsers are fully URL-based and modules can be resolved from HTTP URLs.
For more information, see the modules guide page.     Language and runtime   Throughout this page, we&#39;ve constantly mentioned that certain features are language-level while others are runtime-level.
JavaScript is a general-purpose scripting language. The core language specification focuses on pure computational logic. It doesn&#39;t deal with any input/output — in fact, without extra runtime-level APIs (most notably  console.log() ), a JavaScript program&#39;s behavior is entirely unobservable.
A runtime, or a host, is something that feeds data to the JavaScript engine (the interpreter), provides extra global properties, and provides hooks for the engine to interact with the outside world. Module resolution, reading data, printing messages, sending network requests, etc. are all runtime-level operations. Since its inception, JavaScript has been adopted in various environments, such as browsers (which provide APIs like DOM), Node.js (which provides APIs like file system access), etc. JavaScript has been successfully integrated in web (which was its primary purpose), mobile apps, desktop apps, server-side apps, serverless, embedded systems, and more. While you learn about JavaScript core features, it&#39;s also important to understand host-provided features in order to put the knowledge to use. For example, you can read about all web platform APIs, which are implemented by browsers, and sometimes non-browsers.     Further exploration   This page offers a very basic insight into how various JavaScript features compare with other languages. If you want to learn more about the language itself and the nuances of each feature, you can read the JavaScript guide and the JavaScript reference.
There are some essential parts of the language that we have omitted due to space and complexity, but you can explore on your own:
  Inheritance and the prototype chain 
  Closures 
  Regular expressions 
  Iteration
JavaScript language overview - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
https://www.modernjs.com/
Modern JavaScript
2015-01-01
None
<div><div>
 
 <p>A guide to help you learn Modern JavaScript</p>
 </div>||||I||||Modern JS
 * 
 * About the author & consulting
 Search

 Modern JavaScript

 A guide to help you learn Modern JavaScript

 1. The beginning
 1. What is JavaScript ? What is modern JavaScript ?
 o Web page events & DHTML
 o AJAX & DOM
 o jQuery
 o JavaScript components
 o JavaScript MVC
 o JavaScript outside of a browser
 o Languages that produce JavaScript: JSX and Typescript
 o So what is modern JavaScript ?
 2. Modern JavaScript essentials: Concepts and tools
 o ECMAScript
 o ES.Next - The 'catch-all' ECMAScript future
 o Shims and Polyfills
 o Minifiers-Obfuscators-Compressors and Source Maps
 o Package managers
 o Transpiling and transpilers
 o Modules, namespaces & module types
 o Module loaders and bundlers
 2. The concepts
 1. JavaScript key concepts & syntax
 o Running JavaScript
 - JavaScript REPLs
 - The HTML <script> element
 * Definition attributes for the HTML <script> element: nomodule, src & type
 * Processing attributes for the HTML <script> element: async & defer
 * Security attributes for the HTML <script> element: crossorigin, integrity, nonce & referrerpolicy
 - The HTML <noscript> element
 o The var & function keywords, scope, hoisting and undefined
 o First class functions: Function declarations, function expressions, hoisting & undefined
 o Working with text: ' and "; plus template literals with backticks ` and ${}
 - Text and escape sequences: Backslash \, \x and \u; plus \u{}.
 o Equality symbols ==, !=, === and !==
 o Debugging, documenting & logging JavaScript
 - The console object
 - The debugger keyword
 - Comments with // and /* */
 - Documenting with JSDoc
 o Validating and error handling in JavaScript
 - The "use strict" statement
 - The try, catch and finally keywords
 - The throw keyword
 o Namespaces and block scoping, the problem
 o Immediately-invoked function expressions (IIFE): Namespaces and block scoping solved, the early years
 o Object assignments and object notation: Namespaces solved another way, the early years
 - Why are techniques to support JavaScript namespaces so convoluted and fragmented ?
 2. Lexical scope and the this execution context
 o The JavaScript global object and the this, global and window keywords
 o What is the difference between the apply(), call() and bind() functions that alter the this context ?
 o Careful reassigning this to potentially conflicting keywords
 3. Closures: Functions that remember their lexical scope
 4. The let and const keywords: Block scoping solved, the modern years; plus saner access, defaults & temporal dead zones (TDZ) for variables
 o Use let and const over var
 5. The export & import keywords and modules: Namespaces solved, the modern years
 6. Pre-ES6 (ES2015) modules detour: CommonJS, AMD and UMD
 7. Arrow functions with =>
 8. The void keyword
 9. Function parameter default values
 10. Generators: Functions with * and the yield keyword
 11. The spread/rest ... operator
 12. The exponentiation operator **
 13. Asynchronous functions with async and await
 14. Numeric separators with the underscore _ character
 3. JavaScript data types
 + Dynamically typed behavior and data types
 + Primitive data types
 + The string primitive data type and String object data type
 o The String object property to determine string size: .length
 o The String object static methods to output strings: String.fromCharCode(); String.fromCodePoint() and String.raw()
 + The number primitive data type, Number object data type and their limits
 + The boolean primitive data type and Boolean object data type
 + The symbol primitive data type and Symbol object data type
 + The bigint primitive data type and BigInt object data type
 + The null and undefined primitive data types
 + Object data types
 + The immutability of primitives and mutablity of objects
 + The Object data type
 o The Object object property descriptors: configurable, enumerable, value, writable, get, set and the static methods to set them Object.defineProperty() & Object.defineProperties()
 o The delete operator to remove Object object properties
 o The Object literal shorthand syntax
 + The global object detour: A top level Object object available in all JavaScript environments
 o The global scope and access to the global object with this
 o Global object access without the this keyword: Window interface & window keyword and Global object & global keyword, the early years
 o Global object access without the this keyword: globalThis property, the modern years
 + The Map and WeakMap data types
 + The Set and WeakSet data types
 + The Proxy and Reflect data types
 4. JavaScript object-orientated and prototype-based programming
 + Prototype-based programming and the prototype property
 + Prototype-based programming and the prototype chain
 + Prototype-based programming constructors & static properties, the early years
 + Prototype-based programming constructors and inheritance, the early years
 + To new or not to new
 + Prototype-based getters and setters with get and set keywords & property descriptors
 o Do JavaScript objects have other encapsulation/accessibility constructs besides getters and setters ?
 + JavaScript OOP keywords: class, constructor, extends, super, get, set and static, the modern years
 o The class and constructor keywords: JavaScript classes
 o The extends and super keywords: JavaScript class inheritance
 o The get & set keywords: JavaScript class getters and setters
 o The static keyword: JavaScript class static properties
 5. Loops in JS
 + for statement in JS: Explicit counters, iterations, step sizes and performance considerations
 + break and continue statements: Exiting for loops and iterations prematurely
 + Label statements in JS loops: GoTo a specific point in the workflow of a JS loop
 + while and do while statements: Loops that run with one expression
 + for in statement: A loop for key-value data structures
 Tip Certain JS data types have built-in methods that produce the same outcome as loops with for, while, do while and inclusively for in statements, but with simpler syntax:
 o Array loop methods: every(), filter(), forEach(), map(), reduce() & reduceRight()
 o Map loop methods: forEach()
 o Set loop methods: forEach()
 + The for of statement in JS: Iterable and iterator protocols, plus what are and how to make iterable objects
 + Generators and yield expressions in JS: Functions that operate with iterable objects
 6. JavaScript asynchronous and parallel execution
 + Single threaded, the problem; non-blocking, asynchronous and parallel execution, the solutions
 + Timeouts, asynchronously delaying the inevitable
 + Callbacks and higher-order functions: They aren't necessarily asynchronous & non-blocking
 + Functions for UI (User Interface) and I/O(Input/Output) related work: Asynchronous & non-blocking
 + Callback hell
 + Promises
 + Async functions
 + Async functions with await
 + Web workers
* The tools
 1. Node JS
 + How Node JS compares to JavaScript browser engines and other programming language run-time environments
 + Node JS - Installation and versioning
 + The Node version manager nvm (Optional)
 + The Node JS node command
 o A JavaScript REPL
 - Use double tab in the Node JS REPL for autocomplete help
 o A JavaScript syntax checker
 o A JavaScript evaluator
 + Node JS - A JavaScript CommonJS based system
 o The Node JS global, globalThis and module objects
 o Using CommonJS modules in Node JS with require
 + Node JS - Built-in JavaScript modules
 o The Node JS dns module: DNS (Domain Name System) operations with JavaScript
 o The Node JS fs module: Read and write files with JavaScript
 + Node JS & the JavaScript asynchronous/callback approach & event loop design
 o Read a file in Node JS, revisited
 o Read a file in Node JS, synchronously (Yes! It's possible)
 o The Node JS http module, asynchronous by nature
 2. Npm
 + Npm - What can it do for you
 + Npm node_modules - The installation directories in the global and local scopes
 + Npm - The package.json file
 3. Deno
 + Why Deno ?
 + Deno - Installation and versioning
 + The deno command
 o deno environment variables
 o deno flags
 o deno subcommands
 + Upgrading Deno: deno upgrade
 + A TypeScript & JavaScript REPL: deno repl
* The complementary tech
 1. TypeScript: The JavaScript that should have been
 + TypeScript origins and its reason for being
 + TypeScript versions and what makes TypeScript a JavaScript superset
 + How to run TypeScript ?
 o Can browsers run TypeScript ? Yes, but with a lot of work
 + TypeScript: Static type syntax
 + TypeScript: Same old, same old JavaScript syntax
 2. WebAssembly: The web's JavaScript liberator
 + JavaScript's performance crux: An interpreted language
 + Getting to machine language from other languages: Interpreted, compiled, assembly, higher level, mid level, system level and low level
 + WebAssembly precursors : Browser add-ons/plug-ins, JavaScript asm.js and transpilers for low level languages
 + WebAssembly: Lessons learned from JavaScript, browsers, add-ons/plug-ins, low level languages and transpilers
 + WebAssembly: The future of the web
 3. Rust

 Lifetime subscription to Modern JS
 Skip the ads + get the video version!

 Home The beginning
 What is JavaScript ? What is modern JavaScript ? Modern JavaScript essentials: Concepts and tools
 The concepts
 JavaScript key concepts & syntax JavaScript data types JavaScript object-orientated and prototype-based programming Loops in JS
 Intro & sub-sections for statement in JS break and continue statements in JS Label statements in JS loops while and do while statements in JS for in statement in JS for of statement in JS Generators and yield expressions in JS
 JavaScript asynchronous and parallel execution
 The tools
 Node JS Npm Deno
 The complementary tech
 TypeScript: The JavaScript that should have been WebAssembly: The web's JavaScript liberator Rust: How Rust complements Modern JavaScript
 The console
 Solutions to the most common modern JS errors
 "extract-text-webpack-plugin" loader is used without the corresponding plugin no configuration file found and no output filename configured via cli option. a configuration file could be named 'webpack.config.js' in the current directory. use --help to display the cli options. getinitialstate was defined on app, a plain javascript class. this is only supported for classes created using react.createclass. did you mean to define a state property instead?
 Enabling JavaScript offers a better navigation experience
Modern JS
 * 
 * About the author & consulting
 Search
 Modern JavaScript
 A guide to help you learn Modern JavaScript
 1. The beginning
 1. What is JavaScript ? What is modern JavaScript ?
 o Web page events & DHTML
 o AJAX & DOM
 o jQuery
 o JavaScript components
 o JavaScript MVC
 o JavaScript outside of a browser
 o Languages that produce JavaScript: JSX and Typescript
 o So what is modern JavaScript ?
 2. Modern JavaScript essentials: Concepts and tools
 o ECMAScript
 o ES.Next - The 'catch-all' ECMAScript future
 o Shims and Polyfills
 o Minifiers-Obfuscators-Compressors and Source Maps
 o Package managers
 o Transpiling and transpilers
 o Modules, namespaces & module types
 o Module loaders and bundlers
 2. The concepts
 1. JavaScript key concepts & syntax
 o Running JavaScript
 - JavaScript REPLs
 - The HTML  element
 * Definition attributes for the HTML  element: nomodule, src & type
 * Processing attributes for the HTML  element: async & defer
 * Security attributes for the HTML  element: crossorigin, integrity, nonce & referrerpolicy
 - The HTML  element
 o The var & function keywords, scope, hoisting and undefined
 o First class functions: Function declarations, function expressions, hoisting & undefined
 o Working with text: ' and "; plus template literals with backticks ` and ${}
 - Text and escape sequences: Backslash \, \x and \u; plus \u{}.
 o Equality symbols ==, !=, === and !==
 o Debugging, documenting & logging JavaScript
 - The console object
 - The debugger keyword
 - Comments with // and /* */
 - Documenting with JSDoc
 o Validating and error handling in JavaScript
 - The "use strict" statement
 - The try, catch and finally keywords
 - The throw keyword
 o Namespaces and block scoping, the problem
 o Immediately-invoked function expressions (IIFE): Namespaces and block scoping solved, the early years
 o Object assignments and object notation: Namespaces solved another way, the early years
 - Why are techniques to support JavaScript namespaces so convoluted and fragmented ?
 2. Lexical scope and the this execution context
 o The JavaScript global object and the this, global and window keywords
 o What is the difference between the apply(), call() and bind() functions that alter the this context ?
 o Careful reassigning this to potentially conflicting keywords
 3. Closures: Functions that remember their lexical scope
 4. The let and const keywords: Block scoping solved, the modern years; plus saner access, defaults & temporal dead zones (TDZ) for variables
 o Use let and const over var
 5. The export & import keywords and modules: Namespaces solved, the modern years
 6. Pre-ES6 (ES2015) modules detour: CommonJS, AMD and UMD
 7. Arrow functions with =>
 8. The void keyword
 9. Function parameter default values
 10. Generators: Functions with * and the yield keyword
 11. The spread/rest ... operator
 12. The exponentiation operator **
 13. Asynchronous functions with async and await
 14. Numeric separators with the underscore _ character
 3. JavaScript data types
 + Dynamically typed behavior and data types
 + Primitive data types
 + The string primitive data type and String object data type
 o The String object property to determine string size: .length
 o The String object static methods to output strings: String.fromCharCode(); String.fromCodePoint() and String.raw()
 + The number primitive data type, Number object data type and their limits
 + The boolean primitive data type and Boolean object data type
 + The symbol primitive data type and Symbol object data type
 + The bigint primitive data type and BigInt object data type
 + The null and undefined primitive data types
 + Object data types
 + The immutability of primitives and mutablity of objects
 + The Object data type
 o The Object object property descriptors: configurable, enumerable, value, writable, get, set and the static methods to set them Object.defineProperty() & Object.defineProperties()
 o The delete operator to remove Object object properties
 o The Object literal shorthand syntax
 + The global object detour: A top level Object object available in all JavaScript environments
 o The global scope and access to the global object with this
 o Global object access without the this keyword: Window interface & window keyword and Global object & global keyword, the early years
 o Global object access without the this keyword: globalThis property, the modern years
 + The Map and WeakMap data types
 + The Set and WeakSet data types
 + The Proxy and Reflect data types
 4. JavaScript object-orientated and prototype-based programming
 + Prototype-based programming and the prototype property
 + Prototype-based programming and the prototype chain
 + Prototype-based programming constructors & static properties, the early years
 + Prototype-based programming constructors and inheritance, the early years
 + To new or not to new
 + Prototype-based getters and setters with get and set keywords & property descriptors
 o Do JavaScript objects have other encapsulation/accessibility constructs besides getters and setters ?
 + JavaScript OOP keywords: class, constructor, extends, super, get, set and static, the modern years
 o The class and constructor keywords: JavaScript classes
 o The extends and super keywords: JavaScript class inheritance
 o The get & set keywords: JavaScript class getters and setters
 o The static keyword: JavaScript class static properties
 5. Loops in JS
 + for statement in JS: Explicit counters, iterations, step sizes and performance considerations
 + break and continue statements: Exiting for loops and iterations prematurely
 + Label statements in JS loops: GoTo a specific point in the workflow of a JS loop
 + while and do while statements: Loops that run with one expression
 + for in statement: A loop for key-value data structures
 Tip Certain JS data types have built-in methods that produce the same outcome as loops with for, while, do while and inclusively for in statements, but with simpler syntax:
 o Array loop methods: every(), filter(), forEach(), map(), reduce() & reduceRight()
 o Map loop methods: forEach()
 o Set loop methods: forEach()
 + The for of statement in JS: Iterable and iterator protocols, plus what are and how to make iterable objects
 + Generators and yield expressions in JS: Functions that operate with iterable objects
 6. JavaScript asynchronous and parallel execution
 + Single threaded, the problem; non-blocking, asynchronous and parallel execution, the solutions
 + Timeouts, asynchronously delaying the inevitable
 + Callbacks and higher-order functions: They aren't necessarily asynchronous & non-blocking
 + Functions for UI (User Interface) and I/O(Input/Output) related work: Asynchronous & non-blocking
 + Callback hell
 + Promises
 + Async functions
 + Async functions with await
 + Web workers
* The tools
 1. Node JS
 + How Node JS compares to JavaScript browser engines and other programming language run-time environments
 + Node JS - Installation and versioning
 + The Node version manager nvm (Optional)
 + The Node JS node command
 o A JavaScript REPL
 - Use double tab in the Node JS REPL for autocomplete help
 o A JavaScript syntax checker
 o A JavaScript evaluator
 + Node JS - A JavaScript CommonJS based system
 o The Node JS global, globalThis and module objects
 o Using CommonJS modules in Node JS with require
 + Node JS - Built-in JavaScript modules
 o The Node JS dns module: DNS (Domain Name System) operations with JavaScript
 o The Node JS fs module: Read and write files with JavaScript
 + Node JS & the JavaScript asynchronous/callback approach & event loop design
 o Read a file in Node JS, revisited
 o Read a file in Node JS, synchronously (Yes! It's possible)
 o The Node JS http module, asynchronous by nature
 2. Npm
 + Npm - What can it do for you
 + Npm node_modules - The installation directories in the global and local scopes
 + Npm - The package.json file
 3. Deno
 + Why Deno ?
 + Deno - Installation and versioning
 + The deno command
 o deno environment variables
 o deno flags
 o deno subcommands
 + Upgrading Deno: deno upgrade
 + A TypeScript & JavaScript REPL: deno repl
* The complementary tech
 1. TypeScript: The JavaScript that should have been
 + TypeScript origins and its reason for being
 + TypeScript versions and what makes TypeScript a JavaScript superset
 + How to run TypeScript ?
 o Can browsers run TypeScript ? Yes, but with a lot of work
 + TypeScript: Static type syntax
 + TypeScript: Same old, same old JavaScript syntax
 2. WebAssembly: The web's JavaScript liberator
 + JavaScript's performance crux: An interpreted language
 + Getting to machine language from other languages: Interpreted, compiled, assembly, higher level, mid level, system level and low level
 + WebAssembly precursors : Browser add-ons/plug-ins, JavaScript asm.js and transpilers for low level languages
 + WebAssembly: Lessons learned from JavaScript, browsers, add-ons/plug-ins, low level languages and transpilers
 + WebAssembly: The future of the web
 3. Rust
 Lifetime subscription to Modern JS
 Skip the ads + get the video version!
 Home The beginning
 What is JavaScript ? What is modern JavaScript ? Modern JavaScript essentials: Concepts and tools
 The concepts
 JavaScript key concepts & syntax JavaScript data types JavaScript object-orientated and prototype-based programming Loops in JS
 Intro & sub-sections for statement in JS break and continue statements in JS Label statements in JS loops while and do while statements in JS for in statement in JS for of statement in JS Generators and yield expressions in JS
 JavaScript asynchronous and parallel execution
 The tools
 Node JS Npm Deno
 The complementary tech
 TypeScript: The JavaScript that should have been WebAssembly: The web's JavaScript liberator Rust: How Rust complements Modern JavaScript
 The console
 Solutions to the most common modern JS errors
 "extract-text-webpack-plugin" loader is used without the corresponding plugin no configuration file found and no output filename configured via cli option. a configuration file could be named 'webpack.config.js' in the current directory. use --help to display the cli options. getinitialstate was defined on app, a plain javascript class. this is only supported for classes created using react.createclass. did you mean to define a state property instead?
 Enabling JavaScript offers a better navigation experience
Modern JavaScript
https://www.modernjs.com/
https://github.com/orgs/javascript-tutorial/repositories
The Modern JavaScript Tutorial
2024-04-30
None
<div><div><div><p></p><h2>All</h2></div><div><h2>Repositories list</h2><ul><li><div><p></p></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/it.javascript.info/forks">50</a><p></p><a href="https://github.com/javascript-tutorial/it.javascript.info/stargazers">79</a><p></p><a href="https://github.com/javascript-tutorial/it.javascript.info/issues">5</a><p></p><a href="https://github.com/javascript-tutorial/it.javascript.info/pulls">6</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/pt.javascript.info/forks">111</a><p></p><a href="https://github.com/javascript-tutorial/pt.javascript.info/stargazers">219</a><p></p><a href="https://github.com/javascript-tutorial/pt.javascript.info/issues">2</a><p></p><a href="https://github.com/javascript-tutorial/pt.javascript.info/pulls">24</a><p></p></div></div></li><li><div><p></p></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/tr.javascript.info/forks">111</a><p></p><a href="https://github.com/javascript-tutorial/tr.javascript.info/stargazers">337</a><p></p><a href="https://github.com/javascript-tutorial/tr.javascript.info/issues">6</a><p></p><a href="https://github.com/javascript-tutorial/tr.javascript.info/pulls">2</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/ar.javascript.info/forks">63</a><p></p><a href="https://github.com/javascript-tutorial/ar.javascript.info/stargazers">60</a><p></p><a href="https://github.com/javascript-tutorial/ar.javascript.info/issues">8</a><p></p><a href="https://github.com/javascript-tutorial/ar.javascript.info/pulls">10</a><p></p></div></div></li><li><div><p></p><a href="https://github.com/javascript-tutorial/engine/forks">29</a><p></p><a href="https://github.com/javascript-tutorial/engine/stargazers">20</a><p></p><a href="https://github.com/javascript-tutorial/engine/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/engine/pulls">3</a><p></p></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/th.javascript.info/forks">8</a><p></p><a href="https://github.com/javascript-tutorial/th.javascript.info/stargazers">17</a><p></p><a href="https://github.com/javascript-tutorial/th.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/th.javascript.info/pulls">0</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/de.javascript.info/forks">35</a><p></p><a href="https://github.com/javascript-tutorial/de.javascript.info/stargazers">34</a><p></p><a href="https://github.com/javascript-tutorial/de.javascript.info/issues">2</a><p></p><a href="https://github.com/javascript-tutorial/de.javascript.info/pulls">18</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/ja.javascript.info/forks">80</a><p></p><a href="https://github.com/javascript-tutorial/ja.javascript.info/stargazers">393</a><p></p><a href="https://github.com/javascript-tutorial/ja.javascript.info/issues">3</a><p></p><a href="https://github.com/javascript-tutorial/ja.javascript.info/pulls">2</a><p></p></div></div></li><li><div><p></p></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/uk.javascript.info/forks">168</a><p></p><a href="https://github.com/javascript-tutorial/uk.javascript.info/stargazers">308</a><p></p><a href="https://github.com/javascript-tutorial/uk.javascript.info/issues">6</a><p></p><a href="https://github.com/javascript-tutorial/uk.javascript.info/pulls">4</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/ku.javascript.info/forks">1</a><p></p><a href="https://github.com/javascript-tutorial/ku.javascript.info/stargazers">2</a><p></p><a href="https://github.com/javascript-tutorial/ku.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/ku.javascript.info/pulls">0</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/fr.javascript.info/forks">105</a><p></p><a href="https://github.com/javascript-tutorial/fr.javascript.info/stargazers">198</a><p></p><a href="https://github.com/javascript-tutorial/fr.javascript.info/issues">3</a><p></p><a href="https://github.com/javascript-tutorial/fr.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/es.javascript.info/forks">220</a><p></p><a href="https://github.com/javascript-tutorial/es.javascript.info/stargazers">517</a><p></p><a href="https://github.com/javascript-tutorial/es.javascript.info/issues">10</a><p></p><a href="https://github.com/javascript-tutorial/es.javascript.info/pulls">0</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/id.javascript.info/forks">80</a><p></p><a href="https://github.com/javascript-tutorial/id.javascript.info/stargazers">132</a><p></p><a href="https://github.com/javascript-tutorial/id.javascript.info/issues">3</a><p></p><a href="https://github.com/javascript-tutorial/id.javascript.info/pulls">4</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/hi.javascript.info/forks">49</a><p></p><a href="https://github.com/javascript-tutorial/hi.javascript.info/stargazers">28</a><p></p><a href="https://github.com/javascript-tutorial/hi.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/hi.javascript.info/pulls">8</a><p></p></div></div></li><li><div><p></p><div><p></p><a href="https://github.com/javascript-tutorial/project/forks">126</a><p></p><a href="https://github.com/javascript-tutorial/project/stargazers">1</a><p></p><a href="https://github.com/javascript-tutorial/project/issues">0</a><p></p><a href="https://github.com/javascript-tutorial/project/pulls">50</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/fa.javascript.info/forks">92</a><p></p><a href="https://github.com/javascript-tutorial/fa.javascript.info/stargazers">183</a><p></p><a href="https://github.com/javascript-tutorial/fa.javascript.info/issues">4</a><p></p><a href="https://github.com/javascript-tutorial/fa.javascript.info/pulls">0</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/ky.javascript.info/forks">1</a><p></p><a href="https://github.com/javascript-tutorial/ky.javascript.info/stargazers">5</a><p></p><a href="https://github.com/javascript-tutorial/ky.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/ky.javascript.info/pulls">0</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/ml.javascript.info/forks">8</a><p></p><a href="https://github.com/javascript-tutorial/ml.javascript.info/stargazers">2</a><p></p><a href="https://github.com/javascript-tutorial/ml.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/ml.javascript.info/pulls">0</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/hy.javascript.info/forks">9</a><p></p><a href="https://github.com/javascript-tutorial/hy.javascript.info/stargazers">8</a><p></p><a href="https://github.com/javascript-tutorial/hy.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/hy.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/hu.javascript.info/forks">7</a><p></p><a href="https://github.com/javascript-tutorial/hu.javascript.info/stargazers">3</a><p></p><a href="https://github.com/javascript-tutorial/hu.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/hu.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/hr.javascript.info/forks">0</a><p></p><a href="https://github.com/javascript-tutorial/hr.javascript.info/stargazers">2</a><p></p><a href="https://github.com/javascript-tutorial/hr.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/hr.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/he.javascript.info/forks">4</a><p></p><a href="https://github.com/javascript-tutorial/he.javascript.info/stargazers">4</a><p></p><a href="https://github.com/javascript-tutorial/he.javascript.info/issues">2</a><p></p><a href="https://github.com/javascript-tutorial/he.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/fi.javascript.info/forks">2</a><p></p><a href="https://github.com/javascript-tutorial/fi.javascript.info/stargazers">1</a><p></p><a href="https://github.com/javascript-tutorial/fi.javascript.info/issues">3</a><p></p><a href="https://github.com/javascript-tutorial/fi.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/ca.javascript.info/forks">2</a><p></p><a href="https://github.com/javascript-tutorial/ca.javascript.info/stargazers">3</a><p></p><a href="https://github.com/javascript-tutorial/ca.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/ca.javascript.info/pulls">2</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/bs.javascript.info/forks">0</a><p></p><a href="https://github.com/javascript-tutorial/bs.javascript.info/stargazers">0</a><p></p><a href="https://github.com/javascript-tutorial/bs.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/bs.javascript.info/pulls">1</a><p></p></div></div></li><li><div><p></p><div><p></p><p></p><a href="https://github.com/javascript-tutorial/bn.javascript.info/forks">89</a><p></p><a href="https://github.com/javascript-tutorial/bn.javascript.info/stargazers">116</a><p></p><a href="https://github.com/javascript-tutorial/bn.javascript.info/issues">1</a><p></p><a href="https://github.com/javascript-tutorial/bn.javascript.info/pulls">9</a><p></p></div></div></li></ul></div></div></div>||||I|||| Skip to content

 Navigation Menu

 Toggle navigation
 Sign in
 javascript-tutorial
 * Product
 + Actions
 Automate any workflow
 + Packages
 Host and manage packages
 + Security
 Find and fix vulnerabilities
 + Codespaces
 Instant dev environments
 + Copilot
 Write better code with AI
 + Code review
 Manage code changes
 + Issues
 Plan and track work
 + Discussions
 Collaborate outside of code
 Explore
 + All features
 + Documentation
 + GitHub Skills
 + Blog
 * Solutions
 For
 + Enterprise
 + Teams
 + Startups
 + Education
 By Solution
 + CI/CD & Automation
 + DevOps
 + DevSecOps
 Resources
 + Learning Pathways
 + White papers, Ebooks, Webinars
 + Customer Stories
 + Partners
 * Open Source
 + GitHub Sponsors
 Fund open source developers
 + The ReadME Project
 GitHub community articles
 Repositories
 + Topics
 + Trending
 + Collections
 * Pricing
 Search or jump to...

 Search code, repositories, users, issues, pull requests...

 Search
 Clear
 Search syntax tips

 Provide feedback

 We read every piece of feedback, and take your input very seriously.

 Include my email address so I can be contacted
 Cancel Submit feedback

 Saved searches

 Use saved searches to filter your results more quickly

 Name
 Query

 To see all available qualifiers, see our documentation.

 Cancel Create saved search
 Sign in
 Sign up
 You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
 {{ message }}

 The Modern JavaScript Tutorial

 * Overview
 * Repositories
 * Projects
 * Packages
 * People
 More
 * Overview
 * Repositories
 * Projects
 * Packages
 * People

 Repositories

 * All
 * Public
 * Sources
 * Forks
 * Archived
 * Mirrors
 * Templates

 All repositories

 Change the repository type filter

 All

 Beta Give feedback
 Search repositories

 Repositories list

 71 repositories

 Last pushed
 * 
 * 

 * ru.javascript.info

 Public
 Современный учебник JavaScript
 russian javascript tutorial
 HTML
 •
 Other
 • 897 • 3.7k • 18 • 18 • Updated Apr 30, 2024Apr 30, 2024

 * it.javascript.info

 Public
 Modern JavaScript Tutorial in Italian
 javascript tutorial italian
 HTML
 •
 Other
 • 50 • 79 • 5 • 6 • Updated Apr 30, 2024Apr 30, 2024

 * pt.javascript.info

 Public
 Tutorial de JavaScript Moderno em Português
 javascript tutorial portuguese
 HTML
 •
 Other
 • 111 • 219 • 2 • 24 • Updated Apr 28, 2024Apr 28, 2024

 * en.javascript.info

 Public
 Modern JavaScript Tutorial
 javascript tutorial english
 HTML
 •
 Other
 • 3.8k • 23k • 179 • 188 • Updated Apr 28, 2024Apr 28, 2024

 * tr.javascript.info

 Public
 Modern JavaScript Tutorial in Turkish
 javascript tutorial turkish
 HTML
 •
 Other
 • 111 • 337 • 6 • 2 • Updated Apr 26, 2024Apr 26, 2024

 * ar.javascript.info

 Public
 Modern JavaScript Tutorial in Arabic
 arabic javascript tutorial
 HTML
 •
 Other
 • 63 • 60 • 8 • 10 • Updated Apr 25, 2024Apr 25, 2024

 * engine

 Public
 JavaScript
 • 29 • 20 • 1 • 3 • Updated Apr 23, 2024Apr 23, 2024

 * th.javascript.info

 Public
 Modern JavaScript Thai Version
 javascript tutorial thai hacktoberfest mdn
 HTML
 •
 Other
 • 8 • 17 • 1 • 0 • Updated Apr 21, 2024Apr 21, 2024

 * de.javascript.info

 Public
 Modern JavaScript Tutorial in German
 german javascript tutorial
 HTML
 •
 Other
 • 35 • 34 • 2 • 18 • Updated Apr 20, 2024Apr 20, 2024

 * ja.javascript.info

 Public
 現代の JavaScript チュートリアル
 japanese javascript tutorial
 HTML
 •
 Other
 • 80 • 393 • 3 • 2 • Updated Apr 19, 2024Apr 19, 2024

 * zh.javascript.info

 Public
 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。
 javascript tutorial chinese
 HTML
 •
 Other
 • 1.1k • 9.3k • 13 • 12 • Updated Apr 18, 2024Apr 18, 2024

 * uk.javascript.info

 Public
 Modern JavaScript Tutorial in Ukrainian (JavaScript українською 🇺🇦)
 javascript ukrainian tutorial
 HTML
 •
 Other
 • 168 • 308 • 6 • 4 • Updated Apr 10, 2024Apr 10, 2024

 * ku.javascript.info

 Public
 Modern JavaScript Tutorial in Kurdish | فێرکاری مۆدێرن جاڤاسکڕێپت بە زمانی کوردی
 javascript tutorial kurdish kurdistan rojcode
 HTML
 •
 Other
 • 1 • 2 • 1 • 0 • Updated Apr 9, 2024Apr 9, 2024

 * fr.javascript.info

 Public
 Modern JavaScript Tutorial
 tutorial french hacktoberfest javascript
 HTML
 •
 Other
 • 105 • 198 • 3 • 1 • Updated Mar 14, 2024Mar 14, 2024

 * ko.javascript.info

 Public
 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean )
 learning korean javascript tutorial
 HTML
 •
 Other
 • 816 • 1.8k • 177 • 69 • Updated Mar 1, 2024Mar 1, 2024

 * es.javascript.info

 Public
 Spanish translation of javascript.info site.
 javascript tutorial spanish
 HTML
 •
 Other
 • 220 • 517 • 10 • 0 • Updated Feb 27, 2024Feb 27, 2024

 * id.javascript.info

 Public
 Tutorial JavaScript Modern dalam Bahasa Indonesia
 javascript tutorial indonesian
 HTML
 •
 Other
 • 80 • 132 • 3 • 4 • Updated Feb 27, 2024Feb 27, 2024

 * hi.javascript.info

 Public
 Modern JavaScript Tutorial in Hindi
 hindi javascript tutorial
 HTML
 •
 Other
 • 49 • 28 • 1 • 8 • Updated Feb 25, 2024Feb 25, 2024

 * project

 Public
 Git Crash Course demo repository
 HTML
 • 126 • 1 • 0 • 50 • Updated Feb 11, 2024Feb 11, 2024

 * fa.javascript.info

 Public
 Modern JavaScript Tutorial in Persian (Farsi)
 persian-farsi javascript tutorial
 HTML
 •
 Other
 • 92 • 183 • 4 • 0 • Updated Feb 8, 2024Feb 8, 2024

 * ky.javascript.info

 Public
 Modern JavaScript Tutorial in Kyrgyz
 javascript tutorial kyrgyz
 HTML
 •
 Other
 • 1 • 5 • 1 • 0 • Updated Feb 6, 2024Feb 6, 2024

 * ml.javascript.info

 Public
 Modern JavaScript Tutorial in Malayalam
 javascript malayalam tutorial
 HTML
 •
 Other
 • 8 • 2 • 1 • 0 • Updated Dec 26, 2023Dec 26, 2023

 * hy.javascript.info

 Public
 Modern JavaScript Tutorial in Armenian
 javascript tutorial armenian
 HTML
 •
 Other
 • 9 • 8 • 1 • 1 • Updated Nov 13, 2023Nov 13, 2023

 * hu.javascript.info

 Public
 Modern JavaScript Tutorial in Hungarian
 javascript tutorial hungarian
 HTML
 •
 Other
 • 7 • 3 • 1 • 1 • Updated Nov 13, 2023Nov 13, 2023

 * hr.javascript.info

 Public
 Modern JavaScript Tutorial in Croatian
 javascript tutorial croatian
 HTML
 •
 Other
 • 0 • 2 • 1 • 1 • Updated Nov 13, 2023Nov 13, 2023

 * he.javascript.info

 Public
 Modern JavaScript Tutorial in Hebrew
 javascript tutorial hebrew
 HTML
 •
 Other
 • 4 • 4 • 2 • 1 • Updated Nov 13, 2023Nov 13, 2023

 * fi.javascript.info

 Public
 Modern JavaScript Tutorial in Finnish
 javascript tutorial finnish
 HTML
 •
 Other
 • 2 • 1 • 3 • 1 • Updated Nov 13, 2023Nov 13, 2023

 * ca.javascript.info

 Public
 Modern JavaScript Tutorial in Catalan
 javascript tutorial catalan
 HTML
 •
 Other
 • 2 • 3 • 1 • 2 • Updated Nov 13, 2023Nov 13, 2023

 * bs.javascript.info

 Public
 Modern JavaScript Tutorial in Bosnian
 bosnian javascript tutorial
 HTML
 •
 Other
 • 0 • 0 • 1 • 1 • Updated Nov 13, 2023Nov 13, 2023

 * bn.javascript.info

 Public
 Modern JavaScript Tutorial in Bengali
 bengali hacktoberfest javascript tutorial
 HTML
 •
 Other
 • 89 • 116 • 1 • 9 • Updated Nov 13, 2023Nov 13, 2023
 Previous123Next

 Footer

 © 2024 GitHub, Inc.

 Footer navigation

 * Terms
 * Privacy
 * Security
 * Status
 * Docs
 * Contact
 * Manage cookies
 * Do not share my personal information
 You can’t perform that action at this time.
All   Repositories list                 50   79   5   6               111   219   2   24                     111   337   6   2               63   60   8   10          29   20   1   3              8   17   1   0               35   34   2   18               80   393   3   2                     168   308   6   4               1   2   1   0               105   198   3   1                     220   517   10   0               80   132   3   4               49   28   1   8             126   1   0   50               92   183   4   0               1   5   1   0               8   2   1   0               9   8   1   1               7   3   1   1               0   2   1   1               4   4   2   1               2   1   3   1               2   3   1   2               0   0   1   1               89   116   1   9
The Modern JavaScript Tutorial
https://github.com/orgs/javascript-tutorial/repositories
https://www.freecodecamp.org/news/best-javascript-tutorial/
The Best JavaScript Tutorials
2019-12-01
Freecodecamp Org
<div><div>
 <article>
 
 
 
 <figure>
 
 
 
 
 
 
 
 </figure>
 
 <section>
 <section>
 
<p>JavaScript is the most widely used scripting language on Earth. And it has the largest library ecosystem of any programming language.</p><p>JavaScript is the core language of the web, and the only programming language that can run in all major web browsers.</p><p>Notably, JavaScript has no relation to Java. Check out <a href="http://www.crockford.com/javascript/javascript.html">JavaScript: The World’s Most Misunderstood Programming Language</a>.</p><p>The official name of JavaScript is ECMAScript defined under Standard <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a>.</p><p>If you want to learn more about the JavaScript language, and why it’s so widely used, read Quincy Larson’s article - <a href="https://www.freecodecamp.org/news/what-programming-language-should-i-learn-first-19a33b0a467d/">Which programming language should I learn first?</a> - or watch this <a href="https://www.youtube.com/watch?v=VqiEhZYmvKk">inspiring video from Preethi Kasireddy</a>.</p><p>freeCodeCamp has an <a href="https://www.youtube.com/watch?v=PkZNo7MFNFg">in-depth JavaScript tutorial</a> on YouTube that will teach you all the fundamentals in just 3 hours.</p><figure></figure><h2>Some other good JavaScript tutorials:</h2><ul><li><a href="http://jsforcats.com/">JavaScript for Cats</a></li><li><a href="https://javascript.info/">The Modern JavaScript Tutorial</a></li><li><a href="https://github.com/DrBoolean/mostly-adequate-guide">Professor Frisby’s Mostly Adequate Guide to Functional Programming</a></li><li><a href="http://www.eloquentjavascript.net/">Eloquent Javascript</a> (<a href="https://watchandcode.com/courses/eloquent-javascript-the-annotated-version"><em>annotated</em></a>)</li><li><a href="http://speakingjs.com/es5/">Speaking Javascript</a></li><li><a href="http://exploringjs.com/es6/">Exploring ES6</a></li><li><a href="https://www.youtube.com/watch?v=Bv_5Zv5c-Ts">Udemy - Javascript Understanding the Weird Parts (<em>first 3.5 hrs</em>)</a></li><li><a href="https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84">Functional programming in JavaScript</a></li><li><a href="https://www.educative.io/collection/5679346740101120/5720605454237696?authorName=Arnav%20Aggarwal">Introduction to JavaScript: First Steps</a></li><li><a href="https://www.youtube.com/watch?v=v2ifWcnQs6M&amp;index=1&amp;list=PL62E185BB8577B63D">Douglas Crockford’s Videos</a></li><li><a href="https://mbeaudru.github.io/modern-js-cheatsheet/">Modern JS Cheatsheet</a></li><li><a href="http://www.codeconquest.com/blog/top-50-websites-to-learn-javascript/">The 50 Best Websites to Learn JavaScript</a></li><li><a href="https://www.codementor.io/community/topic/javascript">Codementor JavaScript tutorial</a></li><li><a href="http://youmightnotneedjquery.com/">You Might Not Need jQuery</a></li></ul><h2><strong>References</strong></h2><ul><li><a href="http://devdocs.io/">DevDocs</a></li><li><a href="http://overapi.com/javascript">OverAPI JavaScript Cheat Sheet</a></li><li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Mozilla Developer Network (MDN)</a></li></ul><h2><strong>Quick JavaScript</strong></h2><ul><li><a href="https://repl.it/languages/Javascript">REPL</a> (<a href="https://repl.it/languages/iojs/"><em>node</em></a>)</li><li><a href="http://jsbin.com/">JSBin</a></li><li><a href="https://jsfiddle.net/">JSFiddle</a></li><li><a href="http://codepen.io/">CodePen</a></li><li><a href="http://coderpad.io/">CoderPad (<em>pair programming</em>)</a></li><li><a href="http://c9.io/">C9 (<em>IDE</em>, <em>pair programming</em>)</a></li><li><a href="http://www.objectplayground.com/">Object Playground (<em>visualize objects</em>)</a></li><li><a href="http://plnkr.co/">Plunker</a></li></ul><h2><strong>Challenges</strong></h2><ul><li><a href="http://codewars.com/">Code Wars</a></li><li><a href="https://hackerrank.com/">Hacker Rank</a></li><li><a href="http://codingame.com/">Coding Game</a></li><li><a href="https://codefights.com/home">CodeFights</a></li><li><a href="http://es6katas.org/">ES6 Katas</a></li></ul><ul><li><a href="https://www.codecademy.com/">Codecademy</a></li><li><a href="https://www.rithmschool.com/">RithmSchool</a></li></ul><h2><strong>Exercises</strong></h2><ul><li><a href="https://codility.com/programmers/lessons/">Codility</a></li><li><a href="http://coderbyte.com/">Coderbyte</a></li><li><a href="http://exercism.io/">Exercism</a></li><li><a href="https://javascript30.com/">JavaScript30</a></li><li><a href="https://www.javascript.com/">Javascript.com (Pluralsight)</a></li></ul><h2><strong>Editors</strong></h2><ul><li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li><li><a href="http://atom.io/">Atom</a></li><li><a href="https://www.sublimetext.com/">Sublime Text</a></li><li><a href="https://www.jetbrains.com/webstorm/">Webstorm</a></li><li><a href="http://brackets.io/">Brackets</a></li></ul><h2><strong>Blogs</strong></h2><ul><li><a href="http://perfectionkills.com/">Perfection Kills</a></li><li><a href="http://www.2ality.com/">2ality</a></li><li><a href="https://medium.com/the-javascript-collection">JS collection on Medium</a></li><li><a href="https://davidwalsh.name/">David Walsh</a></li><li><a href="http://superherojs.com/">superheroJS</a></li></ul><h2><strong>Podcasts</strong></h2><ul><li><a href="https://devchat.tv/js-jabber">JS Jabber</a></li></ul><h2><strong>Video Tutorials</strong></h2><ul><li><a href="https://www.youtube.com/watch?v=fju9ii8YsGs">Derek Banas’ Learn JS In One Video</a></li><li><a href="https://www.youtube.com/watch?v=O8wwnhdkPE4">Derek Banas’ Object Oriented JavaScript</a></li></ul><h2><strong>Books</strong></h2><ul><li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja">Secrets of the JavaScript Ninja</a></li><li><a href="http://pjabook.com/">Programming JavaScript Applications</a></li><li><a href="http://shop.oreilly.com/product/0636920025245.do">Maintainable JavaScript</a></li><li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">Learning JavaScript Design Patterns</a></li><li><a href="https://github.com/airbnb/javascript">Airbnb JavaScript Style Guide</a></li><li><a href="http://usejsdoc.org/">JSDoc</a></li><li><a href="https://leanpub.com/javascriptallongesix/read">Javascript Allonge Six</a></li><li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a></li></ul><p>	6 books on JavaScript by Kyle Simpson, from beginner to advanced.</p><ul><li><a href="http://www.eloquentjavascript.net/">Eloquent Javascript</a></li></ul><p>	Fantastic, thorough introduction to the basics and features of JavaScript, complete 	with in-browser interactive code.</p><ul><li><a href="https://github.com/DrBoolean/mostly-adequate-guide">Professor Frisby’s Mostly Adequate Guide to Functional Programming</a></li></ul><p>	Quite in-depth guide to Functional Programming in JavaScript</p><ul><li><a href="https://github.com/bpesquet/thejsway">The JavaScript Way</a></li><li><a href="https://github.com/getify/Functional-Light-JS">Functional Light JS</a></li></ul><h2><strong>Standalone JavaScript engines</strong></h2><p>Mozilla’s SpiderMonkey, the first JavaScript engine ever written, currently used in Mozilla Firefox. </p><p>V8, Google’s JavaScript engine, used in Google Chrome.</p><p>Google Apps Script, a cloud-based/server-side interpreter that provides programmatic “macro-like” control of Google Apps services and documents.</p><p>Node.js, built on top of V8, a platform which enables server-side applications to be written in JavaScript.</p><p>Windows includes JScript, a JavaScript variant in Windows Script Host.</p><p>Chakra, a fork of Jscript, is developed by Microsoft and used in their Edge browser.</p><p>Mozilla also offers Rhino, an implementation of JavaScript built in Java, typically embedded into Java applications to provide scripting to end users.</p><p>WebKit (except for the Chromium project) implements the JavaScriptCore engine.</p><h2><strong>JavaScript Frameworks</strong></h2><p>The most frequently used JavaScript Frameworks are React JS, Angular JS, jQuery, and NodeJS. For more details follow this <a href="https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/">link</a>.</p><h2><strong>Advantages and Disadvantages of JavaScript</strong></h2><p>Like with all programming languages, JavaScript has certain advantages and disadvantages to consider. Many of these are related to the way JavaScript is often executed directly in a client's browser. But there are other ways to use JavaScript now that allow it to have the same benefits of server-side languages.</p><h2><strong>Advantages of JavaScript</strong></h2><ul><li><strong><strong><strong><strong>Speed</strong></strong> - </strong></strong>JavaScript tends to be very fast because it is often run immediately within the client's browser. So long as it doesn't require outside resources, JavaScript isn't slowed down by calls to a backend server. Also, major browsers all support JIT (just in time) compilation for JavaScript, meaning that there's no need to compile the code before running it.</li><li><strong><strong><strong><strong>Simplicity</strong></strong> - </strong></strong>JavaScript's syntax was inspired by Java's and is relatively easy to learn compared to other popular languages like C++.</li><li><strong><strong><strong><strong>Popularity</strong></strong> - </strong></strong>JavaScript is everywhere on the web, and with the advent of Node.js, is increasingly used on the backend. There are countless resources to learn JavaScript. Both StackOverflow and GitHub show an increasing amount of projects that use JavaScript, and the traction it's gained in recent years is only expected to increase.</li><li><strong><strong><strong><strong>Interoperability</strong></strong> - </strong></strong>Unlike PHP or other scripting languages, JavaScript can be inserted into any web page. JavaScript can be used in many different kinds of applications because of support in other languages like Pearl and PHP.</li><li><strong><strong><strong><strong>Server Load</strong></strong> -</strong></strong> JavaScript is client-side, so it reduces the demand on servers overall, and simple applications may not need a server at all.</li><li><strong><strong><strong><strong>Rich interfaces</strong></strong> - </strong></strong>JavaScript can be used to create features like drag and drop and components such as sliders, all of which greatly enhance the user interface and experience of a site.</li><li><strong><strong><strong><strong>Extended Functionality</strong></strong> - </strong></strong>Developers can extend the functionality of web pages by writing snippets of JavaScript for third party add-ons like Greasemonkey.</li><li><strong><strong><strong><strong>Versatility</strong></strong> - </strong></strong>There are many ways to use JavaScript through Node.js servers. If you were to bootstrap Node.js with Express, use a document database like MongoDB, and use JavaScript on the frontend for clients, it is possible to develop an entire JavaScript app from front to back using only JavaScript.</li><li><strong><strong><strong><strong>Updates</strong></strong> - </strong></strong>Since the advent of ECMAScript 5 (the scripting specification that JavaScript relies on), ECMA International has been dedicated to updating JavaScript annually. So far, we have received browser support for ES6 in 2017 and look forward to ES7 being supported in the future.</li></ul><h2><strong>Disadvantages of JavaScript</strong></h2><ul><li><strong><strong><strong><strong>Client-Side Security</strong></strong> - </strong></strong>Since JavaScript code is executed on the client-side, bugs and oversights can sometimes be exploited for malicious purposes. Because of this, some people choose to disable JavaScript entirely.</li><li><strong><strong><strong><strong>Browser Support</strong></strong> - </strong></strong>While server-side scripts always produce the same output, different browsers sometimes interpret JavaScript code differently. These days the differences are minimal, and you shouldn't have to worry about it as long as you test your script in all major browsers.</li></ul><h2><strong>ES6</strong></h2><p>The 6th edition of ECMAScript is called ES6.</p><p>It is also know as ES2015.</p><p>The changes add a lot of syntactic sugar that allow developers to create applications in an object oriented style.</p><p>ES5 example:</p><pre><code>var User = function () {
 function User(name) {
 this._name = name;
 }
 User.prototype.getName = function getName(x) {
 return 'Mr./Mrs. ' + this._name;
 };
 return User;
}();</code></pre><p>ES6 example:</p><pre><code>class User {
 constructor(name) {
 this._name = name
 }
 getName() {
 return `Mr./Mrs. ${this._name}`
 }
}</code></pre><p>A lot of new syntax features were introduced including:</p><ul><li>classes</li><li>modules</li><li>templating</li><li>for/of loops</li><li>generator expressions</li><li>arrow functions</li><li>collections</li><li>promises</li></ul><p>Nowadays most of the features are available in all popular browsers. The <a href="https://kangax.github.io/compat-table/es6/">compatibility table</a> contains all information about feature availability of all modern browsers.</p><p>Frequently, new features arrive that are part of the successor ES7. A common way is to translate modern JavaScript (ES6, ES7 and other experimental proposals) to ES5. This makes sure that also old browsers can execute the code. There are tools like <a href="https://babeljs.io/">Babel</a> that transforms new JavaScript to ES5.</p><p>Besides syntactic sugar coming from ECMAScript standards there are features that require a <a href="https://babeljs.io/docs/usage/polyfill">Polyfill</a>. Usually they are necessary because whole class/method implementations were added to the standard.</p><h2><strong>Object Instantiation</strong></h2><p>In JavaScript and most other languages, an object contains a series of properties, which are a key, value pair. There are multiple options available to you when you need to construct an object.</p><h3><strong>Initialize an object variable</strong></h3><p>You can create an object with pre-defined properties like so:</p><pre><code>let myObject = {
 name: "Dave",
 age: 33
}</code></pre><h3><strong>Creating an empty object</strong></h3><p>This creates an empty object inside our myObject variable:</p><pre><code>let myObject = new Object();</code></pre><p>When you wish to add properties to your object, you simply use either dot notation or bracket notation with the property name of your choice:</p><pre><code>myObject.name = "Johnny Mnemonic"
myObject["age"] = 55</code></pre><h3><strong>Using a constructor function</strong></h3><p>You can define a constructor function that you can use to create your objects:</p><pre><code>function Kitten(name, cute, color) {
 this.name = name,
 this.cute = cute,
 this.color = color
}</code></pre><p>You can define a variable containing an instantiation of this object by calling the constructor function:</p><pre><code>let myKitten = new Kitten("Nibbles", true, "white")</code></pre><h3><strong>Object.create()</strong></h3><p>The Object.create() method (first defined in ECMAScript 5.1) allows you to create objects. it allows you to choose the prototype object for your new object without needing to define a constructor function beforehand.</p><pre><code>// Our pre-defined object
let kitten = {
 name: "Fluff",
 cute: true,
 color: "gray"
}
// Create a new object using Object.create(). kitten is used as the prototype
let newKitten = Object.create(kitten)
console.log(newKitten.name) // Will output "Fluff"</code></pre>
 </section>
 <hr />
 
 
 
 
 
 
 
 
<p>
 Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. <a href="https://www.freecodecamp.org/learn/">Get started</a>
 </p>
 
 </section>
 
 
 
 </article>
 </div>||||I|||| Search Submit your search query
 Forum Donate

 December 1, 2019 / #JavaScript

 The Best JavaScript Tutorials

 JavaScript is the most widely used scripting language on Earth. And it has the largest library ecosystem of any programming language.

 JavaScript is the core language of the web, and the only programming language that can run in all major web browsers.

 Notably, JavaScript has no relation to Java. Check out JavaScript: The World’s Most Misunderstood Programming Language.

 The official name of JavaScript is ECMAScript defined under Standard ECMA-262.

 If you want to learn more about the JavaScript language, and why it’s so widely used, read Quincy Larson’s article - Which programming language should I learn first? - or watch this inspiring video from Preethi Kasireddy.

 freeCodeCamp has an in-depth JavaScript tutorial on YouTube that will teach you all the fundamentals in just 3 hours.

 Some other good JavaScript tutorials:

 * JavaScript for Cats
 * The Modern JavaScript Tutorial
 * Professor Frisby’s Mostly Adequate Guide to Functional Programming
 * Eloquent Javascript (annotated)
 * Speaking Javascript
 * Exploring ES6
 * Udemy - Javascript Understanding the Weird Parts (first 3.5 hrs)
 * Functional programming in JavaScript
 * Introduction to JavaScript: First Steps
 * Douglas Crockford’s Videos
 * Modern JS Cheatsheet
 * The 50 Best Websites to Learn JavaScript
 * Codementor JavaScript tutorial
 * You Might Not Need jQuery

 References

 * DevDocs
 * OverAPI JavaScript Cheat Sheet
 * ECMA-262
 * Mozilla Developer Network (MDN)

 Quick JavaScript

 * REPL (node)
 * JSBin
 * JSFiddle
 * CodePen
 * CoderPad (pair programming)
 * C9 (IDE, pair programming)
 * Object Playground (visualize objects)
 * Plunker

 Challenges

 * Code Wars
 * Hacker Rank
 * Coding Game
 * CodeFights
 * ES6 Katas

 Tutorials

 * Codecademy
 * RithmSchool

 Exercises

 * Codility
 * Coderbyte
 * Exercism
 * JavaScript30
 * Javascript.com (Pluralsight)

 Editors

 * Visual Studio Code
 * Atom
 * Sublime Text
 * Webstorm
 * Brackets

 Blogs

 * Perfection Kills
 * 2ality
 * JS collection on Medium
 * David Walsh
 * superheroJS

 Podcasts

 * JS Jabber

 Video Tutorials

 * Derek Banas’ Learn JS In One Video
 * Derek Banas’ Object Oriented JavaScript

 Books

 * Secrets of the JavaScript Ninja
 * Programming JavaScript Applications
 * Maintainable JavaScript
 * Learning JavaScript Design Patterns
 * Airbnb JavaScript Style Guide
 * JSDoc
 * Javascript Allonge Six
 * You Don’t Know JS

 6 books on JavaScript by Kyle Simpson, from beginner to advanced.

 * Eloquent Javascript

 Fantastic, thorough introduction to the basics and features of JavaScript, complete with in-browser interactive code.

 * Professor Frisby’s Mostly Adequate Guide to Functional Programming

 Quite in-depth guide to Functional Programming in JavaScript

 * The JavaScript Way
 * Functional Light JS

 Standalone JavaScript engines

 Mozilla’s SpiderMonkey, the first JavaScript engine ever written, currently used in Mozilla Firefox.

 V8, Google’s JavaScript engine, used in Google Chrome.

 Google Apps Script, a cloud-based/server-side interpreter that provides programmatic “macro-like” control of Google Apps services and documents.

 Node.js, built on top of V8, a platform which enables server-side applications to be written in JavaScript.

 Windows includes JScript, a JavaScript variant in Windows Script Host.

 Chakra, a fork of Jscript, is developed by Microsoft and used in their Edge browser.

 Mozilla also offers Rhino, an implementation of JavaScript built in Java, typically embedded into Java applications to provide scripting to end users.

 WebKit (except for the Chromium project) implements the JavaScriptCore engine.

 JavaScript Frameworks

 The most frequently used JavaScript Frameworks are React JS, Angular JS, jQuery, and NodeJS. For more details follow this link.

 Advantages and Disadvantages of JavaScript

 Like with all programming languages, JavaScript has certain advantages and disadvantages to consider. Many of these are related to the way JavaScript is often executed directly in a client's browser. But there are other ways to use JavaScript now that allow it to have the same benefits of server-side languages.

 Advantages of JavaScript

 * Speed - JavaScript tends to be very fast because it is often run immediately within the client's browser. So long as it doesn't require outside resources, JavaScript isn't slowed down by calls to a backend server. Also, major browsers all support JIT (just in time) compilation for JavaScript, meaning that there's no need to compile the code before running it.
 * Simplicity - JavaScript's syntax was inspired by Java's and is relatively easy to learn compared to other popular languages like C++.
 * Popularity - JavaScript is everywhere on the web, and with the advent of Node.js, is increasingly used on the backend. There are countless resources to learn JavaScript. Both StackOverflow and GitHub show an increasing amount of projects that use JavaScript, and the traction it's gained in recent years is only expected to increase.
 * Interoperability - Unlike PHP or other scripting languages, JavaScript can be inserted into any web page. JavaScript can be used in many different kinds of applications because of support in other languages like Pearl and PHP.
 * Server Load - JavaScript is client-side, so it reduces the demand on servers overall, and simple applications may not need a server at all.
 * Rich interfaces - JavaScript can be used to create features like drag and drop and components such as sliders, all of which greatly enhance the user interface and experience of a site.
 * Extended Functionality - Developers can extend the functionality of web pages by writing snippets of JavaScript for third party add-ons like Greasemonkey.
 * Versatility - There are many ways to use JavaScript through Node.js servers. If you were to bootstrap Node.js with Express, use a document database like MongoDB, and use JavaScript on the frontend for clients, it is possible to develop an entire JavaScript app from front to back using only JavaScript.
 * Updates - Since the advent of ECMAScript 5 (the scripting specification that JavaScript relies on), ECMA International has been dedicated to updating JavaScript annually. So far, we have received browser support for ES6 in 2017 and look forward to ES7 being supported in the future.

 Disadvantages of JavaScript

 * Client-Side Security - Since JavaScript code is executed on the client-side, bugs and oversights can sometimes be exploited for malicious purposes. Because of this, some people choose to disable JavaScript entirely.
 * Browser Support - While server-side scripts always produce the same output, different browsers sometimes interpret JavaScript code differently. These days the differences are minimal, and you shouldn't have to worry about it as long as you test your script in all major browsers.

 ES6

 The 6th edition of ECMAScript is called ES6.

 It is also know as ES2015.

 The changes add a lot of syntactic sugar that allow developers to create applications in an object oriented style.

 ES5 example:

 var User = function () {
 function User(name) {
 this._name = name;
 }
 
 User.prototype.getName = function getName(x) {
 return 'Mr./Mrs. ' + this._name;
 };
 
 return User;
 }();

 ES6 example:

 class User {
 constructor(name) {
 this._name = name
 }
 
 getName() {
 return `Mr./Mrs. ${this._name}`
 }
 }

 A lot of new syntax features were introduced including:

 * classes
 * modules
 * templating
 * for/of loops
 * generator expressions
 * arrow functions
 * collections
 * promises

 Nowadays most of the features are available in all popular browsers. The compatibility table contains all information about feature availability of all modern browsers.

 Frequently, new features arrive that are part of the successor ES7. A common way is to translate modern JavaScript (ES6, ES7 and other experimental proposals) to ES5. This makes sure that also old browsers can execute the code. There are tools like Babel that transforms new JavaScript to ES5.

 Besides syntactic sugar coming from ECMAScript standards there are features that require a Polyfill. Usually they are necessary because whole class/method implementations were added to the standard.

 Object Instantiation

 In JavaScript and most other languages, an object contains a series of properties, which are a key, value pair. There are multiple options available to you when you need to construct an object.

 Initialize an object variable

 You can create an object with pre-defined properties like so:

 let myObject = {
 name: "Dave",
 age: 33
 }

 Creating an empty object

 This creates an empty object inside our myObject variable:

 let myObject = new Object();

 When you wish to add properties to your object, you simply use either dot notation or bracket notation with the property name of your choice:

 myObject.name = "Johnny Mnemonic"
 myObject["age"] = 55

 Using a constructor function

 You can define a constructor function that you can use to create your objects:

 function Kitten(name, cute, color) {
 this.name = name,
 this.cute = cute,
 this.color = color
 }

 You can define a variable containing an instantiation of this object by calling the constructor function:

 let myKitten = new Kitten("Nibbles", true, "white")

 Object.create()

 The Object.create() method (first defined in ECMAScript 5.1) allows you to create objects. it allows you to choose the prototype object for your new object without needing to define a constructor function beforehand.

 // Our pre-defined object
 let kitten = {
 name: "Fluff",
 cute: true,
 color: "gray"
 }
 // Create a new object using Object.create(). kitten is used as the prototype
 let newKitten = Object.create(kitten)
 
 console.log(newKitten.name) // Will output "Fluff"
 ADVERTISEMENT
 ADVERTISEMENT
 ADVERTISEMENT
 ADVERTISEMENT
 ADVERTISEMENT
 ADVERTISEMENT
 ADVERTISEMENT
 ADVERTISEMENT

 If this article was helpful, tweet it.

 Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

 ADVERTISEMENT

 freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

 Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

 Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

 You can make a tax-deductible donation here.

 Trending Guides
 Python list .append() Python .zip() Function What is a QA Engineer? Python Print Same Line Rename Branches in Git What Does Coding Mean? What is Data Analysis? How to Comment Out CSS Double vs Float in C++ Python Global Variables
 C++ Operators Excel Formulas Break in Python Text Align in CSS How to Minify CSS Python Split String Python List insert() Merge Sort Algorithm What is an SVG File? RGB Colors Explained
 How Vectors Work in C++ JavaScript .setTimeout() Excel Keyboard Shortcuts Excel Absolute Reference Insert Checkbox in Excel
 Square a Number in Python How to Lock Cells in Excel Python Delete Key from Dict Beginner Tech Jobs Examples Crow’s Foot Notation
 Our Charity
 About Alumni Network Open Source Shop Support Sponsors Academic Honesty Code of Conduct Privacy Policy Terms of Service Copyright Policy
JavaScript is the most widely used scripting language on Earth. And it has the largest library ecosystem of any programming language. JavaScript is the core language of the web, and the only programming language that can run in all major web browsers. Notably, JavaScript has no relation to Java. Check out JavaScript: The World’s Most Misunderstood Programming Language. The official name of JavaScript is ECMAScript defined under Standard ECMA-262. If you want to learn more about the JavaScript language, and why it’s so widely used, read Quincy Larson’s article - Which programming language should I learn first? - or watch this inspiring video from Preethi Kasireddy. freeCodeCamp has an in-depth JavaScript tutorial on YouTube that will teach you all the fundamentals in just 3 hours.   Some other good JavaScript tutorials:   JavaScript for Cats   The Modern JavaScript Tutorial   Professor Frisby’s Mostly Adequate Guide to Functional Programming   Eloquent Javascript ( annotated )  Speaking Javascript   Exploring ES6   Udemy - Javascript Understanding the Weird Parts (first 3.5 hrs)   Functional programming in JavaScript   Introduction to JavaScript: First Steps   Douglas Crockford’s Videos   Modern JS Cheatsheet   The 50 Best Websites to Learn JavaScript   Codementor JavaScript tutorial   You Might Not Need jQuery    References    DevDocs   OverAPI JavaScript Cheat Sheet   ECMA-262   Mozilla Developer Network (MDN)    Quick JavaScript    REPL ( node )  JSBin   JSFiddle   CodePen   CoderPad (pair programming)   C9 (IDE, pair programming)   Object Playground (visualize objects)   Plunker    Challenges    Code Wars   Hacker Rank   Coding Game   CodeFights   ES6 Katas     Codecademy   RithmSchool    Exercises    Codility   Coderbyte   Exercism   JavaScript30   Javascript.com (Pluralsight)    Editors    Visual Studio Code   Atom   Sublime Text   Webstorm   Brackets    Blogs    Perfection Kills   2ality   JS collection on Medium   David Walsh   superheroJS    Podcasts    JS Jabber    Video Tutorials    Derek Banas’ Learn JS In One Video   Derek Banas’ Object Oriented JavaScript    Books    Secrets of the JavaScript Ninja   Programming JavaScript Applications   Maintainable JavaScript   Learning JavaScript Design Patterns   Airbnb JavaScript Style Guide   JSDoc   Javascript Allonge Six   You Don’t Know JS   	6 books on JavaScript by Kyle Simpson, from beginner to advanced.   Eloquent Javascript   	Fantastic, thorough introduction to the basics and features of JavaScript, complete 	with in-browser interactive code.   Professor Frisby’s Mostly Adequate Guide to Functional Programming   	Quite in-depth guide to Functional Programming in JavaScript   The JavaScript Way   Functional Light JS    Standalone JavaScript engines  Mozilla’s SpiderMonkey, the first JavaScript engine ever written, currently used in Mozilla Firefox.  V8, Google’s JavaScript engine, used in Google Chrome. Google Apps Script, a cloud-based/server-side interpreter that provides programmatic “macro-like” control of Google Apps services and documents. Node.js, built on top of V8, a platform which enables server-side applications to be written in JavaScript. Windows includes JScript, a JavaScript variant in Windows Script Host. Chakra, a fork of Jscript, is developed by Microsoft and used in their Edge browser. Mozilla also offers Rhino, an implementation of JavaScript built in Java, typically embedded into Java applications to provide scripting to end users. WebKit (except for the Chromium project) implements the JavaScriptCore engine.  JavaScript Frameworks  The most frequently used JavaScript Frameworks are React JS, Angular JS, jQuery, and NodeJS. For more details follow this link.  Advantages and Disadvantages of JavaScript  Like with all programming languages, JavaScript has certain advantages and disadvantages to consider. Many of these are related to the way JavaScript is often executed directly in a client's browser. But there are other ways to use JavaScript now that allow it to have the same benefits of server-side languages.  Advantages of JavaScript       Speed  -  JavaScript tends to be very fast because it is often run immediately within the client's browser. So long as it doesn't require outside resources, JavaScript isn't slowed down by calls to a backend server. Also, major browsers all support JIT (just in time) compilation for JavaScript, meaning that there's no need to compile the code before running it.     Simplicity  -  JavaScript's syntax was inspired by Java's and is relatively easy to learn compared to other popular languages like C++.     Popularity  -  JavaScript is everywhere on the web, and with the advent of Node.js, is increasingly used on the backend. There are countless resources to learn JavaScript. Both StackOverflow and GitHub show an increasing amount of projects that use JavaScript, and the traction it's gained in recent years is only expected to increase.     Interoperability  -  Unlike PHP or other scripting languages, JavaScript can be inserted into any web page. JavaScript can be used in many different kinds of applications because of support in other languages like Pearl and PHP.     Server Load  -  JavaScript is client-side, so it reduces the demand on servers overall, and simple applications may not need a server at all.     Rich interfaces  -  JavaScript can be used to create features like drag and drop and components such as sliders, all of which greatly enhance the user interface and experience of a site.     Extended Functionality  -  Developers can extend the functionality of web pages by writing snippets of JavaScript for third party add-ons like Greasemonkey.     Versatility  -  There are many ways to use JavaScript through Node.js servers. If you were to bootstrap Node.js with Express, use a document database like MongoDB, and use JavaScript on the frontend for clients, it is possible to develop an entire JavaScript app from front to back using only JavaScript.     Updates  -  Since the advent of ECMAScript 5 (the scripting specification that JavaScript relies on), ECMA International has been dedicated to updating JavaScript annually. So far, we have received browser support for ES6 in 2017 and look forward to ES7 being supported in the future.   Disadvantages of JavaScript       Client-Side Security  -  Since JavaScript code is executed on the client-side, bugs and oversights can sometimes be exploited for malicious purposes. Because of this, some people choose to disable JavaScript entirely.     Browser Support  -  While server-side scripts always produce the same output, different browsers sometimes interpret JavaScript code differently. These days the differences are minimal, and you shouldn't have to worry about it as long as you test your script in all major browsers.   ES6  The 6th edition of ECMAScript is called ES6. It is also know as ES2015. The changes add a lot of syntactic sugar that allow developers to create applications in an object oriented style. ES5 example:  var User = function () {
 function User(name) {
 this._name = name;
 }
 User.prototype.getName = function getName(x) {
 return 'Mr./Mrs. ' + this._name;
 };
 return User;
}();  ES6 example:  class User {
 constructor(name) {
 this._name = name
 }
 getName() {
 return `Mr./Mrs. ${this._name}`
 }
}  A lot of new syntax features were introduced including:  classes modules templating for/of loops generator expressions arrow functions collections promises  Nowadays most of the features are available in all popular browsers. The compatibility table contains all information about feature availability of all modern browsers. Frequently, new features arrive that are part of the successor ES7. A common way is to translate modern JavaScript (ES6, ES7 and other experimental proposals) to ES5. This makes sure that also old browsers can execute the code. There are tools like Babel that transforms new JavaScript to ES5. Besides syntactic sugar coming from ECMAScript standards there are features that require a Polyfill. Usually they are necessary because whole class/method implementations were added to the standard.  Object Instantiation  In JavaScript and most other languages, an object contains a series of properties, which are a key, value pair. There are multiple options available to you when you need to construct an object.  Initialize an object variable  You can create an object with pre-defined properties like so:  let myObject = {
 name: "Dave",
 age: 33
}   Creating an empty object  This creates an empty object inside our myObject variable:  let myObject = new Object();  When you wish to add properties to your object, you simply use either dot notation or bracket notation with the property name of your choice:  myObject.name = "Johnny Mnemonic"
myObject["age"] = 55   Using a constructor function  You can define a constructor function that you can use to create your objects:  function Kitten(name, cute, color) {
 this.name = name,
 this.cute = cute,
 this.color = color
}  You can define a variable containing an instantiation of this object by calling the constructor function:  let myKitten = new Kitten("Nibbles", true, "white")   Object.create()  The Object.create() method (first defined in ECMAScript 5.1) allows you to create objects. it allows you to choose the prototype object for your new object without needing to define a constructor function beforehand.  // Our pre-defined object
let kitten = {
 name: "Fluff",
 cute: true,
 color: "gray"
}
// Create a new object using Object.create(). kitten is used as the prototype
let newKitten = Object.create(kitten)
console.log(newKitten.name) // Will output "Fluff" 
 
 
 
 
 
 
 
 
 
 
 Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
The Best JavaScript Tutorials
https://www.freecodecamp.org/news/best-javascript-tutorial/