javascript-refactor-arrow-func

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(function(n) {
4    return n * 2;
5});
6
7const evens = numbers.filter(function(n) {
8    return n % 2 === 0;
9});
10
11console.log(doubled, evens);
12

After1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(n => n * 2);
4
5const evens = numbers.filter(n => n % 2 === 0);
6
7console.log(doubled, evens);
8

Before1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(function(n) {
4    return n * 2;
5});
6
7const evens = numbers.filter(function(n) {
8    return n % 2 === 0;
9});
10
11console.log(doubled, evens);
12

After1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(n => n * 2);
4
5const evens = numbers.filter(n => n % 2 === 0);
6
7console.log(doubled, evens);
8

Before1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(function(n) {
4    return n * 2;
5});
6
7const evens = numbers.filter(function(n) {
8    return n % 2 === 0;
9});
10
11console.log(doubled, evens);
12

After1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(n => n * 2);
4
5const evens = numbers.filter(n => n % 2 === 0);
6
7console.log(doubled, evens);
8

Before

program

lexical_declaration

const "const"

variable_declarator

identifier "numbers"

= "="

array

[ "["

number "1"

, ","

number "2"

, ","

number "3"

, ","

number "4"

, ","

number "5"

] "]"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "doubled"

= "="

call_expression

member_expression

identifier "numbers"

. "."

property_identifier "map"

arguments

( "("

function_expression

function "function"

formal_parameters

( "("

identifier "n"

) ")"

statement_block

{ "{"

return_statement

return "return"

binary_expression

identifier "n"

* "*"

number "2"

; ";"

} "}"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "evens"

= "="

call_expression

member_expression

identifier "numbers"

. "."

property_identifier "filter"

arguments

( "("

function_expression

function "function"

formal_parameters

( "("

identifier "n"

) ")"

statement_block

{ "{"

return_statement

return "return"

binary_expression

identifier "n"

% "%"

number "2"

=== "==="

number "0"

; ";"

} "}"

) ")"

; ";"

expression_statement

call_expression

member_expression

identifier "console"

. "."

property_identifier "log"

arguments

( "("

identifier "doubled"

, ","

identifier "evens"

) ")"

; ";"

After

program

lexical_declaration

const "const"

variable_declarator

identifier "numbers"

= "="

array

[ "["

number "1"

, ","

number "2"

, ","

number "3"

, ","

number "4"

, ","

number "5"

] "]"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "doubled"

= "="

call_expression

member_expression

identifier "numbers"

. "."

property_identifier "map"

arguments

( "("

arrow_function

identifier "n"

=> "=>"

binary_expression

identifier "n"

* "*"

number "2"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "evens"

= "="

call_expression

member_expression

identifier "numbers"

. "."

property_identifier "filter"

arguments

( "("

arrow_function

identifier "n"

=> "=>"

binary_expression

identifier "n"

% "%"

number "2"

=== "==="

number "0"

) ")"

; ";"

expression_statement

call_expression

member_expression

identifier "console"

. "."

property_identifier "log"

arguments

( "("

identifier "doubled"

, ","

identifier "evens"

) ")"

; ";"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help