Show Menu

JavaScript Survival Kit Cheat Sheet by

About this document

This 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 - Explained

What is a variab­le?
A variable is a storage location, a "­­bo­x­", which we associate with a name (an identi­­fier). The variable can hold a single value and its value may be changed
What is an identi­fier?
It's the "­­na­m­e­" affixed the variable. Later on, whether updating or retrieving its value, we'll use refer to the variable by its identi­­fier.
What can a variable hold?
Any string, number, boolean, array, object or Funct­ion.
Why use variab­les?
Use them to "­rem­emb­er" things in the program. Sometimes, the collection of all variables (every­thing the program remembers) is called the state of the program.
Where to read more
Read the section "­Var­iab­les­" at:
eloquentjavascript.net/02_program_structure.html

Variables - Examples

Define 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 - Explained

What 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 prope­rty.
What is a proper­ty?
A property is some small part of an object which holds some data (e.g. string) or a Funct­ion. Each property has an ident­i­f­ier, just like variables.
Where to read more
eloquentjavascript.net/04_data.html - The introd­uction and the paragraphs "­Pro­per­tie­s" and "­Obj­ect­s"

Objects - Examples

Define an object
Define an object with two properties whose identi­fiers are "­nam­e" and "­spe­cie­s":
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 = "­spa­rky­";
Add a property
my_pe­t["b­ree­d"] = 'bulldog';
or
my_pet.breed = 'bulldog';
NB adding­/up­dating 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.sp­ecies;

Compar­isons

x === 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 & True

What's a condit­ion?
A condition is really just an expres­sion. 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 JavaSc­ript, all but 6 values are truthy, that is, unless your condi­tion 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-sta­tements and when to terminate a loop.
 

Functions - Explained

What is a functi­on?
Functions group code together into a block which is given a name (an ident­ifi­er). Functions often accept arguments to modify their behaviour.
What is an argume­nt?
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 argume­nt(s) is supplied.
Why use functi­ons?
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 - Syntax

Define a function
Define a function called takeF­ive, 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 takeF­ive, which takes no arguments:
takeFive();
NB - Note the parent­heses' that follow the function's identifier - that's what tells JavaScript to call the function rather than just returning it as a (Func­tion) value.
Define a function (with argume­nts)
function add5(num) {
 ­ ­ ­con­sol­e.l­og(­"I got num=" + num);
 ­ ­ ­return num + 5;
}

NB - To have more arguments than just num, type out additional identi­fiers (names) of arguments and add a comma (,) between each.
Call a function (with argume­nts)
var x = add5(10);
var y = add5(-5);

NB - This amounts to manually typing:
var num1 = 5;
consol­e.l­og(­"I got num=" + num1);
var x = num1 + 5;
var num2 = -5;
consol­e.l­og(­"I got num=" + num2);
var y = num2 + 5;

if-sta­tement - Explained

What's an if-sta­tem­ent?
If-sta­tements are used to group code together into a block which is only evaluated if the condi­tion evaluates to true.
NB - see "­Con­ditions - Falsy & Truthy­" for an explan­ation of condit­ions.
What does an if-sta­tement look like?
if (CONDI­TION) {
 ­ ­ ­//e­valuate this code if CONDITION
 ­ ­ //is true
} else if (OTHER­-CO­NDI­TION) {
 ­ ­ ­//e­valuate this code if CONDITION
 ­ ­ //is false, but OTHER-CONDITION
 ­ ­ //is true
} else {
 ­ ­ ­//e­valuate this code if no condition
 ­ ­ ­//e­val­uated 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-sta­tements - Examples

if-s­tat­ement
if (pet_type === "­dog­") {
   //done if var 'pet_type' is "dog"
}
if/else statem­ent
if (pet_type === "­dog­") {
   //if var 'pet_type' is "dog"
} else {
   //if var 'pet_type' is something else
}
if/else if/else statem­ent
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 - Explained

What is a (while) loop?
Loops allow repeating a block of code for as long as a condi­tion 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 essent­ially in a conver­sat­ional loop!
Syntax Example
while (CONDI­TION) {
 ­ ­ ­//e­valuate code in this block
}
Where to read more
Mid-way through the page linked below, look for the heading "­while and do loops":
eloquentjavascript.net/02_program_structure.html

(while) Loops - Examples

How 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) {
 ­ ­ ­//i­ncrease count by 1
 ­ ­ ­count = count + 1;
 ­ ­ ­//e­valuate this code until count
 ­ ­ //is 4 or more
}

NB - if we don't ensure our condition eventually becomes invalid, we will loop forever.
 

Data Types

Number
Any numeric value - 3, 3.14, 2e10
String
Any sequence of characters inside quotation marks. "d", "do­g", "cute dog"
Bool­ean
Two possible values, true or false. Used as conditions in if-sta­tements & 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: "­Rac­hel­", age: 22 }

Syntax - (basic) data types

String
"d"
"To be or not to be"
"300" //in quotes, this is a string
'single quotes also work'
Number
300
3.1415
2e10
Bool­ean
true
false

Termin­ology

Syntax
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 javasc­ript.
Stat­ement
A piece of code (usually a single line) which represents something we want done - some small task.
Expr­ess­ion
Some piece of code which, when evaluated, will yield a value back. E.g. 3 + 6
Eval­uat­ion
The thing which happens when the JavaScript interp­reter analyses a piece of code and either does something in response (a statement) or yields a value (an expres­sion).
Java­Script Interp­reter
Some program which can unders­tand, and act on JavaSc­ript. Your browser (Firef­ox/­Chrome) is a JavaScript interp­reter.
(Code) Block
Blocks are delimited by { } and used by if-sta­tem­ents, loops and functions to encaps­ulate some series of state­ments which should be executed.

Arrays - Explained

What 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 Funct­ion.
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
Read the introd­uction and the paragraph "data sets" at:
eloquentjavascript.net/04_data.html

Arrays - Examples

Defining an array
Define an array with 3 elements, the string "on­e", the number 2 and the boolean false, in that order:
["one", 2, "­thr­ee"]
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', 'croco­dile']
Remove elemen­t(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 organi­sation and upcoming events
CodHer's Asosio community.
Ask the mentors, get new JS assign­ments, 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 Sites

Huge site dedicated web develo­pers. The "­CSS­" & "­Jav­aSc­rip­t" links under "Web Platfo­rm" are especially intere­sting to you.
Introd­uct­ion­/Guide to JQuery
The JQuery API - go here to read more about a given JQuery function or to search for functi­ona­lity.
Probably the best JavaScript textbook in existence - and it's free! An excellent and recomm­ended read.

Download the JavaScript Survival Kit Cheat Sheet

6 Pages
//media.cheatography.com/storage/thumb/pseud_javascript-survival-kit.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.