The Command Line
Published in

The Command Line

Eloquent Exercises: Vector Type | Eloquent Javascript, Chapter 6

Cool digital graph
Photo by Sean Whang: https://www.pexels.com/photo/white-and-blue-surface-illustration-804269/

In this series, I’ll be breaking down my solutions to exercises in Eloquent Javascript by Marijn Haverbeke. All credit for the exercise goes to the author. I highly recommend buying this book (from an indy seller!) to support the writer and publisher, but you can also find a free PDF version online easily enough.

Here’s the exercise:

Source: Eloquent Javascript, 3rd Edition, Chapter 6

Step 1: Breaking It Down

Following along with the Think Like a Programmer methodology, I’ve taken the above problem and broken it down into subparts:

  1. Write a class Vec
  2. “Vec” x and y parameters (numbers)
  3. x and y should save to properties of the same name
  4. Give Vec prototype 2 methods:

a) “plus” takes another vector as a parameter and returns a new vector that has the sum of the 2 vectors’ (this and the parameter) x and y values.

b) “minus” takes another vector as a parameter and return a new vector that has the difference of the two vectors’ (this and the parameter) x and y values.

5. Add a getter property “length” to the prototype that computes the length of the vector — that is, the distance of the point (x, y) from the origin (0, 0)

Step 2: Get to Solvin’

Part of my motivation for writing up each solution I find in this book is that it encourages me to slow down and consider my thought process. This makes it easier to catch mistakes.

I always like listing things out so clearly like this because you can often immediately get rid of some low-hanging fruit.

In this case, that would be #s 1–3.

This part is simple enough, and I run a few tests in the console to make sure everything is legit:

Step 2a: The Setter Functions

Next, I need to add 2 methods to my Vec object.

Since my two methods need to evaluate values and are dependent on input, they should be setter functions.

Here’s where I netted out with those:

I ran into 2 issues with building these setters. The first issue I ran into was this error:

I resolved this by eliminating the space in set plus, so the method reads: setPlus.

The other issue was how to display the return value. I settled on an object with {} but there are a lot of options for this.

Step 2b: The Getter Function

Okay, so far so good. Finally, there is part 5, the length function. This one is a getter function by definition.

And just to make sure I got it right, I created an object instance that had negative values:

Final Thoughts

Overall, this was a pretty straightforward exercise, but it got me thinking about:

JS Classes

  • I haven’t really encountered these yet and am not sure how they fit into scripting for websites (though I am familiar with the concept in other languages).

Getters and Setters

  • I like to think of getter functions as reporting on a value when you ask for it.
  • A setter function will do a bit of work to spit out a value based on your input.
  • Just a little shorthand for me (and you if it helps), since I always seem to forget the difference between each.

Inheritance

  • While I didn’t use any inheritance to get this done, it made me think how useful it would be to have a set number of methods baked into an object so that every time you generate a new instance you’re getting those methods (like plus and minus).

Math

  • I really hate when books feel the need to use dry mathematical examples like creating vectors or matrices to illustrate concepts. Can’t we make this more relatable to the average web dev?!

Anyways, that’s all I had for this particular exercise from an excellent book. Thanks for reading, and more to come soon!

--

--

--

In this series I’ll do in-depth review of coding problems I’m working on from classic coding resources and popular online courses. This will most likely veer into many different languages, but mostly will stick to Javascript, Python, and Ruby.

Recommended from Medium

Preview for your Contentful-Gatsby site with Next.js

Time in games

my tagram

Image upload using NodeJs

How to cross-post to Steem

Steem Posting Key

Using ESM Syntax to import JS Packages from a CDN (Skypack)

Implementing Screen Transitions on You.i Engine One With React Navigation

Using Angular Resolver to Pre Load Data

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dan Eder

Dan Eder

Full Stack Web Developer, polyglot, songwriter, always learning

More from Medium

JavaScript ES7/6 Tutorial: A crash course on modern JS

Difference Between forEach() and Map() in JavaScript.

Tree Data Structure in JavaScript

Asynchronous JavaScript and Promises