About this documentThis cheat-sheet explains the most important parts of the JavaScript language, defines some key terms and shows the syntax through small examples.
However, it's no substitute for proper studying - you can't learn to program off of a cheat sheet (sorry!). |
Variables - ExplainedWhat is a variable? A variable is a storage location, a "box", which we associate with a name (an identifier). The variable can hold a single value and its value may be changed | What is an identifier? It's the "name" affixed the variable. Later on, whether updating or retrieving its value, we'll use refer to the variable by its identifier. | What can a variable hold? Any string , number , boolean , array , object or Function . | Why use variables? Use them to "remember" things in the program. Sometimes, the collection of all variables (everything the program remembers) is called the state of the program. | Where to read more |
Variables - ExamplesDefine a variable var name = "Adalina"; NB - subsequent examples assume we have defined this variable.
| Retrieve the variable's value Simply refer to the variable's identifier:
console.log(name); is (in this case) the same as:
console.log("Adalina"); | Update the variable's value name = "Emma"; NB - The syntax is the same as defining the variable, sans the var keyword!
|
Objects - ExplainedWhat is an object? If a variable is a "box" which can hold a value, then an object is a box of boxes, holding many values - each of which is a property. | What is a property? A property is some small part of an object which holds some data (e.g. string ) or a Function . Each property has an identifier, just like variables. | Where to read more |
Objects - ExamplesDefine an object Define an object with two properties whose identifiers are "name" and "species":
var my_pet = { name: "spot", species: "dog" } NB Subsequent examples will assume we start with this object. NB It isn't necessary to define a variable to hold the array (but you almost always will). | Retrieve a property Get the value of the name property: my_pet["name"] or
my_pet.name | Update a property To change the value of the name property (i.e. rename our pet):
my_pet["name"] = "sparky"; or
my_pet.name = "sparky"; | Add a property my_pet["breed"] = 'bulldog'; or
my_pet.breed = 'bulldog'; NB adding/updating a property uses the same syntax - if the property didn't exist, it is added.
| Remove a property To remove the species property:
delete my_pet["species"]; or
delete my_pet.species; |
Comparisonsx === y
| true if x is equal to y
| x !== y
| true if x is different from y
| x >= y
| true if x is greater than, or equal to y
| x <= y
| true if x is less than, or equal to y
| x > y
| true if x is greater than y`
| x < y
| true if x is less than y
| !x
| true if x is false
| x && y
| true if both x and y are true
| x || y
| true if either (or both) x or y are true
|
Conditions - False & TrueWhat's a condition? A condition is really just an expression. When we use an expression as a condition, we're not interested in its value, but whether or not that value is truthy. | What's a truthy value? In JavaScript, all but 6 values are truthy , that is, unless your condition evaluates to one of those 6 values, the code guarded by the if-block will be run. | What are the falsy values? These 6 values will cause the condition to fail and the code it guards to be skipped: • false • 0 - (the number zero) • "" - (the empty string) • null • undefined • NaN - not a number
| Where are conditions used? Conditions determine which code block to evaluate in if-statements and when to terminate a loop. |
| | Functions - ExplainedWhat is a function? Functions group code together into a block which is given a name (an identifier). Functions often accept arguments to modify their behaviour. | What is an argument? Think of function arguments as variables which are defined & available to the code inside the function. The value of an argument is determined by the point the function is called and the argument(s) is supplied. | Why use functions? Functions are the primary way of defining more complex or specific actions than is built into JavaScript and to organise code. In other words - functions are handy when we wish to use a piece of code more than once. | Where to read more |
Functions - SyntaxDefine a function Define a function called takeFive , which returns the number 5 when called:
function takeFive() { return 5; } NB - we will be using this function in some of the examples below. | Call a function Call takeFive , which takes no arguments:
takeFive(); NB - Note the parentheses' that follow the function's identifier - that's what tells JavaScript to call the function rather than just returning it as a (Function ) value. | Define a function (with arguments) function add5(num) { console.log("I got num=" + num); return num + 5; } NB - To have more arguments than just num , type out additional identifiers (names) of arguments and add a comma (, ) between each.
| Call a function (with arguments) var x = add5(10);
var y = add5(-5);
NB - This amounts to manually typing:
var num1 = 5; console.log("I got num=" + num1); var x = num1 + 5; var num2 = -5; console.log("I got num=" + num2); var y = num2 + 5;
|
if-statement - ExplainedWhat's an if-statement? If-statements are used to group code together into a block which is only evaluated if the condition evaluates to true . NB - see "Conditions - Falsy & Truthy" for an explanation of conditions. | What does an if-statement look like? if (CONDITION) { //evaluate this code if CONDITION //is true } else if (OTHER-CONDITION) { //evaluate this code if CONDITION //is false, but OTHER-CONDITION //is true } else { //evaluate this code if no condition //evaluated to true. }
| Which parts are needed? Only the if -part is needed. else if and else blocks are optional. Also, you can have as many else if blocks as you'd like. |
if-statements - Examplesif-statement if (pet_type === "dog") { //done if var 'pet_type' is "dog" }
| if/else statement if (pet_type === "dog") { //if var 'pet_type' is "dog" } else { //if var 'pet_type' is something else }
| if/else if/else statement if (pet_type === "dog") { //if var 'pet_type' is "dog" } else if (pet_type === "cat") { //if var 'pet_type' is "cat" } else { //if var 'pet_type' is something else }
|
(while) Loops - ExplainedWhat is a (while) loop? Loops allow repeating a block of code for as long as a condition remains true. | Real world (tm) loop example Think of this exchange: Passenger: Are we there yet? Driver: No, not yet ... Passenger: Are we there yet?
If the passenger is really obnoxious and keeps repeating the question, and the driver patiently answers each time - they are essentially in a conversational loop! | Syntax Example while (CONDITION) { //evaluate code in this block }
| Where to read more |
(while) Loops - ExamplesHow do I loop forever while (true) { //keep doing this until time ends }
| How do I loop X times? To loop X times (say 3), we ensure the condition evaluates to false at the start of the fourth loop: var count = 0; while (count < 4) { //increase count by 1 count = count + 1; //evaluate this code until count //is 4 or more } NB - if we don't ensure our condition eventually becomes invalid, we will loop forever. |
| | Data TypesNumber | Any numeric value - 3 , 3.14 , 2e10 | String | Any sequence of characters inside quotation marks. "d" , "dog" , "cute dog" | Boolean | Two possible values, true or false . Used as conditions in if-statements & loops. Every expression can be boiled down into a boolean. | Array | A sequence of elements grouped together. E.g. [1, 2, 3] is an array of 3 numbers. | Object | An object which groups other values.
{ name: "Rachel", age: 22 } |
Syntax - (basic) data typesString "d"
"To be or not to be"
"300" //in quotes, this is a string
'single quotes also work'
| Number 300
3.1415
2e10
| Boolean true
false
|
TerminologySyntax The collection of rules about "what goes where" to form valid JavaScript code. NB - if you get a syntax error, you've written some code which isn't legal javascript. | Statement A piece of code (usually a single line) which represents something we want done - some small task. | Expression Some piece of code which, when evaluated, will yield a value back. E.g. 3 + 6 | Evaluation The thing which happens when the JavaScript interpreter analyses a piece of code and either does something in response (a statement) or yields a value (an expression). | JavaScript Interpreter Some program which can understand, and act on JavaScript. Your browser (Firefox/Chrome) is a JavaScript interpreter. | (Code) Block Blocks are delimited by { } and used by if-statements, loops and functions to encapsulate some series of statements which should be executed. |
Arrays - ExplainedWhat is an array? An array is a sequence of elements. Each element can be retrieved from the array by its index number. | What is an array element? An element part of an array, it can be any data type (string , number , boolean , array , object ) but it could also be a Function . | How can I get elements from the array? The first element has index 0, the second has index 1 and so on. | Where to read more |
Arrays - ExamplesDefining an array Define an array with 3 elements, the string "one" , the number 2 and the boolean false , in that order:
["one", 2, "three"] | Retrieve an element from the array Get the second element of the array, "b" , by indexing into the array using the index number 1 :
["a", "b", "c"][1] | Updating an element var pets = ['dog', 'cat', 'canary']; pets[1] = 'lion'; Now the array would be:
['dog', 'lion', 'canary']
| Add an element Use the method push . NB push adds elements to the end of the array.
var pets = ['dog', 'cat', 'canary']; pets.push('crocodile'); Now the array would be:
['dog', 'cat', 'canary', 'crocodile'] | Remove element(s) Use splice - splice needs two arguments, the index of where to start and a number of elements to remove.
var pets = ['dog', 'cat', 'fish', 'bird']; pets.splice(1,2); Now the array would be:
['dog', 'bird'] | Get number of elements in array Use the length property on the array:
pets.length
Yes, arrays are actually a kind of object(!!) - which means it has some properties (like length ) and methods attached to it. |
Where to go for more?CodHer's official website :) Learn about the organisation and upcoming events | CodHer's Asosio community. Ask the mentors, get new JS assignments, download learning materials and (please!) discuss JavaScript with other attendees. | Find event photos, keep current on upcoming events & find stories related to females in tech |
Helpful SitesHuge site dedicated web developers. The "CSS" & "JavaScript" links under "Web Platform" are especially interesting to you. | Introduction/Guide to JQuery | The JQuery API - go here to read more about a given JQuery function or to search for functionality. | Probably the best JavaScript textbook in existence - and it's free! An excellent and recommended read. |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment