Given the below JSBIN why A is undefined?
https://jsbin.com/bisomevivu/edit?html,js,console,output
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input data-custom="CUST" data-standard="STD" id="input">
<button id="button">Test</test>
</body>
</html>
JS:
const [button, input] = ["button", "input"].map(id=> document.getElementById(id));
button.addEventListener("click", ()=>{
const {dataset: {custom}, ...props} = input;
const {value: A} = props;
const {dataset: {standard}, value: B} = input;
console.info(`A: '${A}' - B: '${B}'`);
});
The regular destructuring works, the rest one doesn’t