DEV Community

Dillon
Dillon

Posted on

Learning some JavaScript

I learned a little about funcitons today.

Arrow functions "=>"

const varName = parameter => {

return ``;

}

if more than one parameter

const varName = (parameter1, parameter2) => {

return ``;

}

implicit return syntax is as follows

const varName = parameter1 =>

``;

Top comments (7)

Collapse
 
dillpap profile image
Dillon

Callback function

Okay, so here is the good stuff. A callback funciton is useful for when you need stuff from one function in another function. So you call it back!

The basic syntax is that the first one sets up the good stuff.

It might look something like

const functionName = parameterName => what your parameter does

function secondFunctionName(parameterName*normally what you worked the parameter on in the first function*, callback) {

return callback(functionName(parameterName));
}

const result = secondFunctionName(username, (parameterName) => Hi there, ${parameterName}!}

It's kind of backwords but all of the functions are defined and what they do, but they don't do anything until you come to the final function, where

Collapse
 
dillpap profile image
Dillon

const varName = (parameter, parameter2) => {
return whatever you will be returning

}

note, if you only have one parameter, you don't need the parenthesis.

With arrow funcitons, you can have an implicit return, this means that you don't need the {} or the explicit return so

const berries = (parameter) {
return the function stuff;
}
becomes

const berries = paramenter =>
the function stuff;

Collapse
 
dillpap profile image
Dillon

Closures matter because they help us to remember values.

Here's a little closure I wrote that counted down by five

function countdown(interval) {

let currentCount = 100;
return function countdownProcess() {
currentCount -= interval;
return currentCount;

}
console.log(the count is, currentCount);
}

const countdownProcess = countdown(5);

console.log(countdownProcess());

Note you could pass in another parameter into the parent funciton.

**const countdownProcess = countdown(100, 5)

function countdown(interval, startingPoint) {

let currentCount = startingPoint**;

Collapse
 
dillpap profile image
Dillon

The evaluate whether at least one of two things is true, you can use the | | operator.

  • this is v relevant bc you can refactor your code to have it evaluate whether the first item is truthy and if not, return a predetermined default value.

(e.g., const user = response || "non-user"" So in this case you can use this to tell whether the user is logged in with a legitimate account.

&&

this one only moves on if the fist value is truthy and then it checks if the second value is also truthy. Both have to be truthy, if not you return false or whatever the desired false case will be.

Collapse
 
dillpap profile image
Dillon

switch statement: really, really good if you have a lot of different types of cases to evaluate.

coded as

const colorMode = 'palgoldenrod'
switch (colorMode) {
case "solarized":
consoloe.log('solarized mode set!')'
document.body.style.background = 'palegoldenrod';
break;
case "dark":
consoloe.log('dark mode set!');
document.body.style.background = 'black';
break;
default:
console.log('light mode set!');
document.body.style.background = 'white';
}

Collapse
 
dillpap profile image
Dillon

Ternaries

syntax:

*instead of the...

if (x===y) {}

try,

isAuthenticated ? (like is authenticated?)

if you wanted to add an item to the cart if the user is authenticated

const carpetCount = isAuthenticated ? 1 : 0

**The colon works as the else

Branching ternaries
const isItADeal = percentOff < 10 ? "That's not a deal" : percentOff <40 ? "Now we're talking" : percentOff<60 ? "What a deal!!!!!" : "WOWOWOWOW!!!!"

Collapse
 
dillpap profile image
Dillon

truthy and falsy
There are SIX great falsy values
0
null
undefined
NaN
''
flase

Everything that is not falsy is truthy