Home

TIL

Javascript

Destructuring as default parameters

2019-09-24

It's been a good month for destructuring. Building on the previous revelation, you can set parameter defaults with destructuring.

function showConfig({ tabSize = 2, theme = "Nord" } = {}) {
  console.log(`Theme: ${theme}, Tab Size: ${tabSize}`);
}

showConfig({ tabSize: 4, theme: "Monokai" }); // Theme: Monokai, Tab Size: 4
showConfig({ theme: "Monokai" }); // Theme: Monokai, Tab Size: 2
showConfig(); // Theme: Nord, Tab Size: 2

Destructuring as parameters

2019-09-19

I learned today that you can destructure variables as part of a function declaration or as part of a for-of loop:

function getHeight({ height }) {
  return height;
}
getHeight({ width: 10, height: 200, depth: 7 }); // 200

const points = [
  { x: 3, y: 4 },
  { x: 5, y: 5 }
];
for (let { x, y } of points) {
  console.log(`distSq = ${(x ** 2, y ** 2)}`);
}
// distSq = 25
// distSq = 50

Forward Declaration

2019-08-20

Many linters check for functions to exist before they're referenced. With circular calling, you need to declare a function before it's defined. TIL this is called forward declaration.

var bind = function bindForward() {};

function ajax(url) {
  load(url).then(bind);
}

bind = function bind() {
  $("a").click(ajax);
};

Destructuring

2019-08-08

When destructuring, JS only assigns the deepest nested keys:

const req = { query: { person: { first: "Chris", last: "Hallberg" } } };

const {
  query: {
    person: { first, last }
  }
} = req;

console.log(query); // undefined
console.log(person); // undefined
console.log(first); // "Chris"
console.log(last); // "Hallberg"

You can also assign names that don't match the keys you're grabbing. Just be careful with your brackets.

const req = { query: { data: "apples" } };

var { query: data } = req; // rename query to data
console.log(data); // { data: "apples" }

var {
  query: { data }
} = req; // destruct data from query
console.log(data); // apples

Warning: In browsers, name seems to be assigned to "[object Object]" somewhere along the line, so be careful.


WebVR / A-Frame

Oculus Quest Debugging

2019-09-07

I couldn't find any official way to get debugging info from the Oculus Quest since it only connects over Wi-Fi (if at all) and the SteamVR logs don't pick up anything.

So I dropped a text element into the world and used that as my string log. You can put this element inside the camera if you want it to be visible as a UI element, but I didn't do that.

<a-text id="log" value="Hello!" color="#000" align="center" position="0 2 -5"></a-text>
const logEl = document.getElementById("log");
function log(msg) {
  logEl.setAttribute("value", msg);
}

// For updating messages
function debug() {
  requestAnimationFrame(debug);
  log(blueGun.object3D.matrix.toArray().join(","));
}
requestAnimationFrame(debug);

// For everything else
try {
  // do a backflip
} catch (e) {
  log(e);
}

Move the World, Not the Camera

2019-09-07

I have a few game concepts that involve pulling the player along or changing their view but trying to override the default WebVR camera is a pain.

If you do manage to get control of the camera (either with groups or with rigs) you need to then manually ensure you draw both eye "cameras" anyway. It's just more work that it's worth when you can move the whole world instead!

A heirachy like this makes this quite easy to do:

- scene
  - camera
  - world
    - hand controllers
    - all physical items

Thank you, Stefan Judis for the idea and encouragement.