How do I assign a variable to an array in p5*js?

Question

Here is my code:

var icons = [0]
var iconsx = [10]
var iconsy = [10]
var jog = 0
var iconxbuffer
var iconybuffer

function setup() {
  createCanvas(650, 500);
   }

function draw() {
  background(255,199,248);
  
  fill(255,248,184);
  
  rect(175, 435, 300, 55, 45);
  fill(255,38,241)
  
  if (mouseIsPressed === true){

  rect(winMouseX, winMouseY, 45, 55)
  let iconsx[0] = winMouseX}
  
  else{let iconxbuffer = iconsx[0]; let iconybuffer = iconsy[0]
    rect(iconxbuffer, iconybuffer, 45, 55)}
   console.log (iconsx)
  }
   

On line 23 I attempt to assign winMouseX to iconsx[0], but when I run this code, I get the error:

 p5.js says: 
Syntax Error - Symbol present at a place that wasn't expected.
Usually this is due to a typo. Check the line number in the error for anything missing/extra.

+ More info: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong 

I believe I understand the logic here because I am assigning iconsx[0] to the last location of the mouse when the mouse button was being held down in order to print the rectangle to this coordinate even after releasing the mouse button. There must be some weird p5*js syntax I am not understanding because I am not very familiar with JavaScript.

I have already tried leaving out the bracket in hopes js would default to the first value in the array, but it didn't work instead there was no change to the variable. I had a similar problem earlier in the development process were on line 26 I was trying to print the rectangle to iconsx[0] and iconsy[0]. When I ran this code, I got a similar error in which JavaScript said there was a syntax error relating to the use of "[" after the variable name. To counter this I mad the variables iconxbuffer and iconybuffer and then before printing the rectangle made iconxbuffer and iconybuffer equal iconsx[0] and iconsy[0] then made js print the rectangle print to iconxbuffer and iconybuffer instead which at that point equaled the first variables I was trying to print to. But I don't believe this would not function as a viable solution to my new problem because I am trying to assign a value to a variable not read from a preexisting variable.

Answer 1

Ok, so there are a few problems here. First thing is that your code is extremely messy and is not indented correctly.

All your variables at the top have already been defined, so you get an error when you try to define them again. eg:

var x = 0;//remember a semicolon at the end of a line of code
var y = 1;

var x = y;//incorrect
var x = y;//incorrect
x=y;//correct

Here is what your code should look like.

var icons = [0];
var iconsx = [10];
var iconsy = [10];
var jog = 0;
var iconxbuffer;
var iconybuffer;

function setup() {
  createCanvas(650, 500);
}

function draw() {
  background(255,199,248);
  
  fill(255,248,184);
  
  rect(175, 435, 300, 55, 45);
  fill(255,38,241)
  
  if (mouseIsPressed === true){
     rect(winMouseX, winMouseY, 45, 55)
     //Also, what is winMouseX? Did you mean mouseX?

     //don't put let or var next to a variable already defined
     iconsx[0] = winMouseX
  }
  
  else{
     iconxbuffer = iconsx[0];
     iconybuffer = iconsy[0]
     rect(iconxbuffer, iconybuffer, 45, 55)}
     console.log (iconsx)
  }
}

//This should not return error. If it does and it says winMouseX not defined than replace it with mouseX and mouseY and it should work