How grammar made me a better code learner

NERD ALERT! This article talks about… code. If that’s not your cup of tea and only want to understand why grammar has made me a better coder, skip the whole “Stumbling upon a problem” section, and I’ll see you in the “How grammar didactics made me a better code learner” section at the bottom!

I love learning, I really do. In fact, I’ve learned a lot of useless things that do not serve me in my everyday life over the years. I can:

• Solve a Rubik’s Cube in less than 45 seconds
• Read and write stenography
• And I started learning German

(Don’t get me wrong, German is an awesome language, but when you live in Canada, it is not something you use every day, and German-speaking countries are a little far, Spanish is way more useful.)

When I was in university, I studied to be a French teacher, and I absolutely loved grammar. Whether it is syntax, grammar or spelling, I love it. When I realized I didn’t like teaching, I decided I wanted to be a web developer, and I’m starting to realize it how much I benefit from the grammar didactics course I had! (And aced it, with an A+)

I thought I’d lead you through a typical I-don’t-understand-I-have-no-one-to-ask-Woah-I-get-it-now moment like I had yesterday.

Stumbling upon a problem

While learning about the array.map function, I came across the following code:

Which returned this:

I couldn’t figure out this block of code in the ‘arr.map’ function of the ‘editName’ function :

I knew I had seen these three dots earlier in the book, it was a spread operator.

I went back to the example code of that chapter:

Alright, so this meant that ‘…item’ would list all the properties of ‘item’, then followed by the value of the variable ‘name’. Great. But I still couldn’t put all of this together and understand how the code worked.

This is where French grammar comes in handy

In grammar, there are 4 operations I use when I need to check if a sentence is grammatically correct (or other purposes, which I won’t cover here): add, remove, move and substitute.

With the use of those operations, I changed the code around in order to understand how it worked. For longer code, I like to user debuggers, but for something that short, these operations were all I needed.

Remove

Before adding things, let’s make it simpler. How about this I removed the part I didn’t fully understand, the ‘…list’

Which returned this, as I expected it:

But… Why did I need the ‘…item’ then?

Let’s try something else:

Which returned:

Ah, that was my old object! That’s not what I wanted. This meant the ‘name’ was really something I needed.

How about I simply removed my spread operator from my initial code?

Hmm, there was really is a difference between ‘…item’ and ‘item’. If I omitted the spread operator, it added the item as an object in my object, followed by the name property and its value. And this isn’t what I want.

Add

First, let’s add a property to every object from my ‘schools’ array, like this:

And then only returned the ‘name’. That’s what I did the first time I tried removing bits of code, it seemed to return the right result, but even if I ain’t no ES6 specialist, I knew the ‘…list’ was probably there for a reason!

I was missing the ‘year’ property of my object. So the ‘…item’ allowed me to display the other properties.

Substitute

Remember when I tried:

And ended up with an object in an object?

And how

Gave me the right result?

This was probably because ‘…item’ wasn’t an object, it was probably simply a list of properties, while ‘item’ is an object. How about I substituted ‘…item’ by an actual list of properties, directly in my code (instead of using a variable)?

Whoah, see what I got!

This meant that if I could successfully replace ‘…item’ by a list property of that item, it meant ‘…item’ really was a list of properties.

Move

Now, I needed to figure out why I didn’t see the name property twice. I knew that in an object, you cannot use the same property name twice: a property name had to be unique within an object. Did this mean that the second time (or third, or…), it overwrote the property value? How about I moved the ‘name’ variable above the ‘…item’?

I then got this:

Since ‘name’ was ‘HB Woodlawn’ and item.name was ‘Stratford’, this meant that the second time I returned a property with the same key, it did overwrite it.

The conclusion…

Let’s remove the year from our ‘schools’ object. The following block of code:

Sort of returned this:

The first ‘name’ was actually a list of all the properties of that object, and ‘name’ was the only property. Then came A new key-value pair, ‘name: “HB Woodlawn”‘. Since that property already existed, it overwrote it, which left us only with the following:

How grammar didactics made me a better code learner

As a student, you learn things and should be taught some of the mechanics behind them. (Which isn’t always the case, but that’s a whole other debate!) For example, dividing fractions. Most people do it this way (well, when they do not have access to a calculator!):

Which works, but should be done this way to show the mechanics:

We are taught this method, but soon, we’re taught the “trick” by our parents, or even teachers, we forget how it works and use that trick instead. Like I said, the “flip method” works, but we apply the “trick” as adults without really being able to explain how it works. (And then teach it to our kids, because it is so much faster than the actual method, and we end up with kids doing things without knowing why they do it…)

As a former French teacher, I learned explicitly how to use those manipulations (add, remove, move and substitute) in a sentence. This means that I will quickly identify the situations where they can be useful and will know how to correctly use them to get good results.

I sometimes wonder if I ever use anything I learned in university when I code. (I am a self-taught developer, never studied it at school or even enrolled in a bootcamp.) But then, I remember how close French didactics help me when I’m trying to figure how code works.