Using the ternary operator in assignment and return
We can use the ternary operator in places where doing the same thing with if-else-branches would take a lot more code.
Read full articlePassing parameters as a single object
JavaScriptAll snippets in this category →
Posted on June 21, 2020If a function accepts many parameters, it can be hard to remember what they each represent. If we turn the list of parameters into an object instead, we have to label the values as we pass them to the function.
Every time we call this function, we can see what each parameter represents by its key on that object.
// This function takes five parameters. In the body of the function, they
// can be accessed with names that describe what each value represents.
const hostGuest = (age, hoursAwake, isHungry, isTired, name) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using that function, that descriptiveness is lost. Without looking
// at the function, we have to remember what each value means. Is John 30 or
// 19? Are they hungry or tired?
hostGuest(30, 19, false, true, "John")
// By wrapping the parameters in curly brackets, the function now accepts a
// single object instead of five independent values. We can still access
// them exactly as we did before.
const hostGuest = ({ age, hoursAwake, isHungry, isTired, name }) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using _this_ function, we have to pass it an object. The keys of
// that object help us describe what attribute each value represents.
hostGuest({
age: 30,
hoursAwake: 19,
isHungry: false,
isTired: true,
name: "John"
})// This function takes five parameters. In the body of the function, they
// can be accessed with names that describe what each value represents.
const hostGuest = (age, hoursAwake, isHungry, isTired, name) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using that function, that descriptiveness is lost. Without looking
// at the function, we have to remember what each value means. Is John 30 or
// 19? Are they hungry or tired?
hostGuest(30, 19, false, true, "John")
// By wrapping the parameters in curly brackets, the function now accepts a
// single object instead of five independent values. We can still access
// them exactly as we did before.
const hostGuest = ({ age, hoursAwake, isHungry, isTired, name }) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using _this_ function, we have to pass it an object. The keys of
// that object help us describe what attribute each value represents.
hostGuest({
age: 30,
hoursAwake: 19,
isHungry: false,
isTired: true,
name: "John"
})// This function takes five parameters. In the body of the function, they
// can be accessed with names that describe what each value represents.
const hostGuest = (age, hoursAwake, isHungry, isTired, name) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using that function, that descriptiveness is lost. Without looking
// at the function, we have to remember what each value means. Is John 30 or
// 19? Are they hungry or tired?
hostGuest(30, 19, false, true, "John")
// By wrapping the parameters in curly brackets, the function now accepts a
// single object instead of five independent values. We can still access
// them exactly as we did before.
const hostGuest = ({ age, hoursAwake, isHungry, isTired, name }) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using _this_ function, we have to pass it an object. The keys of
// that object help us describe what attribute each value represents.
hostGuest({
age: 30,
hoursAwake: 19,
isHungry: false,
isTired: true,
name: "John"
})// This function takes five parameters. In the body of the function, they
// can be accessed with names that describe what each value represents.
const hostGuest = (age, hoursAwake, isHungry, isTired, name) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using that function, that descriptiveness is lost. Without looking
// at the function, we have to remember what each value means. Is John 30 or
// 19? Are they hungry or tired?
hostGuest(30, 19, false, true, "John")
// By wrapping the parameters in curly brackets, the function now accepts a
// single object instead of five independent values. We can still access
// them exactly as we did before.
const hostGuest = ({ age, hoursAwake, isHungry, isTired, name }) => {
if (isTired) {
// let them rest
} else if (isHungry) {
// give them food
}
}
// When using _this_ function, we have to pass it an object. The keys of
// that object help us describe what attribute each value represents.
hostGuest({
age: 30,
hoursAwake: 19,
isHungry: false,
isTired: true,
name: "John"
})Continue reading
The exponentiation operator
If you keep seeing stars in JavaScript, it’s probably someone trying to raise a number to the power of another number.
Read full articleDestructuring values returned by functions
By destructuring the return value of a function, we can take out only the values we need without having to assign the result to an object first.
Read full articleInverting Boolean functions
We can create a helper function that makes functions return their Boolean opposite. This can be useful in the shorthand syntax for array methods.
Read full articleChecking if something is an array
There is no “array” type in JavaScript. To check if something is an array, we can use a helper on the Array prototype.
Read full articlePassing parameters as a single object
Instead of passing a list of parameters to a function, we can pass it an object. That way, we have to explicitly label each parameter we pass to it.
Read full article