How to return a function inside of a function? (like p5.js createVector)

Question

function createVector(_x, _y, _z) {
 if (_x == undefined) {
  _x = 0;
 }

 if (_y == undefined) {
  _y = 0;
 }

 if (_z == undefined) {
  _z = 0;
 }

 function add(_addX, _addY, _addZ) {
  numX += _addX;
  numY += _addY;
  numZ += _addZ;
 }

 let numX = _x;
 let numY = _y;
 let numZ = _z;

 return {
  x: numX,
  y: numY,
  z: numZ,
  add()
 };
}

so far im getting an error that says Unexpected token '}' im really trying to just get a recreation of the p5.js createvector() method as I am creating my own library for personal use. Any help would be much appreciated - Jack

Does this answer your question? [Functions that return a function](https://stackoverflow.com/questions/7629891/functions-that-return-a-function) — GrafiCode, May 20 '21 at 23:43
Note that if running in an ES6 environment you can set default argument values as `function createVector(_x=0, _y=0, _z=0) {}` — charlietfl, May 20 '21 at 23:51

score 0 · Answer 1 · answered May 20 '21 at 23:52

0

There is a difference between passing a function and invoking a function. This should give you what you want:

 return {
   x: numX,
   y: numY,
   z: numZ,
   add
 };

Or more explicitly:

 return {
   x: numX,
   y: numY,
   z: numZ,
   add: add
 };

And to invoke this method, you might do something like this:

const myVector = createVector(5,7,9);
const resultOfAddition = myVector.add(1,2,3);

You could even dereference, if you don't need the intermediary value:

const myVectorAddition = createVector(5,7,9).add(1,2,3);

answered May 20 '21 at 23:52

code_monk

9,451
2
42
41

Now Im not getting an error but after I console.log() myVector it still says '{x: 5, y: 7, z: 9, add: ƒ}' – JacksEnd May 21 '21 at 00:12
```return { x: numX, y: numY, z: numZ }; ``` I tried this and it kinda works but it still doesnt chagne the original values – JacksEnd May 21 '21 at 00:32

score 0 · Answer 2 · answered May 21 '21 at 00:12

0

just replace your

return {
    x: numX,
    y: numY,
    z: numZ,
    add()
}; 

to

return {
    x: numX,
    y: numY,
    z: numZ,
    add,
};

answered May 21 '21 at 00:12

Saleh Majeed

19
1
4

The values dont change they stay the original – JacksEnd May 21 '21 at 00:24
Maybe this answer is right, but could you extend the example code written in the question to help. – chrwahl May 21 '21 at 12:35
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – mufazmi May 21 '21 at 18:22

Dan Mullin · Accepted Answer · 2021-05-21T00:49:42.523

Since you are trying to emulate a constructor pattern, make the following adjustments to follow the pattern.

The purpose of adding the add function to the prototype is that if you add it to the createVector object like you have now, every new instance of createVector will have its own instance of that function as well. Adding it to the prototype ensures that only one copy of the function exists.

function createVector(_x, _y, _z) {
  if (_x == undefined) {
    _x = 0;
  }

  if (_y == undefined) {
    _y = 0;
  }

  if (_z == undefined) {
    _z = 0;
  }
  this.x = _x;
  this.y = _y;
  this.z = _z;
}

createVector.prototype.add = function(x, y, z) {
    this.x += x;
    this.y += y;
    this.z += z;
}

var vec = new createVector(1, 2, 3);
console.log(vec);
vec.add(2, 3, 4);
console.log(vec);

You could even create an add function that takes another vector as an argument:

function createVector(_x, _y, _z) {
  if (_x == undefined) {_x = 0;}
  if (_y == undefined) {_y = 0;}
  if (_z == undefined) {_z = 0;}
  this.x = _x;
  this.y = _y;
  this.z = _z;
}

createVector.prototype.add = function(vec) {
  this.x += vec.x;
  this.y += vec.y;
  this.z += vec.z;
}

var vec1 = new createVector(1, 2, 3);
var vec2 = new createVector(2, 3, 4);

console.log(vec1);

vec1.add(vec2);
console.log(vec1)

How to return a function inside of a function? (like p5.js createVector)

3 Answers3