JavaScript Refresher | Lars Schlögel

Ein bisschen Theorie darf nicht fehlen

JavaScript ist eine Programmiersprache und kann im Browser, auf mobilen Endgeräten oder auf jeglichen Computern ausgeführt werden.

Hinzufügen zur Webanwendung

//index.html
<head>
	<title>Add JS </title>
	<script scr="assets/scripts/app.js"></script>
</head>

defer attribute
- JavaScript wird ausgeführt, nachdem html im Body geparst wurde
type
- Mit “module” kann jede Javascript-Datei Import/Export-Funktionen verwenden

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";

Unterschiedliche Typen

string
number
boolean
undefined: kein Wert wurde zugewiesen
null: Wert zurücksetzen
objects

Arrow functions

ein anderer Weg Funktionen zu definieren
es gibt verschiedene Möglichkeiten der Definition:

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 von Objekten, 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

Die Spread-Syntax kann verwendet werden, wenn alle Elemente eines Objekts oder Arrays in ein neues Array oder Objekt einbezogen werden oder einzeln auf die Argumentliste eines Funktionsaufrufs angewendet werden müssen.

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)

Ein Array zu einem Objekt transformieren

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

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

Kontrollstrukturen

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);
}

Funktionen als Werte

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)