JavaScript: Cheat Sheet
Feel free to refer to this handy cheat sheet to remind you of the syntax and options for common JavaScript operations.
Variables
Variables can take one of the following values;
var a = 33.5; // Number: Integer or floating point
var b = true; // Boolean: true or false
var c = "Hello"; // String: Sequence of characters
var d = null; // A null value represents 'nothing'
var e; // Undefined
// Object variables can be thought of as a box containing a bunch of other
// variables all lumped together. Just like normal variables, everything in
// that box has a name.
var person = {
name: "John",
height: 180,
};
console.log(person.name); // Prints "John"Strings
Strings are a type of JavaScript variable which store a sequence of letters (characters). For instance, “Hello” is a string containing 5 letters.
var name = "Hello"; // Create a new string called 'name' containing the letters "Hello".
console.log(name); // Prints "Hello"
console.log(name.length) // Prints 5, which is the length of the string inside the variable name ("Hello")If … Else
The most simple way to modify the flow of execution of your script is the if … else statement. With these statements, if a certain condition is true, then a sequence of statements will execute - otherwise, they will not. This is perfect for running specific code only in certain circumstances…
if (condition) {
this_statement_runs_if_condition_is_true;
}
if (condition) {
this_statement_runs_if_condition_is_true;
} else {
this_statement_runs_if_condition_is_false;
}
if (conditionA) {
this_statement_runs_if_conditionA_is_true;
} else if (conditionB) {
this_statement_runs_if_conditionB_is_true;
} else {
this_statement_only_runs_if_both_conditionA_and_B_are_false;
}The condition part of an if statement must always result in a boolean value which is true or false. It might compare two values, or run a separate function that returns a ‘true’ or ‘false’ value - but if it’s not a boolean - then your script will break because the if statement won’t know which path to follow.
var name = "John";
var height = 180;
if (name == "John") {
alert("Hello John!");
}
if (height > 200) {
alert("Sorry - you are too tall for this rollercoaster.");
} else {
alert("You may go on this rollercoaster.");
}Functions
Functions always need to have a name, can take any number of parameters (zero or more) and can optionally return a value to the calling code if they need too.
function sayHello() {
// Popup a box to the user with a fixed message.
alert("Hello");
}
function saySomething(message) {
// Popup a box with the provided message.
alert(message);
}
function square(value) {
// Return the square number of the given value.
return value * value;
}
function add(a, b, c) {
// Add together 3 numbers
return a + b + c;
}
// Call the sayHello() function which will popup a box saying "Hello"
sayHello();
// Call the saySomething() function with the option "Goodbye"
saySomething("Goodbye");console.log
While developing your application it can be incredibly useful to print out certain text or variables to the debugging console. It lets you test code that isn’t finished yet by printing intermediate values and can help you track down bugs by ensuring that your code is working with the right sort of values.
console.log("Hello World!");
if (name == Undefined) {
console.log("Uh oh! I don't know your name - that's a problem!");
}
var message = "This is a really useful message";
console.log(message);Arrays
Arrays are a list of variables that are packed together. You can think of them like a stack of cards, where each one has a value written on it. The following shows a few examples of how you work with arrays in JavaScript. Remember that arrays are ‘zero-indexed’, so the first element has index zero [0].
var zooAnimals = [
"Elephant",
"Lion",
"Tiger",
"Bear"
];
var numberOfZooAnimals = zooAnimals.length;
console.log("We have this number of zoo animals: " + numberOfZooAnimals);
var firstAnimal = zooAnimals[0];
console.log(firstAnimal); // Prints 'Elephant'
var lastAnimal = zooAnimals[zooAnimals.length-1];
console.log(lastAnimal); // Prints 'Bear'
zooAnimals.push("Gorilla"); // Adds 'Gorilla' to the zooAnimals array
array.splice(zooAnimals, 1); // Removes 'Lion' from the zooAnimals arrayLoops
Loops make it easy to go over every item in an array to perform some logic or they can be used to keep running some code until a condition is no longer true. For instance, imagine you are trying to find the highest number from a list of test scores, or calculate the average time it takes for racers to complete a race…
var testScores = [10, 20, 25, 15, 30];
var highestScore = 0;
for (var i = 0; i < testScores.length; i++) {
// If the score at position 'i' is higher that 'highestScore', record the value.
if ( testScores[i] > highestScore ) {
highestScore = testScores[i];
}
}
console.log(highestScore); // Prints '30'