Conceptual: Losing Track in My Mind of the Object or Focal Point

JavaScript
1

I think I’ve narrowed down what’s hardest for me to grasp with all of this ES6 stuff. With all of the emphasis on shortening code down to one line where possible to make it “neat,” often valuable clues get destroyed from the visible code.

For instance in the exercise, “Use Destructuring Assignment to Pass an Object as a Function’s Parameters”, the following code:

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;
  // do something with these variables
}

gets filtered down to:

const profileUpdate = ({ name, age, nationality, location }) => {
  /* do something with these fields */
}

In the process, the name of the object – profileData in this case – gets tossed out of the readable code, even though that’s the object getting destructured. This makes it harder (for me, anyway) to understand what I’m reading when reading the revised code.

How do you keep clear in your mind what the object is all about when you read and write code like this? How do you keep the abstraction from becoming so abstract in your mind that you lose track of what the abstraction was intended to do in the first place?

This difficulty is what seems to trip me up most often. I’d like to read your thoughts on the matter.

1 Like
2

I am curious to see where this discussion goes. I am used to working in much more verbose languages and coding practices, so it is often hard for me to interpret exactly what is going on in some chunks of JavaScript.

Or put another way - I can code reasonably well but I struggle to speak compact JavaScript.

1 Like
3

In terms of the less verbose syntax, you just learn to read it fluently over time. You aren’t translating it to a longer form, you just understand it as written. It’s similar to learning mathematical notation or a hobby’s jargon.

If I’m understanding the question correctly, you don’t. If I’m writing a function, I define what is required of the data going into the function and what value comes out. I don’t need to know the larger context.

4

@ArielLeslie If you’re working in a corporation and only need to do your piece of the puzzle, I can see where that is very beneficial. Someone else has mapped out the project, and your job is just to do the little piece that you’re given. You don’t have to think about the big picture at all.

However, don’t you think it’s a little more problematic when you’re the one doing the whole project yourself? It would be pretty easy to go off on a tangent and make the method or function or component or module or whatever do things that aren’t really needed if you aren’t paying attention to the bigger picture, wouldn’t it?

5

An individual function shouldn’t rely on unstated context. That just makes your code that much harder to update and maintain.

Let’s say you’re writing a printMailingAddress() function. What that individual function needs is a set of fields (name, street, country, etc). It doesn’t need to know that these fields are coming from a customer object that has an account number, order history, etc. It could also be used on a vendor object that has an invoice and a payment due date. The function could be called once with data from an online form or it could be called on every item in a huge array.

Am I making sense?

2 Likes