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!
// 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.
let school = "SheCodes";
let fullPackage = "SheCodes Pro";
let projects = 4;
let awesome = true;
let x = 2;
let y = 3;
let z = x + y; // 5
let city = "Lisbon";
let country = "Portugal";
let place = city + " " + country; //Lisbon Portugal
let age = 23; // Number
let name = "Julie"; // String
let canCode = true; // Boolean, could also be false
let students = ["Kate", "Julie", "Mariana"]; // Array
let kate = {
firstName: "Kate",
lastName: "Johnson",
age: 23,
canCode: true,
}; // Object
alert("Olá");
let name = "Angela";
alert(name);
let firstName = prompt("What is your first name");
let lastName = prompt("What is your last name");
let fullName = firstName + " " + lastName;
alert(fullName);
let country = prompt("What country are you from?");
if (country === "Portugal") {
alert("You are cool");
}
if (country !== "Portugal") {
alert("Too bad for you");
}
let age = prompt("How old are you?");
if (age < 18) {
alert("You cannot apply");
} else {
alert("You can apply");
}
if (age < 18) {
alert("you can't apply");
} else {
if (age > 120) {
alert("you can't apply");
} else {
alert("you can apply");
}
}
if (age < 18 || gender === "male") {
alert("You can't join SheCodes 👩💻");
}
The code will be executed if one statement is true.
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.
2 > 3 // false
2 < 3 // true
2 <= 2 // true
3 >= 2 // true
2 === 5 // false
2 !== 3 // true
1 + 2 === 4 // false
let name = "SheCodes"; // "SheCodes"
let firstName = "Julie";
let lastName = "Johnson";
let fullName = firstName + " " + lastName; // "Julie Johnson"
//or
let fullName = `${firstName} ${lastName}`;
let city = " Montreal ";
city.trim(); // "Montreal"
let city = "Montreal";
city = city.replace("e", "é"); // "Montréal"
let city = "Montreal";
city = city.toLowerCase(); // "montreal"
let city = "Montreal";
city = city.toUpperCase(); // "MONTREAL"
let city = "Denver";
let sentence = `Kate is from ${city}`; // Kate is from Denver
let myList = [];
let fruits = ["apples", "oranges", "bananas"];
myList = ['banana', 3, go, ['John', 'Doe'], {'firstName': 'John', 'lastName': 'Smith'}]
fruits
fruits[0]
fruits[1]
fruits[2]
fruits[3]
fruits[1] = "Mango";
fruits[1] = 3;
let times = 0;
while (times < 10) {
console.log(times);
times = times + 1;
}
let fruits = ['apples', 'oranges', 'bananas'];
fruits.forEach(function(fruit) {
alert("I have " + fruit + " in my shopping bag");
});
let times = 0;
do {
console.log(times);
times = times + 1;
} while(times < 10)
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");
}
fruits.shift()
let now = new Date();
let date = Date.parse("01 Jan 2025 00:00:00 GMT");
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
Math.round(4.7) // 5
Math.floor(4.7) // 4
Math.ceil(4.7) // 5
Math.min(2, 5, 1) // 1
Math.max(2, 5, 1); // 5
Math.random(); // 0.47231881595639025
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");
},
};
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
let user = {
firstName: "Lady",
lastName: "Gaga",
gender: "female",
};
user.profession = "Singer";
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]);
}
});
let user = {
firstName: 'Lady',
lastName: 'Gaga',
gender: 'female'
}
for(let prop in user) {
alert(prop); // firstName, lastName, gender
alert(user[prop]); // 'Lady', 'Gaga', 'female'
}
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
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");
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
function hello() {
function go(name) {
alert(name);
}
let name = "SheCodes";
go(name);
}
hello();
console.log(name);
console.log("Let's code!");
Outputs a message to the web console.
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.
let lis = document.querySelectorAll("li");
let paragraphs = document.querySelectorAll("li#special p");
Returns all elements (if any) on the page matching the selector.
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.
function sayHello() {
alert('Hello')
}
setTimeout(sayHello, 3000);
It will only alert Hello after a 3 second delay
function sayHello() {
alert('Hello')
}
setInterval(sayHello, 3000);
It will say Hello every 3 seconds
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
<!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>
let li = document.querySelector("li#special");
li.classList.remove("liked");
li.classList.add("something");
Update the element class names.
let li = document.querySelector("li")
li.innerHTML = "Hello World";
Update the HTML content of the selected element.
<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.
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