JavaScript30 Series

I started fo­cus­ing much more keenly on ReactJS and JavaScript while I looked for a job. This post is a part of the se­ries ti­tled JavaScript 30’, which be­gan early October 2020.

What I did to­day

  • Followed ReactJS’ tu­to­r­ial from the of­fi­cial web­site to build a Tic-Tac-Toe game.

    I had pre­vi­ously been asked to build this game as an in­ter­view ex­er­cise and it’s eye-open­ing how sim­ple the ap­proach could have been ver­sus the route I had taken in the ex­er­cise. Granted the in­ter­view ex­er­cise in­cluded an ad­di­tional re­quire­ment for the board to be dy­namic, not fixed to 3 by 3.

    I’ll at­tempt the sug­gested ex­er­cises to­mor­row and see how I fare.

    Today, I did see a cou­ple of in­ter­est­ing tricks, though:

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

    There’s noth­ing mag­i­cal about these snip­pets, just some­thing that be­comes sec­ond na­ture the more you use them. 😊

  • Studied briefly this in func­tions vs ar­row func­tions:

    this op­er­a­tor:

    A func­tion’s this key­word be­haves a lit­tle dif­fer­ently in JavaScript com­pared to other lan­guages. It also has some dif­fer­ences be­tween strict mode and non-strict mode.

    In most cases, the value of this is de­ter­mined by how a func­tion is called (runtime bind­ing). It can’t be set by as­sign­ment dur­ing ex­e­cu­tion, and it may be dif­fer­ent each time the func­tion is called. ES5 in­tro­duced the bind() method to set the value of a func­tion’s this re­gard­less of how it’s called, and ES2015 in­tro­duced ar­row func­tions which don’t pro­vide their own this bind­ing (it re­tains the this value of the en­clos­ing lex­i­cal con­text).

    this in Arrow func­tions:

    Arrow func­tions do not de­fault this to the win­dow scope, rather they ex­e­cute in the scope they are cre­ated:

  • While this was tech­ni­cally done yes­ter­day… worked on an ar­ti­cle ex­plain­ing the Singleton de­sign pat­tern; not yet ready for pub­lish­ing.

Resources