DEV Community: Tiago Mateus

Syntax, Semantics, and Scope in the Universe of Programming

Tiago Mateus — Tue, 01 Jul 2025 00:57:41 +0000

Syntax: The set of rules of a given programming language, For exemple, in Java, to declare a varible of type text, you use String, while in C# use string. The simple variotion in lowercase and uppercase is a spcific syntax of a rule of each language.

Semantics: It refers to the meaning of the code — whether what has been written makes logical sense. For example, if a programmer defines a method called sum(), it should perform an actual sum, not something unrelated.

Scope: Scope is simply the context or space that defines where a certain piece of code or a set of variables can be accessed. See the example below:

public class Scope {
    String globalName = "Tiago";

    public void printGlobalName() {
        System.out.print(globalName);
    }

    public void printLocalName() {
        String localName = "Mateus";
        System.out.print(localName);
    }
}

In the example above, we see two variables belonging to different scopes: one belongs to the class-level (global scope) — globalName, and the other belongs to the method-level (local scope) — localName.

I Finally Understand the Virtual DOM 🤯

Tiago Mateus — Thu, 23 Jan 2025 01:03:24 +0000

Briefly: A user interaction triggers an event. React steps in and creates a new Virtual DOM based on this event. Then, React compares the new Virtual DOM with the previous one (old Virtual DOM). After identifying the differences, React updates the actual DOM, but only for the parts that changed. Yes, that's how it works!

Yes, I know, it seems more complicated, but it's not! The Virtual DOM that React creates is lightweight, making the process faster.

For example, here is the Virtual DOM representation:

{
  type: "div",
  content: "Hello World!",
  props: { onClick: change }
}

And here is the normal DOM:

<div onClick="change()">Hello World!</div>

See the difference? The Virtual DOM is just a lightweight JavaScript object representing the same structure, while the normal DOM is a heavier, browser-specific implementation.

So, when React makes a diff between the Virtual DOMs (new and old), it's easy! Why? Because it's just a JSON comparison."

Example:

Old Virtual DOM:

{
  type: "div",
  content: "Hello World!",
  props: { onClick: change }
}

New Virtual DOM:

{
  type: "div",
  content: "Hello!",
  props: { onClick: change }
}

React detects the change (the content property) and applies it to the actual DOM. This makes the process efficient, as React avoids updating unnecessary parts of the real DOM.

What do you think about this explanation? Let me know your thoughts or questions in the comments!😁

First Post

Tiago Mateus — Wed, 27 Mar 2024 16:11:09 +0000

I'm Tiago, I'm going to use the site to learn how to read and write English, but I'm also going to use it as a study repository, is that OK?