Functions
- Functions are the verbs of JavaScript. They tell the program what to do/compute.
- Using functions is a crucial part of writing clean, DRY (Don’t Repeat Yourself) code, making it:
– Easier to read
– Easier to update
– Perform smoother
– Less buggy - Function names are always followed by a ( ) . This space can hold any number of parameters (2, 3 is common) separated by commas.
- When the function is called in the script, the coder will have to also enter in as many of these details as required by the function. The function will not function without parameters if it demands them.
- When the function is being called, the details between the parentheses are called arguments. Arguments get sent to a function. Parameters are received by the function. Same values, different names.
- Functions should always return a value back to the invocation of the function when it has completed its computation.
- Sometimes a return action is confused with a console.log but it is important to remember: if you want to return a computed value, you must use return to send the data back to the main script- console.log will only print them to the console- essentially dead-ending that data.
BREAKING DOWN A FUNCTION:
function sayHelloWorld() {
console.log(“Hello world!”);
}
sayHelloWord();
| function | Introduces the function |
| sayHelloWorld | Name of function -This should describe what the function does in some way |
| () | Where any parameters would go. – Even if there are no parameters, always put these () |
| { console.log(“Hello world!”); } | What the function will do. – Similar to conditionals or loops, this is the where the action of the command goes. |
| sayHelloWorld(); | Calling the function – Don’t forget to call the function after you’ve defined it! – This function can be called anywhere in the code |
BREAKING DOWN A MORE COMPLEX FUNCTION:
function calculateMonthlyCost(mortgage, taxes) {
return mortgage + taxes;
}
const monthlyCost = calculateMonthlyCost(1000, 600);
| function calculateMonthlyCost | Introduces and names the function |
| (mortgage, taxes) { | Demands two parameters when the function is called. – The parameters must always be in the right order as the values will be returned in the same allotted area that is divided by a comma(s). |
| return | This code will return a value back to the place that the function was called! – Without “return”, the function would do it’s thing but not send any computed information back to the main script! |
| Mortgage + taxes; } | Uses the parameters given to do an arithmetic expression. – The value or result of this expression will immediately be “returned” to wherever it was called in the script. |
| const monthlyCost = calculateMonthlyCost(1000,600) | This assigns a new variable with the value of whatever returns from the calculateMonthlyCost function! – In this example, the value of monthlyCost would = 1600 |
GLOBAL + LOCAL SCOPE
• Where a variable is declared affects where it can be used by the program.
• A locally scoped variable is declared within a function or within a conditional if/else statement and can only be used within those bounds.
• A globally scoped variable can be seen and used by all functions in a program.
• If a variable is declared outside of a function, that variable will become inaccessible to the function unless it is sent to the function from the main script within the function’s arguments, i.e. (variable1, variable2, variable3 ).
COMMON BUILT-IN FUNCTIONS IN JAVASCRIPT:
/*console.log() example: */
const myName = "Lisa Simpson";
console.log(myName);
| console.log() | Main function for how to check your work as you go. Used to debug. – Real-world, finalized projects would ideally have no console.log statements at all because hopefully the bugs are all fixed. -This will print to the console, which is sort of like the whiteboard that is behind the scenes of the browser’s view. |
| Number(nameOfVariable); | Converts a variable like “18” to a plain number 18 |
| Math.random(); Random = Math.floor(Math.random() *7); console.log(myArray[random]) //this example shows how to assign a random number to a variable that you can then call to pick a random item from an array. Always use the | Here, random() is a function that works with Math. – Returns a random number between o (inclusive) and 1 (exclusive). -This number will be a random float ratio that will be combined with a second statement that indicates the arithmetic operation by which you want to increase the value by. |
| Math.floor(); | Here, floor () is a function that works with Math. – Rounds the number down to the nearest whole number. |
Operators
| = | Used to assign and reassign values |
| + | Adds numbers but can also concatenate. Be sure what data types you are working with to determine what the outcome data type will be. (i.e. a number plus a string will return as a string) |
| – | Subtracts numbers only |
| / | Divides numbers only |
| * | Multiplies numbers only |
| += | Reassigns a value to the variable of the variable plus whatever number follows the += operator |
| -= | Reassigns a value to the variable of the variable minus whatever number follows the -= operator |
| /= | Reassigns a value to the variable of the variable divided by whatever number follows the /= operator |
| *= | Reassigns a value to the variable of the variable multiplied by whatever number follows the *= operator |
| == | Not strict comparison. Checks to see if both sides of == are of equal value but sometimes is lenient if values are somewhat relative. |
| % | Modulus or ‘mod’ – 9 % 6 would be 3. It is valued as the remainder of 9 / 6. One (6* 1 equals 6) with a remainder of 3 |
| ++ | Used to add 1 |
| === | Strict comparison. If values are not exactly the same, this will not return true. |