You may not want to run all of the script at once. Some situations may require ignoring parts of the code, and some parts may need to be triggered by some event, such as when a user clicks on a button.
Just as with objects, we could condense everything, like this...
function functionName(){var hello="hello";console.log(hello);hello="goodbye";console.log(hello);};function functionGoodbye(){var goodbye="hello";};
The above code actually works, however, notice just how difficult it is to pull everything apart. It all blends together and is very hard to read. That's why it's written over multiple lines, for the sake of clarity, like this...
function functionName() {{ '{' }}
var hello = "hello";
console.log(hello);
hello = "goodbye";
console.log(hello);
}
function functionGoodbye() {
var goodbye = "hello";
}
Now we can tell we were looking at two separate functions and only the first function is using "console.log()" (more on that later).
Curly braces/brackets "{}" are used for organizing code into blocks. The curly brackets act as frames for the block of information, similar to opening and closing tags in html. The contents are inset so it's easier to tell which block they belong to. They are used for objects, but they are also used for situations in which it is desired to organize code into blocks of statements. For an object, you're grouping properties and values, but with functions you're grouping statements.
// block of statements
{
1rst statement;
2nd statement;
3rd statement;
}
Block statements use curly brackets to declare one, or more, statements for different uses, such as for functions, conditionals, and classes.
// empty function block statement
function theFunctionName() {
}
// empty conditional block statement
if (variable == true) {
}
// empty class block statement
class someName {
}
Block statements are a bit different from regular statements. They are used to declare a group of statements, so they are not required to end with semicolons themselves, and typically don't. This is most likely done for clarity. It also makes it easier to tell them apart from object declarations, which typically do end with semicolons.
// block of object properties
{
property1: value,
property2: value,
property3: value
};
// function block statement
function theFunctionName() {
1rst statement;
2nd statement;
3rd statement;
}
Functions are multi-purpose. Essentially, when the script runs, they get loaded into to memory first, and function code is run whenever the function is called, such as when a user clicks on a button.
Instead of writing the same lines of code over and over, a function name can be used similar to the way a variable name is used to represent data, but as a representation for the statements within the function. Not only does this make the script easier to read and organize, but it also allows the function code to be run multiple times, which reduces the amount of typing required. It also makes problems easier to troubleshoot.
It is not a requirement to use functions, but they are very useful. If you just have a short script with not a lot of statements, you don't have to use functions if you prefer, you can just put all the statements in the main body of the script.
In JavaScript, the word function is a keyword. It is similar to a variable declaration keyword, but is used to declare a function.
Just like with variables, the name of your choosing comes next.
function someFunction;
//
syntax error
: missing ()
In the image below, the function's name is addSameNumber. The function's name is essentially a variable of type "function" that calls a function (see below) instead of holding data.
However, unlike a normal variable, function variable names require the use of parentheses "()" after the name. Parentheses in JavaScript typically indicate the use of a function of some sort, and they are used to enable the function to use external values (more on that a little futher down).
function someFunction();
//
syntax error
: missing {}
In addition, also unlike a normal variable, a function is a block statement, and requires the use of curly braces/brackets. The curly braces define the body of the function, which contains the function's statements.
// declaring a block statement
1. declaration keyword
2. variable, or condition
3. { associated statements }
function someFunction{};
//
syntax error
: missing ()
Function declarations require the use of both parentheses () and curly braces/brackets {}.
Also unlike a regular variable, there's no use of an equal sign to declare a function's name since it's a block statement, and not directly assigning a value.
function someFunction() = {};
//
syntax error
: missing {
// since a function was declared, a { was expected before reaching any assignments
It doesn't matter how much space is in between the function name, parentheses and curly brackets, as long as it is only space, or no space.
function someFunction(){};
//
correct!
(semicolon not required)
// empty function, undefined
It is typical, however, to put one space character between the parentheses and curly braces/brackets.
function someFunction() {}
When this function is called, we get back a value of "undefined", because we did not give the function any statements to process. There are no syntax errors though. Empty functions aren't very useful, so function declarations typically include statements.
The function's parameters are part of the function declaration, between the parentheses after the function name, and are basically variables used within the function that get assigned values from the function call. They are used to pass information into the function. In the image, the word "number" is the function's parameter.
Parenthesis in JavaScript typically indicate a function of some sort. The "log()" part of "console.log();" is a type of function called a "method", which means it's a function that belongs to an object. We'll talk about that later. The parentheses in JavaScript functions are mostly used to pass information into the function through the use of variables or values called "parameters". For example, the "Hi!" in the code "console.log("Hi!");" is a value that could be represented by a variable.
A function "call" is a statement or part of a statement which causes a declared function to run. To call a function, we simply use the function's name, followed by opening and closing parentheses. Using a function name in code like a variable, so that the code is read by the interpreter at that position is called "calling" the function. As explained previously, to call the function, instead of declaring it, we simply take away the "function" keyword and the curly brackets. We'll use the function's variable name (the function name), then we add "()", which tells the interpreter that this is a function variable, and that's it. The below will run the function called "someFunction".
someFunction();
At the point that the interpreter gets to this line, whatever statements are in the curly brackets of the "someFunction" declaration will be ran.
Arguments are values passed into the function, through the function call, that are to be assigned to the parameters of the function.
One is a place in the code for passing values into the function, and the other is place to put multiple statements. Values can be placed within the parentheses, but it isn't always necessary and we'll get to that later.
If I told you...
// for example:
function nameOfFunction() {
var functionVariable = "variable to be applied to statements within this function";
console.log(functionVariable);
}