JavaScript tips

A collection of useful JavaScript functions and handy tips / study notes


// forEach
const x = [1,3,4,66,77];
x.forEach(v => {log (v*2)})


// Map
const x = [1,3,4,5,6,7,87]
let f =>x*2);


// Filter
const ages = [1,3,4,5,6,7,87];
let filteredAges = function(ages){
return (ages > 5);
let f = ages.filter(filteredAges);

Invoking a class

// Create Animal.js
export default class Animal{
constructor() {
console.log(“i am an animal”);
getClassType() {
return “Animal”;
// In Index.js
// import Animal from ‘./Animal’;
var animal = new Animal();

Clickable div – linked to a js function

Use a JavaScript function on a div – (flex)

function klik1() {

Use JavaScript to fetch data

Use Stringify to convert JSON to text

API – JS – HTML Demo

We use JavaScript to fetch from an API and create a new element in the html for each character in the API response

const fetchapi = fetch(“”)
.then(response => response.json())
.then(characters => showCharacters(characters.results));
const showCharacters = characters => {
const charactersDiv = document.querySelector(“#rmc”);
characters.forEach(character => {
const characterElement = document.createElement(‘p’);
characterElement.innerText = `Character Name: ${}`;
charactersDiv.append(characterElement); })};

<!DOCTYPE html>
<html lang=”en”>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=””></script>
<script src=””></script>
<link rel=”stylesheet” href=”style.css”>
<div class=”container-fluid”>
<h1>My API Demo Page</h1>
<script src=”app.js” defer=”true”></script>
<div id=”rmc”></div>

Previous article

Callback functions

Next article

Python API – POST Requests