#JS-Fundamental  #Javascript 

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
    Page: /

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