JavaScript Cheat Sheet for Beginners
JavaScript Cheat Sheet for Beginners
JavaScript
A JavaScript cheat sheet with the most important concepts, functions, methods, and more. A
complete quick reference for beginners.
# Getting Started
Introduction
Console
Numbers
let amount = 6;
let price = 4.99;
[Link] 1/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Variables
let x = null;
let name = "Tammy";
const found = false;
var a;
[Link](a); // => undefined
Strings
// => 21
[Link]([Link]);
Arithmetic Operators
5 + 5 = 10 // Addition
10 - 5 = 5 // Subtraction
5 * 10 = 50 // Multiplication
10 / 5 = 2 // Division
10 % 5 = 0 // Modulo
Comments
/*
The below configuration must be
changed before deployment.
*/
Assignment Operators
[Link] 2/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link](number);
// => 120
String Interpolation
let age = 7;
// String concatenation
'Tommy is ' + age + ' years old.';
// String interpolation
`Tommy is ${age} years old.`;
let Keyword
let count;
[Link](count); // => undefined
count = 10;
[Link](count); // => 10
const Keyword
const numberOfColumns = 4;
# JavaScript Conditionals
if Statement
if (isMailSent) {
[Link] 3/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Ternary Operator
var x=1;
// => true
result = (x == 1) ? true : false;
Operators
Comparison Operators
1 > 3 // false
3 > 1 // true
250 >= 250 // true
1 === 1 // true
1 === 2 // false
1 === '1' // false
Logical Operator !
// => false
[Link](oppositeValue);
[Link] 4/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
else if
switch Statement
switch (food) {
case 'oyster':
[Link]('The taste of the sea');
break;
case 'pizza':
[Link]('A delicious pie');
break;
default:
[Link]('Enjoy your meal');
}
== vs ===
0 == false // true
0 === false // false, different type
1 == "1" // true, automatic type conversion
1 === "1" // false, different type
null == undefined // true
null === undefined // false
[Link] 5/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
# JavaScript Functions
Functions
Anonymous Functions
// Named function
function rocketToMars() {
return 'BOOM!';
}
// Anonymous function
const rocketToMars = function() {
return 'BOOM!';
}
With no arguments
[Link] 6/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
return Keyword
// With return
function sum(num1, num2) {
return num1 + num2;
}
Calling Functions
Function Expressions
[Link] 7/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Function Parameters
Function Declaration
# JavaScript Scope
Scope
function myFunction() {
if (isLoggedIn == true) {
const statusMessage = 'Logged in.';
}
// Uncaught ReferenceError...
[Link] 8/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link](statusMessage);
Global Variables
function printColor() {
[Link](color);
}
let vs var
var is scoped to the nearest function block, and let is scoped to the nearest enclosing block.
The variable has its own copy using let, and the variable has shared copy using var.
[Link] 9/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
# JavaScript Arrays
Arrays
Property .length
[Link] // 4
Index
[Link](myArray[0]); // 100
[Link](myArray[1]); // 200
Mutable chart
push ✔ ✔
pop ✔ ✔
unshift ✔ ✔
shift ✔ ✔
Method .push()
Add items to the end and returns the new array length.
Method .pop()
Remove an item from the end and returns the removed item.
Method .shift()
Remove an item from the beginning and returns the removed item.
Method .unshift()
Add items to the beginning and returns the new array length.
Method .concat()
// => [ 4, 3, 2, 1 ]
[newFirstNumber].concat(numbers)
[Link] 11/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
// => [ 3, 2, 1, 4 ]
[Link](newFirstNumber)
if you want to avoid mutating your original array, you can use concat.
# JavaScript Loops
While Loop
while (condition) {
// code block to be executed
}
let i = 0;
while (i < 5) {
[Link](i);
i++;
}
Reverse Loop
// => 2. banana
// => 1. orange
// => 0. apple
Do…While Statement
x = 0
i = 0
do {
x = x + i;
[Link] 12/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link](x)
i++;
} while (i < 5);
// => 0 1 3 6 10
For Loop
// => 0, 1, 2, 3
Break
Continue
Nested
[Link] 13/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
}
}
for...in loop
for...of loop
# JavaScript Iterators
Functions Assigned to Variables
plusFive(3); // 8
// Since f has a function value, it can be invoked.
f(9); // 14
[Link] 14/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Callback Functions
[Link](sum); // 10
[Link](announcements);
[Link](number => {
[Link](number);
});
[Link] 15/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
# JavaScript Objects
Accessing Properties
const apple = {
color: 'Green',
price: { bulk: '$3/kg', smallQty: '$4/kg' }
};
[Link]([Link]); // => Green
[Link]([Link]); // => $3/kg
Naming Properties
Non-existent properties
const classElection = {
date: 'January 12'
};
[Link]([Link]); // undefined
Mutable
[Link] 16/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
const student = {
name: 'Sheldon',
score: 100,
grade: 'A',
}
[Link](student)
// { name: 'Sheldon', score: 100, grade: 'A' }
delete [Link]
[Link] = 'F'
[Link](student)
// { name: 'Sheldon', grade: 'F' }
student = {}
// TypeError: Assignment to constant variable.
const person = {
name: 'Tom',
age: '22',
};
const {name, age} = person;
[Link](name); // 'Tom'
[Link](age); // '22'
Delete operator
const person = {
firstName: "Matilda",
age: 27,
hobby: "knitting",
goal: "learning JavaScript"
};
[Link](person);
/*
{
firstName: "Matilda"
age: 27
[Link] 17/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Objects as arguments
const origNum = 8;
const origObj = {color: 'blue'};
changeItUp(origNum, origObj);
this Keyword
const cat = {
name: 'Pipey',
age: 8,
whatName() {
return [Link]
}
};
[Link]([Link]()); // => Pipey
Factory functions
[Link] 18/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Methods
const engine = {
// method shorthand, with one argument
start(adverb) {
[Link](`The engine starts up ${adverb}...`);
},
// anonymous arrow function expression with no arguments
sputter: () => {
[Link]('The engine sputters...');
},
};
[Link]('noisily');
[Link]();
const myCat = {
_name: 'Dottie',
get name() {
return this._name;
},
set name(newName) {
this._name = newName;
}
};
[Link]([Link]);
# JavaScript Classes
Static Methods
class Dog {
constructor(name) {
this._name = name;
}
introduce() {
[Link]('This is ' + this._name + ' !');
}
// A static method
static bark() {
[Link]('Woof!');
}
}
Class
class Song {
constructor() {
[Link];
[Link];
}
play() {
[Link] 20/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link]('Song playing!');
}
}
Class Constructor
class Song {
constructor(title, artist) {
[Link] = title;
[Link] = artist;
}
}
Class Methods
class Song {
play() {
[Link]('Playing!');
}
stop() {
[Link]('Stopping!');
}
}
extends
// Parent class
class Media {
constructor(info) {
[Link] = [Link];
[Link] = [Link];
}
}
// Child class
class Song extends Media {
constructor(songData) {
[Link] 21/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
super(songData);
[Link] = [Link];
}
}
# JavaScript Modules
Export
// [Link]
// Default export
export default function add(x,y){
return x + y
}
// Normal export
export function subtract(x,y){
return x - y
}
// Multiple exports
function multiply(x,y){
return x * y
}
function duplicate(x){
return x * 2
}
export {
multiply,
duplicate
}
[Link] 22/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Import
// [Link]
import add, { subtract, multiply, duplicate } from './[Link]';
[Link](add(6, 2)); // 8
[Link](subtract(6, 2)) // 4
[Link](multiply(6, 2)); // 12
[Link](duplicate(5)) // 10
// [Link]
<script type="module" src="[Link]"></script>
Export Module
// [Link]
function add(x,y){
return x + y
}
function subtract(x,y){
return x - y
}
function multiply(x,y){
return x * y
}
function duplicate(x){
return x * 2
}
Require Module
// [Link]
const myMath = require('./[Link]')
[Link] 23/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link]([Link](6, 2)); // 8
[Link]([Link](6, 2)) // 4
[Link]([Link](6, 2)); // 12
[Link]([Link](5)) // 10
# JavaScript Promises
Promise states
Executor function
setTimeout()
setTimeout(loginAlert, 6000);
.then() method
[Link] 24/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link]((res) => {
[Link](res);
}, (err) => {
[Link](err);
});
.catch() method
[Link]((res) => {
[Link](value);
});
[Link]((err) => {
[Link](err);
});
[Link]()
[Link] 25/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link](res[1]);
});
Creating
[Link](res => {
return res === 'Alan' ? [Link]('Hey Alan!') : [Link]('Who are you
}).then((res) => {
[Link](res)
}, (err) => {
[Link] 26/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link](err)
});
# JavaScript Async-Await
Asynchronous
function helloWorld() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Hello World!');
}, 2000);
});
}
Resolving Promises
function helloWorld() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Hello World!');
}, 2000);
});
}
Error Handling
[Link] 28/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
try {
let user = [Link](json); // <-- no errors
[Link]( [Link] ); // no name!
} catch (e) {
[Link]( "Invalid JSON data!" );
}
function helloWorld() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Hello World!');
}, 2000);
});
}
# JavaScript Requests
JSON
const jsonObj = {
"name": "Rick",
"id": "11A",
"level": 4
};
XMLHttpRequest
[Link] 29/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
[Link]('GET', '[Link]/getjson');
XMLHttpRequest is a browser-level API that enables the client to script data transfers via JavaScript, NOT
t f th J S i t l
GET
[Link]();
POST
const data = {
fish: 'Salmon',
weight: '1.5 KG',
units: 5
};
const xhr = new XMLHttpRequest();
[Link]('POST', '/inventory/add');
[Link] = 'json';
[Link]([Link](data));
[Link] = () => {
[Link]([Link]);
};
fetch api
fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/json',
'apikey': apiKey
},
body: data
}).then(response => {
if ([Link]) {
return [Link]();
[Link] 30/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
}
throw new Error('Request failed!');
}, networkError => {
[Link]([Link])
})
}
JSON Formatted
fetch('url-that-returns-JSON')
.then(response => [Link]())
.then(jsonResponse => {
[Link](jsonResponse);
});
fetch('url')
.then(
response => {
[Link](response);
},
rejection => {
[Link]([Link]);
);
fetch('[Link] {
method: 'POST',
body: [Link]({id: "200"})
}).then(response => {
if([Link]){
return [Link]();
}
throw new Error('Request failed!');
}, networkError => {
[Link]([Link]);
}).then(jsonResponse => {
[Link](jsonResponse);
})
[Link] 31/32
10/13/24, 6:04 PM JavaScript Cheat Sheet & Quick Reference
Related Cheatsheet
Recent Cheatsheet
[Link] 32/32