loading...

JavaScript Functions

ziizium profile image Habdul Hazeez ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

When you start writing JavaScript there is tendency you will repeat portions of your code which can make your code difficult to understand and might hurt readability along the line.

JavaScript has functions (like programming languages) that can be used to group code into something called a block. Then this block of code can be used any number of times in your code. Some care has to be taken when using functions, mostly especially the name of the function.

The name should be descriptive enough and it should indicate what the function is doing. In some instances it is recommended to use verb like names.

We will take a general overview of functions in JavaScript without going deep.

We will talk about

  • Function definition
  • Function invocation
  • Function types

Let's begin.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.

I used the var keyword for variable declarations but, if you want to avoid some behavior like variable hoisting I'll advise that you use let or const.


In the last few paragraphs we gave a simple basic explanation functions in JavaScript. Now, let's get technical.

Technically speaking — a function is a block of JavaScript code that is defined once but may be executed, or invoked, any number of times.

There are three type of functions in JavaScript namely:

  • Function declaration
  • Function expression
  • Arrow functions (added in ES6)

Functions declaration and expression are defined with the function keyword followed by the following components:

  • The name of the function. This name is required for function declarations but optional for function expressions (explored later)
  • A pair of prentheses that'll contain a comma-separated list of zero or more identifiers called parameters. When the function is called we pass arguments in place of these parameters
  • A pair of curly braces with zero or more JavaScript statements.These statements are the body of the function, they are executed whenever the function is invoked

The syntax of the functions are as follows:

For function declaration:

function functionname (arg1, arg2, ... argn) {
  // statements
}

An example:

/**
  * The function below is named myDetails and it
  * has two parameters: first_name and last_name.
  * 
  * For the sake of simplicity i have omitted error
  * checking.
  */
function myDetails(first_name, last_name) {
  console.log(first_name + " " + last_name)
}

When executed in the console:

Function declaration in JavaScript

The function invoked with two arguments:

Function Invocation in JavaScript

For function expression:

/**
  * A function expression
  */
var variable_name = function optional_function_name() {
  // statements
}

An example:

/**
  * The following function is a function expression
  * named myDetails and it has two parameters: first_name
  * and last_name.
  * 
  * For the sake of simplicity i have omitted error
  * checking.
  */
var myDetails = function(first_name, last_name) {
  console.log(first_name + " " + last_name)
}

When executed and invoked in the console:

Function execution and invocation in JavaScript

For arrow functions the basic syntax is:

var variable_name = parameter => expression;

An example:

/**
  * The following function is an arrow function
  * named myDetails and it has two parameters: first_name
  * and last_name.
  * 
  * For the sake of simplicity i have omitted error
  * checking.
  */
var myDetails = (first_name, last_name) => {
  console.log(first_name + " " + last_name)
};

When executed and invoked in the console:

Function execution and invocation in JavaScript

We've merely scratched the surface of functions in JavaScript but i hope its enough to peak your interest to explore further.

If you feeling adventurous, you can check the following resources:

Up next, The DOM.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide