DEV Community

Cover image for Functions Blog
Charles Eugene
Charles Eugene

Posted on • Edited on

Functions Blog

What's up yall!?? Charles here! So today we're gonna talk about CONJUCTION CONJUCTION WHAT ARE FUNNNNCTIONS???? (Yeah I'm old some of yall probably didn't get that but do your research on that haha I'm just a bill!)

Image description

Functions are one of the core concepts in JavaScript. They allow you to encapsulate code that you can reuse, pass as arguments, return from other functions!

Now I'm going to show you how to use a Funk-tion
Image description

Use the function keyword followed by the name of the function, followed by parentheses () and curly braces {}. It really is pretty easy well this part ain't nothing to it, just do it!
Image description

But seriously yall this is a safe space! What's on your mind? I know the world is super crazy for everyone! But hey I'm here for ya big or small lets talk functions or life I'm here!
Image description

But hey back to the cold world of FUNCTIONS BRRRRRR! There are 4 different ways to create a function in JavaScript. Here we go!!
Image description

  1. Function Declaration
  2. Function Expression
  3. Arrow Function
  4. Function Constructor

So below I will be listing an examples of each of these Functions

Function Declaration
A function declaration defines a function that can be called and executed later in the code. It specifies the function name, parameters, and the block of code that runs when the function is invoked.

Image description

The keyword here is function this is the keyword used to declare a function.

The function name is greet that is the name given to the function. You can use this name to call the function later in the code.

The parameter is name, this is a placeholder used to pass data to the function which is a string value "Ash".

The function body contains the block of code that executes when the function is called, the function body is enclosed in curly braces {}.

The function returns a value it returns a greeting string! "Hello, Ash!"

Image description

Function Expression

A function expression defines a function as part of a larger expression normally by assigning it to a variable. But unlike function declarations function expressions are NOT hoisted, which means they cannot be called before they are defined.

Image description

var multiply Is the variable that stores the function the variable multiply holds the function that multiplies two numbers.

function (a, b) Is a function without a name it takes two parameters (a and b) and returns the product of (a * b).

Function expression the function is defined as part of the assignment to the multiply variable.

The function multiplies the product which is 4x4= 16

The console.log() prints the returned value 16!

So why use Function Expressions? You can assign functions to variables pass them as arguments to the other functions, or return them from other functions.

Image description
(This is a 16 bit Sub-Zero btw just incase you didn't get it LOL)

Lets get Back to Business!!

Image description

How are we feeling about Function Declarations and Function Expressions so far? Me, I'm feeling pretty good about it but if you have any questions I'm here just comment below :D but yeah I don't know if you guys are into sports but my fantasy football team isn't doin to hot right now :/ I started off 2-0 but I lost back to back games so I'm 2-2 but hopefully I get back on track haha! Like I said this is a safe space we can talk about anything! This is the coders life I'm learning the better your mood is the better you can code TRUST ME ON THAT!! Lets get "BACK TO BUSINESS"!!!
Image description

Arrow Function

Arrow functions provide a shorter syntax for writing function expressions. They are always anonymous and have some differences in how this is handled compared to regular functions.

Image description

let add This defines a variable add that will hold the arrow function, the variable add can later be used to call the function as well.

(a, b) These are the parameters of the function specifically a, and b are the two numbers that will be added together.

=> This is a arrow function syntax which will separate the parameters from the function body!

a + b This is the actual function body and it returns the result of adding a and b.

Now when the function add is called with arguments 5 and 3 the function returns 5+3 which is 8.

The console.log() prints the result which is 8!

Arrow functions are much shorter and way more simpler compared to the traditional function expressions or declarations!

Image description

Function Constructor

A function constructor in JavaScript is a special type of function that is used to create new function objects dynamically. It provides a way to define a function's parameters and body as strings, and then return a new function based on these inputs.

Image description

Function Creation This creates a function with two parameters a and b. The function body is return a + b; that adds the two numbers and returns their sum.

Function Call sum(10, 12) calls the function sum with arguments 10 and 12. The function returns 10 + 12 = 22

So a quick fact Function constructor are NOT hoisted you have to declare them and define them before using them!

So here are some differences between Function Constructor and other Function definitions! Functions made with Function() do not have access to the local scope, not like function declarations or expressions which CAN access variables in the scope they were defined in!

Image description

(GUYS DO NO NOT JUDGE ME I DO NOT LISTEN TO TAY SWIFT LIKE THAT BUT THAT OLD TAY SWIFT WAS FIRE!!! OUR SONG IS SLAMMIN SCREEN DOOR LOL!!!)

But hey how we feeling about Arrow Functions and Function Constructors? Here's a quick fact about Arrow Functions arrow functions do NOT have their own this! If you need to use this inside a function just use a normal function expression instead of an Arrow Function! Also Arrow Functions do NOT have an arguments object. If you need to use arguments use a regular function! Now a tip about Function Constructor it can be slower apparently because the function body is parsed EVERY TIME the constructor is called not like function declarations or expressions! I look forward to seeing any questions don't be shy! We're coders we ask ALL the questions!

Image description

Top comments (0)