Mod 1 JavaScript Flashcards
What does this code print?
const amy = "john"; const robert = "harry"; const james = "maria";
const printNames = (alex, dwight, todd) => {
console.log('The names are: ', alex, dwight, todd);
}
printNames(amy, robert, james);
‘The names are: john harry maria’
Remember, the names of variables have nothing to do with their contents; they are only references for YOU to access those contents.
Assuming we declare the following functions:
const myFunc = () => console.log('Do the thing');
const executeCallback = (callback) => callback();
What would the following 2 lines do?
1) executeCallback(myFunc())
2) executeCallback(myFunc)
1) myFunc is told to execute and its return value is passed to executeCallback.
myFunc has a return value of undefined, thus executeCallback fails on callback()… because you can’t execute undefined.
2) myFunc is passed to executeCallback and then told to execute via callback()
‘Do the thing’ is printed to the console.
When are DOM elements available to get via functions like .getElementById, .getElementByTagName, etc?
After the DOM content has loaded.
document.addEventListener('DOMContentLoaded', (event) => {
// You can now access DOM elements here.
});
Assuming we successfully get a button element via:
const button = document.getElementById(‘my-button’);
What is the difference between these three event listeners?
1) button.addEventListener(‘click’, (event) => {
console.log(‘Hello’)
});
2) button.addEventListener(‘click’, (butts) => {
console.log(‘Hello’)
});
3) button.addEventListener(‘click’, () => {
console.log(‘Hello’)
});
There is no practical difference.
The triggering event will always be passed to the event listener as the first argument.
1) We receive that event in a variable named “event”, but we don’t use it anywhere.
2) We receive that event in a variable named “butts”, but we don’t use it anywhere.
3) We don’t specify a name for the first argument, effectively ignoring the event being passed in and having no way to access it within the function.
What are the return values of these 2 functions?
1) const funcOne = () => console.log(‘Hello’);
2) const funcTwo = () => {
return console.log('Hello');
}
They both return undefined.
console.log will print out ‘Hello’, but console.log has no return value.
When you use fetch to patch, what type of data is the second argument?
i.e.:
fetch(‘www.somewhere.com’, {
method: ‘something’,
header: ……
})
It is an object, signified by the { } with key / value pairs inside.
It could be declared outside of the fetch.
const myObj = {
method: 'something',
header: ......
}
fetch(‘www.somewhere.com’, myObj)
Considering the following, correctly working code:
const myFunc = () => console.log(‘Do the thing’);
const runCallback = (poopity) => poopity();
runCallback(myFunc);
———-
If we know we aren’t going to use myFunc anywhere else, how can we declare it anonymously within the parameters passed to runCallback?
const runCallback = (poopity) => poopity();
runCallback(() => console.log('Do the thing'));
Remember, defining an anonymous function as a parameter to pass is syntactically the same as assigning an anonymous function to a variable - you just omit the variable part.
WRONG:
runCallback(const myFunc = () => console.log('Do the thing'));
Right:
runCallback(() => console.log(‘Do the thing’));
This is analogous to any other data type. i.e.:
const myString = “Hello”;
someFunctionThatUsesAString(myString)
vs.
Or:
const myArray = [‘a’, ‘b’, ‘c’]
someFunctionThatUsesAnArray(myArray)
vs.
In all cases, the only difference is that you aren’t attaching the data to a variable beforehand, and thus have no way to reference it later.
Considering the following input field:
< input type=”text” value=”Hello” >
1) How can we get the input’s current value?
2) How can we inject a value into the input?
First, get the input element and assign it to a variable you can reference:
const myInput = document.getElementById(‘poopity’);
Then:
1) console.log(myInput.value)
2) myInput.value = “whatever we want it to be”
What type of data would myInputs be?
const myInputs = document.getElementsByTagName(‘input’)
.getElements is the plural version.
It will return an array.
Specifically, an array of input elements.
If we get all input elements from the page via:
const myInputs = document.getElementsByTagName(‘input’)
How would we iterate over the array myInputs to print the value of each input?
myInputs.forEach((input) => {
console.log(input.value)
}
Note, there is nothing magical about the word “input” here; it is OUR name for the argument that our anonymous function is receiving. It could just as well be:
myInputs.forEach((poopity) => {
console.log(poopity.value)
}
Assuming we have the following form element:
< form id=”poopity” >
1) How can we attach the custom / dynamic property butts?
2) How can we attach the custom / dynamic property big-butts?
First, get the form element and assign it to a variable you can reference:
const myForm = document.getElementById(‘poopity’);
Then:
1) myForm.butts = “whatever data we want here”
2) Hyphens, spaces, special characters, etc are not allowed in dot chaining; thus we must use the ‘computed property’ syntax:
WRONG:
myForm.big-butts = “some data”
Right:
myForm[“big-butts”] = “some more stuff”
Note: The convention for custom property names is to name them data-xyz, as you are usually attaching some sort of data that you will need later.
Because of the hyphen, if you follow convention you will always need to use the computed property syntax.
Consider the following object:
let myObj = {
name: 'Bryan',
"current mood": "Feeling pretty good"
}
1) How would you print the object’s name?
2) How would you print the object’s current mood?
1) console.log(myObj.name)
2) console.log(myObj[“current mood”])
Remember: hyphens, spaces, special characters, etc are not allowed in dot chaining; thus we must use the ‘computed property’ syntax to access “current mood”.
What does the following print?
const myKey = "big ol butts";
let myObj = {
"big ol butts": "Yes!"
}
console. log(myObj[myKey])
console. log(myObj[“big ol butts”])
‘Yes!’
‘Yes!’
What does the following print?
const poopity = "firstName";
let myObj = {
firstName: "Bryan",
poopity: "Haney"
}
console.log(myObj.poopity)
console.log(myObj["poopity"])
console.log(myObj[poopity])
“Haney”
“Haney”
“Bryan”
The first console log, using dot chaining myObj.poopity, is accessing the object’s key of “poopity”.
The second console log, using the computed property syntax myObj[“poopity”], is accessing the object’s key of
[whatever the brackets resolve to; in this case the string literal “poopity”]. Thus it is exactly the same as myObj.poopity
The third console log, using the computed property syntax myObj[poopity], is accessing the object’s key of
[whatever the brackets resolve to; in this case the VALUE of the VARIABLE poopity, which is “firstName”]. Thus it is exactly the same as myObj.firstName
What is the different between these two functions?
1) const firstFunc = () => “hello”;
2) const secondFunc = () => {
"hello"
}
1) Returns “hello”
2) Returns undefined.
Anonymous functions that only execute a single statement do not need { } brackets, and they will IMPLICITLY return the result of that single statement.
Conversely, anonymous functions that use { } brackets, which can contain 1 or more statements, will not implicitly return anything (i.e., undefined). You must EXPLICITLY declare a return value if you use { } brackets:
const secondFunc = () => {
return "hello"
}
