Detailed explanation of the example of passing parameters in JavaScript

In JavaScript, the method of parameter passing can be divided into value passing of basic types and reference passing of complex types. Depending on the usage scenario and requirements, different parameter delivery methods may vary. The following is a systematic and structured summary.

1. Pass by Value

1.1 Concept

• Basic types (e.g.number, string, boolean, null, undefined, symbol, bigintWhen the value of ) is passed, a copy of the value will be copied inside the function.
• Modifying the parameter values ​​inside the function will not affect the original variable.

1.2 Example

function modifyValue(val) {
    val = 10; // The copy is modified}
let num = 5;
modifyValue(num);
(num); // Output：5

1.3 Features

• The value of the original variable remains unchanged.
• The memory used is small.

2. Pass by Reference

2.1 Concept

• Object type (e.g.Object, Array, Function) When passed, its reference is passed to the function.
• Modification of parameters inside the function will directly affect the original variable.

2.2 Example

function modifyObject(obj) {
     = 'Modified'; // The modified reference}
let person = { name: 'Original' };
modifyObject(person);
(); // Output：Modified

2.3 Features

• Function parameters point directly to the same object in memory.
• Suitable for operating complex data structures, but easily produces side effects.

3. Parameter destruction and delivery

3.1 Deconstruction and assignment

• Parameters can be passed separately through deconstruction and are suitable for objects and arrays.

Object destruction

function printName({ firstName, lastName }) {
    (`First Name: ${firstName}, Last Name: ${lastName}`);
}
let user = { firstName: 'John', lastName: 'Doe' };
printName(user);

Array destruction

function printCoordinates([x, y]) {
    (`X: ${x}, Y: ${y}`);
}
let coordinates = [10, 20];
printCoordinates(coordinates);

3.2 Features

• Improve code readability.
• Only some of the data required are passed.

4. Rest parameter passing

4.1 Concept

restParameters allow an uncertain number of parameters to be collected into an array.

4.2 Example

function sum(...nums) {
    return ((acc, cur) => acc + cur, 0);
}
(sum(1, 2, 3, 4)); // Output：10

4.3 Features

• Used for variadic parameter functions.
• Alternative to traditionalargumentsObject.

5. Callback function pass

5.1 Concept

By passing functions as parameters, the execution logic can be dynamically decided.

5.2 Example

function processArray(arr, callback) {
    return (callback);
}
let result = processArray([1, 2, 3], num => num * 2);
(result); // Output：[2, 4, 6]

5.3 Features

• Suitable for handling asynchronous operations or dynamic logic.
• Improve code reusability.

6. Closure delivery

6.1 Concept

• In a closure environment, variables are captured and passed through lexical scopes.

6.2 Example

function createMultiplier(factor) {
    return function (num) {
        return num * factor;
    };
}
let double = createMultiplier(2);
(double(5)); // Output：10

6.3 Features

• Keep data in context.
• Avoid global variable pollution.

7. Template string pass

7.1 Concept

Parameters can be passed dynamically through template string embedding.

7.2 Example

function greet(name) {
    (`Hello, ${name}!`);
}
greet('Alice'); // Output：Hello, Alice!

7.3 Features

• Easy to splice strings and dynamic content.

8. Advanced function delivery

8.1 Concept

• Pass a function as an argument to another function and use or return in the latter.

8.2 Example

function higherOrderFunction(fn) {
    (fn());
}
higherOrderFunction(() => 'I am a function'); // Output：I am a function

8.3 Features

• Used for functional programming.
• Improve code flexibility.

9. Parameter passing in event listener

9.1 Passing data when binding events

• Pass parameters to the event callback function through closure or binding.

9.2 Example

Pass parameters using closure:

let button = ('button');
('click', () => handleClick('Button clicked'));
function handleClick(message) {
    (message);
}

usebindmethod:

('click', (null, 'Button clicked'));

Summarize

Reference Documents

• MDN: Function Parameters
• MDN: Rest Parameters
• MDN:

This is the article about how to pass parameters in JavaScript. For more related JS parameter content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!