For questions about programming in ECMAScript (JavaScript/JS) and its different dialects/implementations (except for ActionScript). Note that JavaScript is NOT Java. Include all tags that are relevant to your question: e.g., [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
JavaScript (a dialect of ECMAScript) is a high-level, multi-paradigm, object-oriented, prototype-based, dynamically-typed, and interpreted language traditionally used for client-side scripting in web browsers. JavaScript can also be run outside the browser using a framework like Node.js, Nashorn, Wakanda, or Google Apps Script. Despite the name, it is unrelated to the Java programming language and shares only superficial similarities.
When asking a JavaScript question, you should:
Debug your JavaScript code (see Creative, MDN, Google, & MSDN).
Isolate the problematic code and reproduce it in a Stack Overflow code snippet. You may use an external site such as JSFiddle, JS Bin, or Codeply, but you must also include your code in the question itself.
If you are using a library or framework and it is relevant to your problem, tag the question appropriately: jquery for jQuery, vue.js for Vue, reactjs for React, etc.
If the issue is client-side, attempt to reproduce it on other browsers. Mention in the question which browser the code is having problems on, and what error messages, if any, were found in the browser's console. Use the Developer Tools for your browser (see "Useful Tools" below) to see these messages. If the question is browser-specific, use tags firefox, google-chrome, internet-explorer, opera, safari, microsoft-edge, etc.
Only tag the question as css or html if you are asking about an issue that concerns the combination of one of those with JavaScript and could only be answered with information specifically regarding either of those subjects.
Note: Unless a tag for a framework or library is also included, a pure JavaScript answer is expected for questions with the javascript tag.
About JavaScript
JavaScript runs on every modern operating system, and an engine is included in all mainstream web browsers. Developed in 1995 by Brendan Eich at Netscape Communications, it was originally called LiveScript but was renamed to JavaScript due to the popularity of Sun Microsystems's Java language at the time.
JavaScript engines or implementations include:
- Mozilla's Spidermonkey is the first JavaScript engine ever written and currently used in Mozilla Firefox.
- Google's JavaScript engine, Chrome V8 used in Google Chrome and Chromium.
- 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 that 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 Edge;
- 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.
- ActionScript (derived initially from HyperTalk) is now an ECMAScript dialect and uses a lot of ECMAScript APIs.
- Duktape Embeddable, a portable ECMAScript engine in C with a small memory footprint.
- Wakanda, a framework, IDE, and Server built on V8 supporting server-side JavaScript.
- Meteor: a Meteor application is a mix of client-side JavaScript that runs inside a web browser or PhoneGap mobile app and the server-side JavaScript that runs on the Meteor server inside a Node.js container. (according to Meteor documentation).
- Nashorn, a JavaScript engine developed in the Java programming language, based on the Da Vinci Machine (JSR 292).
The Mozilla Developer Network contains high-quality documentation on JavaScript.
Client-side JavaScript is typically used to manipulate the Document Object Model (DOM) and Cascading Style Sheets (CSS) within the browser. This allows user interface scripting, animation, automation, client-side validation and more.
With the recent emergence of platforms such as Node.js, JavaScript can now be used to write server-side applications. In addition, it is also used in environments that aren't web-based, like PDF documents, site-specific browsers, desktop widgets, etc.
Nomenclature
Although it was developed under the name Mocha, the language was officially called LiveScript when it first shipped in beta releases of Netscape Navigator 2.0 in September 1995, but it was renamed JavaScript when it was deployed in the Netscape browser version 2.0B3.
The name change from LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. The final choice of name caused confusion, giving the impression that the language was a spin-off of the Java programming language, and the choice has been characterized as a marketing ploy by Netscape to give JavaScript prestige by connection (if in name only) with what was then the hot, new web-programming language.
People often use the term JavaScript informally. The language and the term originated from Netscape. ECMAScript, JavaScript, and JScript are terms that are easy to confuse.
ECMAScript was developed as a standardization of Netscape's JavaScript and Microsoft's independently-developed JScript. The canonical reference is the ECMAScript® 2015 Language Specification. While JavaScript and JScript aim to be compatible with ECMAScript, they also provide additional features (and other deviations) not described in the ECMA specifications. Other implementations of ECMAScript also exist.
The differences today for those who use JavaScript are negligible; people generally do not distinguish the JavaScript and JScript variations from ECMAScript.
ECMAScript versions
All modern browsers with JavaScript support implement the ECMAScript 6 specification.
The current version of ECMAScript is ECMAScript 12, properly known as ECMAScript 2021, which was published in June 2021. Most modern browsers provide full support for this standard. You can see the current browser support of ES12 features at Can I Use?
Example JavaScript code
This script displays "Hello World" in a browser, once the website it is contained in finished loading.
window.onload = function() {
alert('Hello World!');
};
Learning JavaScript
- Eloquent JavaScript: A modern introduction to programming.
- You Don't Know JS Yet: An in-depth book series covering all primary topics.
- The MDN JavaScript Guide: A comprehensive JavaScript guide at the Mozilla Developer Network.
- quirksmode.org - JavaScript: A good introduction to JavaScript and other technologies used in the browser (e.g. DOM).
- JavaScript Tutorial: A pure JavaScript book that covers nearly everything.
- JavaScript Tutorial & Sample Codes: A pure JavaScript tutorial and sample code for real-life problems faced in JavaScript.
- JavaScript Core Skills: An introduction covering the basic fundamentals of programming.
- quirksmode.org | Introduction to Events: A comprehensive description of the various types of event handling. Includes the overview of different ways to attach event handlers and identifies quirks between other browsers. A must-read if you want to understand event handling.
- W3C Wiki | JavaScript basics, DOM: A comprehensive list of links to W3C educational materials.
- JavaScript Debugging for Beginners: An excellent introduction to debugging JavaScript. A must-read!
- Modern JavaScript: Develop and Design: A modern guide to learning JavaScript using practical examples and approaches that should be used today.
- Learning Advanced JavaScript: A set of interactive exercises that guide you through some of the fundamental concepts of JavaScript.
- JavaScript Style Guide: Easy to follow guide that provides insight into styling JavaScript code.
- Zeros in JavaScript: Easy to check what is returned when comparing any two values.
- JavaScript.RU: Central JavaScript resource for Russian-speaking community.
- JavaScript in Polish: A popular site about JavaScript in the Polish language.
- Awesome JS: A collection of excellent browser-side JavaScript libraries, resources and shiny things for beginners to advanced programmers.
Interactive JavaScript learning
- Codecademy | JavaScript: Learn the fundamentals of JavaScript and dynamic programming.
- Udacity | Programming Languages: Key concepts include specifying and processing valid strings, sentences, and program structures.
- Code School: Learn the fundamentals of JavaScript and dynamic programming.
- Khan Academy: Learn about JavaScript animations.
- Codewars: Learn patterns and train on quizzes posted by community members
Free JavaScript Programming Books
- Crockford's JavaScript
- Eloquent JavaScript
- You Don't Know JS Yet
- Essential JavaScript & jQuery Design Patterns for Beginners
- JavaScript Essentials
- jQuery Fundamentals (starts with JavaScript basics)
- Mozilla Developer Network's JavaScript Guide
- Learning JavaScript Design Patterns - Addy Osmani
- Patterns For Large-Scale JavaScript Development - Addy Osmani
- JS Books - Free JavaScript Books
Videos
Security
JavaScript and the DOM provide the potential for entities with malicious intent to deliver scripts that run on a client computer via the Web. Developers of browsers contain this risk using two restrictions. First, scripts run in a sandbox where they can only perform web-related actions, not general-purpose programming tasks such as creating files. Second, scripts are constrained by the same-origin policy: scripts from one website do not have access to information such as usernames, passwords, or cookies sent to another site. Most JavaScript-related security bugs are breaches of either the same-origin policy or the sandbox.
Content Security Policy is the primarily intended method of ensuring that only trusted code is executed on a webpage.
Cross-site scripting (XSS) attacks are attempts to steal data or harm a website via JavaScript.
Useful Tools
- Browser Developer Tools
- Firefox Developer Edition
- Firefox Developer Tools (documentation)
- Developer Tools for Internet Explorer
- Chrome Developer Tools for Chrome
- Web Inspector for Safari
- Ways to provide live demos
- Snippets for including live demos in questions (recommended, as it is integrated into Stack Overflow)
- JSFiddle for testing snippets (online)
- Plunker for testing snippets (online)
- JSBin for testing snippets (online/offline)
- CodePen for testing snippets (online)
- Liveweave for testing snippets (online)
- Error detection and best practice testing
- Code formatting
- Code Minification
- Performance Benchmarking Playground
Wisdom from Stack Overflow
- What should every JavaScript programmer know?
- Hidden Features of JavaScript?
- How do JavaScript closures work?
- Return value from function with an Ajax call
- var functionName = function() {} vs function functionName() {}
- javascript: what's the difference between a function and a class
- Static variables in JavaScript
- How does the (function() {})() construct work and why do people use it?
- What is the scope of variables in JavaScript?
- What does this symbol mean in JavaScript?
- How can I debug my JavaScript code?
- What do querySelectorAll() and getElementsBy*() methods return?
- Which equals operator (== vs ===) should be used in JavaScript comparisons?
Useful links
- Wikipedia reference
- Native JavaScript Equivalents of jQuery Methods
- MDN JavaScript Reference
- W3C DOM Core, HTML, events and CSS compatibility tables from https://www.quirksmode.org/
- JSLint code quality tool by Douglas Crockford (and JSHint, a community-driven branch of the original)
- Code minifiers/obfuscators: /packer/, YUI Compressor, Google Closure Compiler, UglifyJS
- Code formatter/deobfuscator: JSBeautifier
- Idioms and Gotchas: Rounding, Date Object, Number Object, Scope Chain
- JavaScript Garden
- comp.lang.javascript FAQ: Very extensive guide on JavaScript quirks created by Usenet's comp.lang.javascript
- ECMA 262-5 Online: HTML version of the ECMAScript 5 specification.
- Annotated ES5: Annotated and hyperlinked HTML derivative of the ECMAScript 5 specification.
- HTML ECMAScript 6 specification.
- ECMAScript Support Matrix: In-depth feature list for ECMAScript implementations.
- ES6 compatibility table
- JavaScript Weekly: A free, weekly newsletter curated by Peter Cooper
- Node Weekly: A free, weekly newsletter
- Operator Precedence: Operator precedence and associativity table
- Opera Mini support for JavaScript: The way JavaScript works in Opera Mini, a web browser used by people who need to optimize browsing resources
- https://nodeschool.io Practice examples here: https://github.com/workshopper/javascripting
- JS Comparison Table: Complete table of equality sign in JavaScript
Frequently Asked Questions
Find some answers to some of the more frequently asked questions about JavaScript and related technology below.
Q: I have this JSON structure. How can I access property x.y.z
?
A: How can I access and process nested objects, arrays, or JSON?
Q: I'm adding events in a for loop, but all handlers do the same thing. Why? A: JavaScript closure inside loops – simple practical example
Q: I want to compare something against multiple values. Is there an easy way to do it? A: Concise way to compare against multiple values
Q: How to set up proper inheritance? A: Objects don't inherit prototyped functions
Q: How do JavaScript closures work? A: How do JavaScript closures work?
Q: Why does setTimeout()
inside a for
loop always use the latest value?
A: setTimeout in for-loop does not print consecutive values
Q: How to return the response from an AJAX call from a function? A: How do I return the response from an asynchronous call?
Q: Why don't my handlers hooked up in a loop work correctly, and what can I do about it? A: Javascript: generate dynamically handler
Q: How can I get query string values? A: How can I get query string values in JavaScript?
Q: What does use strict
do in JavaScript?
A: What does "use strict" do in JavaScript, and what is the reasoning behind it?
Q: How can I make a redirect page in jQuery/JavaScript? A: How do I redirect to another webpage?
Q: How to sort an array of objects by a property value? A: Sort array of objects by string property value
Q: From an array of objects, how do I extract the value of a property as an array? A: From an array of objects, extract value of a property as array
Q: I'm adding elements with JavaScript or jQuery at a later point and adding events, but they're not firing. Why? A: You might want event delegation.
Q: How can I only keep items of an array that match a specific condition? A: How can I only keep items of an array that match a certain condition?
Q: How can I debug my JavaScript code? A: How can I debug my JavaScript code?
Q: What does this symbol mean in JavaScript? A: What does this symbol mean in JavaScript?
More information
- Wikipedia on JavaScript
- MDN - Learn JavaScript
- Creator of JavaScript, Brendan Eich, explains the origin