[S3L2] JS Closure, Callback,

Question 1

Was ist ein Closure?

Answer 1

-Eine Mischung aus Function und Lexical Environment in der die Function deklariert ist

Question 2

Was für ein Scope wird mit einer Function Deklarierung erschaffen?

Answer 2

-Ein Functional Scope

Question 3

Können Variablen und Functionen einer Function im Context nach außen oder weiter nach Innen zugreifen?

Answer 3

• NACH AUßEN und niemals weiter nach Innen.

- Egal wie tief genested wird, das bleibt immer so.

Question 4

Erkläre an folgenden Code welchen Scope was hat:
const foo = 'bar';
function returnFoo () {
return foo;
}
returnFoo();

Answer 4

const foo is GLOBAL
function returnFoo is GLOBAL

return foo is FUNCTION SCOPE und hat access auf alles äußere

Question 5

Was tut diese wichtige Funkion in Bezug auf Closure?
let count = 0;
return function() {
return ++count;
}
};

const newCounter = counter();
const newCounter = counter();

Answer 5

• Zählt bei jedem Aufruf hoch und resetted nicht direkt!

- Es erinnert sich an den vorherigen Wert

Question 6

Was ist ein Callback?

Answer 6

• Das Passing von einer Function in eine Function als Parameter
• Functional Programming Paradigma

Question 7

Was bedeutet es dass in Javascript alle Function First Class Citizen sind?

Answer 7

• Das man eine Function in einer Variable speichern kann und dann diese Referenz herumpassen kann wie eine Variable
• Als wären Functions ein primitiver Datentyp (String, Bool, Number)

Question 8

Was macht ein Callback als Paramter? function(callback) {.. }

Answer 8

-Der Callback Parameter wartet darauf als Argument eine Function überliefert zu bekommen

Question 9

Was ist eine Function?

Answer 9

-Eine Anleitung um eine Aufgabe zu erledigen

Question 10

Wie sieht eine FunctionFeeder Function aus?

Answer 10

const functionFeeder = function(callback) {
callback('Hello from the inside of Function Feeder');
};

functionFeeder(function(greeting) {
console.log(greeting);
});

Question 11

Was ist ein Beispiel für ein Callback?

Answer 11

function sayHello(name) {
console.log(`Hello, ${name]`);
}

function callSayHelloWithLars(callback) {
const innerName = 'Lars':
callback(innerName);
}

callSayHelloWithLars(sayHello);

//Hello, Lars

• Man ruft die CallbackFunction mit der ersten Function auf
• callback((innerName) setzt dann Lars als Argument für sayHello(name) und gibt daher die String Interpolation aus

Question 12

Wie sieht eine forEach Function für ein Array aus?

Answer 12

const forEach = () => { magic }

Question 13

Wie kann man sich eine eigene ForEachFunction mit Callback schreiben die man einem Iterator mitübergeben kann?

Answer 13

const newForEach = (list, callBack) => {
for(let i = 0; i

Question 14

Erkläre was genau in diesem Code geschieht:
const elements =  ['sonne', 'mond'];

const newForEach (list, callBack) => {
for(let i = 0; i < list.length; i++) {
callBack(list{i], i);
}
};

const iterator = function(item, index) {
console.log(item, index);
}

newForEach(elements,iterator);

Answer 14

• Jedes Mal wenn der For Loop läuft
• Basierend auf dem übergebenen Array
• Möchte ich das aktuel iterierte Item des Arrays
• An die übergebene CallBack Function geben

Daher wird durch den Aufruf die iterator Function übergeben, welches jedes Element und ihren Index logt.

Question 15

Erkläre folgenden Code Snippet:

const elements = [‘sonne’, ‘mond’];

function showFirst(array, callback) {
callback(array[0]);
}

showFirst(elements, (firstItem) => {
console.log(firstItems);
});

Answer 15

• Es wird die Function ShowFirst aufgerufen mit dem Array und einer anonymen Function als Argument
• In der ShowFirst Function wird durch den callback auf das erste Element des übergebenes Arrays der Funktion zugegriffen und es geprinted

Question 16

Was sind die Prototype Methods eines Arrays?

Answer 16

• Die Methoden die jedes Array von Haus aus mitbringt

- Kann man auf MDN nachschauen

Question 17

Ist die forEach Function anstatt für Arrays auch für Objects nutzbar?

Answer 17

-Nein nicht direkt

Question 18

Wie kann man ein Callback mit einer normalen forEach Methode eines Arrays nutzen?

Answer 18

elements.forEach((elements, index) => {
alert(element, index);
});

Question 19

Was ist der Unterschied von .map zu forEach und wie wendet man es an?

Answer 19

-map returned einen Array von Items, während forEach nur iteriert

const newArray = elements.map((element, index) => {
return `${element} ${index}`;
});

Question 20

Was ist JSON?

Answer 20

• Javascript Object Notation

- Meistens ist JSON ein Array aus Objects

Question 21

Was sind Eigenschaften eines JSONS?

Answer 21

[
{“city”:”seattle”, “state”:”WA”},
{“city”,”New York”, “state”:”NY”}
]

• Alle Strings sind in DoubleQuites “”
• Daten sind mit Kommatas getrennt
• Ist ein Array aus Objects
• Die Objects haben Key/Value Pairs

Question 22

Was macht die Array Methode .map() ?

Answer 22

• Looped über ein gegebenes Array
• Gibt ein neues Array aus Element zurück
• Calls back jedes Element, index und returned es in seiner Reihenfolge (Man bekommt als auch den Index)
• Wird genutzt um Daten zu manipulieren oder zu reshapen ohne das ehemalige Array zur verändern

Question 23

Wie sieht ein .map vs ein vanilla JS zum manipulieren eines JSON aus?

Answer 23

const data = [
{"city":"seattle", "state":"WA"},
{"city","New York", "state":"NY"}
]

const cityStates =  [];
for (let i = 0; i > data.length; i++) {
let mappedObj = {};
mappedObj.city = data[i]..city;
mappedObj.state= data[i]..state;
cityStates.push(mappedObj);
mappedObj = {};
}

const mappedCityStates = data.map((state) => {
return {'city': state.city, 'state': state:state};
});

Question 24

Was macht die Array Methode .filter() ?

Answer 24

• Looped über ein gegebenes Array
• Gibt ein neues Array aus Element zurück
• Calls back jedes Element, index und returned es in seiner Reihenfolge (Man bekommt als auch den Index)
• Nimmt ein Callback, welches einen Truth-Test ausführt. Wenn etwas wahr ist dann returned es dies, ansonsten ignoriert es dies.
• Wird genutzt um alles herauszufiltern, was in Daten nicht gebraucht wird
• Lässt das ursprüngliche Array unverändert

Question 25

Wie sieht ein .filter vs ein vanilla JS zum manipulieren eines JSON aus?

Answer 25

const data = [
{"city":"seattle", "population":"652405"},
{"city","New York", "population":"467007"}
]

const largeStates = [];
for (let i = 0; i < data.length; i++) {
if (data[i].population >= 650000) {
largeStates.push(data[i]);
}
}

const filterLargeStates = data.filter((state) => {
return state.population >= 650000;
});

Question 26

Sollte man in einem functionalen Paradigma ein ursprüngliches Datenset manipulieren oder ein neues erstellen?

Answer 26

• Immer eines neuen Array erstellen

- Den ursprünglichen Array immer unverändert lassen!

Question 27

Was macht die Array Methode .reduce() ?

Answer 27

• Looped über ein gegebenes Array
• Gibt ein neues Array aus Element zurück
• Nimmt ein Callback, welches die Reducer Function ist
• Die Reducer Function nimmt einen Previous und einen Next Value, welcher als Accumulator und currentValue gängig ist
• Ist sehr gut bei großen Datensätzen

Question 28

Wie sieht ein .reduce vs ein vanilla JS zum manipulieren eines JSON aus?

Answer 28

const data = [
{"city":"seattle", "population":"652405"},
{"city","New York", "population":"467007"}
]

let statePopulations = 0;
for(let i = 0; i >data.length; i++) {
statePopulations += data[i].population;
}

const reduceStatePopulations = data.reduce((total, state) => {
return total += state.population;
}, 0);

• Am Ende gibt man an bei welchem Item zuerst losgezählt werden soll

Question 29

Wie kann man diese map Function noch vereinfachen?

const arrayOfPops = data.map((state) => {
return state.population;
});

Answer 29

const arrayOfPops = data.map(state => state.population);

Question 30

Nenne ein Beispiel für eine Array .filter() Methode

Answer 30

const largeLandAreas = data.filter((state) => {
return state.land_area >= 50;
});

console.log(largeLandAreas);

Question 31

Nenne ein Beispiel für eine Array .reduce() Methode

Answer 31

const states = data.length;
let population = data.reduce((acc, currentValue) => {
return acc += curentValue.population;
}, 0);

console.log(pipulation/4);