⌘K

Benjamin Wilkinson

JavaScript Cheatsheet: Everything You Need to Know to Get Started

Learn the essentials of JavaScript with this comprehensive cheat sheet for beginners. Covers everything from variables and functions to objects and arrays, with clear examples and explanations.

Looking for the best JavaScript cheats and snippets? Javascript Cheatsheet has you covered! We offer a wide range of JavaScript cheat sheets, including fundamentals and methods. Our cheat sheets are designed to help you quickly reference the most commonly used JS techniques for creating dynamic web pages. Whether you're new to JavaScript or an experienced developer, our cheat sheets and code examples are a valuable resource. Check them out today!

General

Comments

// this is a comment 
/* or this is a comment */

This code will be ignored. Comments are generally a bad idea, your code should be explicit enough as it is.

Variables

Variable creation

let school = "SheCodes";
let fullPackage = "SheCodes Pro";
let projects = 4;
let awesome = true;

Variable operations

let x = 2;
let y = 3;
let z = x + y; // 5

let city = "Lisbon";
let country = "Portugal";
let place = city + " " + country; //Lisbon Portugal

Variable data Types

let age = 23; // Number
let name = "Julie"; // String
let canCode = true; // Boolean, could also be false

Structure structure types

let students = ["Kate", "Julie", "Mariana"]; // Array

let kate = {
  firstName: "Kate",
  lastName: "Johnson",
  age: 23,
  canCode: true,
}; // Object

Alerts & Prompts

Alert

alert("Olá");

let name = "Angela";
alert(name);

Prompt

let firstName = prompt("What is your first name");
let lastName = prompt("What is your last name");
let fullName = firstName + " " + lastName;
alert(fullName);

If else

if statement

let country = prompt("What country are you from?");

if (country === "Portugal") {
  alert("You are cool");
}

if (country !== "Portugal") {
  alert("Too bad for you");
}

if else statement

let age = prompt("How old are you?");

if (age < 18) {
  alert("You cannot apply");
} else {
  alert("You can apply");
}

Nested if else statements

if (age < 18) {
  alert("you can't apply");
} else {
  if (age > 120) {
    alert("you can't apply");
  } else {
    alert("you can apply");
  }
}

Logical Or

if (age < 18 || gender === "male") {
  alert("You can't join SheCodes 👩‍💻");
}

The code will be executed if one statement is true.

Logical And

if (continent === "Europe" && language === "Portuguese") {
  alert("You are from Portugal 🇵🇹");
} else {
  alert("You are not from Portugal");
}

The code will be executed if both statements are true.

Comparison and Logical Operators

2 > 3 // false 
2 < 3 // true 
2 <= 2 // true
3 >= 2 // true
2 === 5 // false 
2 !== 3 // true 
1 + 2 === 4 // false

Strings

Creating a string

let name = "SheCodes"; // "SheCodes"

String concatenation

let firstName = "Julie";
let lastName = "Johnson";
let fullName = firstName + " " + lastName; // "Julie Johnson"

//or
let fullName = `${firstName} ${lastName}`;

Trim

let city = " Montreal  ";
city.trim(); // "Montreal"

Replace

let city = "Montreal";
city = city.replace("e", "é"); // "Montréal"

toLowerCase

let city = "Montreal";
city = city.toLowerCase(); // "montreal"

toUpperCase

let city = "Montreal";
city = city.toUpperCase(); // "MONTREAL"

Template literals

let city = "Denver";
let sentence = `Kate is from ${city}`; // Kate is from Denver

Arrays

Array declaration

let myList = [];
let fruits = ["apples", "oranges", "bananas"];
myList = ['banana', 3, go, ['John', 'Doe'], {'firstName': 'John', 'lastName': 'Smith'}]

Access an Array

fruits
fruits[0]
fruits[1]
fruits[2]
fruits[3]

Update an Array item

fruits[1] = "Mango";
fruits[1] = 3;

while loop

let times = 0;
while (times < 10) {
  console.log(times);
  times = times + 1;
}

forEach loop

let fruits = ['apples', 'oranges', 'bananas'];
fruits.forEach(function(fruit) {
  alert("I have " + fruit + " in my shopping bag");
});

do while loop

let times = 0;
do {
  console.log(times);
  times = times + 1;
} while(times < 10)

for loop

for (let i = 0; i < 10; i++) {
  console.log("i is " + i);
}

for (let i = 0; i < myList.length; i++) {
  alert("I have " + myList[i] + " in my shopping bag");
}

Remove first item

fruits.shift()

Dates

Get current time

let now = new Date();

Create a date

let date = Date.parse("01 Jan 2025 00:00:00 GMT");

Get date data

let now = new Date();
now.getMinutes(); // 0,1,2, 12
now.getHours(); //1, 2, 3, 4
now.getDate(); //1, 2, 3, 4
now.getDay(); // 0, 1, 2
now.getMonth(); // 0, 1, 2
now.getFullYear(); // 2021

Numbers

Round

Math.round(4.7) // 5

Floor

Math.floor(4.7) // 4

Ceil

Math.ceil(4.7) // 5

Min

Math.min(2, 5, 1) // 1

Max

Math.max(2, 5, 1); // 5

Random

Math.random(); // 0.47231881595639025

Objects

Creating a new object

let fruit = new Object(); // "object constructor" syntax

let user = {}; // "object literal" syntax

let student = {
  firsName: "Julie",
  lastName: "Johnson",
};

let anotherStudent = {
  firstName: "Kate",
  lastName: "Robinson",
  female: true,
  greet: function () {
    alert("Hey");
  },
};

Reading an object properties

let user = {
  firstName: "Lady",
  lastName: "Gaga",
  gender: "female",
};

alert(user.firstName); // Lady
alert(user.lastName); // Gaga

// or
alert(user["firstName"]); // Lady
alert(user["lastName"]); // Gaga

Adding object properties

let user = {
  firstName: "Lady",
  lastName: "Gaga",
  gender: "female",
};

user.profession = "Singer";

Object Arrays

let users = [
  {
    firstName: "Bradley",
    lastName: "Cooper",
  },
  {
    firstName: "Lady",
    lastName: "Gaga",
  },
];

users.forEach(function (user, index) {
  for (let prop in user) {
    alert(prop + " is " + user[prop]);
  }
});

Enumerating the properties of an object

let user = {
  firstName: 'Lady',
  lastName: 'Gaga',
  gender: 'female'
}


for(let prop in user) {
  alert(prop); // firstName, lastName, gender
  alert(user[prop]); // 'Lady', 'Gaga', 'female'
}

Functions

JS Functions

function sayFact() {
  let name = prompt("What's your name?");

  if (name === "Sofia") {
    alert("Your name comes from the Greek -> Sophia");
  }
}

sayFact();

Piece of code that does one or more actions

JS Functions Parameters

function fullName(firstName, lastName) {
  alert(firstName + " " + lastName);
}

let firstName = prompt("What's your first name?");
let lastName = prompt("What's your last name?");
fullName(firstName, lastName);
fullName("Kate", "Robinson");

JS Functions Return

function add(x, y) {
  return x + y;
}

let result = add(3, 4);
let result2 = add(result, 0);


function getFullName(firstName, lastName) {
  let fullName = firstName + " " + lastName;
  return fullName;
}

let userFullName = getFullName("Kate", "Robinson");
alert(userFullName); // Kate Robinson
alert(getFullName("Julie", "Smith")); // Julie Smith

Closures

function hello() {
  function go(name) {
    alert(name);
  }

  let name = "SheCodes";
  go(name);
}

hello();

Debugging

Console.log

console.log(name);
console.log("Let's code!");

Outputs a message to the web console.

Selectors

QuerySelector

let li = document.querySelector("li");
let day = document.querySelector(".day");
let paragraph = document.querySelector("ul#list p");

Returns the first element (if any) on the page matching the selector.

QuerySelectorAll

let lis = document.querySelectorAll("li");
let paragraphs = document.querySelectorAll("li#special p");

Returns all elements (if any) on the page matching the selector.

Events

Creating an event listener

function sayHi() {
  alert("hi");
}

let element = document.querySelector("#city");
element.addEventListener("click", sayHi);

The sayHi function will be executed each time the city element is clicked. Click is the most common event type but you can also use click | mouseenter | mouseleave | mousedown | mouseup | mousemove | keydown | keyup.

setTimeout

function sayHello() {
  alert('Hello')
}
setTimeout(sayHello, 3000);

It will only alert Hello after a 3 second delay

setInterval

function sayHello() {
  alert('Hello')
}
setInterval(sayHello, 3000);

It will say Hello every 3 seconds

AJAX

AJAX with Fetch

let root = 'https://jsonplaceholder.typicode.com'
let path = 'users/1'

fetch(root + '/' + path)
  .then(response => (
    response.json()
  ))
  .then(json => (
    console.log(json)
  ));

Note: We recommend axios instead

AJAX with Axios

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      function showUser(response) {
        alert(`The user name is ${response.data.name}`);
      }

      let url = "https://jsonplaceholder.typicode.com/users/1";
      axios.get(url).then(showUser);
    </script>
  </body>
</html>

Element manipulation

HTML classes

let li = document.querySelector("li#special");
li.classList.remove("liked");
li.classList.add("something");

Update the element class names.

HTML content

let li = document.querySelector("li")
li.innerHTML = "Hello World";

Update the HTML content of the selected element.

Forms

<form>
  <input type="text" id="email" />
</form>
<script>

function signUp(event) {
  event.preventDefault();
  let input = document.querySelector("#email");
  console.log(input.value);
}
let form = document.querySelector("form");
form.addEventListener("submit", signUp);
</script>

Note: The event will be triggered by clicking the button or pressing enter.

APIs

Geolocation API

function handlePosition(position) {
  console.log(position.coords.latitude);
  console.log(position.coords.longitude);
}

navigator.geolocation.getCurrentPosition(handlePosition)

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

#javascript

JavaScript Cheatsheet: Everything You Need to Know to Get Started

30.40 GEEK