What I did today

ReactJS: Tic-Tac-Toe.

Followed ReactJS’ tutorial from the official website to build a Tic-Tac-Toe game.

I had previously been asked to build this game as an interview exercise and it’s eye-opening how simple the approach could have been versus the route I had taken in the exercise. Granted the interview exercise included an additional requirement for the board to be dynamic, not fixed to 3 by 3.

I’ll attempt the suggested exercises tomorrow and see how I fare.

Today, I did see a couple of interesting tricks, though:

• Create an array of N length with each value preset to a known value: Array(9).fill(null)
• Cloning an array: exampleArray.slice()
• Adding to an array: exampleArray.concat([{ foo: "bar" }]) (versus what I’ve been using: newArray = [...exampleArray, { foo: "bar" }])

There’s nothing magical about these snippets, just something that becomes second nature the more you use them. 😊

JavaScript: this

Studied briefly this in functions vs arrow functions:

this operator:

A function’s this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.In most cases, the value of this is determined by how a function is called (runtime binding). It can’t be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function’s this regardless of how it’s called, and ES2015 introduced arrow functions which don’t provide their own this binding (it retains the this value of the enclosing lexical context).

this in Arrow functions:

Arrow functions do not default this to the window scope, rather they execute in the scope they are created:

New article

While this was technically done yesterday… worked on an article explaining the Singleton design pattern; not yet ready for publishing.

Resources

• To Mutate, Or Not To Mutate? JavaScript Array Methods Cheat Sheet
  I chanced upon Annie’s DEV.to blog while wondering if there’s a trick to remembering which Array methods mutate the original array, and which ones don’t.