--- language: javascript author: Adam Brenecki author_url: http://adam.brenecki.id.au --- Javascript was created by Netscape's Brendan Eich in 1995. It was originally intended as a simpler scripting language for websites, complimenting the use of Java for more complex web applications, but its tight integration with Web pages and built-in support in browsers has caused it to become far more common than Java in web frontends. Feedback would be highly appreciated! You can reach me at [@adambrenecki](https://twitter.com/adambrenecki), or [adam@brenecki.id.au](mailto:adam@brenecki.id.au). ```javascript // Comments are like C. Single-line comments start with two slashes, /* and multiline comments start with slash-star and end with star-slash */ // Statements can be terminated by ; doStuff(); // ... but they don't have to be, as semicolons are automatically inserted // wherever there's a newline, except in certain cases. doStuff() // We'll leave semicolons off here; whether you do or not will depend on your // personal preference or your project's style guide. /*********** * 1. Numbers, Strings and Operators ***********/ // Javascript has one number type that covers ints and floats. 3 // = 3 1.5 // = 1.5 // All the basic arithmetic works as you'd expect. 1 + 1 // = 2 8 - 1 // = 7 10 * 2 // = 20 35 / 5 // = 7 // Including uneven division. 5 / 2 // = 2.5 // Enforce precedence with parentheses (1 + 3) * 2 // = 8 // There are three special not-a-real-number values: Infinity // result of e.g. 1/0 -Infinity // result of e.g. -1/0 NaN // result of e.g. 0/0 // There's also a boolean type. true false // Strings are created with ' or ". 'abc' "Hello, world" // Negation uses the ! symbol !true // = false !false // = true // Equality is == 1 == 1 // = true 2 == 1 // = false // Inequality is != 1 != 1 // = false 2 != 1 // = true // More comparisons 1 < 10 // = true 1 > 10 // = false 2 <= 2 // = true 2 >= 2 // = true // Strings are concatenated with + "Hello " + "world!" // = "Hello world!" // and are compared with < and > "a" < "b" // = true // Type coercion is performed for comparisons... "5" == 5 // = true // ...unless you use === "5" === 5 // = false // You can access characters in a string with charAt "This is a string".charAt(0) // There's also null and undefined null // used to indicate a deliberate non-value undefined // used to indicate a value that hasn't been set yet // null, undefined, NaN, 0 and "" are falsy, and everything else is truthy. // Note that 0 is falsy and "0" is truthy, even though 0 == "0". /*********** * 2. Variables, Arrays and Objects ***********/ // Variables are declared with the var keyword. Javascript is dynamically typed, // so you don't need to specify type. Assignment uses a single = character. var someVar = 5 // if you leave the var keyword off, you won't get an error... someOtherVar = 10 // ...but your variable will be created in the global scope, not in the scope // you defined it in. // Variables declared without being assigned to are set to undefined. var someThirdVar // = undefined // Arrays are ordered lists of values, of any type. ["Hello", 45, true] // JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other // languages: an unordered collection of key-value pairs. {key1: "Hello", key2: "World"} // Keys are strings, but quotes aren't required if they're a valid // JavaScript identifier. Values can be any type. var myObj = {myKey: "myValue", "my other key": 4} // Object attributes can be accessed using the 'subscript' syntax, myObj["my other key"] // = 4 // ... or using the dot syntax, provided the key is a valid identifier. myObj.myKey // = "myValue" // Objects are mutable; values can be changed and new keys added. myObj.myThirdKey = true // If you try to access a value that's not yet set, you'll get undefined. myObj.myFourthKey // = undefined /*********** * 3. Control Structures ***********/ /*********** * 5. Functions, Scope and Closures ***********/ /*********** * 6. More about Objects; Constructors and Prototypes ***********/ // Objects can contain functions. var myObj = { myFunc: function(){ return "Hello world!" } } myObj.myFunc() // = "Hello world!" // When functions attached to an object are called, they can access the object // they're attached to using the this keyword. myObj = { myString: "Hello world!", myFunc: function(){ return this.myString } } myObj.myFunc() // = "Hello world!" // What this is set to has to do with how the function is called, not where // it's defined. So, our function doesn't work if it isn't called in the // context of the object. var myFunc = myObj.myFunc myFunc() // = undefined // Inversely, a function can be assigned to the object and gain access to it // through this, even if it wasn't attached when it was defined. var myOtherFunc = function(){ return this.myString.toUpperCase() } myObj.myOtherFunc = myOtherFunc myObj.myOtherFunc() // = "HELLO WORLD!" // When you call a function with the new keyword, a new object is created, and // made available to the function via this. Functions designed to be called // like this are called constructors. var MyConstructor = function(){ this.myNumber = 5 } myNewObj = new MyConstructor() // = {myNumber: 5} myNewObj.myNumber // = 5 // Every JavaScript object has a 'prototype'. When you go to access a property // on an object that doesn't exist on the actual object, the interpreter will // look at its prototype. // Some JS implementations let you access an object's prototype on the magic // property __proto__. While this is useful for explaining prototypes it's not // part of the standard; we'll get to standard ways of using prototypes later. var myObj = { myString: "Hello world!", } var myPrototype = { meaningOfLife: 42, myFunc: function(){ return this.myString.toLowerCase() } } myObj.__proto__ = myPrototype myObj.meaningOfLife // = 42 // This works for functions, too. myObj.myFunc() // = "hello world!" // Of course, if your property isn't on your prototype, the prototype's // prototype is searched, and so on. myPrototype.__proto__ = { myBoolean: true } myObj.myBoolean // = true // There's no copying involved here; each object stores a reference to its // prototype. This means we can alter the prototype and our changes will be // reflected everywhere. myPrototype.meaningOfLife = 43 myObj.meaningOfLife // = 43 // While the __proto__ magic property we've seen so far is useful for // explaining prototypes, it's non-standard. There's no standard way to change // an existing object's prototype, but there's two ways to set the prototype of // a new object when you first create it. // The first is Object.create, which is a recent addition to JS, and therefore // not available in all implementations yet. var myObj = Object.create(myPrototype) myObj.meaningOfLife // = 43 // Unfortunately, Object.create is quite recent and isn't available in many // browsers, so you often can't use that, either. The most reliable way to set // prototypes involves constructors. // TODO: write about the .prototype property on constructors // Built-in types' prototypes work like this too, so you can actually change // the prototype of a string, for instance. String.prototype.firstCharacter = function(){ return this.charAt(0) } "abc".firstCharacter() // = "a" // There are several implementations of JavaScript, which all gain new features // at different times. Sometimes, however, it's possible to replicate new // features by altering built in types or prototypes, which is called // "polyfilling". // For instance, we mentioned that Object.create isn't yet available in all // implementations, but we can still use it if we do this: if (Object.create === undefined){ Object.create = function(proto){ // make a temporary constructor with the right prototype var Constructor = function(){} Constructor.prototype = proto return new Constructor() } } ``` ## Further Reading The [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) provides excellent documentation for JavaScript as it's used in browsers. Plus, it's a wiki, so as you learn more you can help others out by sharing your own knowledge.