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:

References

Find javascript libraries at http://jster.net

Quick JavaScript

Challenges

Tutorials

Exercises

Editors

Visual Studio Code

Visual Studio Code includes built-in support for IntelliSense code completion, rich semantic code understanding and navigation, and code refactoring. It comes with a built-in debugger and git support and has a plethora of extensions.

Webstorm

A full-feature IDE for Javascript, including code completion and support for live linting, version control, and testing. Made by Jet Brains and modeled after their IntelliJ Java IDE.

Atom

Open source text editor made by GitHub.

Blogs

Podcasts

Video Tutorials

Books

6 books on JavaScript by Kyle Simpson. From beginner to advanced.

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

Quite in-depth guide to Functional Programming in Javascript

This book aims to be a useful companion for anyone wishing to (re)discover the many facets of JavaScript. From the very basics of programming up to front-end and back-end web development, a lot of topics are covered in a simple and accessible way. No prior knowledge needed!

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

Most frequently used JavaScript Frameworks are React JS, Angular JS, Create JS, jQuery, NodeJS etc. For details follow this link.

Advantages and Disadvantages of JavaScript

Like all computer languages, JavaScript has certain advantages and disadvantages. Many of the pros and cons are related to JavaScript executing often 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. Client-side JavaScript is very fast because it can be run immediately within the client-side browser. Unless outside resources are required, JavaScript is unhindered by network calls to a backend server. It also has no need to be compiled on the client side which gives it certain speed advantages (granted, adding some risk dependent on that quality of the code developed).
  • Simplicity. JavaScript is relatively simple to learn and implement.
  • Popularity. JavaScript is used everywhere in the web. The resources to learn JavaScript are numerous. StackOverflow and GitHub have many projects that are using Javascript and the language as a whole has gained a lot of traction in the industry in recent years especially.
  • Interoperability. JavaScript plays nicely with other languages and can be used in a huge variety of applications. Unlike PHP or SSI scripts, JavaScript can be inserted into any web page regardless of the file extension. JavaScript can also be used inside scripts written in other languages such as Perl and PHP.
  • Server Load. Being client-side reduces the demand on the website server.
  • Rich interfaces. Drag and drop components or slider may give a rich interface to your website.
  • Extended Functionality. Third party add-ons like Greasemonkey enable JavaScript developers to write snippets of JavaScript which can execute on desired web pages to extend its functionality.
  • Versatility. Nowadays, 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 front-end 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 future months.

Disadvantages of JavaScript

  • Client-Side Security. Because the code executes on the users’ computer, in some cases it can be exploited for malicious purposes. This is one reason some people choose to disable Javascript.
  • Browser Support. JavaScript is sometimes interpreted differently by different browsers. Whereas server-side scripts will always produce the same output, client-side scripts can be a little unpredictable. Don’t be overly concerned by this though - as long as you test your script in all the major browsers you should be safe. Also, there are services out there that will allow you to test your code automatically on check in of an update to make sure all browsers support your code.

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"