JS MASTER CLASS /// FUNCTION DECLARATIONS /// ANONYMOUS EXPS /// ARROW FUNCTIONS ES6 /// JS MASTER CLASS /// FUNCTION DECLARATIONS /// ANONYMOUS EXPS /// ARROW FUNCTIONS ES6 ///

JS Functions

Declarations, Anonymous Expressions, and ES6 Arrow Functions. Master the logic blocks of JavaScript.

functions.js
1 / 15
12345
⚡

JS Tutor:Functions are the heart of JavaScript. They allow us to bundle reusable code together. Let's explore the three main ways to write them.

Skill Matrix

UNLOCK NODES BY MASTERING SYNTAX.

Concept: Declarations

Standard functions created with the function keyword. They are hoisted entirely.

System Check

Are function declarations hoisted?

Community Holo-Net

Showcase Your Callbacks

ACTIVE

Wrote a super clever one-liner arrow function? Share it with the JS community!

Support Us

JavaScript Functions

Author

Pascual Vila

Senior Frontend Engineer // Code Syllabus

In JavaScript, functions are first-class citizens. This means they can be stored in variables, passed as arguments to other functions, and returned from other functions. Let's break down the three primary ways to define them.

1. Function Declarations

The most traditional way to create a function. It uses the function keyword followed by a name.

function sayHello() { console.log("Hello World!"); }

Key Trait: Hoisting.

Function declarations are "hoisted" to the top of their enclosing scope. This means you can call the function in your code before you actually declare it.

2. Function Expressions (Anonymous)

Here, we create a function without a name (an anonymous function) and assign it to a variable.

const sayGoodbye = function() { console.log("Goodbye!"); };

Key Trait: No Hoisting.

Because it's assigned to a variable (especially if using const or let), you cannot call this function before the line where it is defined. The engine will throw an error.

3. Arrow Functions (ES6)

Introduced in ES6 (2015), arrow functions offer a much more concise syntax and handle the this keyword differently (lexical scope).

const multiply = (a, b) => { return a * b; };

If your function consists of a single expression, you can utilize the Implicit Return. Drop the curly braces and the return keyword:

const multiply = (a, b) => a * b;
When to use which?+

Use Declarations when you want standard, readable top-level functions that can be called from anywhere in the file. Use Expressions when passing callbacks to other functions. Use Arrow Functions for concise mathematical operations, array methods (like map, filter), or when you specifically need to preserve the lexical 'this' binding from the parent scope (like in React class components or setTimeout callbacks).

JS Glossary

Function Declaration

A standard function created with the 'function' keyword. It is hoisted to the top of its scope.

snippet.js

Function Expression

A function assigned to a variable. Often anonymous. It is NOT hoisted.

snippet.js

Arrow Function

A compact ES6 syntax for functions. Uses '=>' and has lexical 'this' binding.

snippet.js

Implicit Return

A feature of arrow functions where you omit the { } and 'return' keyword to return a single expression instantly.

snippet.js

Hoisting

JavaScript's default behavior of moving declarations to the top of the current scope before code execution.

snippet.js

Callback Function

A function passed into another function as an argument, which is then invoked inside the outer function.

snippet.js