Understanding Functions in JavaScript

#BuildTogether Day 49/100

G’Day Folks, How is the medium fam doing ;) I am back here again :D I have been writing about my journey on the forums. If you fancy reading the lovely days I am having, please feel free to drop by our forums 😍

The Journey of #100DaysOfCode (@henna_dev)

I started doing JavaScript from Codecademy, its starts from basics and explains well. Some of the concepts on JavaScript functions:

Functions

A function is a reusable block of code that groups together a sequence of statements to perform a specific task.

Function Declaration:

 function greeting() {
    //body
}

One should be aware of the hoisting feature in JavaScript which allows access to function declarations before they’re defined.

greeting()
function greeting(){
   console.log("Hello World")
}

Hoisting is not considered a good practice and should be avoided.

Parameters and Arguments

function area (rows, columns) {}   //named variables are parameters inside the block.
area(5, 6 ) //call the function passing arguments

Default Parameters

function greeting(name ='Stranger'){
console.log (`Hello ${name}`)
}
greeting('Jane') //outputs Hello Jane
greeting() // undefined, uses default value and outputs Hello Stranger

Function Expressions

To define a function inside an expression, the ‘function’ keyword is usually omitted. A function with no name is called an anonymous function.

In function expression, a function is stored in a variable in order to refer to it.

const calculateArea = function(width, height){
       return width * height;
}

• Since the ES6 release, it is common practice to use const as the keyword to declare the variable.
• To invoke function expression, call the variable name passing the arguments calculateArea(5, 6) .
• Unlike function declarations, function expressions are not hoisted so they cannot be called before they are defined.

Arrow Functions

ES6 introduced arrow function syntax, a shorter way to write functions by using the special “fat arrow” () => notation

• the function keyword can be omitted. Use () to include parameters and then add an arrow => and define function body inside {} brackets.

const plantNeedsWater = (day) => {
if (day === 'Wednesday') {
    return true;
} else {
    return false;
}

Refactor Arrow Functions

JavaScript also provides several ways to refactor arrow function syntax.

• Functions that take only a single parameter do not need that parameter to be enclosed in parentheses. However, if a function takes zero or multiple parameters, parentheses are required.

concise body

• A function body composed of a single-line block does not need curly braces. Without the curly braces, whatever that line evaluates will be automatically returned. The contents of the block should immediately follow the arrow => and the return keyword can be removed. This is referred to as an implicit return.

const squareNum = (num) => {
  return num * num;
};
//can be refactored to
const squareNum = num => num * num;

It's good to be aware of the differences between function expressions, arrow functions, and function declarations as a wide variety of these function types are used in Javascript.

Wanna play Rock Paper or Scissors? ;)

As a challenge, try writing a cheat code, so the user always wins 😜

Until tomorrow… 👋🏽