Learning JavaScript, Day 20 – Expressions, Arrows, And A Quiz
Oh ho ho today is definitely a day for my temperature function.
function temp(c) {
return (c * 1.8) + 32;
}
let temperature = temp(22);
document.getElementById("demo").innerHTML =
"The temperature is " + temperature + "°F";
The temperature is 71.6°F
Today is also a day where I need to start doing my course reading, so there might be a second blog post today all about "Research on information systems failures and successes: Status update and future directions" and "User Acceptance of Information Technology: Toward a Unified View".
I know you're excited. SO EXCITED.
But, first, we finish off Functions.
Function Expressions
So you can store functions in variables. Which means my temperature function could be
const temp = function (c) { return (c * 1.8) + 32;};
let f = temp(22);
document.getElementById("demo").innerHTML =
"The temperature is " + f + "°F";
Which is pretty much the same as above, just with a variable added in. And you don't have to name the function inside the variable. Like, I don't have to put
const temp = function temperature(c) {return (c * 1.8) + 32;};
I can, if I really want to, but I don't have to, because the variable name (temp) calls the function no matter what.
And because it's in a variable, I can then call that variable in other functions.
let weather = "it's warm";
const caps = function () { return weather.toUpperCase();}
function temp() { return (22 * 1.8) + 32 + " " + caps();}
document.getElementById("demo").innerHTML = temp();
And I can call the variable just like a function, because it'll do the same thing.
const temp = function (c) { return (c * 1.8) + 32;};
document.getElementById("demo").innerHTML =
"The temperature is " + temp(22) + "°F";
If I wanted to, I can put a function underneath when I call it in the code, but I can't do that if it's in a variable. But I don't really like calling functions before I declare them, so this is a moot point.
Arrow Functions
Good lord, this really cuts down on the amount of code you put in, but it can also confuse you so quickly.
Instead of having function, return, and {}, you replace all of that with =>.
const temp = (c) => (c * 1.8) + 32;
document.getElementById("demo").innerHTML =
"The temperature is " + temp(22) + "°F";
And, apparently, I can get rid of the parentheses around c as well. Obviously not around the maths part, but
const temp = c => (c * 1.8) + 32;
document.getElementById("demo").innerHTML =
"The temperature is " + temp(22) + "°F";
But if there are no parameters, you need the parentheses.
let temperature = "it's warm";
const weather = () => temperature.toUpperCase();
const temp = c => (c * 1.8) + 32;
document.getElementById("demo").innerHTML =
"The temperature is " + temp(22) + "°F - " + weather();
I do like these arrow functions. This will come in handy when I start making ridiculous things like quizzes and whatnot.
JavaScript Functions Quiz
And now I actually have a quiz to do.
Sadly, it doesn't return answers, I have to keep track myself, but my inner nerd child is jumping at the chance.
I'm going to go through the quiz, answer the questions, and then go through the answers and see if I was right.
Question 1
What is returned in the text variable?
function sayHello() {
return "Hello World";
}
let text = sayHello();
- A. sayHello
- B. Hello World
- C. undefined
B, because text is invoking sayHello().
Question 2
Which line calls the function?
function test() {
return 5;
}
let x = test;
let y = test();
- A.
function test() { } - B.
let x = test; - C.
let y = test();
C, because let y = test(); has everything in place to call the function.
Question 3
In the function below, what are a and b?
function multiply(a, b) {
return a * b;
}
- A. Arguments
- B. Parameters
- C. Return values
B, because there aren't actual numbers in there, just variables that can be turned into arguments when you put the numbers in.
Question 4
What is the value of x in this example?
function add(a, b) {
return a + b;
}
x = add(2, 3) * 10;
- A. 5
- B. 10
- C. 50
I am turning into Teen Talk Barbie and going "Math class is hard", but it has to be C, because of the * 10. It calls the add(), which returns 5, and then multiplies that by `10.
Question 5
What value is returned if a function has no return statement?
- A. null
- B. false
- C. undefined
C. Because not returning means it doesn't define anything.
Question 6
Which type of function can be called before it is defined?
- A. Function declaration
- B. Function expression
- C. Arrow function
A. The other two have to be defined first. Really, they all should be defined first, but I guesssssss you could do it if you waaaaaaant.
Question 7
Which arrow function is correct?
- A.
const add = (a, b) => return a + b; - B.
const add = a, b => a + b; - C.
const add = (a, b) => a + b;
C. I think. A probably also works, but you don't need the return when using an arrow function.
Question 8
What does this refer to inside an object method?
const person = {
name: "John",
getName: function() {
return this.name;
}
};
- A. The function itself
- B. The global object
- C. The object that owns the method
Oh no, this I actually can't remember because I totally spaced out when it came to this and objects. It was all getting too theoretical.
B, I think.
Question 9
Why does this code not work as expected?
const person = {
name: "John",
greet: () => this.name
};
- A. Arrow functions cannot return values
- B. Arrow functions do not have their own this
- C. The object syntax is wrong
Yeah, no, I'm not sure. I'm going to go with C, because that feels so wrong.
Answers
- Question 1: Correct. The function does return the string "Hello World".
- Question 2: Correct. Parentheses do execute the function.
- Question 3: Correct. Parameters are listed in the function definition.
- Question 4: Correct. Math class is not hard.
- Question 5: Correct. Functions without
returnare undefined. - Question 6: Correct. Declarations can be below calls.
- Question 7: Correct. Arrows don't need
return. - Question 8: Correct. I guessed, but now I know. In a method, this returns to the owner object.
- Question 9: Incorrect. The object syntax is fine, but arrow functions do not have their own this, so you can't do
=> this..
Thankfully, I can get one question wrong and still do okay. I apparently have a solid understanding of JavaScript functions, go me!
Day 20 — Results
- Functions can be stored in variables.
- You can then call those variables in other functions.
- And you can call the variable just like a function.
- Instead of using
const variable = function name () { return code;}, you can useconst variable = () => code; - If there are parameters, you don't have to use the
(). - If there aren't parameters, you have to use the
(). - Arrow functions don't have their own
this. - When you use
this.in a function, it refers to the global object, not the function. - Even though I'm spacing out on objects and this, I still understand functions.
- According to Harper, though, I keep on misspelling parentheses. They wrap around you like a parEnt, not a parANT, dammit.
Based on what I'm seeing, each section takes you through the basic and intermediate levels, and thankfully not the advanced. I might go for the Advanced Functions later on, but right now, I'm happy with where I am.
The next big section is on Objects, which should hopefully stop me forgetting how they're used. Hopefully.
Today's Sticker
A mystery dog from the Bluey Panini "Play With Friends" Set. I didn't get the book that went with this, so I have no idea which dog this is. Is it Bluey? Is it Bingo? Is it Muffin? God only knows, all the Heelers have the same outline. And despite it looking like a scratch-off, you can't actually scratch off the silver to see what's underneath.