Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is it possible to unpack/destructure class attributes into variables?

I’m using P5.js, but the question is applicable to Javascript in general

In p5.js we have a class p5.Vector which is useful to manipulate vectors, since it already implements a variety of methods for vectors (addition, heading, magnitude, rotation…)

Vector components are stored in the x and y attributes, so they are intuitively easy to access

let myVector = createVector(1, 2);
myVector.x;  // returns 1

Now, some functions in P5.js don’t accept vectors, but expect one parameter for x and one parameter for y

For example, drawing a circle:

circle(10, 20, 5);  // draws a circle at position (10, 20) of diameter 5

Now the question:

My functions usually return vectors, and sometimes I want to use this vectors to call native P5.js functions that don’t accept vectors, but individual coordinates.

In this case, I use an auxiliary variable.

let myPosition = calculatePosition();  // calculatePosition returns a vector
circle(myPosition.x, myPosition.y, 5);

Is there a way that I could do that without using an auxiliary variable, and somehow unpack the x and y components so they get passed to the appropriate parameters of circle?

Tags:

2

Answers


  1. 0

    I couldn’t find this option in the documentation, but you can overwrite this behaviour using Symbol.iterator

    p5.Vector.prototype[Symbol.iterator] = function*() {
  yield this.x
  yield this.y
  yield this.z
}

function setup() {
  const v = createVector(1, 2, 3)
  console.log('test', ...v)
}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
    Login or Signup to reply.
  2. 0

    You can do this by creating an auxiliary method, which receives as a parameter the method that will be executed receiving x and y and the other parameters, the vector containing these values for x and y, and Rest parameters for the other parameters.

    The rest parameter syntax allows a function to accept an indefinite
    number of arguments as an array, providing a way to represent variadic
    functions in JavaScript.

    const execMethod = (method, vector, ...arguments) => {
  return method(vector.x, vector.y, ...arguments);
};

const vector = {
  x: 10,
  y: 20
};

const circle = (x, y, z) => {
  console.log(('x=' + x));
  console.log(('y=' + y));
  console.log(('z=' + z));
};

const testOnlyXandY = (x, y) => {
  console.log(('x=' + x));
  console.log(('y=' + y));
  return (x + y);
};

const testWithMoreParams = (x, y, z, n) => {
  console.log(('x=' + x));
  console.log(('y=' + y));
  console.log(('z=' + z));
  console.log(('n=' + n));
  return (x + y + z + n);
};

console.log('circle');
execMethod(circle, vector, 5);
console.log('testOnlyXandY');
execMethod(testOnlyXandY, vector);
console.log('testWithMoreParams');
execMethod(testWithMoreParams, vector, 99, 123);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search