This content originally appeared on DEV Community and was authored by DEV Community
A classic of why you should not start with the technology (theory).
(It is short!)
https://www.youtube.com/watch?v=r2O5qKZlI50
Learn by Demand
When we start to learn something by theory, it’s easy to feel overwhelmed by the amount of information that exists for a determined subject.
Problem First
First, find a problem to solve, then you'll figure out what theory do you need to study to solve it.
I study what is necessary to accomplish a result, so I can learn it well, without getting frustrated, and don’t need to memorize lots of details.
If you just started by now learning JavaScript, you maybe have encountered different terminologies that more create a gatekeeper and might make you feel unmotivated than make you understand what is going on.
So, let’s learn with a problem.
The Dog Age Calculator
It’s long believed that “1 dog year is equal to 7 human years”.
We are going to create a function that will transform the dog's age (which will be inputted by the user) to what it is in human years. It is expected to have an output like the following String.
"Your dog is XX years old in human years"
Here is one example of how function (black box) works.
This black box also holds the list of instructions, here is where it tells the function what to output.
- Receives an input with the Dog's Age.
- Creates a routine to transform Dog's Age to the equivalent in Human Years
- Output following the String.
First, we need to know how to declare a function.
Function Declaration
A function is created with an expression that starts with the keyword function, then goes the name of it.
So let’s declare a function to calculate the dog’s age.
function calcDogAgeToHumanYears(dogAge) {
//Function Body
}
- We have used the keyword function.
- We give it a descriptive name to calculate the dog’s age to human years.
- dogAge? What is this inside the parenthesis?
Parameters and Arguments
It is not easy to understand. When I started to learn to code I got confused with both terminologies. You're going to get used to it with practice.
When we are declaring a function, we use the parentheses or technically known as round brackets (I’ve ever listened someone calls this like that) to hold placeholders that our function expects.
- A function can take zero or more parameters.
- It’s up to you!
There are pre-defined functions (methods) in JavaScript that expect some parameters, this is one case where you cannot change.
- Parameters or ‘Slots’
function calcDogeAgeToHumanYears(dogAge) {};
//dogAge is holding a slot, an input that a function should receive
- Arguments are the actual value, the specific value, of JavaScript data types that we give to run a function
//calling a function
calcDogAgeToHumarYears(3);
>> 'Your dog is 21 years old in human years'
The placeholder, the slot, was replaced by the actual data, the number 3.
Function Body
One great thing about coding is there is not only one, or right, answer.
Everyone here probably will have different ways to think about how to solve the same problem.
The problem: 1 dog year equals to 7 human years
My solution:
- Creates a new variable;
- Multiply the dogAge by 7, and store it into this new variable;
- Output a String with the value.
//keyword function + functionName + (parameter)
function calcDogAgeToHumarYears(dogAge) {
//coding
let toHumanYears = dogAge * 7;
console.log(`Your dog is ${toHumanYears} years old in human years`);
}
//calling the function and using the argument with the number 3
calcDogAgeToHumanYears(3);
//output
>> 'Your dog is 21 years old in human years'
Is it? Is done?
Yes. This function is serving its purpose.
It's time for you to practice! Refactor this with the return statement.
Now, you've one new thing to study and to apply.
Send your code to me, here on comments or on Twitter (@mpfdev)
Are you learning HTML/CSS?
Here is my last post about doing a section with CSS Floats:
Level-Ground: Section with CSS Floats
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-22T21:53:18+00:00) JavaScript Functions: Learn by Demand. Retrieved from https://www.scien.cx/2022/02/22/javascript-functions-learn-by-demand/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.