Earlier this year I realized that there aren't any good cheat-sheets for students new to JavaScript and coding in general to learn the (relatively dense!) syntax of JavaScript. Today I decided to make my own!
In the past I've really like printing up cheat-sheets as I learned new technologies. It's a great thing to have taped to the wall or desk in front of you. Most existing JavaScript cheat-sheets are either too advanced or unclear, or have factual issues, or are poorly formatted and lack syntax highlighting or span many pages. Mine is condensed to one page and is made to be as clear as possible for JS noobs.
Download it here
This will be the first in a series of cheat-sheets aimed at coders and programming newbies learning new technologies.
Preview
I'd recommend using the 1 page PDF version version, since I will keep it updated and likely add or correct stuff as I go along, but a partial preview is available below:
Basics
Assignment: Put data into variables. New variables are "declared" with
var
keyword.
var a = 5;
var name = "Alex";
var isReadyToLearn = true;
name = "Pat";
Expressions: In many places in JavaScript, such as in assignment, JavaScript expects "expressions", that can be like math formulas.
var a = 10;
var d = 4;
c = c + (d * 3);
Boolean expressions: Expressions can also compute the "truth" of conditions, resulting in values of
true
orfalse
.
var isPrepared = true;
var timeSpent = 5;
var readyToStart = isPrepared && timeSpent > 3;
Debugging
Console log: To output data to the console (either in the browser or node.js terminal), use
console.log
. Variables can outputed by separating with commas.
console.log('Hello there!');
var a = 0;
console.log('The value of a is ', a);
Data types
Array: Numbered of data, each numbered starting with 0.
var array = ['sam', 900, false];
console.log('Name is ', array[0]);
console.log('Age is ', array[1]);
Object: Like a "dictionary" list of definitions, consists of associated key and value pairs. Properties can be accessed with either
.
or
[]
.
var myObj = {
name: 'Sam',
age: 900,
};
console.log('Name is ', myObj.name);
console.log('Age is ', myObj['age']);
Conditionals
If-Statement: Conditionally execute the code in the curly-braces
{ }
if (a > 3) {
console.log('A is greater than 3');
}
If-Else-Statement: Presents two code paths, conditionally executing one block of code or the other.
if (name === "Alex") {
console.log('Hi Alex');
} else {
console.log('Hey there stranger');
}
Loops
While-Loop: Like
if
, except it repeats, possibly forever, until the condition no longer is true.
var a = 0;
while (a < 5) {
console.log('Increasing value of a...');
a = a + 1;
}
For-Loop: An older form of loop that has a special syntax, conventionally used only for looping through arrays.
var array = ['pat', 'alex', 'max', 'sam'];
for (var i = 0; i < array.length; i++) {
var item = array[i];
console.log('The name is ', item);
}
Functions
Function: Stores the code between the curly-braces
{ }
for later re-use.Function call: Executes the function
var myFunction = function () {
console.log('This code can be reused...');
};
myFunction();
Named function: Shortcut for giving a function a name, same behavior.
function myFunction () {
console.log('This code can be reused...');
};
myFunction();
Parameters: Functions (both named and otherwise) use parameters as "input" in order to be more re-usable.
Return statement: Use to send data back to the caller.
function addAndMultiply (a, b) {
return a + b + (a * b);
}
var total = addAndMultiply(10, 5);
var total2 = addAndMultiply(total, 100);
console.log('Final calculation: ', total2);