Function in Javascript

Different Way of Defining Function

• Function Declaration / Function Statement
  • Hoisted to top, can be declared anywhere in the file (i.e. also after it’s used)
• Function Expression
  • Hoisted to top but not initialized/defined, can’t be declared anywhere in the file (i.e. not after it’s used)
• Arrow function
• IIFEs

1.FUNCTION DECLARATIONS

// Fxn declarationa and fxn call can be in any order.
console.log(calcAge1(1991),'Before fxn declaration');

function calcAge1(birthYeah) {
  return 2037 - birthYeah;
}
console.log(calcAge1(1991),'After fxn declaration');

2.FUNCTION EXPRESIONS

• Function assigned to a variable are function expression
• Function stored in variable
• Are of two types
  • Named function
  • Anonyomus function

Named function

• function startGame2() is stroed in memory with start1() name
  • So, can’t find startGame2()
• Can also use same name on both end

const start1 = function startGame2(){
  console.log('startGame2')
}
// startGame2();
// startGame2 is not defined
start1();

const startGame3 = function startGame3(){
  console.log('startGame3')
};
startGame3();

Anonymos function

• Function expression without name

console.log(calcAge2(1991), 'Before');
const calcAge2 = function (birthYeah) {
  return 2037 - birthYeah;
}
console.log(calcAge2(1991), 'After');

const startGame4 = function() {
  console.log('startGame4')
};
startGame4();

// Anonymous fxn without name
startGameBtn.addEventListener('click', function(){
  console.log('startGameBtn')
})

// Anonymous fxn with name --> Helps in debuging
startGameBtn.addEventListener('click', function start1(){
  console.log('startGameBtn')
})

3.Arrow functions

Default syntax:

const add = (a, b) => {
  const result = a + b;
  return result;
};
console.log(add(10,20))
// 30

Shorter function body, if exactly one expression is used

const add = (a,b) => a+b
console.log(add(10,20))
// 30

const calcAge3 = birthYeah => 2020 - birthYeah;
console.log(calcAge3(1991));
// 29

Shorter parameter syntax, if exactly one parameter is received

• Without parenthesis

const oneArg1 = name =>{
  return `exactly one argument: ${name}`
}
console.log(oneArg1('John'));
// "exactly one argument: John"

• With parenthesis

const oneArg2 = (name) =>{
  return `exactly one argument: ${name}`
}
console.log(oneArg2('Jack'));
// "exactly one argument: Jack"

Empty parameter parentheses, if NO arguments are received

const printNoArg = () =>{
  console.log("No Aurg")
}
printNoArg()
// "No Aurg"

• Two or more args

const pMyName = (name, age) =>{
  console.log(name, age)
}
pMyName("John", 27)
// "John" 27

Function returns an object

const loadPerson = pName => ({name: pName });
console.log(loadPerson('Jack'))
// { name: "Jack" }

4.IMMIDIATLEY INVOKABLE FUNCTION EXPRESSIONS - IIFEs

// written inside parenthesis (xyz)();
// colon(;) is must here
(function(){
  console.log('IIFE Ran..');
})();

(function(name){
  console.log('Hello '+ name);
})('Brad');

What about semi-colons?

• Generally, you should place them after every expression you wrote.
• The exception are functions and similar code snippets where you use {} (exception from that rule: objects!).

As a rule of thumb, you can keep in mind that a semicolon is used after {} if the {} are on the right side of the equal sign!

Reference

• Arrow functions