Morning:
Afternoon:
var, const, let)Array.from - Docs on MDNArray.map - Docs on MDN | Understanding JavaScript’s map() blog postdocument.createElementsomeElement.style.stylePropertyNamesomeElement.appendChild
// function declaration - use 'function' keyword
function aMostExcellentFunction() {
console.log('This function is great!')
}
aMostExcellentFunction() // => 'This function is great!'
// function expression - defines a function as part of a larger expression syntax
// (usually assignment to a variable)
const anotherExcellentFunction = () => {
console.log('This function is also great!')
}
anotherExcellentFunction() // => 'This function is also great!'
// functions as object properties (also known as 'methods')
const myObject = {
myMethod() {
console.log('I am a method!')
}
}
myObject.myMethod() // => 'I am a method!'
The biggest difference between var and let is that var variables are scoped to the function in which they are declared, while let variables are scoped to the block in which they are declared. One of the easiest examples to see this behavior is in a simple for loop.
function loopStuff() {
for (var i = 0; i < 5; i++) {
// do stuff in the loop
}
console.log(i)
}
loopStuff() // => 5
function loopMoreStuff() {
for (let i = 0; i < 5; i++) {
// do stuff in the loop
}
console.log(i)
}
loopMoreStuff() // => Uncaught ReferenceError: i is not defined
In the function loopStuff, var i is still available outside the for loop so it can be logged to the console. It is scoped to the function itself.
In the function loopMoreStuff, let i is not available outside the block it is scoped to (the for loop).
The main difference between const and var/let is that const cannot be reassigned.
let variableOne = 4
variableOne = 5
var variableTwo = 4
variableTwo = 5
const variableThree = 4
variableThree = 5 // => Uncaught TypeError: Assignment to constant variable
Always use const as your default way to declare variables, unless you know specifically that you will need to reassign it, in which case use let. You should rarely, if ever, use var. For further reading, check out this article
Almost everything in JavaScript is an Object. The easiest way to create new Objects is with the object initializer, more commonly known as ‘object literal’ syntax. Basically, use curly braces to make an object {} and fill in the properties that you want.
Objects contain key/value pairs that allow you to set and retrieve values from them.
// create a new object and assign some properties
const myObject = {
prop1: 'Hello there',
prop2: 42
}
// access the values in several ways, usually 'dot' or 'square bracket' notation
myObject.prop1 // => 'Hello there'
myObject['prop1'] //=> 'Hello there'
// new key/value pairs can also be assigned with these notations
myObject.prop3 = 'New Value!'
myObject['prop4'] = 'Newest Value!'
console.log(myObject)
// {
// prop1: 'Hello there',
// prop2: 42,
// prop3: 'New Value!',
// prop4: 'Newest Value!'
// }
Arrays are extremely useful data structures in JavaScript, as they can be easily iterated and transformed through methods like map, filter, and reduce. Sometimes, you may have an ‘array-like’ collection (like a NodeList or function arguments) that you would need to convert to an actual Array before you could use these methods. This can be done using Array.from
let paragraphs = document.querySelectorAll('p')
paragraphs.map((paragraph) => {
p.textContent = "This won't work because paragraphs is a NodeList, not Array!"
})
// => Uncaught TypeError: paragraphs.map is not a function
let actualArrayOfParagraphs = Array.from(paragraphs)
actualArrayOfParagraphs.map((paragraph) => {
p.textContent = "This totally does work because we created an Array from our NodeList!"
})
What objects can you convert to an Array using ‘Array.from’?
For more info, check out this article on MDN.
If we start with the following markup:
<div id="my-div"></div>
We can add additional markup to it programmatically using JavaScript. One way is to create new HTMl elements using document.createElement, and adding them by using appendChild. Styling of the element can even be changed by manipulating the element’s style property.
// create an h1 and modify text content and color
const heading = document.createElement('h1')
heading.textContent = "This is the best heading I've ever seen"
heading.style.color = "red"
// get a reference to the existing div and add the heading as a child element
const div = document.querySelector('#my-div')
div.appendChild(heading)
This will produce the following markup:
<div id="my-div">
<h1 style="color: red;">This is the best heading I've ever seen</h1>
</div>
Create a new project from scratch that adds students to a class roster and meets the following requirements: