A new proposal to pass multiple values in Javascript

💡 Ideas
1

The proposal

I would like to have an explicit way to demonstrate that a function that has many parameters like in Python.

Context

In some normal Javascript program I would do something like this if I needed to have a lot of parameters in the functions:

case 1 - Javascript: common_algorithm_javascript.js

// function definition
function calculateTotalSum(a){
    var total=0;
    for(var i in a) { 
        total += a[i];
    }
    return total;
}

// values, function call 
var values = [123,155,134, 205, 105]; 
console.log(calculateTotalSum(values)); //sums up to 722

But ... In some normal Python program I would do something like this if I needed to have a lot of parameters in the functions:

case 2 - Python: calculateTotalSum.py

# function definition
def calculateTotalSum(*arguments):
	totalSum = 0
	for number in arguments:
		totalSum += number
	print(totalSum)

# function call, values
calculateTotalSum(5, 4, 3, 2, 1)

my idea ... in Javascript: calculateTotalSum.js

// function definition
function calculateTotalSum(*args){ 
    var total=0;
    for(var i in args) { 
        total += a[i];
    }
    return total;
}

// values, function call
var values = [123,155,134, 205, 105]; 
console.log(calculateTotalSum(values)); //sums up to 722

example of good practice

  // Inspiration in Python =)
  function functionName(*argument) { ... }
  function functionName(*variables) { ... }
  function functionName(*vars) { ... }
  function functionName(*arguments) { ... } 
  function functionName(*args) { ... }

example of bad practice

  function functionName(var1, var2, var3, var4) { ... } // bad practice 
  function functionName(var1, var2, var4, var5, var6 ... var10) { ... } // error

reasons

  1. This allows you to bring Javascript closer to Python developers.
  2. Variable number of non keyword arguments passed
  3. Multiple arguments are passed
  4. Good practices and explicit arguments

Rules/Notes

  1. Keyword: *arguments or *args or *parameter or *params or *values or *vars
  2. The * symbol is used to pass a variable number of arguments to a function. Typically, this syntax is used to avoid the code failing when we don’t know how many arguments will be sent to the function.
  3. The number of variables as parameter in the function cannot exceed the amount of 10 variables, above this value it would be advisable to use *args

reference

2

@theScottyJam What do you think of this idea?

3

JavaScript already has this feature. It's the spread syntax

// function definition
function calculateTotalSum(...args){ 
    var total=0;
    // By the way, order isn't guaranteed when you iterate like this.
    // It's better to use a different loop, like for-of instead.
    for(var i in args) {
        total += args[i];
    }
    return total;
}

// values, function call
var values = [123,155,134, 205, 105]; 
console.log(calculateTotalSum(...values)); //sums up to 722
2 Likes
4

My idea would be to use * and symbol ...

Spread syntax (...) or (*) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

case 1

// function definition
function calculateTotalSum(*args){ 
    var total=0;
    // By the way, order isn't guaranteed when you iterate like this.
    // It's better to use a different loop, like for-of instead.
    for(var i in args) {
        total += args[i];
    }
    return total;
}

// values, function call
var values = [123,155,134, 205, 105]; 
console.log(calculateTotalSum(...values)); //sums up to 722

case 2

// function definition
function calculateTotalSum(...args){ 
    var total=0;
    // By the way, order isn't guaranteed when you iterate like this.
    // It's better to use a different loop, like for-of instead.
    for(var i in args) {
        total += args[i];
    }
    return total;
}

// values, function call
var values = [123,155,134, 205, 105]; 
console.log(calculateTotalSum(...values)); //sums up to 722
5

Generally it's considered good to restrict the number of options we provide to developers - ideally, there should be one, and only one clear way to accomplish something. Often the language gets pretty far from this ideal, sometimes it's not by choice, but that's the ideal to strive for. This is why style guides and linters exist - to limit the number of choices we give to developers so teams can spend less time debating on what style they wish to choose (spaces vs tabs, where to place the "*" in a generator function, Using "..." vs "*" for spread syntax, etc).

If we're adding a second syntax to accomplish spreading, then we're adding another thing for everyone to learn, and another thing for each style guide to decide whether or not they want to use one syntax or another, without any clear benefits.

So, even if today's syntax was something as hideous as function fn(#$% xyz) instead of function fn(...xyz), I'd still prefer keeping the hideous syntax over introducing a second spread syntax that does exactly the same thing.

2 Likes
6
  1. Thanks for clarifying everything
  2. Everything you said is absolutely right
  3. This idea is not good
1 Like
7

Though, thanks for contributing anyways :) - you never know what ideas will lead somewhere and which ideas are duds.

3 Likes
8

What you said makes perfect sense

9

The major objection here is the 1st reason:

  1. This allows you to bring Javascript closer to Python developers.

Why not, "Urge Python developers come closer to Javascript"? :thinking: :face_with_hand_over_mouth: :wink:

1 Like
10

Why is your name "GPT"

11

:thinking: Why yours is "ljharb"? :wink: