A Little Theory Can’t Hurt

JavaScript is a programming language that can be executed in the browser, on mobile devices, or on any computer.

Adding to the Web Application

//index.html
<head>
	<title>Add JS </title>
	<script scr="assets/scripts/app.js"></script>
</head>
  • defer attribute
    • JavaScript is executed after the HTML in the body has been parsed.
  • type
    • With “module”, each JavaScript file can use import/export functions.

Import/Export Values

// main.js
import {test} from "./export.js"
import importValueAsDefault from "./exportDefault.js";
import {test2, test3} from "./exportMulitple.js";

console.log(test); //123
console.log(importValueAsDefault); //123
console.log(test2); //123
console.log(test3); //123

//export.js
export let test = "123";

//exportDefault.js
export default "123";

//exportMultiple.js
export let test2 = "123";
export let test3 = "123";

Different Types

  • string
  • number
  • boolean
  • undefined: no value has been assigned
  • null: reset the value
  • objects

Arrow Functions

  • another way to define functions
  • there are different ways of defining them:
export default function (){
	console.log("anonymous function")
}

export default ()=> {
	console.log("short anonymous function")
}

export default (firstParam, secondParam) => {
	console.log("arrow function with params")
}

export default onParam => {
	console.log("arrow function with on param")
}

export default number => {
	return number * 3;
}

// returning an object
export default number => { age: number};

Destructuring of Objects, Arrays

/*
acces on array without Destructuring
*/

const userNameData = ["Max", "Mustermann"];
const firstName = userNameData[0];
const lastName = userNameData[1];
console.log(firstName) //Max
console.log(lastName) //Mustermann

/*
acces on array with Destructuring, variable names can be freely selected
*/

const [firstname, lastname] = ["Greta", "Musterfrau"];
console.log(firstname) //Greta
console.log(lastname); //Musterfrau

/*
access on object without Destructuring.
*/

const animal = {
   name: "cat",
   superfamily: "feloidea"
}

const name = animal.name;
const superfamily = animal.superfamily;
console.log(name) //cat
console.log(superfamily) //feloidea

/*
access on object with Destructuring. alias allowed
*/

const {name: animalName, superfamily: animalFamily} = {
   name: "lion",
   superfamily: "feloidea"
}

console.log(animalName) //lion
console.log(animalFamily) //feloidea

Spread Operator

The spread syntax can be used when all elements of an object or array need to be included in a new array or object, or when they must be individually applied to the argument list of a function call.

const musicGenres = ["Rock", "Pop"]
const newMusicGenres = ["Metal"]
const twoArrays = [musicGenres, newMusicGenres]
console.log(twoArrays)
/*
... mit einem Array
*/
const oneArraywithAllValues = [...musicGenres, ...newMusicGenres]
console.log(oneArraywithAllValues)
const animal1 = {
   name: "cat",
}
const animal2 = {
   name: "lion"
}

/*
vorsicht. der key name muss unterschiedlich sein, sonst werden Werte überschrieben
cat überschreibt sonst lion
*/
const superFamily = {
   test: "feloidea",
   ...animal1,
   ...animal2
}
console.log(superFamily)

Transforming an Array into an Object

function transformToObjects(numberArray) {
   return numberArray.map((item)=> {
    return {
     val: item
    };
   })
}

const listOfNumbers = [1, 2, 3]
const result = transformToObjects(listOfNumbers);
console.log(result)

Control Structures

const password = prompt("Please enter password")
const successMessage = 'correct password';
const errorMessage = 'Access not granted';

if (password === "Hello") {
   console.log(successMessage);
} else if (password === "hello") {
   console.log(successMessage);
} else {
   console.log(errorMessage)
}

const musicGenres = ["Rock", "Pop"]

for (const genre of musicGenres){
   console.log(genre);
}

Functions as Values

function returnSomething() {
   return console.log("Return")
}

function valueAsFunction() {
   console.log("valueAsFunction")
}

/*
set Timeout with the value of return statement
*/
setTimeout(returnSomething(), 2000);

/*
use function as value
*/
setTimeout(valueAsFunction, 3000)