Forem: Elad Tzemach

2 Quick Tips for Better Programming in JavaScript

Elad Tzemach — Sun, 14 Nov 2021 21:44:32 +0000

Hi everyone!

I wanted to share 2 quick tips that have really helped me avoiding confusion in my JavaScript applications.

1. Use a Function to Set a Constant Value

Imagine you have the following code:

  let userRank;

  // some code..
  // some more code..

  if (condition1) {
        userRank = 5;
     } else if (condition2) {
        userRank = 10;
     }

Looks familiar? I've personally seen so many use cases of this.
It would work as we expect, but what if in 6 months one of our peers accidentally update userRank on a different line of our code?

  let userRank;

  // some code..
  // some more code..

     if (condition1) {
         userRank = 5;
     } else if (condition2) {
         userRank = 10;
     }

  // some code..
  // some more code..

userRank = -10;

That's a bit confusing.. especially if it's a really long file, and it could lead to many weird issues.
If userRank is supposed to be a constant value that depends on some conditions and cannot be changed throughout our application logic, why are we not declaring it as const?

We could use the conditional operator, but it doesn't scale well in terms of code readability when there are multiple complex conditions to check for.

Another way we could solve it, is to store the value of userRank in a getter function:


  const getUserRank = () => {

     let userRank;

     // some conditions calculation

     return userRank;

}

const userRank = getUserRank();

That way, no matter what, the value of userRank could never be modified outside of that getUserRank() function.

2. Use Object Destructuring When Passing Arguments to Functions

Have you ever created a new simple function that accepted only one argument? It was pretty clear to everyone what argument was needed to be passed in.
And then it was extended to support 2 arguments.. and then 5.. and before you knew it, you had something like this:


const someFunc = (firstName, lastName, isActive, isValidated, isRequired, isPrimary, isMembershipValid) => {
...
}

Calling this function could look something like this:


someFunc("Elad", "Tzemach", false, true, true, false, true);

As someone who is reading this function call, how am i supposed to know which function argument false or true is referring to?

It could be very challenging to memorize function signatures and not get them wrong when passing in different arguments.

One good way of handling it that is very simple and only requires a couple of more characters is using object destructuring:


const someFunc = ( { firstName, lastName, isActive, isValidated, isRequired, isPrimary, isMembershipValid } ) => {
...
}

This way, the arguments order doesn't matter, as long as you pass them all inside of an object to the function, and the code that is calling the function is much more readable:


someFunc({ firstName: "Elad", lastName: "Tzemach", isActive: false, isValidated: true, isRequired: true, isPrimary: false, isMembershipValid: true });

Happy coding!! 🚀

Event Capturing and Bubbling in React

Elad Tzemach — Thu, 10 Dec 2020 19:26:52 +0000

Imagine you have the following code:

  const [counter, setCounter] = useState(0);
  return (
    <div onClick={() => setCounter((prevCounter) => prevCounter + 1)}>
      <button onClick={() => setCounter((prevCounter) => prevCounter + 1)}>
        Counter value is: {counter}
      </button>
    </div>
  );

That renders this button:

What would be displayed on that button if you click it?

If you guessed "Counter value is: 1", you were wrong!

What we get is this:

But why?

Understanding Event Propagation

In our example, although we clicked on the button, the event handler of its div parent was triggered as well. That's because events don't just affect the target element that generated the event—they travel up and down through the DOM tree to reach their target.
This is known as event propagation: a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it afterward.

The concept of event propagation was introduced to deal with the situations in which multiple elements in the DOM hierarchy with a parent-child relationship have event handlers for the same event, such as a mouse click. Now, the question is which element's click event will be handled first when the user clicks on the inner element: the click event of the outer element, or the inner element?

Event Propagation has three phases:

Capturing Phase - the event starts from the window down until it reaches the event.target.
Target Phase - the event has reached the event.target. The most deeply nested element that caused the event is called a target element, accessible as event.target.
Bubbling Phase - the event bubbles up from the event.target element up until it reaches the window, meaning: when an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. That's the reverse of what is happening in the Capturing Phase.

Event Bubbling and Capturing in React

Bubbling and capturing are both supported by React in the same way as described by the DOM spec, except for how you go about attaching handlers.

Bubbling is as straightforward as with the normal DOM API; simply attach a handler to an eventual parent of an element, and any events triggered on that element will bubble to the parent, just like in our example in the beginning.

Capturing is just as straightforward, but instead of the onClick prop, you have to use onClickCapture on your element.

How Do You Stop an Event from Bubbling/Capturing?

Going back to our original example, how can we make sure our counter is only incremented by 1 when we click the button?

The answer is using stopPropagation()
This method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
It does not, however, prevent any default behaviors from occurring. (if you want to stop those behaviors, you would need to use the preventDefault() method)

If we change our code to:

  const [counter, setCounter] = useState(0);
  return (
    <div onClick={() => setCounter((prevCounter) => prevCounter + 1)}>
      <button
        onClick={(event) => {
          event.stopPropagation();
          setCounter((prevCounter) => {
            return prevCounter + 1;
          });
        }}
      >
        Counter value is: {counter}
      </button>
    </div>

Our counter will be incremented by 1 each time we click the button, thanks to event.stopPropagation() which prevents the event from bubbling up to button's parent and triggering the parent's onClick as well.

However, be careful when stopping events from propagating, because sometimes you can’t really be sure you won’t be needing the event above in one of the element's parents, maybe for completely different things.

If this is the case, one alternative to stopping the propagation is writing your data into the event object in one handler and read it in another one, so you can pass to handlers on parents information about the processing below.

Happy coding!! 🚀

Do You Have to Use Node.js to Work With React?

Elad Tzemach — Sun, 04 Oct 2020 13:25:12 +0000

Node.js is an open-source JavaScript runtime environment, built on Chrome's V8 JavaScript engine, that allows us to execute JavaScript code outside of the browser.

Many people assume you have to use it in order to run a React project, especially because almost every beginners tutorial out there mentions it in the project setup instructions.

But do you have to use it?

Why do React developers love Node.js?

Node.js provides the most popular "tools platform" to make working with React easier and more streamlined, for the following main reasons:

Node.js ships with NPM - a reliable package manager for JavaScript (the company behind it, npm Inc., was acquired by GitHub earlier this year). The NPM CLI makes it very easy and convenient to manage your React project dependencies.
More specifically (and just as a popular example), the Webpack package makes it very easy to:
- Bundle React application files into just one JavaScript file.
- Transpile JSX/TypeScript to JavaScript, ES6 to ES5, SASS to CSS, etc..(with Babel).
- Enable code splitting.
- Minify and compress code.
- And much more!
Node.js enables module imports management, using the require() (CommonJS modules) or import ... (ECMAScript modules) syntax, which is great for having encapsulation and import modules as needed.
Node.js is a popular platform to run a web server that can host a React application. Although it is not mandatory to do so, many projects take advantage of this since it allows the use of one programming language (JavaScript) for both the backend and frontend. It also enables executing React code on the server (server-side rendering) - which is a very attractive approach for some projects. (you can do server-side rendering with other languages as well, but it will not be as easy as Node.js)

Do you have to use Node.js?

It may be the case that you only need to create a prototype or a small tool, and setting up a build pipeline with Webpack would be an overkill.

I personally encountered such a scenario where i had to create a React coding challenge to screen potential candidates for my company, using CoderPad's platform.

Not using Node.js allows you to have just one small HTML file which you could then easily drop into any HTTP server.

This is what not using Node.js for a React application entails:

1. Load React from the CDN instead of NPM:

In your HTML file, include:

  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
  </head>

2. Get rid of JSX

To render the following:

<div>
  <h1>Hello World</h1>
  <a>Test!</a>
</div>

You would have to write it as:

ReactDOM.render(
  React.createElement('div', null, 
  React.createElement('h1', null, 'Hello World')
  React.createElement('a', null, 'Test!')
       ),
document.getElementById('root'));

Although you can include Babel in your scripts:

  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>

And then use JSX like:

  <body>
    <div id="root"></div>
    <script type="text/jsx">

    const App = () => [<Comp1/>, <Comp2/>];

    const Comp1 = () => <h1>Hello World</h1>;
    const Comp2 = () =>  <a>Test!</a>;

      ReactDOM.render(
        <App/>,
        document.getElementById('root')
      );
    </script>
  </body>

3. Using NPM packages

Some packages have a CDN link which you could then just include in your <script/> tag.
For those that don't, that are workarounds like using Browserify, but this is a bit out of scope for this post.

Conclusion

To sum up, Node.js and the packages/tools that use it, just make every task you have to do around your React project easier, overall providing a great developer experience.

However, depending on your project and preferences, you might opt out from using it, and there is nothing wrong with that 😄

Happy coding!! 🚀

What gets logged in console.log() for objects and arrays?

Elad Tzemach — Mon, 14 Sep 2020 00:17:19 +0000

Have you ever used console.log(myObject) and were confused by the result you got after expanding what was printed to the console?

For example:

    const myObject = {
      firstName: "Elad",
      lastName: "Tzemach",
      favoriteFood: "cake"
    };

    console.log(myObject);

    // lots of other code

    myObject.favoriteFood = "broccoli";

Will give give us this in the console:

Yay! 😍 I love cake! 🍰 🍰 🍰

Let's expand this:

What?? 😳 "broccoli"?? What happened??

See that little blue icon "i" icon?

If you hover over it, you will see a tool tip saying "Value below was evaluated just now."

Evaluating with console.log()

Evaluating objects (or arrays) using console.log() is done in an asynchronous manner: the reference to the object itself is passed to console synchronously, and that is why we initially see the object with favoriteFood: "cake" before we expand it - because that is what the object "looked like" at the time we logged it to the console.

However, if the object had been later modified and then we expanded it in the console, it would be evaluated to what it is equal to now (after the app code had finished running), so the data shown will have the updated values.

What can be done?

To avoid any confusion, one approach is to use:

console.log("users", JSON.stringify(users, null, 2));

Then we would just get the object at the time we called console.log(), expanded by default: (although we won't be able to collapse it)

Another one is to simply deep clone the object and only then log it:

console.log({...myObject});

(Easily done by the spread operator if you don't have nested objects. If you do, you would have to use third-party libraries like Lodash or ImmutableJS)

Conclusion

Understanding how console.log() works with objects and arrays could definitely save you some frustration!

And if you have made it till the end, i have a confession to make: i like broccoli too 😄

Happy coding!! 🚀

Traversal Order of Object Properties in JavaScript ES6

Elad Tzemach — Fri, 04 Sep 2020 00:59:09 +0000

Have you ever seen code that receives a JSON object response from a backend service then and uses that object to create React components?

Object.keys(data).map((entry) => {
  <MyComponent key={entry.id} name={entry.name} ... />;
});

I have seen it many times 😱, and while it might be ok in some cases, it's very risky! Especially if those <MyComponent />s need to be displayed in the order they were received/inserted in.

ES6 Object Traversal

Before ES6, the order in which object properties were traversed was left unspecified and so each engine handled it as it saw fit 😬

With ES6, the traversal order was guaranteed for some methods:

Object.getOwnPropertyNames()
Reflect.ownKeys()
Object.getOwnPropertySymbols()

But not others:

Object.keys()
Object.values()
Object.entries()
JSON.stringify()
for .. in loops

As you may have noticed, the most popular methods are the ones that don't guarantee the order 😒

The ones that do guarantee it, follow the [[OwnPropertyKeys]] internal method which specifies the following order:

Integer indices (if applicable), in ascending order.
Other string keys (if applicable), in property creation order.
Symbol keys (if applicable), in property creation order.

const obj = {
  [Symbol('first')]: 'symbol: first'
  '5': 'integer: 5',
  'foo': 'string: foo',
  '01': 'string: 01',
  2: 'integer: 2',
};

console.log(Reflect.ownKeys(obj));
// ["2", "5", "foo", "01", Symbol(first) ]

And what about those other popular methods like `Object.keys()`?

Although the current versions of some major browsers implement this very same order for those popular methods as well - ES6 implementations are NOT required to define a specific order of enumeration for those popular methods, so you would be better off not counting on it in your code.
(I have personally seen this order not working on Safari 13.1.2 when i used Object.keys() in one of my projects 😟)

What are the alternatives?

Excluding some third-party libraries, if you are looking to guarantee iteration according to insertion order, an Array or a Map would be a safer choice!

Is there any hope?

Well, actually.. there is! 😻

There was a proposal to change the ECMA specification and make this [[OwnPropertyKeys]] order behavior official for all of those popular object traversal methods as well, and that proposal has been accepted and merged into the main specification!

This means that as of ES2020, property order for these popular methods is guaranteed by the ECMA specification to be iterated over in the same deterministic manner as the other ones!

Conclusion

Object traversal order in JavaScript has always been tricky due to different browser implementations, but ES2020 has finally provided a deterministic order standard for all of the popular traversal methods.
Still, this order might not work for you - your project might include objects with a mix of integer and string keys, yet require traversal according to insertion order.

It's good to know how object traversal works, and it's also good to know that there are alternatives you could use 😊

Happy coding! 🚀 🚀 🚀

Forem: Elad Tzemach

2 Quick Tips for Better Programming in JavaScript

1. Use a Function to Set a Constant Value

2. Use Object Destructuring When Passing Arguments to Functions

Event Capturing and Bubbling in React

Understanding Event Propagation

Event Bubbling and Capturing in React

How Do You Stop an Event from Bubbling/Capturing?

Do You Have to Use Node.js to Work With React?

Why do React developers love Node.js?

Do you have to use Node.js?

Conclusion

What gets logged in console.log() for objects and arrays?

Evaluating with console.log()

What can be done?

Conclusion

Traversal Order of Object Properties in JavaScript ES6

ES6 Object Traversal

And what about those other popular methods like Object.keys()?

What are the alternatives?

Is there any hope?

Conclusion

And what about those other popular methods like `Object.keys()`?