What does the following syntax do? =_=>

p5.js Beginners
1

Looking at code from open processing and I come across this piece of code.

C=0
setup=_=>{
  createCanvas(W=720,W,WEBGL)  
  noStroke()
  T=createGraphics(W,W).noStroke()
  texture(T)
}

draw=_=>{
  C+=1e-3
  background(0)
  for(y=0;y<60;y++){
    for(x=0;x<60;x++){
      n=int(noise(mag(x,y)/W,C)*2**24);
      T.fill('#'+hex(n,6)).rect(x*12,y*12,10,10);
    }
  }
  rotateX(C*4)
  rotateY(C*6)
  torus(400,300)
}

What does =_=> do, does it allow for anything new and I’m assuming this has a name of sorts.

Thanks

1 Like
2

This example has it:
https://www.openprocessing.org/sketch/856969

Some discussion here:
https://www.openprocessing.org/sketch/683375/

:)

2 Likes
3

This is an arrow function which is shorthand for a “normal” function. So you can write something like this:

function myFunction(x) {
  console.log(x);
}

as this:

const myFunction = x => { console.log(x) };

So the _ is “just” an unused variable to make it possible to define the setup and draw functions without using “normal” functions.

Arrow functions are most useful when you need to pass a function in as a parameter. In my humble opinion, the syntax you’re seeing just makes the code harder to read, so I would personally just stick with using “normal” functions for setup and draw.

Just because code is shorter, doesn’t mean it’s better. Making your code easier to understand is much more important.

4 Likes
4
  • As you already know by now from others, those are actually 2 operators + 1 parameter.
  • The assignment operator =, followed by a parameter named as _, then the fat arrow (a.K.a. lambda function expression) operator =>:
  • Although JS’ parser is OK w/ just =_=>, by both convention & human-readability’s sake, we should place spaces between them in order to make it clear they’re 3 diff. things: = _ =>.
  • So a line like draw=_=>{ should be retyped in as draw = _ => {.
  • BtW, a parameter named as just _ is another convention for saying it’s gonna be completely ignored inside its function body.
  • It’s taking advantage that JS fat arrow functions w/ exactly 1 parameter parenthesis are optional; so we don’t need to type in like this: draw = (_) => {.
  • Personally I’d drop the _ ignored param “convention” and just type in like this: draw = () => {.
  • Now it clearly states the lambda now is parameterless.
  • But wait, there’s more: your posted sketch example declares none of its variables!
  • If we activate JS Strict Mode by placing 'use strict' as the 1st statement of a JS file, that whole sketch would crumble down:
  • Under Strict Mode all new variables must be declared before their 1st usage!
  • JS got 6 keywords which can be used to declare variables:
    var, let, const, function, class, import.
  • And outta those 6, we can use 4 in order to declare function variable draw:
    1. var draw = () => {
    2. let draw = () => {
    3. const draw = () => {
    4. function draw() {
  • Obviously if we use keyword function, it isn’t a fat arrow compact function anymore.
  • However there’s another “danger” about the choice between regular functions & fat arrow compact functions: the keyword this.
  • While under a regular function the keyword this (if neither call(), apply() nor bind() are in effect) represents whatever object which would have invoked it, fat arrows got its this permanently determined by its immediate context on creation time.
  • So be extra careful which 1 you pick if the keyword this happens to be accessed inside a function body!
  • Such logical errors involving keyword this are very hard to debug later!
3 Likes
5

Can we mark a topic with 2 acceptable solutions?