Basics
If...else
if (condition) {
code to run if condition is true;
} else if (condition 2) {
code to run if condition is true;
} else {
run some other code instead;
}
# Ternary operator - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#ternary_operator
( condition ) ? run this code : run this code instead
let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
Switch
# Source: https://www.digitalocean.com/community/tutorials/how-to-use-the-switch-statement-in-javascript
# Example 1
switch (expression) {
case x:
// execute case x code block
break;
case y:
// execute case y code block
break;
default:
// execute default code block
}
# Example 2
// Set the student's grade
const grade = 87;
switch (true) {
// If score is 90 or greater
case grade >= 90:
console.log("A");
break;
// If score is 80 or greater
case grade >= 80:
console.log("B");
break;
// If score is 70 or greater
case grade >= 70:
console.log("C");
break;
// If score is 60 or greater
case grade >= 60:
console.log("D");
break;
// Anything 59 or below is failing
default:
console.log("F");
}
Function
// Multiplication function
function multiply(n1, n2) {
return n1 * n2;
}
# Examples
<script>
function add7(n) {
return n + 7;
}
function multiply(n1, n2) {
return parseInt(n1) * parseInt(n2);
}
function capitalize(string) {
let result = string.toLowerCase();
return result.charAt(0).toUpperCase() + result.slice(1);
}
function lastLetter(string) {
return string.slice(-1);
}
</script>
Arrow function
// Example 1
let func = (arg1, arg2, ..., argN) => expression;
let func = function(arg1, arg2, ..., argN) {
return expression;
};
# Example 2
let sum = (a, b) => a + b;
# Example 3
let sayHi = () => alert("Hello!");
sayHi();
# Example 4
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
() => alert('Hello') :
() => alert("Greetings!");
welcome();
# Source: https://javascript.info/arrow-functions-basics
// method 1
<button onclick="alert('Hello World')">Click Me</button>
// method 2
<!-- the HTML file -->
<button id="btn">Click Me</button>
// the JavaScript file
const btn = document.querySelector('#btn');
btn.onclick = () => alert("Hello World");
// method 3
<!-- the HTML file -->
<button id="btn">Click Me Too</button>
// the JavaScript file
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
alert("Hello World");
});
Source: https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/dom-manipulation-and-events#events
Loops
// for...of
for (const item of array) {
// code to run
}
// for
for (initializer; condition; final-expression) {
// code to run
}
// while
initializer
while (condition) {
// code to run
final-expression
}
// do...while
initializer
do {
// code to run
final-expression
} while (condition)
Source: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#which_loop_type_should_you_use
While Loop
let i = 10;
while (i > 0) {
console.log(i);
i--;
}
Do..While Loop
let i = 0;
do {
console.log(i);
i++;
}
while (i < 3)
For Loop
for (let i = 0; i < 3; i++) {
console.log(i);
}
Last updated
Was this helpful?