jashkenas / jashkenas/backbone

Route parameters and ES6 default parameters

Open
#3,924 4 comments 0 reactions 0 assignees View on GitHub
break change enhancement
Dominant language
JavaScript
Stars
28.1k
Forks
5.3k
PR merge metrics
No merged PRs in 30d

Description

This is an rather small issue with route parameters and ES6 default parameters that I just ran into and thought I would just bring it up (semi-related to #3828 I guess):

Say we have an Router that looks like this:

```
const Router = Backbone.Router.extend({
routes: {
"(:foo)(/)(:bar)": "biz"
}
});

let router = new Router();

router.on("route:init", (foo, bar) => {
console(foo, bar);
});
```

In [backbone.js#L1532](https://github.com/jashkenas/backbone/blob/c20ca2e3f6dc28aba0ff019d269650406a140c73/backbone.js#L1532) the comment above the `_extractParameters` method states:

> // Given a route, and a URL fragment that it matches, return the array of
> // extracted decoded parameters. Empty or unmatched parameters will be
> // treated as `null` to normalize cross-browser behavior.

When navigating to `foo.com`, we get the following output:

```
console.log(foo, bar) // null, null
```

There's nothing wrong with this, but it gets a bit more trickier when [default parameters](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/default_parameters) come in:

Say we want to use some default parameters if none are supplied, in ES5 we would do something like this:

```
router.on("route:init", (foo, bar) => {
foo ? foo : "hamburger";
bar ? bar : "vegan";
console(foo, bar);
});
```

In ES6, one could just use default parameters:

```
router.on("route:init", (foo = "hamburger", bar = "vegan") => {
console(foo, bar); // expected: hamburger, vegan
});
```

However, as MDN states:

> Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.

The output from that is still `null, null` because the passed in values are `null`, rendering default parameters useless.

```
router.on("route:init", (foo = "hamburger", bar = "vegan") => {
console(foo, bar); // null, null
});
```

Solution would be passing no value at all or undefined instead of null, but I am not sure which browsers the comment about cross-browser inconsistencies refers to.
The workarounds are rather trivial (and it might not be the best use-case in general either), so the issue is not that urgent by any means.

Contributor guide

Open the contributing guide

Research direction

Start in backbone.js at the _extractParameters method and review the comment about empty or unmatched parameters being normalized to null, along with the linked route-parameter context. Determine the intended cross-browser behavior for missing values and ES6 defaults; the issue is done when that behavior is decided and the route callback receives the agreed value consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.