[javascript] Add semicolons. Closes #214.

This commit is contained in:
Adam Brenecki 2013-08-15 21:05:27 +09:30
parent 05c3ca9044
commit 80f97751a2

View File

@ -30,81 +30,81 @@ doStuff();
// wherever there's a newline, except in certain cases. // wherever there's a newline, except in certain cases.
doStuff() doStuff()
// We'll leave semicolons off here; whether you do or not will depend on your // So that we don't have to worry about those certain cases (for now), we'll
// personal preference or your project's style guide. // leave them on.
/////////////////////////////////// ///////////////////////////////////
// 1. Numbers, Strings and Operators // 1. Numbers, Strings and Operators
// Javascript has one number type (which is a 64-bit IEEE 754 double). // Javascript has one number type (which is a 64-bit IEEE 754 double).
3 // = 3 3; // = 3
1.5 // = 1.5 1.5; // = 1.5
// All the basic arithmetic works as you'd expect. // All the basic arithmetic works as you'd expect.
1 + 1 // = 2 1 + 1; // = 2
8 - 1 // = 7 8 - 1; // = 7
10 * 2 // = 20 10 * 2; // = 20
35 / 5 // = 7 35 / 5; // = 7
// Including uneven division. // Including uneven division.
5 / 2 // = 2.5 5 / 2; // = 2.5
// Bitwise operations also work; when you perform a bitwise operation your float // Bitwise operations also work; when you perform a bitwise operation your float
// is converted to a signed int *up to* 32 bits. // is converted to a signed int *up to* 32 bits.
1 << 2 // = 4 1 << 2; // = 4
// Precedence is enforced with parentheses. // Precedence is enforced with parentheses.
(1 + 3) * 2 // = 8 (1 + 3) * 2; // = 8
// There are three special not-a-real-number values: // There are three special not-a-real-number values:
Infinity // result of e.g. 1/0 Infinity; // result of e.g. 1/0
-Infinity // result of e.g. -1/0 -Infinity; // result of e.g. -1/0
NaN // result of e.g. 0/0 NaN; // result of e.g. 0/0
// There's also a boolean type. // There's also a boolean type.
true true;
false false;
// Strings are created with ' or ". // Strings are created with ' or ".
'abc' 'abc';
"Hello, world" "Hello, world";
// Negation uses the ! symbol // Negation uses the ! symbol
!true // = false !true; // = false
!false // = true !false; // = true
// Equality is == // Equality is ==
1 == 1 // = true 1 == 1; // = true
2 == 1 // = false 2 == 1; // = false
// Inequality is != // Inequality is !=
1 != 1 // = false 1 != 1; // = false
2 != 1 // = true 2 != 1; // = true
// More comparisons // More comparisons
1 < 10 // = true 1 < 10; // = true
1 > 10 // = false 1 > 10; // = false
2 <= 2 // = true 2 <= 2; // = true
2 >= 2 // = true 2 >= 2; // = true
// Strings are concatenated with + // Strings are concatenated with +
"Hello " + "world!" // = "Hello world!" "Hello " + "world!"; // = "Hello world!"
// and are compared with < and > // and are compared with < and >
"a" < "b" // = true "a" < "b"; // = true
// Type coercion is performed for comparisons... // Type coercion is performed for comparisons...
"5" == 5 // = true "5" == 5; // = true
// ...unless you use === // ...unless you use ===
"5" === 5 // = false "5" === 5; // = false
// You can access characters in a string with charAt // You can access characters in a string with charAt
"This is a string".charAt(0) "This is a string".charAt(0);
// There's also null and undefined // There's also null and undefined
null // used to indicate a deliberate non-value null; // used to indicate a deliberate non-value
undefined // used to indicate a value is not currently present (although undefined undefined; // used to indicate a value is not currently present (although undefined
// is actually a value itself) // is actually a value itself)
// false, null, undefined, NaN, 0 and "" are falsy, and everything else is truthy. // false, null, undefined, NaN, 0 and "" are falsy, and everything else is truthy.
@ -115,57 +115,57 @@ undefined // used to indicate a value is not currently present (although undefin
// Variables are declared with the var keyword. Javascript is dynamically typed, // Variables are declared with the var keyword. Javascript is dynamically typed,
// so you don't need to specify type. Assignment uses a single = character. // so you don't need to specify type. Assignment uses a single = character.
var someVar = 5 var someVar = 5;
// if you leave the var keyword off, you won't get an error... // if you leave the var keyword off, you won't get an error...
someOtherVar = 10 someOtherVar = 10;
// ...but your variable will be created in the global scope, not in the scope // ...but your variable will be created in the global scope, not in the scope
// you defined it in. // you defined it in.
// Variables declared without being assigned to are set to undefined. // Variables declared without being assigned to are set to undefined.
var someThirdVar // = undefined var someThirdVar; // = undefined
// There's shorthand for performing math operations on variables: // There's shorthand for performing math operations on variables:
someVar += 5 // equivalent to someVar = someVar + 5; someVar is 10 now someVar += 5; // equivalent to someVar = someVar + 5; someVar is 10 now
someVar *= 10 // now someVar is 100 someVar *= 10; // now someVar is 100
// and an even-shorter-hand for adding or subtracting 1 // and an even-shorter-hand for adding or subtracting 1
someVar++ // now someVar is 101 someVar++; // now someVar is 101
someVar-- // back to 100 someVar--; // back to 100
// Arrays are ordered lists of values, of any type. // Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true] var myArray = ["Hello", 45, true];
// Their members can be accessed using the square-brackets subscript syntax. // Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero. // Array indices start at zero.
myArray[1] // = 45 myArray[1]; // = 45
// JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other // JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other
// languages: an unordered collection of key-value pairs. // languages: an unordered collection of key-value pairs.
var myObj = {key1: "Hello", key2: "World"} var myObj = {key1: "Hello", key2: "World"};
// Keys are strings, but quotes aren't required if they're a valid // Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type. // JavaScript identifier. Values can be any type.
var myObj = {myKey: "myValue", "my other key": 4} var myObj = {myKey: "myValue", "my other key": 4};
// Object attributes can also be accessed using the subscript syntax, // Object attributes can also be accessed using the subscript syntax,
myObj["my other key"] // = 4 myObj["my other key"]; // = 4
// ... or using the dot syntax, provided the key is a valid identifier. // ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey // = "myValue" myObj.myKey; // = "myValue"
// Objects are mutable; values can be changed and new keys added. // Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true myObj.myThirdKey = true;
// If you try to access a value that's not yet set, you'll get undefined. // If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey // = undefined myObj.myFourthKey; // = undefined
/////////////////////////////////// ///////////////////////////////////
// 3. Logic and Control Structures // 3. Logic and Control Structures
// The if structure works as you'd expect. // The if structure works as you'd expect.
var count = 1 var count = 1;
if (count == 3){ if (count == 3){
// evaluated if count is 3 // evaluated if count is 3
} else if (count == 4) { } else if (count == 4) {
@ -182,7 +182,7 @@ while (true) {
// Do-while loops are like while loops, except they always run at least once. // Do-while loops are like while loops, except they always run at least once.
var input var input
do { do {
input = getInput() input = getInput();
} while (!isValid(input)) } while (!isValid(input))
// the for loop is the same as C and Java: // the for loop is the same as C and Java:
@ -193,23 +193,23 @@ for (var i = 0; i < 5; i++){
// && is logical and, || is logical or // && is logical and, || is logical or
if (house.size == "big" && house.colour == "blue"){ if (house.size == "big" && house.colour == "blue"){
house.contains = "bear" house.contains = "bear";
} }
if (colour == "red" || colour == "blue"){ if (colour == "red" || colour == "blue"){
// colour is either red or blue // colour is either red or blue
} }
// && and || "short circuit", which is useful for setting default values. // && and || "short circuit", which is useful for setting default values.
var name = otherName || "default" var name = otherName || "default";
/////////////////////////////////// ///////////////////////////////////
// 4. Functions, Scope and Closures // 4. Functions, Scope and Closures
// JavaScript functions are declared with the function keyword. // JavaScript functions are declared with the function keyword.
function myFunction(thing){ function myFunction(thing){
return thing.toUpperCase() return thing.toUpperCase();
} }
myFunction("foo") // = "FOO" myFunction("foo"); // = "FOO"
// JavaScript functions are first class objects, so they can be reassigned to // JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for // different variable names and passed to other functions as arguments - for
@ -217,49 +217,49 @@ myFunction("foo") // = "FOO"
function myFunction(){ function myFunction(){
// this code will be called in 5 seconds' time // this code will be called in 5 seconds' time
} }
setTimeout(myFunction, 5000) setTimeout(myFunction, 5000);
// Function objects don't even have to be declared with a name - you can write // Function objects don't even have to be declared with a name - you can write
// an anonymous function definition directly into the arguments of another. // an anonymous function definition directly into the arguments of another.
setTimeout(function(){ setTimeout(function(){
// this code will be called in 5 seconds' time // this code will be called in 5 seconds' time
}, 5000) }, 5000);
// JavaScript has function scope; functions get their own scope but other blocks // JavaScript has function scope; functions get their own scope but other blocks
// do not. // do not.
if (true){ if (true){
var i = 5 var i = 5;
} }
i // = 5 - not undefined as you'd expect in a block-scoped language i; // = 5 - not undefined as you'd expect in a block-scoped language
// This has led to a common pattern of "immediately-executing anonymous // This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global // functions", which prevent temporary variables from leaking into the global
// scope. // scope.
(function(){ (function(){
var temporary = 5 var temporary = 5;
// We can access the global scope by assiging to the 'global object', which // We can access the global scope by assiging to the 'global object', which
// in a web browser is always 'window'. The global object may have a // in a web browser is always 'window'. The global object may have a
// different name in non-browser environments such as Node.js. // different name in non-browser environments such as Node.js.
window.permanent = 10 window.permanent = 10;
})() })();
temporary // raises ReferenceError temporary; // raises ReferenceError
permanent // = 10 permanent; // = 10
// One of JavaScript's most powerful features is closures. If a function is // One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the // defined inside another function, the inner function has access to all the
// outer function's variables, even after the outer function exits. // outer function's variables, even after the outer function exits.
function sayHelloInFiveSeconds(name){ function sayHelloInFiveSeconds(name){
var prompt = "Hello, " + name + "!" var prompt = "Hello, " + name + "!";
function inner(){ function inner(){
alert(prompt) alert(prompt);
} }
setTimeout(inner, 5000) setTimeout(inner, 5000);
// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will // setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
// exit immediately, and setTimeout will call inner afterwards. However, // exit immediately, and setTimeout will call inner afterwards. However,
// because inner is "closed over" sayHelloInFiveSeconds, inner still has // because inner is "closed over" sayHelloInFiveSeconds, inner still has
// access to the 'prompt' variable when it is finally called. // access to the 'prompt' variable when it is finally called.
} }
sayHelloInFiveSeconds("Adam") // will open a popup with "Hello, Adam!" in 5s sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s
/////////////////////////////////// ///////////////////////////////////
// 5. More about Objects; Constructors and Prototypes // 5. More about Objects; Constructors and Prototypes
@ -267,44 +267,44 @@ sayHelloInFiveSeconds("Adam") // will open a popup with "Hello, Adam!" in 5s
// Objects can contain functions. // Objects can contain functions.
var myObj = { var myObj = {
myFunc: function(){ myFunc: function(){
return "Hello world!" return "Hello world!";
} }
} };
myObj.myFunc() // = "Hello world!" myObj.myFunc(); // = "Hello world!"
// When functions attached to an object are called, they can access the object // When functions attached to an object are called, they can access the object
// they're attached to using the this keyword. // they're attached to using the this keyword.
myObj = { myObj = {
myString: "Hello world!", myString: "Hello world!",
myFunc: function(){ myFunc: function(){
return this.myString return this.myString;
} }
} };
myObj.myFunc() // = "Hello world!" myObj.myFunc(); // = "Hello world!"
// What this is set to has to do with how the function is called, not where // 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 // it's defined. So, our function doesn't work if it isn't called in the
// context of the object. // context of the object.
var myFunc = myObj.myFunc var myFunc = myObj.myFunc;
myFunc() // = undefined myFunc(); // = undefined
// Inversely, a function can be assigned to the object and gain access to it // 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. // through this, even if it wasn't attached when it was defined.
var myOtherFunc = function(){ var myOtherFunc = function(){
return this.myString.toUpperCase() return this.myString.toUpperCase();
} }
myObj.myOtherFunc = myOtherFunc myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc() // = "HELLO WORLD!" myObj.myOtherFunc(); // = "HELLO WORLD!"
// When you call a function with the new keyword, a new object is created, and // 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 // made available to the function via this. Functions designed to be called
// like this are called constructors. // like this are called constructors.
var MyConstructor = function(){ var MyConstructor = function(){
this.myNumber = 5 this.myNumber = 5;
} }
myNewObj = new MyConstructor() // = {myNumber: 5} myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber // = 5 myNewObj.myNumber; // = 5
// Every JavaScript object has a 'prototype'. When you go to access a property // 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 // on an object that doesn't exist on the actual object, the interpreter will
@ -315,31 +315,31 @@ myNewObj.myNumber // = 5
// part of the standard; we'll get to standard ways of using prototypes later. // part of the standard; we'll get to standard ways of using prototypes later.
var myObj = { var myObj = {
myString: "Hello world!", myString: "Hello world!",
} };
var myPrototype = { var myPrototype = {
meaningOfLife: 42, meaningOfLife: 42,
myFunc: function(){ myFunc: function(){
return this.myString.toLowerCase() return this.myString.toLowerCase()
} }
} };
myObj.__proto__ = myPrototype myObj.__proto__ = myPrototype;
myObj.meaningOfLife // = 42 myObj.meaningOfLife; // = 42
// This works for functions, too. // This works for functions, too.
myObj.myFunc() // = "hello world!" myObj.myFunc(); // = "hello world!"
// Of course, if your property isn't on your prototype, the prototype's // Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on. // prototype is searched, and so on.
myPrototype.__proto__ = { myPrototype.__proto__ = {
myBoolean: true myBoolean: true
} };
myObj.myBoolean // = true myObj.myBoolean; // = true
// There's no copying involved here; each object stores a reference to its // 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 // prototype. This means we can alter the prototype and our changes will be
// reflected everywhere. // reflected everywhere.
myPrototype.meaningOfLife = 43 myPrototype.meaningOfLife = 43;
myObj.meaningOfLife // = 43 myObj.meaningOfLife; // = 43
// We mentioned that __proto__ was non-standard, and there's no standard way to // We mentioned that __proto__ was non-standard, and there's no standard way to
// change the prototype of an existing object. However, there's two ways to // change the prototype of an existing object. However, there's two ways to
@ -347,8 +347,8 @@ myObj.meaningOfLife // = 43
// The first is Object.create, which is a recent addition to JS, and therefore // The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet. // not available in all implementations yet.
var myObj = Object.create(myPrototype) var myObj = Object.create(myPrototype);
myObj.meaningOfLife // = 43 myObj.meaningOfLife; // = 43
// The second way, which works anywhere, has to do with constructors. // The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of // Constructors have a property called prototype. This is *not* the prototype of
@ -358,20 +358,20 @@ myConstructor.prototype = {
getMyNumber: function(){ getMyNumber: function(){
return this.myNumber return this.myNumber
} }
} };
var myNewObj2 = new myConstructor() var myNewObj2 = new myConstructor();
myNewObj2.getMyNumber() // = 5 myNewObj2.getMyNumber(); // = 5
// Built-in types like strings and numbers also have constructors that create // Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects. // equivalent wrapper objects.
var myNumber = 12 var myNumber = 12;
var myNumberObj = new Number(12) var myNumberObj = new Number(12);
myNumber == myNumberObj // = true myNumber == myNumberObj; // = true
// Except, they aren't exactly equivalent. // Except, they aren't exactly equivalent.
typeof(myNumber) // = 'number' typeof(myNumber); // = 'number'
typeof(myNumberObj) // = 'object' typeof(myNumberObj); // = 'object'
myNumber === myNumberObj // = false myNumber === myNumberObj; // = false
if (0){ if (0){
// This code won't execute, because 0 is falsy. // This code won't execute, because 0 is falsy.
} }
@ -382,9 +382,9 @@ if (Number(0)){
// However, the wrapper objects and the regular builtins share a prototype, so // However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance. // you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){ String.prototype.firstCharacter = function(){
return this.charAt(0) return this.charAt(0);
} }
"abc".firstCharacter() // = "a" "abc".firstCharacter(); // = "a"
// This fact is often used in "polyfilling", which is implementing newer // This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be // features of JavaScript in an older subset of JavaScript, so that they can be
@ -395,10 +395,10 @@ String.prototype.firstCharacter = function(){
if (Object.create === undefined){ // don't overwrite it if it exists if (Object.create === undefined){ // don't overwrite it if it exists
Object.create = function(proto){ Object.create = function(proto){
// make a temporary constructor with the right prototype // make a temporary constructor with the right prototype
var Constructor = function(){} var Constructor = function(){};
Constructor.prototype = proto Constructor.prototype = proto;
// then use it to create a new, appropriately-prototyped object // then use it to create a new, appropriately-prototyped object
return new Constructor() return new Constructor();
} }
} }
``` ```