Things to remember JS Flashcards
Functions single line and multiline
singleline-block:
const sumNum = num => num + num;
multiline-block:
const sumNum = num => {
const sum = num + num;
return sum;
};
switch (rock-paper-scissor-example)
const getComputerChoice = () => {
const rnd = Math.floor(Math.randowm()*3);
switch(rnd) {
case 0:
return ‘rock’;
case 1:
return: ‘paper’;
case 2:
return: ‘scissors’;
}
}
do … while loop
runs until something anymore. runs ONCE before check!
let i = 0;
let counter;
do {
counter = counter + i;
i++;
} while (i < 5);
4 methods to manipulate arrays
.push() - add new items to the END of an array
.pop() - remove an item from the END of an array
.shift() - remove an item from the START
.unshift(‘xy’) - move ‘xy to the START of an array
How to change an item in an array?
myArray[index] = ‘new’
while loops
let counter = 1;
while(counter < 4) {
console.log(counter);
counter++
}
Loop runs as long the contidion in the brackets is met
for loops
for (let counter; counter < 4; counter++) {
—code block—
}
(start value; condition to keep running; updating value)
How to find the position of an item in an array?
.indexOf() method
.indexOf(itemXY, start search)
e.g.: .indexOf(‘item’, 3) - Starts looking for ‘item’ beginning at position 4.
How to access propertys in objects?
Object.Propertyname (e.g. spaceship.color)
If propertyname contains numbers, spaces or special characters [] MUST be used.
spaceship[‘Fuel Type’]
What is a property?
It’s a key: value pair inside an object.
How to assign and delete Propertys from or to Objects?
Assignment:
object.propertyname = value
(e.g. spaceship[‘Fuel Type’] = ‘vegetable oil’)
Delete:
delete object.propertyname
(e.g. spaceship.color) löscht das gesamte key: value pair
What are methods?
Functions inside Objects:
methodName() {
—code block—
}
Es können keine Arrowfunctions verwendet werden.
mit this.propertyname hat man Zugriff auf values ausserhalb der Function innerhalb des objects.
How to determine the datatype of a value?
type of:
type of value (as a string)
(e.g. type of 42 returns ‘number’ (string!) )
How to delete items from an array by index?
const myArray0[‘x’, ‘y’, ‘z’]
delete myArray[index]
(e.g. delete myArray[1] deletes ‘y’)
How to access a random item in an array?
myArray = [item1, item2, item3, item4]
rnd = Math.floor(Math.random()) * myArray.length
How to invoke a method?
Object methods are invoked by appending the object’s name with the dot operator followed by the method name and parentheses:
alienShip.invade();
How to access the name of an property
.name
Access the name property just like with any object. You can use the dot operator to access a function’s property: functionName.name
What are parameters?
Parameters allow functions to accept input(s) and perform a task using the input(s). We use parameters as placeholders for information that will be passed to the function when it is called.
function funcName(parameter1, parameter2, … ) {}
What is a higher-order function?
A higher-order function is a function that either accepts functions as parameters, returns a function, or both!
What are iterators?
Iterators are methods called on arrays to manipulate elements and return values.
What is a callback function?
A callback function is a function passed as an argument into another function.
What is an argument?
An argument is a value passed into a function when the function is called. These values are assigned to parameters defined in the function’s declaration.
e.g.
function greet(name) {
console.log(Hello, ${name}!);
};
greet(‘John’) <— John is the argument
What does forEach do?
.forEach() loops through the array and executes the callback function for each element.
groceries.forEach((groceryItem) => console.log(groceryItem));
grocerItem is a parameter that takes for each loop step the arrays element and (=>) passes it into a code block.
It doesn’t need a name because it’s commonly a anonymous function.
What does map do?
When .map() is called on an array, it takes an argument of a callback function and returns a new array!
const numbers = [1, 2, 3, 4, 5];
const bigNumbers = numbers.map(number => {
return number * 10;
});
New Array bigNumbers[10,20,30,40,50] //Original array bleibt unangetastet
What does it mean when an arrow function has no curly brackets?
If the function only does a return statement no curly brackets needed. With only one parameter no brackets at all needed.
eg.:
var functionVariable = parameter1 => expression ;
What does filter do?
.filter() returns an array of elements after filtering out certain elements from the original array.
Like .map(), .filter() returns a new array.
e.g.
const words = [‘chair’, ‘music’, ‘pillow’, ‘brick’, ‘pen’, ‘door’];
const shortWords = words.filter(word => {
return word.length < 6;
});
word is each element of the array that gets filtered.
What does find Index do?
Finds the location of an element in an array.
Calling .findIndex() on an array will return the index of the first element that evaluates to true in the callback function.
e.g.
onst animals = [‘hippo’, ‘tiger’, ‘lion’, ‘seal’, ‘cheetah’, ‘monkey’, ‘salamander’, ‘elephant’];
const foundAnimal = animals.findIndex(animal => {return animal === ‘elephant’}); //Output = 7
What does reduce do?
JavaScript’s reduce method condenses an array into a single value by applying a callback function to each element, updating an accumulator, and returning the final result.
const items = [5, 10, 15, 20]
const total = items.reduce((accumulator, item) => {
return total + item}, 0)
The first argument is a function that adds the array item to the accumulator. The second argument is the starting value of the accumulator (in this case 0).
What does some?
The some() method of Array instances tests whether at least one element in the array passes the test implemented by the provided function.
const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// Expected output: true
What does every?
The every() method of Array instances tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// Expected output: true
Arrow function sytnax
() => expression
param => expression
(param) => expression (<best practice)
() => {
statements
}
param => {
statements
}
(param1, paramN) => {
statements
}
What is the diffrence between Expression and Statement?
Expressions yield values, and statements perform actions or sequences of actions. Arrow functions can be written to handle both scenarios, depending on whether you need to return a single value (expression) or execute multiple actions (statements).
How to remove Duplicates?
With ‘Set’. It is a built-in object that allows you to store unique values of any type.
const numbers = [1, 2, 3, 4, 2, 5, 3];
const removeDuplicates = (numbers) => […new Set(numbers)];
// ‘new’ creates a new object, Set makes sure the content is unique and with the spread … operator it is automatically put into an array//
console.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5]
What is the spread Operator?
The spread operator (…) in JavaScript allows elements of an iterable (like an array or string) to be expanded into individual elements. It can be used in array literals, function calls, and more to make copies, merge arrays, or pass multiple arguments.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = […array1, …array2]; // Merges arrays
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
Which of the following methods returns an array with values that evaluate to truthy based on the condition in the method’s block?
.forEach() / .filter() / .map() / .some()
.filter()
How to turn a string into an array?
With .split()
Turns strings into substrings using a seperator like spaces (‘ ‘) and return them as array.
What is a Ternary Operator?
A short-hand syntax to simplify if…else statements.
conditionCheck ? expressionIfTrue : expressionIfFalse
e.g.
let count = 0
count < 1 ? count++ : count–
SyntaxError
Code that cannot be interpreted by the compiler.
Scan your code for opened and closed brackets, braces, and parentheses and any invalid semicolons.
Reference Error
This error will be thrown if you try to use a variable that does not exist. When this error is thrown, make sure all variables are properly declared.
How to sort arrays?
With the .sort() method.
Called on an array it manipulates the array and sorts the content by default ascending and string unicode.
Otherwise we need a compare function, that returns a negative or equal value to sort ascending and postive if descending.
e.g.numbers:
ages.sort((a, b) => a - b)
e.g. strings:
names.sort((a, b) => a < b)
How to copy a part of an array into a new one?
.slice()
.slice(start)
.slice(start, end)»_space; end Index is not included!
Negative idex count backwards
What method lets items delete from an array as well add?
.splice(startIndex)»_space; deletes all items from the start Index onwards.
.splice(start, deleteCount)»_space; deletes a certain number of items after start
.splice(start, deleteC, item1, item2, … , itemN)»_space; adds items to the array beginning at startIndex
How to sort an array of strings?
With .sort() and the compare function:
.sort((a, b) => {
if (a < b) return -1;
if (a > b) return 1;
return 0;
}
What are the 4 pros of using getters/setters?
1) control access to object properties
2) change the internal representation of data without affecting external code that interacts with the object.
3) providing flexibility in how data is represented and accessed
4) They can improve code readability
What are the 4 cons of using getters/setters?
1) slight performance overhead compared to direct property access
2) Overusing getters and setters or implementing unnecessary logic within them can lead to increased complexity
3) Improperly implemented getters and setters, such as infinite loops, can introduce bugs and make debugging more challenging.
4) they may not be fully supported in older browsers or environments,
What is the shorthand syntax of a function in object literals?
You can drop the function keyword and just use the name of the function and parameters:
methodName (parameter) {
code block
},
How to create an object based on an prototype?
With Object.create(prototype)
prototype is the name of the object which the new object is based on.
e.g.
const newObject = Object.create(protoype)
newObject inherits the structure of the prototype.
How to select an element from the DOM to interact with?
document.querySelector(CSS_SELECTOR),
and store it into a variable:
e.g.:
const button = document.querySelector(“#my-button”)
How to add or remove classes to an element on the DOM?
with classList.add(“class”) or classList.remove(“class”)
What is the general sytnax for an event listener?
const someElement = document.querySelector(“CSS_SELECTOR”)
someElement.addEventListener(“event_type”, () => {
// code to run when the event is triggered
// for example, changing innerText, etc
})
How to modify html elements on the DOM with JS?
document.tag.innerHTML = ‘<tag>...</tag>’;
e.G.:
document.body.innerHTML = ‘<h2>This is a heading</h2>’;
How to modify text on the DOM with JS?
element.innerText = “new_text”
How to disable a button on the DOM with JS?
button.disabled = true
How to add or remove a new or existing class from an element?
How to add multiple white space to a string?
With .repeat(x)
x = number of repetitions
string${' '.repeat(x)}
How do for … in / for … of loops work? And where do they get used?
for … in wird meist für Objects and … of für Arrays genutzt.
Syntax:
for (const key in object) {
…
}
for (const item of array) {
…
}
