Javascript bind weird bug while using two parameters-CodePudding

Consider following example

export default function App() {
  const newFunction = (valueOne, valueTwo) => {
    console.log('valueOne:', valueOne, 'valueTwo:', valueTwo)
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={newFunction.bind(this, 1)}> Bind (single param) </button>
      <br />
      <button onClick={newFunction.bind(this, 1, 2)}>Bind (two params) </button>
    </div>
  );
}

Here this React app is having onClick event where newFunction is called on every click of the button element. To pass the parameter .bind() has been used.

Whenever passing two parameters for the newFunction, the output is printing in console as expected. ex: newFunction.bind(this, 1, 2) outputs to => valueOne: 1 valueTwo: 2

Question: However while passing single parameter newFunction.bind(this, 1) the output was wierd as below,

valueOne: 1
valueTwo: SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: PointerEvent, target: HTMLButtonElement…}
_reactName: "onClick"
_targetInst: null
type: "click"
nativeEvent: PointerEvent
target: 
<button> Bind (single param) </button>
currentTarget: null
eventPhase: 3
bubbles: true
cancelable: true
timeStamp: 12358.5
defaultPrevented: false
isTrusted: true
view: Window
detail: 1
screenX: 2017
screenY: 328
clientX: 571
clientY: 97
pageX: 571
pageY: 97
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
getModifierState: ƒ modifierStateGetter() {}
button: 0
buttons: 0
relatedTarget: null
movementX: 0
movementY: 0
isDefaultPrevented: ƒ functionThatReturnsFalse() {}
isPropagationStopped: ƒ functionThatReturnsFalse() {}
preventDefault: ƒ preventDefault() {}
stopPropagation: ƒ stopPropagation() {}
persist: ƒ persist() {}
isPersistent: ƒ functionThatReturnsTrue() {}
<constructor>: "SyntheticBaseEvent"

Expected output for newFunction.bind(this, 1) should be valueOne: 1 valueTwo: undefined as the second parameter is not present. Instead it's behaving in a different way.

Codesandbox URL: https://v12ek.csb.app/ (Go to console tab in developer tools to see the output)

CodePudding user response：

the problem here is that if you bind just one argument the second one is the click event

const newFunction = (valueOne, valueTwo) => {
    console.log('valueOne:', valueOne, 'valueTwo:', valueTwo)
  };
  
  const fakeEvent = {event: 'click'}
  
 newFunction.bind(this, 1, 2)(fakeEvent) //this works
 
 newFunction.bind(this, 1)(fakeEvent)
 
 newFunction.bind(this, 1, undefined)(fakeEvent) //this works

CodePudding user response：

It's not a bug.

Considering newFunction.bind(this, 1, 2),

the arguments that are passed with bind (1, 2) and the arguments that are passed when invoking the returned function (newFunction.bind(this, 1, 2) returns a function that gets called with the 'click' event when the button gets clicked) are combined and passed to newFunction.

You're not seeing the event in the case of newFunction.bind(this, 1, 2) because newFunction only takes two arguments. If it is modified to take another, you can see the event in this case too.

const newFunction = (valueOne, valueTwo, valueThree) => {
    console.log(valueOne, valueTwo, valueThree); // valueThree will be the event
};