• Stars
    star
    523
  • Rank 84,684 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 6 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Slice notation

This repository contains a proposal for adding slice notation syntax to JavaScript. This is currently at stage 1 of the TC39 process.

Champions:

  • Sathya Gunasekaran (@gsathya)
  • HE Shi-Jun (@hax)

Introduction

The slice notation provides an ergonomic alternative to the various slice methods present on Array.prototype, TypedArray.prototype, etc.

const arr = ['a', 'b', 'c', 'd'];

arr[1:3];
// β†’ ['b', 'c']

arr.slice(1, 3);
// β†’ ['b', 'c']

This notation can be used for slice operations on primitives like Array and TypedArray.

Motivation

const arr = ['a', 'b', 'c', 'd'];
arr.slice(3);
// β†’ ['a', 'b', 'c'] or ['d'] ?

In the above example, it's not immediately clear if the newly created array is a slice from the range 0 to 3 or from 3 to len(arr).

const arr = ['a', 'b', 'c', 'd'];
arr.slice(1, 3);
// β†’ ['b', 'c'] or ['b', 'c', 'd'] ?

Adding a second argument is also ambiguous since it's not clear if the second argument specifies an upper bound or the length of the new slice.

Programming language like Ruby and C++ take the length of the new slice as the second argument, but JavaScript's slice methods take the upper bound as the second argument.

const arr = ['a', 'b', 'c', 'd'];
arr[3:];
// β†’ ['d']

arr[1:3];
// β†’ ['b', 'c']

With the new slice syntax, it's immediately clear that the lower bound is 3 and the upper bound is len(arr). It makes the intent explicit.

The syntax is also much shorter and more ergonomic than a function call.

Examples

In the following text, 'length of the object' refers to the length property of the object.

Default values

The lower bound and upper bound are optional.

The default value for the lower bound is 0.

const arr = ['a', 'b', 'c', 'd'];

arr[:3];
// β†’ ['a', 'b', 'c']

The default value for the upper bound is the length of the object.

const arr = ['a', 'b', 'c', 'd'];
arr[1:];
// β†’ ['b', 'c', 'd']

Omitting all lower bound and upper bound value, produces a new copy of the object.

const arr = ['a', 'b', 'c', 'd'];

arr[:];
// β†’ ['a', 'b', 'c', 'd']

Negative indices

If the lower bound is negative, then the start index is computed as follows:

start = max(lowerBound + len, 0)

where len is the length of the object.

const arr = ['a', 'b', 'c', 'd'];

arr[-2:];
// β†’ ['c', 'd']

In the above example, start = max((-2 + 4), 0) = max(2, 0) = 2.

const arr = ['a', 'b', 'c', 'd'];

arr[-10:];
// β†’ ['a', 'b', 'c', 'd']

In the above example, start = max((-10 + 4), 0) = max(-6, 0) = 0.

Similarly, if the upper bound is negative, the end index is computed as follows:

end = max(upperBound + len, 0)
const arr = ['a', 'b', 'c', 'd'];

arr[:-2];
// β†’ ['a', 'b']

arr[:-10];
// β†’ []

These semantics exactly match the behavior of existing slice operations.

Out of bounds indices

Both the lower and upper bounds are capped at the length of the object.

const arr = ['a', 'b', 'c', 'd'];

arr[100:];
// β†’ []

arr[:100];
// β†’ ['a', 'b', 'c', 'd']

These semantics exactly match the behavior of existing slice operations.

Prior art

Python

This proposal is highly inspired by Python. Unsurprisingly, the Python syntax for slice notation is strikingly similar:

slicing      ::=  primary "[" slice_list "]"
slice_list   ::=  slice_item ("," slice_item)* [","]
slice_item   ::=  expression | proper_slice
proper_slice ::=  [lower_bound] ":" [upper_bound] [ ":" [stride] ]
lower_bound  ::=  expression
upper_bound  ::=  expression
stride       ::=  expression

Examples:

arr = [1, 2, 3, 4];

arr[1:3];
// β†’ [2, 3]

arr[1:4:2]
// β†’ [2, 4]

CoffeeScript

CoffeeScript provides a Range operator that is inclusive with respect to the upper bound.

arr = [1, 2, 3, 4];
arr[1..3];
// β†’ [2, 3, 4]

CoffeeScript also provides another form the Range operator that is exclusive with respect to the upper bound.

arr = [1, 2, 3, 4];
arr[1...3];
// β†’ [2, 3]

Go

Go offers slices:

arr := []int{1,2,3,4};
arr[1:3]
// β†’ [2, 3]

There is also ability to not provide lower or upper bound:

arr := []int{1,2,3,4};
arr[1:]
// β†’ [2, 3, 4]

arr := []int{1,2,3,4};
arr[:3]
// β†’ [1, 2, 3]

Ruby

Ruby seems to have two different ways to get a slice:

  • Using a Range:
arr = [1, 2, 3, 4];
arr[1..3];
// β†’ [2, 3, 4]

This is similar to CoffeeScript. The 1..3 produces a Range object which defines the set of indices to be sliced out.

  • Using the comma operator:
arr = [1, 2, 3, 4];
arr[1, 3];
// β†’ [2, 3, 4]

The difference here is that the second argument is actually the length of the new slice, not the upper bound index.

This is currently valid ECMAScript syntax which makes this a non starter.

const s = 'foobar'
s[1, 3]
// β†’ 'b'

FAQ

Why pick the Python syntax over the Ruby/CoffeeScript syntax?

The Python syntax which excludes the upper bound index is similar to the existing slice methods in JavaScript.

We could use exclusive Range operator (...) from CoffeeScript, but that doesn't quite work for all cases because it's ambiguous with the spread syntax. Example code from getify:

Object.defineProperty(Number.prototype,Symbol.iterator,{
  *value({ start = 0, step = 1 } = {}) {
     var inc = this > 0 ? step : -step;
     for (let i = start; Math.abs(i) <= Math.abs(this); i += inc) {
        yield i;
     }
  },
  enumerable: false,
  writable: true,
  configurable: true
});

const range = [ ...8 ];
// β†’ [0, 1, 2, 3, 4, 5, 6, 7, 8]

Why does this not use the iterator protocol?

The iterator protocol isn't restricted to index lookup making it incompatible with this slice notation which works only on indices.

For example, Map and Sets have iterators but we shouldn't be able to slice them as they don't have indices.

What about splice?

CoffeeScript allows similar syntax to be used on the left hand side of an AssignmentExpression leading to splice operation.

numbers = [1, 2, 3, 4]
numbers[2..4] = [7, 8]
// β†’ [1, 2, 7, 8]

This feature is currently omitted to limit the scope of the proposal, but can be incorporated in a follow on proposal.

Why doesn't this include a step argument like Python does?

The step argument makes the slice notation ambiguous with the bind operator.

const x = [2];
const arr = [1, 2, 3, 4];
arr[::x[0]];

Is the above creating a new array with values [1, 3] or is it creating a bound method?

Should this create a view over the array, instead of a creating new array?

Go creates a slice over the underlying array, instead of allocating a new array.

arr := []int{1,2,3,4};
v = arr[1:3];
// β†’ [2, 3]

Here, v is just descriptor that holds a reference to the original array arr. No new array allocation is performed. See this blog post for more details.

This doesn't map to any existing construct in JavaScript and this would be a step away from how methods work in JavaScript. To make this syntax work well within the JavaScript model, such a view data structure is not included in this proposal.

Should slice notation work on strings?

The String.prototype.slice method doesn't work well with unicode characters. This blog post by Mathias Bynens, explains the problem.

Given that the existing method doesn't work well, this proposal does not add @@slice to String.prototype.

How about combining this with + for append?

const arr = [1, 2, 3, 4] + [5, 6];
// β†’ [1, 2, 3, 4, 5, 6]

This is not included in order to keep the proposal's scope maximally minimal.

The operator overloading proposal may be a better fit for this.

Can you create a Range object using this syntax?

The slice notation only provides an ergonomic syntax for performing a slice operation.

The current slice notation doesn't preclude creating a range primitive in the future.

A new Range primitive is being discussed here: tc39/proposal-iterator.range#22

Isn't it confusing that this isn't doing property lookup?

This is actually doing a property lookup using [[Get]] on the underlying object. For example,

const arr = [1, 2, 3, 4];

arr[1:3];
// β†’ [2, 3]

This is doing a property lookup for the keys 1 and 2.

But, shouldn't it do a lookup for the string '1:3'?

const arr = [1, 2, 3, 4];

arr['1:3'];
// β†’ undefined

No. The slice notation makes it analogous with how keyed lookup works. The key is first evaluated to a value and then the lookup happens using this value.

const arr = [1, 2, 3, 4];
const x = 0;

arr[x] !== arr['x'];
// β†’ true

The slice notation works similarly. The notation is first evaluated to a range of values and then each of the values are looked up.

There are already many modes where ':' mean different things. Isn't this confusing?

Depending on context a:b, can mean:

  • LabelledStatement with a as the label
  • Property a with value b in an object literal: {a: b }
  • ConditionalExpression: confused ? a : b
  • Potential type systems (like TypeScript and Flow) that might make it to JavaScript in the future.

Is it a lot of overhead to disambiguate between modes with context? Major mainstream programming languages like Python have all these modes and are being used as a primary tool for teaching programming.

More Repositories

1

proposals

Tracking ECMAScript Proposals
17,177
star
2

ecma262

Status, process, and documents for ECMA-262
HTML
14,437
star
3

proposal-pipeline-operator

A proposal for adding a useful pipe operator to JavaScript.
HTML
7,534
star
4

proposal-pattern-matching

Pattern matching syntax for ECMAScript
HTML
5,498
star
5

proposal-optional-chaining

HTML
4,942
star
6

proposal-type-annotations

ECMAScript proposal for type syntax that is erased - Stage 1
JavaScript
4,252
star
7

proposal-signals

A proposal to add signals to JavaScript.
3,387
star
8

proposal-temporal

Provides standard objects and functions for working with dates and times.
HTML
3,321
star
9

proposal-observable

Observables for ECMAScript
JavaScript
3,058
star
10

proposal-decorators

Decorators for ES6 classes
2,640
star
11

proposal-record-tuple

ECMAScript proposal for the Record and Tuple value types. | Stage 2: it will change!
HTML
2,496
star
12

test262

Official ECMAScript Conformance Test Suite
JavaScript
2,073
star
13

proposal-dynamic-import

import() proposal for JavaScript
HTML
1,863
star
14

proposal-bind-operator

This-Binding Syntax for ECMAScript
1,742
star
15

proposal-class-fields

Orthogonally-informed combination of public and private fields proposals
HTML
1,722
star
16

proposal-async-await

Async/await for ECMAScript
HTML
1,578
star
17

proposal-object-rest-spread

Rest/Spread Properties for ECMAScript
HTML
1,493
star
18

proposal-shadowrealm

ECMAScript Proposal, specs, and reference implementation for Realms
HTML
1,429
star
19

proposal-iterator-helpers

Methods for working with iterators in ECMAScript
HTML
1,307
star
20

proposal-nullish-coalescing

Nullish coalescing proposal x ?? y
HTML
1,232
star
21

proposal-top-level-await

top-level `await` proposal for ECMAScript (stage 4)
HTML
1,083
star
22

proposal-partial-application

Proposal to add partial application to ECMAScript
HTML
1,002
star
23

proposal-do-expressions

Proposal for `do` expressions
HTML
990
star
24

proposal-binary-ast

Binary AST proposal for ECMAScript
961
star
25

agendas

TC39 meeting agendas
JavaScript
952
star
26

proposal-built-in-modules

HTML
891
star
27

proposal-async-iteration

Asynchronous iteration for JavaScript
HTML
857
star
28

proposal-explicit-resource-management

ECMAScript Explicit Resource Management
JavaScript
746
star
29

proposal-set-methods

Proposal for new Set methods in JS
HTML
655
star
30

proposal-string-dedent

TC39 Proposal to remove common leading indentation from multiline template strings
HTML
614
star
31

proposal-operator-overloading

JavaScript
610
star
32

proposal-import-attributes

Proposal for syntax to import ES modules with assertions
HTML
591
star
33

proposal-async-context

Async Context for JavaScript
HTML
587
star
34

proposal-bigint

Arbitrary precision integers in JavaScript
HTML
561
star
35

ecmascript_simd

SIMD numeric type for EcmaScript
JavaScript
540
star
36

ecma402

Status, process, and documents for ECMA 402
HTML
529
star
37

proposal-change-array-by-copy

Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change.
HTML
511
star
38

notes

TC39 meeting notes
JavaScript
496
star
39

proposal-class-public-fields

Stage 2 proposal for public class fields in ECMAScript
HTML
489
star
40

proposal-iterator.range

A proposal for ECMAScript to add a built-in Iterator.range()
HTML
483
star
41

proposal-decimal

Built-in exact decimal numbers for JavaScript
HTML
477
star
42

proposal-uuid

UUID proposal for ECMAScript (Stage 1)
JavaScript
463
star
43

proposal-module-expressions

HTML
433
star
44

proposal-throw-expressions

Proposal for ECMAScript 'throw' expressions
JavaScript
425
star
45

proposal-UnambiguousJavaScriptGrammar

413
star
46

proposal-weakrefs

WeakRefs
HTML
409
star
47

proposal-array-grouping

A proposal to make grouping of array items easier
HTML
407
star
48

proposal-error-cause

TC39 proposal for accumulating errors
HTML
380
star
49

proposal-cancelable-promises

Former home of the now-withdrawn cancelable promises proposal for JavaScript
Shell
376
star
50

proposal-ecmascript-sharedmem

Shared memory and atomics for ECMAscript
HTML
374
star
51

proposal-module-declarations

JavaScript Module Declarations
HTML
369
star
52

proposal-first-class-protocols

a proposal to bring protocol-based interfaces to ECMAScript users
352
star
53

proposal-relative-indexing-method

A TC39 proposal to add an .at() method to all the basic indexable classes (Array, String, TypedArray)
HTML
351
star
54

proposal-global

ECMAScript Proposal, specs, and reference implementation for `global`
HTML
346
star
55

proposal-private-methods

Private methods and getter/setters for ES6 classes
HTML
345
star
56

proposal-numeric-separator

A proposal to add numeric literal separators in JavaScript.
HTML
330
star
57

proposal-private-fields

A Private Fields Proposal for ECMAScript
HTML
319
star
58

tc39.github.io

Get involved in specifying JavaScript
HTML
318
star
59

proposal-object-from-entries

TC39 proposal for Object.fromEntries
HTML
318
star
60

proposal-promise-allSettled

ECMAScript Proposal, specs, and reference implementation for Promise.allSettled
HTML
314
star
61

proposal-await.ops

Introduce await.all / await.race / await.allSettled / await.any to simplify the usage of Promises
HTML
310
star
62

proposal-regex-escaping

Proposal for investigating RegExp escaping for the ECMAScript standard
JavaScript
309
star
63

proposal-export-default-from

Proposal to add `export v from "mod";` to ECMAScript.
HTML
306
star
64

proposal-logical-assignment

A proposal to combine Logical Operators and Assignment Expressions
HTML
302
star
65

proposal-promise-finally

ECMAScript Proposal, specs, and reference implementation for Promise.prototype.finally
HTML
279
star
66

proposal-json-modules

Proposal to import JSON files as modules
HTML
272
star
67

proposal-asset-references

Proposal to ECMAScript to add first-class location references relative to a module
270
star
68

proposal-cancellation

Proposal for a Cancellation API for ECMAScript
HTML
267
star
69

proposal-promise-with-resolvers

HTML
255
star
70

proposal-string-replaceall

ECMAScript proposal: String.prototype.replaceAll
HTML
253
star
71

proposal-export-ns-from

Proposal to add `export * as ns from "mod";` to ECMAScript.
HTML
242
star
72

proposal-structs

JavaScript Structs: Fixed Layout Objects
230
star
73

proposal-ses

Draft proposal for SES (Secure EcmaScript)
HTML
223
star
74

proposal-intl-relative-time

`Intl.RelativeTimeFormat` specification [draft]
HTML
215
star
75

proposal-json-parse-with-source

Proposal for extending JSON.parse to expose input source text.
HTML
214
star
76

proposal-flatMap

proposal for flatten and flatMap on arrays
HTML
214
star
77

proposal-defer-import-eval

A proposal for introducing a way to defer evaluate of a module
HTML
208
star
78

ecmarkup

An HTML superset/Markdown subset source format for ECMAScript and related specifications
TypeScript
201
star
79

proposal-promise-any

ECMAScript proposal: Promise.any
HTML
200
star
80

proposal-optional-chaining-assignment

`a?.b = c` proposal
186
star
81

proposal-decorators-previous

Decorators for ECMAScript
HTML
184
star
82

proposal-smart-pipelines

Old archived draft proposal for smart pipelines. Go to the new Hack-pipes proposal at js-choi/proposal-hack-pipes.
HTML
181
star
83

proposal-array-from-async

Draft specification for a proposed Array.fromAsync method in JavaScript.
HTML
178
star
84

proposal-upsert

ECMAScript Proposal, specs, and reference implementation for Map.prototype.upsert
HTML
176
star
85

proposal-collection-methods

HTML
171
star
86

proposal-array-filtering

A proposal to make filtering arrays easier
HTML
171
star
87

proposal-ptc-syntax

Discussion and specification for an explicit syntactic opt-in for Tail Calls.
HTML
169
star
88

proposal-extractors

Extractors for ECMAScript
JavaScript
166
star
89

proposal-error-stacks

ECMAScript Proposal, specs, and reference implementation for Error.prototype.stack / System.getStack
HTML
166
star
90

proposal-intl-duration-format

164
star
91

how-we-work

Documentation of how TC39 operates and how to participate
161
star
92

proposal-Array.prototype.includes

Spec, tests, reference implementation, and docs for ESnext-track Array.prototype.includes
HTML
157
star
93

proposal-promise-try

ECMAScript Proposal, specs, and reference implementation for Promise.try
HTML
154
star
94

proposal-extensions

Extensions proposal for ECMAScript
HTML
150
star
95

proposal-hashbang

#! for JS
HTML
148
star
96

proposal-import-meta

import.meta proposal for JavaScript
HTML
146
star
97

proposal-intl-segmenter

Unicode text segmentation for ECMAScript
HTML
146
star
98

proposal-resizablearraybuffer

Proposal for resizable array buffers
HTML
145
star
99

proposal-seeded-random

Proposal for an options argument to be added to JS's Math.random() function, and some options to start it with.
HTML
143
star
100

eshost

A uniform wrapper around a multitude of ECMAScript hosts. CLI: https://github.com/bterlson/eshost-cli
JavaScript
142
star