Introduction

Functions are core to JavaScript — they encapsulate logic, allow reuse, and form the building blocks of modular code. This guide covers:

1. Different ways to define functions
2. Arrow functions
3. Function parameters and default values
4. How functions are invoked
5. Understanding the this keyword in function contexts

1. Function Definition

There are several ways to define a function in JavaScript:

1.1 Function Declaration

This form is hoisted, meaning you can call it before its declaration in the code.

1.2 Function Expression

Function expressions are not hoisted in the same way; the variable must be defined before being invoked.

1.3 Named vs Anonymous Functions

1. Named functions have an identifier (e.g. function foo() { … }).
2. Anonymous functions do not have a name (e.g. function(x) { … }), common in expressions and callbacks.

2. Arrow Functions

Arrow functions provide a shorter syntax and lexical this binding.

Variants:

1. With a single parameter: x => x * 2
2. Without parameters: () => 3.14
3. With multiple statements:

Key Characteristics:

1. Arrow functions do not have their own this; they inherit this from the surrounding (lexical) context.
2. They also do not have their own arguments object, super, or new.target.
3. Cannot be used as constructors (cannot use new with an arrow function).

3. Function Parameters

Parameters are the names listed in function definitions; arguments are the values passed when the function is invoked.

Default Parameters

You can set defaults:

If no argument or undefined is passed, the default is used.

Rest Parameters

You can capture an indefinite number of arguments:

Here numbers is an array of all passed arguments.

Parameter vs Arguments Behavior

1. If fewer arguments than parameters are passed, missing parameters become undefined.
2. Extra arguments are ignored unless captured (via arguments or rest).
3. arguments object exists in traditional functions, not arrow functions.

4. Function Invocation

How you call a function impacts its behavior, including the this context.

4.1 Simple Invocation

Here this refers to the global object (or undefined in strict mode).

4.2 Method Invocation

When a function is called as a method of an object:

4.3 Constructor Invocation (with new)

When you use new, a new object is created, and this refers to that new object:

Arrow functions can’t be used as constructors.

4.4 call, apply, bind

You can explicitly set this using:

1. fun.call(obj, arg1, arg2…)
2. fun.apply(obj, [arg1, arg2…])
3. fun.bind(obj) returns a new function permanently bound to obj

5. The this Keyword

Understanding this is essential to mastering functions.

5.1 In Function Declarations / Expressions

1. In non-strict mode, when called as a standalone function, this refers to the global object.
2. In strict mode, standalone functions have this as undefined.

5.2 In Method Calls

When a function is called as a property of an object, this refers to that object.

5.3 In Constructor Calls

Inside a constructor function, this refers to the newly created object.

5.4 In Arrow Functions

Arrow functions do not have their own this. Instead, this is inherited lexically from the surrounding scope.

Example:

Here, the arrow function in setTimeout uses the this from sayLater’s context (the obj), not the global object.

Conclusion

Functions in JavaScript are versatile. By mastering:

1. Different ways to define functions
2. Using arrow functions and their special characteristics
3. Parameter handling (defaults, rest)
4. Invocation patterns (call, apply, bind)
5. The behavior of this in different contexts

you build a strong foundation for writing cleaner, more predictable JavaScript.