Function Introduction

*Function function, what’s your function? *

Simply put, a function is a piece of code that can be reused as many times as you like instead of duplicating the code each time that you need to execute that specific functionality. Functions are the building blocks of code in JavaScript. They perform various tasks, like keeping track of time for an alarm clock, or they can calculate a multitude of values, such as a calculator.

In JavaScript, another name for key words is reserved words. Reserved words cannot be used as a variable’s name, labels, or function names. Function is one of these reserved words. For further information and to see a full list of reserved words I recommend checking out, https://www.w3schools.com/js/js_reserved.asp.

Functions allow programmers and developers to break down a complex or repetitive section of code into smaller pieces, each of which performs a particular task. When the function is created and made available, all that needs to be done is to call the function by name and pass information as parameters to it if needed; these parameters are given each time the function is called. Aside from reusability, breaking your functions down into smaller chunks of code will also make your code more readable, more testable and easier to debug. Functions are able to call themselves, define themselves and even redefine themselves! One particular circumstance where this is especially useful is when you want to alter the program flow due to changing circumstances.

Function Declaration
Function declaration is a way of defining sets of instructions in a program that execute when called. The different ways that a function can be declared inJavaScript are:
● Arrow Function
● Anonymous Function
● Function Expression
● Hoisting
● Constructor Functions
● Immediately Invoked Function Expression

Arrow Functions
Arrow Functions help to make our code more readable because it can be written on one line and, when the function only has one line it can have a default return! If your code is longer, then it is recommended to use the function expression syntax. In fact, if you only have one parameter in an arrow function, you can skip the parentheses.
greet = (data) => “Hello ” + data;
becomes
greet = data => “Hello ” + data;

The syntax in JavaScript for a regular function:
function greet() {
return “Hello World!”
};

Syntax for an arrow Function:
greet = () => return “Hello World!”;

Anonymous Functions
Anonymous Functions do not have a name in the function definition. Anonymous functions are declared using only the function keyword and parentheses. Basically built and used for instant function execution within a function as a parameter.

Function () { console.log(”Hello World!)
};

Anonymous functions can be assigned to variables and can even be passed as an argument of a function.

Const greet = function () {
console.log(“Hello World!”)
};
greet();

sayHello(function() {
console.log(“Hello World!”)
});

Function Expression
Function Expressions are functions that have a name, which is stored like a variable and can be called to invoke the function. This variable name is followed by () and inside of the parentheses you can have parameters if needed. The function name can be omitted, in which case the function is anonymous.

Const greet = function () {
console.log(“Welcome to Flatiron!”)
};
greet();

Hoisting
In JavaScript, variables and functions can be used before they are defined and this is possible thanks to Hoisting. Hoisting is what allows variable declarations to be “moved” to the top of the current scope (top of current script or current function). This lets a variable or a function be used before it has been declared. As the page information is loaded from top to bottom left to right. Hoisting also applies to classes that are defined using a class declaration.

greet(“Tom!”);

Function greet(name) {
console.log(“Hello “ + name)
};

Constructor Functions
Constructor Functions are a special type of function that creates and initializes an object instance of a class which allows us to use the word ‘this’ as a substitute for the new object when created. When an object is called using the ‘new’ keyword, the constructor sets the values for any existing properties. It is also common to name these functions with an upper-case first letter.

function Friends(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
}

Const newRoommate = new Friends(“Tim”, “Jones”, 35);

Immediately Invoked Function Expression
An IIFE, also known as a Self-Executing Anonymous Function, runs as soon as it is defined and
contains two major parts.

1. The first is the anonymous function with lexical scope enclosed within parentheses (). This prevents accessing variables within the IIFE phrase as well as polluting the global scope.
2. The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

This function style is mainly used to limit the number of global variables. Especially if it is
containing code that will not be reused. In such cases using a function declaration of function
expression would be better.

(function greet() {
return “Hello World!”})();

There is much more information available about functions, this is just an introduction to the term, and its syntax and the various ways to define them.

Comments

[Jon Randy 🎖️]

Functions that are assigned to variables are not anonymous. The very act of assigning them to a variable will give them a name if they do not already have one:

console.log( (function() {}).name )   // ''
const a = function() {}
console.log( a.name )   // 'a'