Docs / Everyday

Peek

Add //? to a line, and after the Run, JSpark shows the value of that line beside it.

On this page

See one value
Every passJSpark+
Name what to see
Several names at once
When there is no value
Peek in the Timeline
Good to know

A Peek is a comment that asks for a value. JSpark draws the answer after the comment and never writes it into your Snippet. Peeks are filled on every Run, Run as you type included, in Node Snippets and in web pages.

See one value

End a line with //?. After the Run, the line's value appears beside it.

// A small demo, so there is something to run. Clear it and write your own.

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //? → 53

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

total 53

highest 30

Done in 2ms·Runs as you type

The loop ran four times; 53 is the value from the last pass.

When a line runs more than once, the value shown is the last one. Hover the value to open it, as the console opens a printed object.

Every pass JSpark+

In JSpark+, the hover also lists the value from each pass, in order, and how many times the line ran. For a line that ran many times, it lists the first few and the last few:0, 1, 2 … 97, 98, 99 (×100). In JSpark, the hover shows the last value, and says that every pass needs JSpark+.

// A small demo, so there is something to run. Clear it and write your own.

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //? → 53

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

total 53

highest 30

Done in 2ms·Runs as you type

Hovering → 53 lists every pass: 12, 19, 49, 53, four in all.

Name what to see

Write //? and a name on a line of its own to see that name's value at that point: //? prices. Put the same Peek before and after a line to see what the line changed.

const prices = [40, 100, 1, 5, 25]

1⌄const prices = [40, 100, 1, 5, 25]

2⌄//? prices → [40, 100, 1, 5, 25]

3⌄const sorted = prices.sort()

4⌄//? prices → [1, 100, 25, 40, 5]

5⌄

6⌄console.log(sorted === prices)

true

Done in 2ms·Runs as you type

sort() changed the array itself, and sorted the numbers as text.

A Peek takes a name or a property path, such as //? user.name, never an expression, so it can't change what your code does. To see an expression, write it as code and end the line with //?.

Several names at once

A block comment that starts with /*? takes one name on each line.

1⌄const user = { name: "Ada", tags: ["admin"] }

2⌄const copy = { ...user }

3⌄

4⌄copy.name = "Grace"

5⌄copy.tags.push("editor")

6⌄

7⌄/*?

8⌄user.name → "Ada"

9⌄user.tags → ["admin", "editor"]

10⌄copy.tags → ["admin", "editor"]

11⌄*/

The spread copied name, but both objects share one tags array.

When there is no value

A Peek always says something, in lighter slanted text when it isn't a value:

not reached: The Run never got to the line.
not reached yet: It still may: a page keeps running, and in the Timeline a later Step may reach it.
not reached before stop: The Run was stopped, or ran out of time, first.
not set yet: The name exists but has no value yet, like a let read before its line.
user.address is undefined: The path stopped early: there was nothing to read the next name from.

1⌄const orders = []

2⌄

3⌄for (const order of orders) {

4⌄ order.total //? → not reached

5⌄}

6⌄

7⌄console.log("orders", orders.length)

The loop body never ran, so the Peek says not reached.

Peek in the Timeline

In the Timeline, a Peek shows its value at the Step on screen, so it changes as you move through the Steps.

Timeline · Esc to exit

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //?

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

Console

total 53

highest 30

Variables

Nothing in scope

1 / 10

Step by Step, the Peek shows 12, 19 and 49, and not reached yet before the loop.

Good to know

Peek values aren't saved with the Snippet. After you close the tab, the next Run brings them back.
Copying code copies the comment, not the value.
A value longer than 60 characters is cut short. Hover it to see all of it.

The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.

Peek

See one value

Every pass JSpark+

Name what to see

Several names at once

When there is no value

Peek in the Timeline

Good to know

Related