`:active` and `:focus` selectors represents different states of an element.

The `:focus` selector occurs when the element is ready to be interacted with. It happens when

-   User presses the `Tab` key to give focus to the element
-   User uses the mouse to click on the element
-   On touchscreen screens, user taps on the element

The `:active` selector is applied when the element is being activated. It will be kept during the time user clicks on the element and releases the mouse.

There is an important notice for the Safari browser running on iOS. The `:focus` selector is supported, while the `:active` selector is applied only if there is handler for the `touchstart` event of relevant element or the `body` element.

### Good practice

There are people who like navigating a web page with their keyboard. By pressing the `Tab` key, users can jump to focusable elements quickly.
Some native HTML elements (such as `<a>`, `<button>`, `<input>`, `<select>` and `<textarea>`) provide the built-in keyboard accessibility.

But if you are building a custom element, and want it to be focusable and accessible via keyboard, then you should add the `tabindex` attribute for it.

There are two popular cases for setting `tabindex`:

-   `tabindex="0"` will bring the element into the tab order.
-   As opposed to the above value, `tabindex="-1"` removes the element from the tab order.
    It's not possible for user to explore the element with keyboard.

This technique is used in a lot of libraries, such as [Bootstrap's modal](https://getbootstrap.com/docs/4.4/components/modal) or [Foundation's reveal](https://get.foundation/sites/docs/reveal.html).

By setting `tabindex="-1"` to either the modal or its overlay element, users won't be able to focus the element in the main page. Only the element within the modal are focusable.

Here is the structure of a Bootstrap's modal:

```html

<div
    tabindex="-1"
    style="
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    "
>
    
    ...
</div>
```

It's recommended to not set `tabindex` greater than 0 because screen readers navigate the web page in the DOM order instead of tab order.

### Tips

1. With Chrome DevTools, you can see the CSS classes used for `:active` and `:focus` states without activating the element.

    First, you need to inspect the element, and then select the _:hov_ tab under the _Styles_ tab:

    ![Toggle the :active and :focus selectors with Chrome DevTools](/assets/active-hover-classes-chrome.png)

    On Firefox, similar options can be found in the _:hov_ tab under the _Inspector_ tab.

    ![Toggle the :active and :focus selectors with Firefox Developer Tools](/assets/active-hover-classes-firefox.png)

2. Assume that you want to test the keyboard accessibility in your website.

    There's a case that the pressing the _Tab_ key jumps to a particular element which is invisible in the viewport.

    Chrome DevTools provides the ability of tracking the focused element.

    - Open the _Console_
    - Click the eye icon which is located at the right of the Filter box to create a live expression
    - Type `document.activeElement`

    This live expression will represent the active element which has the focus currently. You can right click on the expression's result and then choose _Reveal in Elements panel_ to inspect the focused element.

    ![Track the focused element](/assets/track-focused-element.png)

:active vs :focus


There are two different ways to handle an event of element. The following piece of code demonstrates how to handle the `click` event with the `addEventListener` function:

```js
const handler = () => {
    console.log('the element is clicked');
};

element.addEventListener('click', handler);
```

The other way is to use the `onclick` property or inline `onclick` attribute such as:

```html
element.onclick = handler;

<div onclick="handler()" />
<div onclick="javascript: handler()" />
```

### Differences

1. You can add multiple handlers for an event with `addEventListener`.

    The `on___` property or attribute allows to register only one handler. Setting `on___` will remove all existing handlers.

    In the following sample code, clicking the element will print `onclick is used` in _Console_ because the `onclick` removes the original `handler`.

    ```js
    const handler = () => {
        console.log('addEventListener is used');
    };
    element.addEventListener('click', handler);

    const anotherHandler = () => {
        console.log('onclick is used');
    };
    element.onclick = anotherHandler;
    ```

2. With `addEventListener`, it's possible for us to handle the event in either capturing or bubbling phase by passing.
   The `on___` property doesn't support that.

    Assume that we have two `div` element as following:

    ```html
    <div id="parent">
        Parent
        <div id="child">Child</div>
    </div>
    ```

    We are going to add handlers for the `click` event:

    ```js
    const handleParentClick = () => {
        console.log('parent is clicked');
    };

    const handleChildClick = () => {
        console.log('child is clicked');
    };
    ```

    Setting the third parameter of `addEventListener` to `true` or `false` could change the order of handler execution.

    ```js
    // We will see "child is clicked" and then
    // "parent is clicked" when clicking the child element
    // The `click` event is passed from the bottom node
    // up to its parents
    document.getElementById('parent').addEventListener('click', handleParentClick, false);

    document.getElementById('child').addEventListener('click', handleChildClick, false);
    ```

    In contrast with the bubbling phase, the following code will make the `click` event is passed from parents down to its children:

    ```js
    // We will see "parent is clicked" and then
    // "child is clicked" when clicking the child element
    document.getElementById('parent').addEventListener('click', handleParentClick, true);

    document.getElementById('child').addEventListener('click', handleChildClick, true);
    ```

3. The last thing is the browser compatibility.
   The `addEventListener` function doesn't work before Internet Explorer (IE) 9, while `onclick` is supported by all browsers.
   The IE 8 and older versions use the `attachEvent` function.

    It isn't really important thing in the web development today as most websites don't support IE 8 or 9 anymore. But if you still need to take care of IE 8 (_really?_), then here is the small line of code that fills the gap:

    ```js
    element.attachEvent ? element.attachEvent('onclick', handler) : element.addEventListener('click', handler);
    ```

### Good practices

1. Always pick `addEventListener`

    There are a couple of problems with setting `onclick` attribute. It has a potential security issue since we pass a string.
    The browser also doesn't warn if the method passed to `onclick` attribute doesn't exist.

    But you often see that the event handlers are set on element's attributes in modern JavaScript frameworks, such as:

    - Angular: `<button (click)="sayHello()">Hello</button>`
    - React: `<button onClick={sayHello}>Hello</button>`
    - Vue: `<button v-on:click="sayHello">Hello</button>`

    It's designed in a declarative way, so it's easy for developers to get used to the library. Despite the fact that the declaration looks similar to the `onclick` attribute, the framework parses the code, and transpiles it to `addEventListener` method.

2. To avoid the memory leak issue, remember to remove the handler when it's not used anymore.

    ```js
    const handler = (e) => {
        ...
    };

    // Attach event listener
    element.addEventListener('click', handler);

    // Remove it later
    element.removeEventListener('click', handler);
    ```

    In the web development nowadays, an element in a single page application might be added and removed from page automatically.
    The popular JavaScript provides the moments that we can hook on to setup and clean up event handlers.

    The sample code below demonstrates the similar actions with React library:

    ```js
    class Resize extends React.Component {
        const handleResize = (e) => {
            ...
        };

        componentDidMount() {
            window.addEventListener('resize', this.handleResize);
        }

        componentWillUnmount() {
            window.removeEventListener('resize', this.handleResize);
        }
    }
    ```


addEventListener() function vs on property


### Differences

1. The `alt` attribute is the _alternate_ text to serve as the content of element when the element isn't rendered normally.

    `<img>` is the most popular tag using the `alt` attribute.

    When an image can't be loaded, the browser will display the `alt` text in its place so the user can get an idea of why the image was included.

2. The `title` attribute is the tooltip text seen when hovering over the element.

### Good practice

Always use the `alt` attribute for `<img>` tags.

Google and other search engines can't read the image but they can see the `alt` text. Setting the `alt` attribute is a [good practice](https://youtu.be/CV2tIFgUKW4) for SEO (search engine optimization).

You usually won't set the `title` attribute for `<img>` unless it really provides more information about the image. But it could be argued that if you have to explain your image with title text, maybe there's a better image to use.

### Tips

Here's two options for making sure you always include the `alt` attribute on the `img` tag.

1. Use CSS to give a red outline to any `img` having a missing or blank `alt` attribute:

    ```css
    img:not([alt]),
    img[alt=''] {
        outline: 8px solid red;
    }
    ```

2. If you are using [Visual Studio Code](https://code.visualstudio.com), you can install the [webhint extension](https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint).

    It will automatically detect the issue and show the details when you hover on the element.

    ![Detect the missing alternate text with webhint](/assets/webhint-alt-warning.png)


alt vs title


`apply()` and `call()` are common methods to invoke a function.

### Difference

Following is the syntax of these methods, where `fn` represents a given function:

```js
fn.apply(context, arrayOfArguments);
fn.call(context, arg1, arg2, ...);
```

As you see, `apply` requires the arguments as an array, whereas `call` requires the arguments to be listed explicitly.

For example, the following function returns the sum of three numbers.

```js
const sum = (a, b, c) => a + b + c;

sum.apply(null, [1, 2, 3]); // 6
sum.call(null, 1, 2, 3); // 6
```

### Tip

You can use this mnemonic to remember the differences between `apply` and `call`:

**A** is for **a**rray

**C** is for **c**omma


apply vs call


### Difference

A _parameter_ is the variable belonging to the declaration of a function.

An _argument_ is the actual value of the parameter that is passed to the function.

Assume that we have a function that calculates the sum of two numbers:

```js
const sum = function (a, b) {
    return a + b;
};
```

here `a` and `b` are the parameters. If we call the function, `sum(1, 2)`, then `1` and `2` are the arguments.

### Tip

There is a handy memory hook to distinguish these terms:

**P**arameter → **P**laceholder

**A**rgument → **A**ctual value


argument vs parameter


There are two ways to empty an array:

```js
arr.length = 0;

// Or assign it to an empty array
arr = [];
```

### Difference

Setting `arr = []` creates a new array and doesn't affect other references.

```js
let foo = ['hello', 'world'];

// Add a reference
let bar = foo;

foo = [];

// `bar` isn't affected
console.log(bar); // ['hello', 'world']
```

On the other hand, `arr.length = 0` modifies the array. All references are affected.

```js
let foo = ['hello', 'world'];
let bar = foo;

foo.length = 0;

// `bar` is affected
console.log(bar); // []
```

### Good to know

1. There is another, less popular approach to empty an array:

    ```js
    arr.splice(0, arr.length);
    ```

    This method affects other references. Since `.splice` returns an array of removed items, you can get a copy of original array by assigning the result to a new variable:

    ```js
    let foo = ['hello', 'world'];

    // Empty and create a copy of `foo`
    let bar = foo.splice(0, foo.length);

    console.log(foo); // []
    console.log(bar); // ['hello', 'world']
    ```

2. If the array is declared as a constant, then you can't reassign it to `[]`.

    ```js
    const foo = [1, 2, 3];
    foo = []; // will throw an exception of
    // "Assignment to constant variable"

    foo.length = 0;
    ```


array = [] vs array.length = 0


### Differences

1. Inside a regular function, the `this` value is dynamic. It depends on how the function is invoked.

    ```js
    const person = {
        firstName: '',
        lastName: '',
        getFullName: function () {
            return `\${this.firstName} \${this.lastName}`;
        },
    };

    person.firtName = 'Foo';
    person.lastName = 'Bar';
    person.getFullName(); // 'Foo Bar'
    ```

    Arrow function does not have `this`. Accessing `this` inside an arrow function will refer to the `this` of its closest non-arrow parent function.

    ```js
    const person = {
        yearOfBirth: new Date().getFullYear(),
        getAge: () => {
            return new Date().getFullYear() - this.yearOfBirth;
        },
    };

    person.yearOfBirth = 2000;
    person.getAge(); // NaN
    ```

    It is worth noting that calling `arrowFunction.call(thisValue)` or `arrowFunction.apply(thisValue)` do not change the `this` value.

2. We can use the `new` keyword with a regular function to create new object.

    ```js
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    const foo = new Person('Foo', 42);
    ```

    On the other side, arrow functions do not own `this` value, hence they cannot be invoked with the `new` keyword.

    ```js
    const person = (name, age) => {...}

    // ERROR: person is not a constructor
    const foo = new person('Foo', 42);
    ```

3. Inside a regular function, we can use `arguments` which represents an array-like object of passed arguments.
   It is very useful if we want to access the parameters of a function whose number of parameters are dynamic.

    For example, the function below calculate the average of parameters:

    ```js
    function average() {
        const args = [...arguments];
        return args.reduce((a, b) => a + b) / args.length;
    }

    average(1, 2); // 1.5
    average(1, 2, 3); // 2
    ```

    Arrow functions do not have `arguments`. Calling `arguments` inside an arrow function will return the arguments of closest non-arrow parent function.

    But it is still possible to get the list of dynamic passed parameters by using the [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)

    ```js
    const average = (...args) => args.reduce((a, b) => a + b) / args.length;

    average(1, 2, 3, 4); // 2.5
    average(1, 2, 3, 4, 5); // 3
    ```

4. We have to use the return statement in a regular function to return a result.

    ```js
    function sum(a, b) {
        return a + b;
    }
    ```

    However, in an inline arrow function that contains only one expression, we can implicitly return the value by omitting the curly brackets.
    The `sum` function above can be rewritten as follow:

    ```js
    const sum = (a, b) => a + b;
    ```

    Plus, arrow function also does not require parentheses if it has only one parameter:

    ```js
    const sumOfArray = (arr) => arr.reduce((a, b) => a + b, 0);
    ```

5. In non-restrict mode, regular functions allow us to use duplicate named parameters.

    The following declaration is accepted:

    ```js
    function double(x, x) {
        return x + x;
    }

    double(3, 2); // 4
    double(3, 5); // 10
    ```

    This usage is not allowed in strict mode:

    ```js
    'use strict';
    function double(x, x) { ... }

    // ERROR: Duplicate parameter name not allowed
    ```

    It is not possible to use the same name for different parameters in arrow functions, no matter the strict or non-strict mode is enabled.

### Good practice

If the inline arrow function consists of the `<`, `<=`, `>` or `>=` operator, it is advised to wrap the function body in parentheses.

Looking at the two versions below, it is easy for the first variant to cause a misleading.

```js
// Bad
const compareToZero = (a) => a <= 0 ? 0 : a;

// Good
const compareToZero = (a) => (a <= 0 ? 0 : a);
```

### Tip

You can use an underscore to name the argument which is not used in an arrow function. It makes the code more readable.

```js
// No arguments
const noop = (_) => {};

const range = (min, max) =>
    Array(max - min + 1)
        .fill(0)
        .map((_, i) => min + i);
```

### Resource

You can find many useful arrow functions that have only single line of code at [1 LOC](https://1loc.dev) website.


arrow vs regular function


The `b` and `strong` tags by default make text bold. The `i` and `em` tags by default make text italicized.

Each browser has its own default styles, but result in similar appearances. Here is how they are styled in the popular browsers:

[Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css):

```css
strong,
b {
    font-weight: bold;
}
i,
cite,
em,
var,
address,
dfn {
    font-style: italic;
}
```

[Firefox](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css):

```css
b,
strong {
    font-weight: bolder;
}

i,
cite,
em,
var,
dfn {
    font-style: italic;
}
```

[Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css):

```css
strong,
b {
    font-weight: bold;
}
i,
cite,
em,
var,
address,
dfn {
    font-style: italic;
}
```

Despite the fact that their appearances are similar, the `strong` and `em` tags add extra semantic meaning to the enclosed text, whereas `b` and `i` are purely visual.

According to the HTML 5 specifications, the [`strong`](https://dev.w3.org/html5/spec-LC/text-level-semantics.html#the-strong-element) and [`em`](https://dev.w3.org/html5/spec-LC/text-level-semantics.html#the-em-element) tags indicate importance and emphasis respectively.

As far as accessibility goes, while a particular screen reading software may or may not pronounce it differently, using `<strong>` or `<em>` at least opens the possibility, whereas a screen reader will never pronounce text within `<b>` or `<i>` differently.


<b>, <i> vs <strong>, <em>


`border-box` and `content-box` are two values of the `box-sizing` property.
Unlike the `content-box`, the `border-box` value indicates that the dimension of an element will also include the border and padding.

Let's assume that we have a div element whose size is `200px x 100px`, the border and padding are `5px` and `10px` respectively.

```css
.div {
    width: 200px;
    border: 5px;
    padding: 10px;
}
```

In the content box model, the content inside of element will have the same dimension as the element.

```css
.div {
    /* ... */
    box-sizing: content-box;
}
```

```shell
// Content box
                    ◀︎──── 200px ────▶︎

┌───────────────────────────────────────────────────────┐
|                                                       |
|       ┌───────────────────────────────────────┐       |
|       |                                       |       |
|       |           ┌───────────────┐           |       |
| Border|  Padding  |    Content    |           |       |
|       |           |               |           |       |
|  5px  |    10px   |     200px     |   10px    |  5px  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       |
└───────────────────────────────────────────────────────┘
```

In the border box model, the content's dimension has to subtract the border and padding from the element's dimension.
Specifically, the content's width is `200 - 5 * 2 - 10 * 2 = 170px`.

```shell
// Border box
◀︎──────────────────────── 200px ────────────────────────▶︎

┌───────────────────────────────────────────────────────┐
|                                                       |
|       ┌───────────────────────────────────────┐       |
|       |                                       |       |
|       |           ┌───────────────┐           |       |
| Border|  Padding  |    Content    |           |       |
|       |           |               |           |       |
|  5px  |    10px   |     170px     |   10px    |  5px  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       |
└───────────────────────────────────────────────────────┘
```

### See also

-   [margin vs padding](/margin-vs-padding)


border-box vs content-box


### Differences

1. Outlines don't take the space meaning that using outlines or not doesn't affect the dimension of element.

2. `border` supports rounded corners with the `border-radius` property. Meanwhile `outline` doesn't.

3. We can define the border style for each side via the `border-top`, `border-left`, `border-bottom` and `border-right` properties.
   It's not possible to set the style for particular side with `outline`.

4. The outlines may be non-rectangular.

    In the sample code below, the outlines are shown in a non-rectangular shape:

    ```html
    <div>
        ...
        <span style="outline: 0.25rem solid blue"> ... </span>
        ...
    </div>
    ```

### Good practice

The primary purpose of `outline` is to support accessibility. It provides visual feedback for links, buttons when users navigate between them with the _Tab_ key.

You shouldn't remove outline style from elements when they are being focused. Setting `outline: none` or `outline: 0` will make the page inaccessible for the people who don't use mouse or have a visual impairment.

One of the first and popular CSS reset library [removed](https://meyerweb.com/eric/tools/css/reset/reset200802.css) the outline, but the author leaves a comment that reminds us to define the focus styles:

```css
/* remember to define focus styles! */
:focus {
    outline: 0;
}
```

But this reset was removed in the [latest version](https://meyerweb.com/eric/tools/css/reset/reset.css).

If you have to remove the outline style, then it's recommended to provide alternative styles.
Here are some pure CSS based solutions:

-   Set the background color

    ```css
    a:focus {
        background: ...;
    }
    ```

-   Set the text color:

    ```css
    a:focus {
        color: ...;
    }
    ```

-   Using both approaches

    ```css
    a:focus {
        background: ...;
        color: ...;
    }
    ```

-   Use a different style to normalize the look and feel of outline across browsers such as

    ```css
    a:focus {
        outline: thin dotted;
    }
    ```

There's another approach which uses JavaScript to handle the events. If we detect there is a mouse event, then remove the outline style.
In the other case, if a keyboard event is detected then we restore the outline style.

Here is a piece of code demonstrating this idea:

```js
// Append a custom style to `head`
const style = document.createElement('style');
document.head.appendChild(style);

const remove = () => (style.innerHTML = ':focus { outline: 0 }');
const restore = () => (style.innerHTML = '');

// Remove the outline initially
remove();

document.addEventListener('mousedown', () => restore());
document.addEventListener('keydown', () => remove());
```

Some other websites such as [Github](https://github.com) use a similar approach. Starting with a CSS class that resets the outline property:

```css
.intent-mouse a:focus {
    outline: 0;
}
```

Initially, the CSS class is added to the body element:

```html
<body class="intent-mouse">
    ...
</body>
```

By detecting the keyboard and mouse events, we can remove the class or add it back to the body element:

```js
document.addEventListener('mousedown', () => {
    document.body.classList.add('intent-mouse');
});

document.addEventListener('keydown', (e) => {
    // If users press the Tab key
    // then we assume that they intent to use the keyboard to navigate
    if (e.key === 'Tab') {
        document.body.classList.remove('intent-mouse');
    }
});
```

### Tip

The `outline` property is useful when you want to visualize elements on the page.
In the following sample code, we [iterate](https://htmldom.dev/loop-over-a-nodelist) over all the elements and
[set](https://htmldom.dev/set-css-style-for-an-element) the `outline` property with a [random hex color](https://1loc.dev/#generate-a-random-hex-color):

```js
[].forEach.call(document.querySelectorAll('*'), (ele) => {
    const color = `#\${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;
    ele.style.outline = `1px solid \${color}`;
});
```

Of course, you will need an opposite command to [reset](https://htmldom.dev/set-css-style-for-an-element) the `outline` property:

```js
[].forEach.call(document.querySelectorAll('*'), (ele) => ele.style.removeProperty('outline'));
```

You can change the selector from `*` to whatever you want to match the set of particular elements, for example:

```js
// Set the outline for links only
[].forEach.call(
    document.querySelectorAll('a'),
    ...
);
```


border vs outline


### Differences

1. `<button>` can contain HTML. `<input type="button" />` on the other hand is an [empty element](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element) (such as `br`, `hr`, `image`), therefore it cannot contain content.

2. `<button>` supports pseudo-elements such as `:after` and `:before` which is very useful to style the button. Whereas `<input type="button" />` doesn't.

3. By default, `<button>` has the default attribute `type="submit"`. It means that if the `type` attribute isn't specified, clicking the button will submit its enclosing form.

    If you want the `input` to behave as a submit button, we have to change the `type` attribute to `submit`.

### Good practices

1. The `button` element is more semantic than the `input` with type of `button`. It's recommended to use the `button` element if you want to create a clickable button.

2. Always specific the `type` attribute for the `button` element. The possible values are

| Value    | Description                                    |
| -------- | ---------------------------------------------- |
| `submit` | The button submits the form data to the server |
| `reset`  | Resets form inputs to initial values           |
| `button` | By default, it does nothing when pressed       |


<button> vs <input type="button" />

`class` and `id` are common attributes for HTML elements. They can be used at the same time:

```html
<div id="..." class="...">...</div>
```

### Differences

1. In general, these attributes serve different purposes.

    The `id` attribute has to be unique per page because it's used to identity a particular element.
    It's very common to use the `document.getElementById()` method to retrieve an element by given id:

    ```js
    // HTML
    <div id="sidebar">...</div>;

    // JavaScript
    const sidebar = document.getElementById('sidebar');
    ```

    The `class` attribute isn't required to be unique, and it can contain different CSS classes separated by a space.
    We often use the class attribute to define the look and feel of the element.

2. It's rare to see that the `id` attribute is used when declaring CSS styles in web development today.

    In that case, note that styles defined in `id` has greater specificity than the one defined in `class`.

    For example, both the `id` and `class` in this element defines the text color.

    ```css
    #header {
        text-color: white;
    }
    .header {
        text-color: blue;
    }
    ```

    But in the end, the text color defined in the `id` will override the one defined by the `class`:

    ```html
    
    <div id="header" class="header" />
    ```

### Good practices

1. Access the element via the `id` attribute

    If an element has the `id` attribute, we can access its DOM node from the global `window` object directly, such as `window['the-id']` or `window.the-id`.

    To avoid the conflicts with another elements, as there are more features added to the web platform, it's recommended to use the `document.getElementById('the-id')` method instead of `window.the-id`.

2. Have you ever seen a class name starting with `js-`?

    If the answer is not, then you can visit [Github](https://github.com) and see the source of generated HTML. There are bunch of elements whose class are prefixed with `js-` such as:

    ```html
    <meta class="js-ga-set" name="userId" content="..." /> <meta class="js-ga-set" name="dimension1" content="..." />
    ```

    They are often used to manage the list of elements that we don't want to set `id` for (dynamic elements, for example).
    In these cases, we use the `document.querySelectorAll('js-xxx')` method to retrieve the elements list.

    In the other words, the `js-` classes don't define the styles, but for managing the elements in JavaScript instead.
    That's why they are prefixed with `js-`. Follow this naming convention is helpful if you're working in a team.
    Other engineers will be aware of the class name, and don't remove them when refactoring the page.

3. Nowadays, we often build a single page application (SPA).
   Each page is constructed by a lot of components which are dynamically injected to the page based on the user's actions.

    Therefore, it's not easy to ensure that an ID is unique across all components which are usually developed by different engineers.
    In that case, instead of using the `id` attribute, we should use a ref (stands for reference).
    It's a concept that uses a variable referencing to a particular element.

    Most popular JavaScript frameworks support _ref_ such as:

    - [React's ref](https://reactjs.org/docs/refs-and-the-dom.html)
    - [Svelte's `bind:this`](https://svelte.dev/docs#bind_element)
    - [Vue's `ref` attribute](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements)

4. Avoid to use colons (:) and periods (.) in id attribute despite the fact that they're allowed.

    According to the [HTML specifications](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute), a valid id can consist of almost characters except [ASCII whitespace](https://infra.spec.whatwg.org/#ascii-whitespace).

    Assume that we have an element representing an user's email address:

    ```html
    <div id="user.email" />
    ```

    In order to access the element, the `getElementById()` method accepts all of three ways passing the `id`:

    ```js
    // They return the same element
    document.getElementById('user.email');
    document.getElementById('user\\.email');
    document.getElementById('user\\\\.email');
    ```

    But these methods return different results if you are using [jQuery](https://jquery.com) library:

    ```js
    // Function				// Returned element
    $('#user.email'); // <div id="user" class="email" />
    $('#user\\.email'); // <div id="user" class="email" />
    $('#user\\\\.email'); // <div id="user.email" />
    ```

    As you see, the first two methods will find an element with `id` of `user` and has `email` class.
    In order to get the correct element, we have to escape the `id` using double backslashes (`\\`).

    It also happens if we use the same value in CSS:

    ```css
    #user.email {
        ...;
    }
    ```

    All the styles declared within `#user.email { ... }` has effect on the element with `id` of `user` and has the `email` class.
    The styles aren't applied to element with `id` of `user.email`. To define the styles for our element, we have to escape the selector.
    But this time, it requires a _single_ backslash only:

    ```css
    #user\\.email {
        ...;
    }
    ```

    Avoid using the special characters in the `id` and `class` attributes will help us get rid of the confusion and errors above.

    If it's not possible to get rid of colons and periods (for example, the `id` attribute is generated by the server side), then you can use the single backslash as above, or use the attribute selector.
    Note that it has a lower specificity than the `id` selector:

    ```css
    [id='user.email'] {
        ...;
    }
    ```

class vs id


`clientHeight` = the height of an element + the vertical padding.

`offsetHeight` = the height of the element + the vertical padding + the top and bottom borders + the horizontal scrollbar (if it's available).

`scrollHeight` = the height of element's content (including the content which isn't visible on the screen) + the vertical padding.

### See also

-   [clientY vs pageY](/client-y-vs-page-y)


clientHeight vs offsetHeight vs scrollHeight


Given a point in the page, `clientY` and `pageY` are the distances in pixels from the point to the top of viewport and page.

Here, _page_ is the whole rendered page which may have the scrollbars, whereas _viewport_ is the visible part of the page.

```shell
┌─────────────────────────────┬─┐◀︎─── Web page      ▲
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                 pageY
|                             | |                   |
├=============================┼─┤       ▲           |           ▲
|                             | |       |           |           |
|                             | |       |           |           |
|       Scroll bar ──────────▶︎| |       |           |        clientY
|                             | |     Browser       |           |
|                             | |     window        |           |
|       ● Point               | |       |           ▼           ▼
|                             | |       |
|                             | |       |
├=============================┼─┤       ▼
|                             | |
|                             | |
|                             | |
└─────────────────────────────┴─┘
```

### See also

-   [clientHeight vs offsetHeight vs scrollHeight](/client-height-vs-offset-height-vs-scroll-height)


clientY vs pageY


[concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) and
[push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) are common methods to append one
or more items to a given array.

### Differences

1. The `concat` method does not change the existing array:

    ```js
    const shapes = ['Triangle', 'Square'];

    shapes.concat(['Circle', 'Rectangle']); // ['Triangle', 'Square', 'Circle', 'Rectangle']
    shapes; // ['Triangle', 'Square']
    ```

    The `push` method on the other hand modifies the original array.

    ```js
    const animals = ['cat', 'dog', 'mouse'];
    animals.push('bird', 'cow'); // 5
    animals; // ['cat', 'dog', 'mouse', 'bird', 'cow']
    ```

    In the sample code above, both methods produces different results. `concat` returns a new array while `push` returns the length of updated array.

2. Because `concat` creates a new array to hold the result of merged arrays, it's slower than `push`.

    For small arrays, both methods do not produce a significant difference in term of performance.
    But if you have to work with big array and performance is the critical thing to your application, then consider using `push`.

### Good to know

1. If you use React or a state management library such as Redux, where we do not modify the current state and returns the new state on each reducer,
   it's good use case for using `concat`.

2. I find the following [code snippet](https://github.com/stardazed/stardazed/blob/master/src/core/buffer.ts) quite useful when you have to merge really big array. Credits to [@zenmumbler] (https://twitter.com/zenmumbler).

    The function copies items from array `source` to `dest` by splitting the source array into multiple chunks and copying them one by one.

    ```js
    const MAX_BLOCK_SIZE = 65535; // max parameter array size for use in Webkit

    export function appendArrayInPlace<T>(dest: T[], source: T[]) {
        let offset = 0;
        let itemsLeft = source.length;

        if (itemsLeft <= MAX_BLOCK_SIZE) {
            dest.push.apply(dest, source);
        } else {
            while (itemsLeft > 0) {
                const pushCount = Math.min(MAX_BLOCK_SIZE, itemsLeft);
                const subSource = source.slice(offset, offset + pushCount);
                dest.push.apply(dest, subSource);
                itemsLeft -= pushCount;
                offset += pushCount;
            }
        }
        return dest;
    }
    ```

### Tip

You can use ES6 spread operator to merge different arrays into one:

```js
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];

const final = [...a, ...b, ...c]; // [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

The spread operator is handy if we use the `push` method as well:

```js
const a = [1, 2, 3];
const b = [4, 5, 6];

a.push(...b);
a; // [1, 2, 3, 4, 5, 6]
```

`Array.prototype.push.apply(firstArray, secondArray)` is another option that also works in ES5. This approach however isn't recommended in case the second array is very large because the maximum number of parameters in one function is limited.

It's hard-coded to [65536](https://bugs.webkit.org/show_bug.cgi?id=80797) if you are curious.

### See also

-   This [page](https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki) has a deep investigation and provides many benchmarks to prove why `push` is faster than `concat`.


concat vs push


An enum can be declared with or without the `const` keyword. Here are the examples of a regular enum:

```js
enum Direction {
    Up,
    Down,
    Left,
    Right
}
```

and a `const` enum:

```js
const enum Light {
    Red,
    Green,
    Blue
}
```

### Differences

1. TypeScript compiles regular enum to JavaScript objects. Given the `Direction` enum above, it will be transpiled to the following JavaScript code:

    ```js
    var Direction;
    (function (Direction) {
        Direction[(Direction['Up'] = 0)] = 'Up';
        Direction[(Direction['Down'] = 1)] = 'Down';
        Direction[(Direction['Left'] = 2)] = 'Left';
        Direction[(Direction['Right'] = 3)] = 'Right';
    })(Direction || (Direction = {}));
    ```

    On the other hand, the `Light` enum is not transpiled at all. You will see nothing if the enum is not used.

    In the other cases, all the enum references are replaced by the inline codes. For example, `console.log(Light.Red)` is compiled as `console.log(0 /* Red */)`.

2. Because there is no JavaScript object that associates with `const` enum is generated at run time, it is not possible to loop over the `const` enum values.

    TypeScript will throw an error when we try to iterate over the `Light` enum:

    ```js
    // ERROR
    for (let i in Light) {
        console.log(i);
    }
    ```

### Good to know

If you do not want TypeScript to erase the generated code for `const` enums, you can use the `preserveConstEnums` compiler flag.

### See also

-   [literal union type vs string enums](/literal-union-type-vs-string-enums)


const enum vs enum


There are three keywords to declare a variable:

-   `var`
-   `let` and `const` which are only available in ES6

### Differences

1. It's not possible to access the `let` variable outside of the nearest enclosing block where it is declared.

    ```js
    {
        let foo;
    }

    // ReferenceError: foo is not defined
    console.log(foo);
    ```

    The sample code above works if we replace the `let` with `var` declaration.

2. A `let` variable can't be used before it's declared. The sample code below throws a `ReferenceError`:

    ```js
    {
        foo = 'hello';
        let foo;
        console.log(foo);
    }
    // ReferenceError: Cannot access 'foo' before initialization
    ```

    We will see `hello` in the Console if we use `var` in the sample code above.

3. It's not possible to re-declare variables with `let`.

    ```js
    // There is no problems if variables are re-declared with the same name
    var foo, foo;
    var bar;
    var bar;

    let baz;
    let baz;
    // Throw the following error
    // SyntaxError: Identifier 'baz' has already been declared
    ```

4. At the top level, global `let` variables aren't attached to the global `window` object.

    ```js
    let foo = 'hello';
    window.foo; // undefined

    var bar = 'world';
    window.bar; // 'world'
    ```

5. Using `let` can avoid the problem with closures that `var` has.

    To demonstrate the problem, let's assume that we have a list of rows. In each row, we have a button for removing the associate item in the row.

    We loop over the items, and handle the `click` event of the button in each row:

    ```js
    for (var i = 0; i < 10; i++) {
        document.getElementById(`button-\${i}`).addEventListener('click', function () {
            // Remove the item
            console.log(i);
        });
    }
    ```

    It doesn't work as we expect. We always see the last item index (`9` in this case) in the Console when clicking any button.
    The variable `i` in the closure of event handler will refer to the same object, which is the last index when looping over the indexes.

    The problem can be fixed by using `let`:

    ```js
    for (let i = 0; i < 10; i++) {
        document.getElementById(`button-\${i}`).addEventListener('click', function () {
            // It's safe to use the index `i` here
            console.log(i);
        });
    }
    ```

6. The `const` keyword behaves same as `let`, except the variable can't be changed.

    ```js
    // Throw the following error
    // SyntaxError: Missing initializer in const declaration
    const a;
    ```

    You also have to specific a value for a constant.

    ```js
    const a = 'hello';

    // Throw the following error
    // TypeError: Assignment to constant variable
    a = 'world';
    ```

    It's worth noting that using `const` doesn't mean that the variable is immutable. You can change the properties of an object:

    ```js
    const person = {};
    person.age = 20;
    ```

    And add more items to an array:

    ```js
    const arr = [];
    arr.push('foo');
    arr[1] = 'bar';
    console.log(arr); // ['foo', 'bar']
    ```

### Good practice

Don't use `var` unless you have to support old browsers which don't support `let` and `const` keywords.

### Good to know

Each programming language use different keywords to declare a variable and constant.
The following table list out some examples:

| Language | Variable declaration | Constant declaration       |
| -------- | -------------------- | -------------------------- |
| C#       | `string s = "hello"` | `const string s = "hello"` |
| Java     | `String s = "hello"` | `final String s = "Hello"` |
| Scala    | `var s = "hello"`    | `val s = "hello"`          |
| Swift    | `var s = "hello"`    | `let s = "hello"`          |


const vs let vs var


### Differences

1. `const` is used for variables

    ```js
    const message = 'Hello';

    // Does not work
    message = 'World';
    ```

    While `readonly` is used for properties. The properties can be declared as a member of class

    ```js
    class Triangle {
        public readonly numberOfVertices = 3;
    }

    const triangle = new Triangle();

    // Does not work
    triangle.numberOfVertices = 4;
    ```

    or `type`, `interface`:

    ```js
    interface Person {
        firstName: string;
        lastName: string;
        readonly fullName: string;
    }
    ```

2. `const` declarations have to be initialized, and you can't reassign their values. The `readonly` properties can be reassigned in the constructor function.

    ```js
    class Square {
        readonly numberOfVertices: number;

        constructor() {
            this.numberOfVertices = 4;
        }
    }
    ```

    The `readonly` properties could be changed if we don't pass their class or interface directly but passing an alias.

    Let's take a look at the `Person` interface above, and assume that we have the following function to update the person information:

    ```js
    const updatePerson = (person: { firstName: string, lastName: string, fullName: string }) => {
        person.fullName = `\${firstName}, \${lastName}`;
    };
    ```

    We can update the `fullName` property because it's an property of `person` parameter:

    ```js
    let person: Person = {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar',
    };

    updatePerson(person);

    person.fullName; // `Foo, Bar`
    ```

    Of course, the compiler will throw an error if we pass the original type `Person`:

    ```js
    const updatePerson = (person: Person) => {
        // Error: Cannot assign to 'fullName' because it is a read only property
        person.fullName = `\${person.firstName}, \${person.lastName}`;
    };
    ```

### Good to know

1. In a given class, if a property has only getter method and doesn't come with setter method, it will be treated as read only.

    ```js
    class Square {
        side: number = 0;

        get area() {
            return this.side * this.side;
        }
    }

    const s = new Square();
    ```

    Setting `s.area = 100` will throw an error because `area` is a ready only property.

2. In the React library, we don't change the props and state of a component directly. Because the props are immutable and the state could be updated via `setState()` method.

    React [type definitions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) wrap the props and state in read only type.

    ```js
    // P, S represents the props and state respectively
    class Component<P, S> {
        constructor(props: Readonly<P>);

        readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;
        state: Readonly<S>;
    }
    ```


const vs readonly

`currentTarget` and `target` are properties of the event object when we listen to a particular event, for example:

```js
element.addEventListener('click', function (e) {
    // `currentTarget` and `target` are `e`'s properties
});
```

### Difference

`currentTarget` is the element that the event was bound to. It never changes. In the sample code above, `e.currentTarget` is the element.

`target` is the element user clicked on, in the case of `click` event. It can be the original element or any of its children depending on where user clicks on exactly.

### Use case

Here is an use case that demonstrates the usage of both properties.

Assume that we have a modal shown at the center of screen. The modal is placed inside an overlay which takes the full size of screen.

The markup is pretty simple as below:

```html

<div id="overlay">
    
    <div id="modal">...</div>
</div>
```

It's a common experience for user to close the modal when clicking the overlay. There are two approaches to do that, but first, we need to query the modal and overlay elements:

```js
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
```

**First approach**: We close the modal when user clicks the overlay:

```js
overlay.addEventListener('click', function () {
    console.log('Close the modal');
});
```

What happen if user clicks inside the modal? We don't want the event to bubble up to the parent element (which is overlay), hence the `stopPropagation` method is called:

```js
modal.addEventListener('click', function (e) {
    e.stopPropagation();
});
```

**Second approach**: To ensure that user clicks the overlay area and not inside the modal, we can simply check if both the `currentTarget` and `target` properties refer to the same element:

```js
overlay.addEventListener('click', function (e) {
    if (e.currentTarget === e.target) {
        console.log('Close the modal');
    }
});
```

The second approach is much simpler than the first, and it doesn't require to handle the `click` event of the modal.

currentTarget vs target


### Difference

`.ts` is the standard TypeScript files. The content then will be compiled to JavaScript.

`*.d.ts` is the type definition files that allow to use existing JavaScript code in TypeScript.

For example, we have a simple JavaScript function that calculates the sum of two numbers:

```js
// math.js
const sum = (a, b) => a + b;

export { sum };
```

TypeScript doesn't have any information about the function including the name, the type of parameters. In order to use the function in a TypeScript file, we provide its definition in a `d.ts` file:

```js
// math.d.ts
declare function sum(a: number, b: number): number;
```

From now on, we can use the function in TypeScript without any compile errors.

The `d.ts` file doesn't contain any implementation, and isn't compiled to JavaScript at all.

### Good to know

TypeScript provides an option named `allowJs` which allows to use plain JavaScript code in TypeScript.

```
// tsconfig.json
{
    "compilerOptions": {
        "allowJs": true,
        ...
    }
}
```

It's very useful when we want to migrate the existing code base from plain JavaScript to TypeScript. So we can convert each JavaScript file to TypeScript one by one without having to convert entire code completely.

See the [migrating from JavaScript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) guide for more information.


*.d.ts vs *.ts


Assume that `obj` is an object, and `property` is the name of its property.

### Differences

1. Calling `obj.property = undefined` sets the value of property to `undefined`. The property is still there and appears if we iterate the properties of the object.

    ```js
    let person = { name: 'John' };
    person.name = undefined;

    person.hasOwnProperty('name'); // true
    name in person; // true
    Object.keys(person); // ['name']
    for (let p in person) {
        console.log(p);
    } // 'name'
    ```

    `delete obj.property` will remove the property from the object. Let's revisit the sample code above, now with `delete person.name`:

    ```js
    let person = { name: 'John' };
    delete person.name;

    person.hasOwnProperty('name'); // false
    name in person; // false
    Object.keys(person); // An empty array

    // Nothing is shown up in the Console
    for (let p in person) {
        console.log(p);
    }
    ```

2. `delete` can't delete an inherited property.

    ```js
    const car = { branch: 'Audi' };

    const a4 = Object.create(car);
    console.log(a4.branch); // 'Audi'

    delete a4.branch;
    console.log(a4.branch); // 'Audi'
    ```

    In this case, we have to set the property to `undefined`:

    ```js
    a4.branch = undefined;
    console.log(a4.branch); // undefined
    ```

### Good to know

1. `delete` doesn't work with array:

    ```js
    const array = [1, 2, 3, 4, 5];

    delete array[1];
    console.log(array); // [1, empty, 3, 4, 5]
    ```

    If you want to remove an item from an array, use the `splice` method.

    ```js
    const array = [1, 2, 3, 4, 5];
    array.splice(2, 1);
    console.log(array); // [1, 2, 4, 5]
    ```

    There's an alternative method to remove the last element from array:

    ```js
    const array = [1, 2, 3, 4, 5];
    array.pop();
    console.log(array); // [1, 2, 3, 4]
    ```

2. We can use the ES6 spread operator to remove a property from an object:

    ```js
    const { name, ...rest } = { name: 'Foo', age: 20 };

    console.log(name); // 'Foo'
    console.log(rest); // { age: '20' }
    ```

    It's also possible to remove a dynamic property:

    ```js
    const property = 'name';
    const { [property]: value, ...rest } = { name: 'Foo', age: 20 };

    console.log(value); // 'Foo'
    console.log(rest); // { age: '20' }
    ```


delete obj.property vs obj.property = undefined

HTML5 adds the `hidden` attribute which has the same affect as the CSS `display: none` declaration.
An element will not be displayed if the `hidden` attribute is used regardless of its value:

```html
<div hidden>
    
</div>
```

Both hides the content from the screen reader as well.

### Differences

1. Both `display: none` declaration and `hidden` attribute work in the same way. But the `hidden` attribute provides better semantic.
2. `display: none` works in the old browsers, but `hidden` [isn't supported](https://caniuse.com/#feat=hidden) natively in IE 10 and below.

To get around the problem, we can simply set

```css
[hidden] {
    display: none;
}
```

It's included in modern CSS normalizing libraries such as [Normalize.css](https://necolas.github.io/normalize.css).

Changing the value of `display` property to something else (such as `display: flex`) will override the behavior of the `hidden` attribute.

Popular libraries prevent it from being overridden by using `!important`:

```css
[hidden] {
    display: none !important;
}
```

The implementation can be found in Bootstrap 4's [Reboot](https://getbootstrap.com/docs/4.1/content/reboot/#html5-hidden-attribute), [PureCSS](https://purecss.io/base/).

display: none vs [hidden]


There are three common CSS properties to make an element invisible:

-   `display: none`
-   `opacity: 0`
-   `visibility: hidden`

### Differences

1. `display: none` doesn't take space when the element is rendered. The other ways still take the space normally.

2. The browser will not response to any events of element which uses either `display: none` or `visibility: hidden`.
   The `visibility: hidden` style behaves like a combination of `opacity: 0` and `pointer-events: none`.

3. Regarding the accessibility, `opacity: 0` is the only property which makes the element accessible in the tab order, and the element's content can be read by screen readers.

4. Applying `display: none` or `opacity: 0` will effect on child elements. `visibility: hidden`, on the other hand, doesn't change the visibility of any children.

5. It's worth noting that if you want to measure the size of element, then you can't use `display: none` at all.

As mentioned in the first difference, an element with `display: none` doesn't take any space on the page. Hence, all properties related to the element size, such as `clientHeight`, `clientWidth`, `height`, `offsetHeight`, `offsetWidth`, `scrollHeight`, `scrollWidth` and `width` are zero.

All properties returned by the `getBoundingClientRect()` method are zero as well.

Similarly, an element with `visibility: hidden` will have empty inner text (equivalent with the `innerText` property).

### Tip

With Chrome DevTools, you can hide any element in the page by right clicking the element, and then click _Hide element_.

![Hide element with Chrome DevTools](/assets/hide-element-chrome.png)

In order to do that without breaking the layout, Chrome adds a CSS class named `__web-inspector-hide-shortcut__` to the element:

```css
.__web-inspector-hide-shortcut__ {
    visibility: hidden !important;
}
```

As mentioned above, applying the visibility style to an element doesn't effect on any children, so Chrome adds a following style to make all children invisible:

```css
.__web-inspector-hide-shortcut__ * {
    visibility: hidden !important;
}
```

### Good to know

Nowadays, it's very easy for us to set the opacity for given element and its children with a single line of CSS:

```css
.overlay {
    opacity: 0.75;
}
```

Many years ago, when the web developers have to deal with the old browsers such as Internet Explorer 6, 7, 8, here is what we have to do in order to support various browsers:

```css
.overlay {
    /* For IE 5, 6, 7 */
    filter: alpha(opacity=75);

    /* For IE 8 */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';

    /* For Netscape */
    -moz-opacity: 0.75;

    /* For Safari 1.x */
    -khtml-opacity: 0.75;

    /* Our good friends */
    opacity: 0.75;
}
```


display: none vs opacity: 0 vs visibility: hidden

### Differences

1. The `div` element has no special meaning. It is often used as a block of children elements.

    The `section` element introduced in HTML5 standard is used to group related elements, such as a subsection of a long article.

    In short, the `section` element provides more semantic syntax than the `div` element.

2. Other than the semantic differences, `div` has its own constructor interface `HTMLDivElement`.

    `section` and other HTML5 elements such as `article`, `footer`, `header`, `main`, `navbar` do not have this. In fact, their constructors are from `HTMLElement`.

    Assume that our page is organized as following:

    ```html
    <div id="root">
        <header></header>
        <section></section>
        <div></div>
        <footer></footer>
    </div>
    ```

    We can retrieve elements and print out the constructor for each of them:

    ```js
    document
        .getElementById('root')
        .querySelectorAll('*')
        .forEach((e) => console.log(e.tagName, ':', e.constructor.name));

    // HEADER: HTMLElement
    // SECTION: HTMLElement
    // DIV: HTMLDivElement
    // FOOTER: HTMLElement
    ```

3. If your page has nested `sections`, then the `h1` elements of the inner sections will have smaller font-sizez than the `h1` elements of the outer sections.

    ```html
    <section>
        <h1>Heading</h1>

        <section>
            <h1>Heading of inner section</h1>
        </section>
    </section>
    ```

    The default CSS of browsers defines the font size for them. For example, [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css#162) defines the different font sizes for `h1` at different levels of `section`:

    ```css
    /* First level */
    :-webkit-any(article, aside, nav, section) h1 {
        font-size: 1.5em;
    }

    /* Second level */
    :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
        font-size: 1.17em;
    }

    /* Third level */
    :-webkit-any(article, aside, nav, section)
        :-webkit-any(article, aside, nav, section)
        :-webkit-any(article, aside, nav, section)
        h1 {
        font-size: 1em;
    }

    /* Fourth level */
    :-webkit-any(article, aside, nav, section)
        :-webkit-any(article, aside, nav, section)
        :-webkit-any(article, aside, nav, section)
        :-webkit-any(article, aside, nav, section)
        h1 {
        font-size: 0.83em;
    }
    ```

    You can see the similar definitions in the default styles of [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L139).

    This does not happen with the `div` elements. All the `h1` elements will have the same font size no matter how their `div` containers are structured.

### Good practice

Due to the semantic manner, the `section` elements are often used to build the outlines of the page.
We should use the heading elements (`h1 - h6`) inside section to indicate the summary of section.

```html
<section>
    <h2>This section tells about</h2>
</section>

<section>
    <h2>Title of another section</h2>
</section>
```

### Good to know

Nowadays, HTML5 standard are supported in modern browsers. But in the old days when it is required to support non-HTML5 browsers such as IE 8, we have to do some additional tasks.

-   By default, the unknown elements are styled as `display: inline`, hence we need to reset the value for HTML5 elements:

    ```css
    article,
    aside,
    footer,
    header,
    nav,
    section {
        display: block;
    }
    ```

    The CSS normalizing libraries, such as [normalize.css](https://necolas.github.io/normalize.css/8.0.1/normalize.css), add similar modifications:

    ```css
    /* Render the `main` element consistently in IE */
    main {
        display: block;
    }

    /* Add the correct display in Edge, IE 10+, and Firefox */
    details {
        display: block;
    }
    ```

-   Plus, the older versions of IE do not support styling of unknown elements unless they are available in the DOM.

    As a result, we have to create them despite the fact that they are not used:

    ```js
    
    ```

<div> vs <section>


### Differences

The `DOMContentLoaded` event fires when all the nodes in the page have been constructed in the DOM tree.
The `load` event fires when all resources such as images and sub-frames are loaded completely.

### Good to know

The `DOMContentLoaded` event isn't supported in IE 8 and the older versions of IE.

To support the behavior in the old versions of IE, we can use the `readyState` property to check if the document is loaded completely or not:

```js
const ready = function (cb) {
    document.readyState === 'loading'
        ? // The document is still loading
          document.addEventListener('DOMContentLoaded', function (e) {
              cb();
          })
        : // The document is loaded completely
          cb();
};
```

The `ready` function accepts a function that will be invoked when the document is ready:

```js
ready(function() {
    // Do something when the document is ready
    ...
});
```


DOMContentLoaded vs load


Single quote `'` and double `"` quotes are used to wrap strings. There is no real difference between them except that JSON doesn't accept the single quote.

Other than that, here is the list of advantages and disadvantages:

-   Single quote is more readable and looks better when representing an empty string. See `''` in comparison to `""`.
-   In most keyboards, you might need to press extra key (_Shift_) to get the double quotes character
-   We don't have to escape if you write HTML in a string:

```js
const div = '<div class="message">Hello</div>';
```

-   Double quotes are often used in other programming languages. So people will get used to it easily when switching to JavaScript.

### Good practice

Choose and stick with one of single or double quotes. Using the same coding convention is very important, especially when you are working within a team.

Here is a list of preferences by different teams. They enfore the team using the same convention by using the [ESLint](https://eslint.org) rules.

**Single quote**

-   [Airbnb](https://github.com/airbnb/javascript#strings)
-   [Google](https://google.github.io/styleguide/javascriptguide.xml?showone=Strings#Strings)
-   [React](https://github.com/facebook/react/blob/master/.eslintrc.js)

```js
// ESLint rule
quotes: [ERROR, 'single', {...}],
```

**Double quotes**

-   [jQuery](https://contribute.jquery.org/style-guide/js/#quotes)
-   [Typescript](https://github.com/microsoft/TypeScript/blob/master/.eslintrc.json)

```js
// ESLint rule
"@typescript-eslint/quotes": ["error", "double", { ... }],
```

### Tip

You can use the template literal syntax in ES6 to get rid of escaping quote. For example:

```js
// Instead of
const message = 'It\\'s a message';

// We can do this which is more convenient
const message = `It\'s a message`;
```


double quotes vs single quote

Imagine that a web page is constructed by a tree of nodes. Considering a common HTML page has a structure like this:

```html
<!DOCTYPE html>
<html>
    <head>
        <meta ... />
        <title>...</title>
    </head>
    <body>
        ...
    </body>
</html>
```

The root node of tree is a document node which has two children, the `doctype` and the `html` tag.
The `html` tag is constructed by its children, `head` and `body`, and so on.

Each node has a property named `nodeType` which is a number to identity its type. It can be used to distinguish the kind of node from other one. For example, the following `div` has only one child node whose value is `Hello`:

```html
<div>Hello</div>
```

The `div` node is an element node, while its child node (`Hello`) is a text node. The following table taken from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) shows the popular node types:

-   `Node.ELEMENT_NODE` (1): An element node which is a HTML tag, such as `<div>`, `<p>` , etc.
-   `Node.TEXT_NODE` (3): The actual text inside an element node
-   `Node.COMMENT_NODE` (8): A comment node, such as ``
-   `Node.DOCUMENT_NODE` (9): A document node
-   `Node.DOCUMENT_TYPE_NODE` (10): A document type node, such as `<!DOCTYPE html>`

In a nutshell, a node represents a single node in the document tree, and an element is a particular type of node which is a HTML tag.

Element vs Node


Because a URL can consist of standard ASCII characters only, other special characters have to be encoded. They will be replaced by a sequence of different characters that represent its UTF-8 encoding.

`encodeURI` and `encodeURIComponent` are used for that purpose.

### Differences

1. `encodeURI` is used to encode a full URL.

    ```js
    encodeURI('https://domain.com/path to a document.pdf');

    // 'https://domain.com/path%20to%20a%20document.pdf'
    ```

    Whereas `encodeURIComponent` is used for encoding a URI component such as a query string.

    ```js
    `http://domain.com/?search=\${encodeURIComponent('encode & decode param')}`;

    // 'http://domain.com/?search=encode%20%26%20decode%20param'
    ```

2. There are 11 characters which are not encoded by `encodeURI`, but encoded by `encodeURIComponent`.

    The following snippet prints these characters:

    ```js
    const arr = Array(256)
        .fill(0)
        .map((_, i) => String.fromCharCode(i))
        .filter((c) => encodeURI(c) != encodeURIComponent(c));

    arr.forEach((c) => console.log(c, encodeURI(c), encodeURIComponent(c)));
    ```

    Here is the list of those characters:

    | Character | `encodeURI` | `encodeURIComponent` |
    | --------- | ----------- | -------------------- |
    | `#`       | `#`         | `%23`                |
    | `$`       | `$`         | `%24`                |
    | `&`       | `&`         | `%26`                |
    | `+`       | `+`         | `%2B`                |
    | `,`       | `,`         | `%2C`                |
    | `/`       | `/`         | `%2F`                |
    | `:`       | `:`         | `%3A`                |
    | `;`       | `;`         | `%3B`                |
    | `=`       | `=`         | `%3D`                |
    | `?`       | `?`         | `%3F`                |
    | `@`       | `@`         | `%40`                |

### Good to know

1. `decodeURI` and `decodeURIComponent` are methods to decode a string that is encoded by `encodeURI` and `encodeURIComponent` respectively.

2. `encodeURIComponent` does not encode `-_.!~*'()`. If you want to these characters are encoded, you have to replace them with corresponding UTF-8 sequence of characters:

    ```js
    const encode = (str) =>
        encodeURIComponent(str)
            .replace(/\\-/g, '%2D')
            .replace(/\\_/g, '%5F')
            .replace(/\\./g, '%2E')
            .replace(/\\!/g, '%21')
            .replace(/\\~/g, '%7E')
            .replace(/\\*/g, '%2A')
            .replace(/\\'/g, '%27')
            .replace(/\$/g, '%28')
            .replace(/\$/g, '%29');

    encode("What's result of (4 + 2)?"); // "What%27s%20result%20of%20%284%20%2B%202%29%3F"
    ```

    The decoding function could look like as follow:

    ```js
    const decode = (str) =>
        decodeURIComponent(
            str
                .replace(/\\%2D/g, '-')
                .replace(/\\%5F/g, '_')
                .replace(/\\%2E/g, '.')
                .replace(/\\%21/g, '!')
                .replace(/\\%7E/g, '~')
                .replace(/\\%2A/g, '*')
                .replace(/\\%27/g, "'")
                .replace(/\\%28/g, '(')
                .replace(/\\%29/g, ')')
        );

    decode('What%27s%20result%20of%20%284%20%2B%202%29%3F'); // "What's result of (4 + 2)?"
    ```


encodeURI vs encodeURIComponent


### Difference

`==` (equality operator) and `===` (strict equality operator) are the operators to compare two operands.

The `==` operator does type conversions before comparing the values. On the other hand, the `===` operator doesn't perform any type conversions.

It means that the `===` operator returns `true` if two operands have the same type and same value.

For example:

```js
// `true` is converted to 1 and then compared to 1
true == 1; // true
true === 1; // false
```

The following table demonstrates the result of these operators:

### Good practice

Always use `===` to compare values.


== vs ===

To demonstrate the difference between event bubbling and capturing modes, let's take an example where we have two HTML elements, one is inside another.

Both elements handle the `click` event. To make it simple, we use an inline onclick attribute to handle the event:

```html
<div id="parent" onclick="console.log('parent clicked')">
    
    <div id="child" onclick="console.log('child clicked')">
        
        Child
    </div>
</div>
```

Now we have two different handlers. Clicking the child node would perform these handlers in different orders based on which mode we want the event to be executed in.

-   In _bubbling_ mode, which is the default mode, the event will be triggered at the deepest element. Then it will be bubbled up to the its parents.

Clicking the child node will print `child clicked`, and then `parent clicked`.

-   In _capturing_ mode, the order is opposite. The handler will be invoked from the parent element first, then down to the its children.

We can force the event to be fired in the capturing mode by passing the third parameter of `addEventListener(event, handler, useCapture)` to `true`.

Let's revisit the example by using `addEventListener()`:

```js
document.getElementById('parent').addEventListener(
    'click',
    () => {
        console.log('parent clicked');
    },
    true
);

document.getElementById('child').addEventListener('click', () => {
    console.log('child clicked');
});
```

If we click the child node, the listener of parent node is fired first, and then the child node's listener. The _Console_ window will output as follow:

```html
parent clicked children clicked
```

### Good practice

It is not recommended to register the event handler via the element attributes such as `onclick`. For more details, check out the [addEventListener() function vs onproperty](/add-event-listener-function-vs-on-property).

### Good to know

The capturing mode does not happen for some special events (`focus`, for example) and on IE < 9.

### See also

-   [event.preventDefault vs return false](/event-prevent-default-vs-return-false)
-   [stopImmediatePropagation vs stopPropagation](/stop-immediate-propagation-vs-stop-propagation)

event bubbling vs capturing


`preventDefault()` and `return false` are the different ways to prevent the default event from happening.

For example, when user clicks on an external link, we should display a confirmation modal that asks user for redirecting to the external website or not:

```js
hyperlink.addEventListener('click', function (e) {
    // Don't redirect user to the link
    e.preventDefault();
});
```

Or we don't want to submit the form when clicking its submit button. Instead, we want to validate the form first:

```js
submitButton.addEventListener('click', function (e) {
    // Don't submit the form when clicking a submit
    e.preventDefault();
});
```

### Differences

1. `return false` doesn't have any effect on the default behavior if you use the `addEventListener` method to handle an event.
   It only works when the event handler is declared as an element's attribute:

    ```js
    hyperlink.addEventListener('click', function (e) {
        // Does NOT work
        return false;
    });

    // Work
    hyperlink.onclick = function (e) {
        return false;
    };
    ```

2. According to the [HTML 5 specifications](https://www.w3.org/TR/2017/REC-html52-20171214/webappapis.html#the-event-handler-processing-algorithm), `return false` will cancel the event except the `mouseover` event.

### Good practices

1. It's recommended to use the `preventDefault` method instead of `return false` inside an event handler.
   Because the latter only works with using the `onclick` attribute which will remove other handlers for the same event.

2. If you're using jQuery to manage the events, then you're able to use `return false` within the event handler:

    ```js
    $(element).on('click', function (e) {
        return false;
    });
    ```

    Before returning the value of `false`, the handler would do something else. The problem is that if there's any runtime error occurring in the handler, we will not reach the `return false` statement at the end.

    In that case, the default behavior will be taken:

    ```js
    $(element).on('click', function (e) {
        // Do something here, but if there's error at runtime
        // ...
        return false;
    });
    ```

    We can avoid this situation by using the `preventDefault` method before performing any custom handler:

    ```js
    $(element).on('click', function (e) {
        e.preventDefault();

        // Do something here
        // The default behavior is prevented regardless errors at runtime
        // ...
    });
    ```

### Good to know

If you're using jQuery to manage the event, then `return false` will behave same as the `preventDefault()` and `stopPropagation()` methods:

```js
$(element).on('click', function (e) {
    // Prevent the deault event from happenning and
    // prevent the event from bubbling up to the parent element
    return false;
});
```

### See also

-   [event bubbling vs capturing](/event-bubbling-vs-capturing)
-   [stopImmediatePropagation vs stopPropagation](/stop-immediate-propagation-vs-stop-propagation)


event.preventDefault vs return false


### Differences

1. The values iterated on the `for ... in` and `for ... of` statements are different.

    `for ... in` iterates over the enumerable property keys of object. Whereas `for ... of` iterates over the values of the numeric properties of object.

    ```js
    const list = ['a', 'b', 'c'];

    for (let i in list) {
        console.log(i); // '0', '1', '2'
    }

    for (let i of list) {
        console.log(i); // 'a', 'b', 'c'
    }
    ```

2. Unlike `for ... in`, `for ... of` does not support plain objects:

    ```js
    const person = {
        firstName: 'Foo',
        lastName: 'Bar',
        age: 42,
    };

    // TypeError: `person` is not iterable
    for (let k of person) {
        ...
    }
    ```

    It is because a plain object is not iterable. To fix that, we can use the `Object.keys()` method to iterate on the object properties:

    ```js
    for (let k of Object.keys(person)) {
        console.log(k, ':', person[k]);
    }

    // firstName: Foo
    // lastName: Bar
    // age: 42
    ```

3. `for ... of` supports iterating over a Unicode string.

    ```js
    const msg = 'Hell😀 W😀rld';

    // for ... in
    for (let i in msg) {
        console.log(msg[i]);
    }

    // Output:
    // 'H', 'e', 'l', 'l', '�', ' ', 'W', '�', '�', 'r', 'l', 'd'

    // for ... of
    for (let c of msg) {
        console.log(c);
    }

    // Output:
    // 'H', 'e', 'l', 'l', '😀', ' ', 'W', '😀', 'r', 'l', 'd'
    ```

4. `for ... of` loop can wait for an async task to complete in each iteration via the `await` keyword:

    ```js
    for await (... of ...) {
        ...
    }
    ```

### Good practices

1. It is not recommended to add a custom method to primitive objects such as `Array`, `Boolean`, `Number`, `String`, etc.
   Since `for ... in` statement loops over the enumerable properties, it will include new methods which are added to the prototype.

    ```js
    Array.prototype.isEmpty = function () {
        return (this.length = 0);
    };

    const a = ['cat', 'dog', 'mouse'];
    for (let i in a) {
        console.log(i); // '0', '1', '2', 'isEmpty'
    }
    ```

2. Destructing `for ... in` is [deprecated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Statements). Instead, use `for ... of`:

    ```js
    const addressBook = new Map();
    addressBook.set('Foo', '111-222-333');
    addressBook.set('Bar', '444-555-666');

    for (const [name, phone] of addressBook) {
        console.log(name, ':', phone);
    }

    // Foo: 111-222-333
    // Bar: 444-555-666
    ```

### Good to know

By default, all properties of an array or object will appear in `for ... in`. However, this behavior is avoidable.
Using `Object.defineProperty` can decide whether a property is enumerable or not.

```js
let person = {
    firstName: 'Foo',
    lastName: 'Bar',
};

// The 'age' property is not enumerable
Object.defineProperty(person, 'age', {
    value: 42,
    enumerable: false,
});

for (let i in person) {
    console.log(i); // 'firstName', 'lastName'
}
```


for ... in vs for ... of


In JavaScript, there are some different ways to create a function. This post will talk about the difference between the following ways:

```js
// Function expression
var fn = function () {
    // The implementation ...
};

// Function declaration
function fn() {
    // The implementation ...
}
```

### Difference

A function created by using an expression is assigned to a variable at run time. We cannot invoke the function before the declaration.

```js
// TypeError: sum is not a function
sum(4, 2);

var sum = function (a, b) {
    return a + b;
};
```

Function declaration on the other hand is assigned to an identifier at parse time. It is available above its declaration.

```js
sum(4, 2); // 6

function sum(a, b) {
    return a + b;
}
```

### Good to know

1. In the strict mode introduced in ES5, function declaration is scoped to its enclosing block. We cannot invoke the function from outside of the block.

    ```js
    'use strict';
    {
        function sum(a, b) {
            return a + b;
        }
    }

    // ReferenceError: sum is not defined
    sum();
    ```

2. We can mix the two variants by using a named function expression. With this variant, the function name is taken from the declaration form.

    ```js
    var sum = function sumOf(a, b) {
        return a + b;
    };

    sum.name; // "sumOf"
    ```

3. Usually, we can invoke a function by using the form of _Immediately Invoked Function Expression_ (IIFE).

    ```js
    (function (a, b) {
        return a + b;
    })(4, 2);

    // 6
    ```

    Do you know that we get the same result if we omit the parentheses and put `+` at the beginning as follow:

    ```js
    +(function (a, b) {
        return a + b;
    })(4, 2);

    // 6
    ```

    It works because putting `+` at the beginning of function declaration will turn it to an expression, and passing the parameters with `()` at the end will invoke the expression.

    It is rare to see that code in development, but it is used in the minifications to save the file size.

    In addition to `+`, you can use other operators such as `-`, `!`, `~` and `void` in the similar way to invoke a function:

    ```js
    -function() { ... }();
    !function() { ... }();
    ~function() { ... }();
    void function() { ... }();
    ```

    Note that the return value could be different from the original function, for example:

    ```js
    !(function () {
        return false;
    })(); // true
    ```


function declaration vs function expression


There are two ways to define a method in an interface.

-   Declare as a property whose type is function

```js
interface Logger {
    log: (message: string) => void;
}
```

-   Declare as a normal function

```js
interface Logger {
    log(message: string): void;
}
```

### Differences

1. If the method is declared as a interface function, then it's possible for you to add more overload versions.

    ```js
    interface Logger {
        log(message: string): void;
    }

    // In other places
    interface Logger {
        log(message: string, level: string): void;
    }
    ```

    Declaring method as a property, on the other hand, prevents you from duplicating the property declarations which have different types:

    ```js
    interface Logger {
        log: (message: string) => void;
    }

    // Does not work
    interface Logger {
        log: (message: string, level: string) => void;
    }
    ```

2. The `readonly` modifier only has effect with the property declaration.

    ```js
    interface Person {
        firstName: string;
        lastName: string;

        readonly fullName: () => string;

        // Doesn't work
        // readonly fullName(): string;
    }
    ```

3. TypeScript generates different output for a class that implements the interface methods.

    Assume that we have a class `ConsoleLogger` that simply logs the message in the _Console_ window.

    For the first approach:

    ```js
    interface Logger {
        log: (message: string) => void;
    }

    class ConsoleLogger implements Logger {
        log = (message: string) => {
            console.log(message);
        };
    }

    // Generated JavaScript code:
    //
    // class ConsoleLogger {
    //    constructor() {
    //        this.log = (message) => {
    //            console.log(message);
    //        };
    //    }
    // }
    ```

    For the second approach:

    ```js
    interface Logger {
        log(message: string): void;
    }

    class ConsoleLogger implements Logger {
        log(message: string) {
            console.log(message);
        }
    }

    // Generated JavaScript code:
    //
    // class ConsoleLogger {
    //    log(message) {
    //        console.log(message);
    //    }
    // }
    ```

    Looking at the generated JavaScript codes, you'll see the different outputs.

    The first approach produces a property `log` in the constructor. It means that `log` will be created every time you create a new instance of class.

    While the second approach produces the `log` method, and it exists in all instances of class. The `log` method also is a member of class prototype, so we can extend the class to override the method if needed:

    ```js
    class ConsoleLogger implements Logger {
        log(message: string) {
            console.log(message);
        }
    }

    class ConsoleLoggerWithColor extends ConsoleLogger {
        // Override the `log` method
        log(message: string) {
            // Display the message in white color and blue background area
            console.log('%c%s', 'color: white; background: blue', message);
        }
    }
    ```

    See the [differences](/method-in-class-constructor-vs-prototype) between declaring methods in class constructor and prototype for more details.


function vs property in interface


The `in` operator and `hasOwnProperty` function are the common ways to check if an objects contains a particular key.

```js
const person = {
    name: 'Foo',
};

'name' in person; // true
person.hasOwnProperty('name'); // true
```

### Differences

1. For inherited properties, `in` will return `true`. `hasOwnProperty`, as the name implies, will check if a property is owned by itself, and ignores the inherited properties.

    Let's reuse the person object from the previous example. Since it's a JavaScript object which has built-in properties such as `constructor`, `__proto__`, the following check return true:

    ```js
    'constructor' in person; // true
    '__proto__' in person; // true
    'toString' in person; // true
    ```

    While `hasOwnProperty` returns `false` when checking against these properties and methods:

    ```js
    person.hasOwnProperty('constructor'); // false
    person.hasOwnProperty('__proto__'); // false
    person.hasOwnProperty('toString'); // false
    ```

2. For the `get` and `set` methods of a class, `hasOwnProperty` also returns `false`.

    For example, we have a simple class representing triangles:

    ```js
    class Triangle {
        get vertices() {
            return 3;
        }
    }

    // Create new instance
    const triangle = new Triangle();
    ```

    Despite the fact that `vertices` is the property of `triangle`:

    ```js
    triangle.vertices; // 3
    'vertices' in triangle; // true
    ```

    `hasOwnProperty` still ignores it:

    ```js
    triangle.hasOwnProperty('vertices'); // false
    ```

### Good practice

In order to check the existence of a property, use `hasOwnProperty`. Use `in` to check the existence of a method.

### See also

-   [Object vs Map](/object-vs-map)


hasOwnProperty vs in


`instanceof` and `typeof` are two operators to check the type of a value.

### Differences

The `typeof` operator checks if a value has type of primitive type which can be one of `boolean`, `function`, `object`, `number`, `string`, `undefined` and `symbol` (ES6).

```js
typeof 'helloworld'; // 'string'
typeof new String('helloworld'); // 'object'
```

The `instanceof` operator checks if a value is an instance of a class or constructor function.

```js
'helloworld' instanceof String; // false
new String('helloworld') instanceof String; // true
```

### Good to know

1. If you want to check if a value is a primitive string or a `String` object, then you need to use both operators:

    ```js
    const isString = (value) => typeof value === 'string' || value instanceof String;

    isString('helloworld'); // true
    isString(new String('helloworld')); // true
    ```

    Another approach is to rely on the `toString()` of `Object` as below:

    ```js
    const isString = (value) => Object.prototype.toString.call(value) === '[object String]';

    isString('hello world'); // true
    isString(new String('hello world')); // true
    isString(10); // false
    ```

    We can use similar methods to check a value against given original or wrapped primitive types:

    ```js
    const isBoolean = (value) => Object.prototype.toString.call(value) === '[object Boolean]';
    ```

2. Be careful when creating a value of primitive type with constructor. The type of value can be changed based on the way you use it.
   In the piece of code below, we start with creating a string from the `String` constructor:

    ```js
    let message = new String('hello');
    message instanceof String; // true
    typeof message; // 'object'
    ```

    We are going to append the string object with another string:

    ```js
    message += ' world';
    ```

    Now, let's look at the result of the operators:

    ```js
    message instanceof String; // false
    typeof message; // 'string'
    ```

    These type modifications are known as **boxing** and **unboxing**. Boxing is the process that wraps a primitive value by object.
    Unboxing extracts the wrapped primitive value from object.

3. There is a special case when using `typeof` with `null`:

    ```js
    typeof null; // 'object', not 'null'
    ```

4. `instanceof` doesn't work for primitive types.

    If you want to use `instanceof` all the time, then you can override the behavior of `instanceof` by implementing a static method with the key of `Symbol.hasInstance`.

    In the following code, we create a class called `PrimitiveNumber` that checks if a value is a number:

    ```js
    class PrimitiveNumber {
        static [Symbol.hasInstance](value) {
            return typeof value === 'number';
        }
    }

    12345 instanceof PrimitiveNumber; // true
    'helloworld' instanceof PrimitiveNumber; // false
    ```


instanceof vs typeof


Using `interface` and `type` declarations are common way to represent given data structure.

```js
// Using interface
interface Point {
    x: number;
    y: number;
}

// Using type alias
type Point = {
    x: number,
    y: number,
};
```

### Difference

It's possible to declare the same interface multiple times. They will be merged together to form a single interface definition.

```js
interface Point {
    x: number;
}

interface Point {
    y: number;
}

const p: Point = {
    x: 1,
    y: 2,
};
```

Where `type` alias must be unique and doesn't allow us to merge the declarations.

```js
type Person = {
    firstName: string,
};
// Throw error: Duplicate identifier
type Person = {
    lastName: string,
};
```

Being able to merge the interface declarations is very useful, for example, when we provide the type definitions for an external library which isn't made with TypeScript completely.

In that case, if there're some missing definitions, we can provide them via declaration merging.

### Good practice

If you are author of a library or create type definitions for an external library, use `interface` for public APIs. So the consumers can extend them.


interface vs type


`key`, `keyCode` and `which` can be used to determine which key is pressed. Following is a sample code that handles the `keyPress` event of a text box.

It checks if user presses the _Enter_ key whose key code is 13:

```js
textBoxElement.addEventListener('keydown', function (e) {
    if (e.keyCode === 13) {
        // Do something ...
    }
});
```

### Difference

According to MDN documentations, both [keyCode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) and [which](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which) are deprecated and will be removed from the Web standards.

Apart from that, both properties are supported differently by browsers. Some browsers use `keyCode`, other use `which`.

It's common to see how they are normalized as following:

```js
const key = 'which' in e ? e.which : e.keyCode;

// Or
const key = e.which || e.keyCode || 0;
```

### Good practice

It's recommended to use the [key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) property.
The sample code above can be rewritten as

```js
if (e.key === 'Enter') {
    // Enter is pressed
}
```


key vs keyCode vs which


1. The order of events

    When user presses a key or combination of different keys, `keydown`, `keypress` and `keyup` are triggered in that order:

    - The `keydown` event is triggered first when user presses a key
    - The `keyup` event is triggered last when user releases a key
    - In between, the `keypress` event is triggered

2. These events serve different purposes.

    The `keydown` and `keyup` events are often used to handle the physical keys, while the `keypress` event is used to handle characters which are being typed.

    The `keypress` ignores keys such as `delete`, `arrows`, `page up`, `page down`, `home`, `end`, `ctrl`, `alt`, `shift`, `esc`, etc.
    So, if we need to handle those keys, it's better to use either `keydown` or `keyup` event.

    The sample code below listens on the `keydown` event, and closes the modal if the _Esc_ key is pressed:

    ```js
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            // Close the modal
        }
    });
    ```

3. The `keydown` and `keypress` events fire multiple times if user press and hold a key.

    While `keyup` fires only once when user releases the key.


keydown vs keypress vs keyup


In TypeScript, there are a few ways to enumerate the possible values of a type. Let's consider a situation where our website has to support different themes including default, light, and dark.

They can be defined by one of the following approaches:

-   Using a union of string literal types

```js
type Theme = 'DEFAULT' | 'LIGHT' | 'DARK';
```

-   Using an enum

```js
enum Theme {
    DEFAULT,
    LIGHT,
    DARK,
}
```

### Differences

1. TypeScript does not generate code for the union of string literals. As a result, the generated code will have a smaller size.

    Here is the generated code when TypeScript transpiles the `Theme` enum:

    ```js
    var Theme;
    (function (Theme) {
        Theme[(Theme['DEFAULT'] = 0)] = 'DEFAULT';
        Theme[(Theme['LIGHT'] = 1)] = 'LIGHT';
        Theme[(Theme['DARK'] = 2)] = 'DARK';
    })(Theme || (Theme = {}));
    ```

2. In the case of using a union type, you still have to type the full string when creating a new variable, for example:

    ```js
    type Theme = 'DEFAULT' | 'LIGHT' | 'DARK';
    const theme: Theme = 'DEFAULT';
    ```

    Popular editors like Visual Studio Code help us choose the value from the list of possible values quickly but we have to manually change the value in all places if we want to refactor the value to something else.

    On the other hand, using `enum` gives a few remarkable benefits when you refactor the code or develop a library.
    Let's take a look at a simple use case where your library provides the following function to switch the website to a given theme:

    ```js
    const switchTheme = (theme: Theme) => {
        ...
    };

    export { Theme, switchTheme };
    ```

    The consumers now can pass a particular theme to the `switchTheme` function without caring about the real value behind:

    ```js
    // consumer
    import { Theme, switchTheme } from 'your-lib';

    switchTheme(Theme.DARK);
    ```

    In comparison to `switchTheme('DARK')`, how convenient and safe the invoke above is.

### Good to know

There is another approach using the [const assertions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions) which is available from TypeScript 3.4.

```js
const Theme = {
    DEFAULT: 'Default',
    LIGHT: 'Light',
    DARK: 'Dark',
} as const;

type Theme = typeof Theme[keyof typeof Theme];

let darkTheme: Theme = Theme.DARK;
let lightTheme: Theme = 'Light';
const invalidTheme: Theme = 'Blue';     // ERROR
```

### Good practice

If you don't set the values for enum, they will be set to incremental numbers by default.

So `Theme.DEFAULT`, `Theme.LIGHT` and `Theme.DARK` will take the value of 0, 1, 2, respectively. It is more hard to debug:

```js
console.log(Theme.DARK); // 2
```

Even if we set the number for enum values, it's still possible for us to set an invalid value for a variable whose type is the enum:

```js
enum Theme {
    DEFAULT = 0,
    LIGHT = 1,
    DARK = 2,
}

// TypeScript doesn't throw errors
const theme: Theme.DEFAULT = 3;
```

Due to these reasons, it's advised to use string literals for the enum values. The `Theme` enum should look like as follow:

```js
enum Theme {
    DEFAULT = 'Default',
    LIGHT = 'Light',
    DARK = 'Dark',
}

console.log(Theme.DARK);                // 'Dark'
let theme: Theme.DEFAULT = 'Default';   // ERROR
```

### See also

-   [const enum vs enum](/const-enum-vs-enum)


literal union type vs string enums


`Map` and `WeakMap` are two data structures that can be used to manipulate the relationship between keys and values.

### Differences

1. We can use object or any primitive types for both keys and values of a `Map`.

    However, `WeakMap` keys only accept objects. It means that we can't use the primitive types as keys of `WeakMap`.

    ```js
    const attrs = new WeakMap();

    // ERROR
    attrs.set('color', 'red');
    ```

2. Unlike `Map`, `WeakMap` does not support iteration on both keys and values. It is not possible to get all keys or values of a `WeakMap`.
   Also, there is no way to clear a `WeakMap`.

3. The most important difference is that `WeakMap` does not prevent the keys from being garbage collected when there is no references to the keys.

    On the other hand, `Map` maintains the references to keys and values indefinitely. Once the keys and values are created, they will take the memory and will not be garbage collected even if there is no references to them.
    This could leads to a memory leak issue.

    Consider a simple code below where we map an unique id to particular person's information:

    ```js
    let id = { value: 1 };

    const people = new Map();
    people.set(id, { name: 'Foo', age: 20, address: 'Bar' });

    // Remove the id
    id = null;
    ```

    After removing the key object `id`, it is still able to access its reference via the map keys:

    ```js
    people.keys().next().value; // { value: 1 }
    ```

    Because of this difference, `WeakMap` as its name implies holds the _weak_ references to the keys.
    It explains why its keys are not enumerable which is mentioned in the previous difference.

### See also

-   [Object vs Map](/object-vs-map)


Map vs WeakMap


### Differences

1. `margin` is the space around the element.

    ```shell
    ┌──────────────────────┐               ┌──────────────────────┐
    |                      |               |                      |
    |                      |               |                      |
    |                      |◀︎── margin ───▶︎|                      |
    |                      |               |                      |
    |                      |               |                      |
    └──────────────────────┘               └──────────────────────┘
    ```

    Whereas `padding` is the space between an element and the content inside it. Both `margin` and `padding` do not include the border of element.

    ```shell
    ┌─────────────▲─────────────┐
    |             | Padding     |
    |             |             |
    |       ┌─────▼─────┐       |
    |       |           |       |
    |◀︎─────▶︎|           |◀︎─────▶︎|
    |       |           |       |
    |       |           |       |
    |       └─────▲─────┘       |
    |             |             |
    |             |             |
    └─────────────▼─────────────┘
    ```

2. The top and bottom margins are collapsible.

    Let's consider an example where we have two elements, `A` and `B`. The `A` element has 30px margin at the bottom, and `B` has 20px margin at the top.

    In final, the margin between two elements are the maximum numbers of two margin values, i.e 30px, not the total sum of them.

    ```shell
    ┌───────────────────────────┐
    |                           |
    |              A            |
    |                           |
    └───────┬───────────────────┘
            |
            |       ▲
    margin |       |
    bottom |       |
            |       | margin
            |       | top
            |       |
    ┌───────▼───────┴───────────┐
    |                           |
    |              B            |
    |                           |
    └───────────────────────────┘
    ```

    This does not happen with the left, right margins and any `padding` values.

3. We can set `margin: auto`, but it is not possible for `padding`. We often use `margin: auto` to center an element.
4. `margin` can be any float number, but `padding` cannot be a negative.

    ```css
    .div {
        margin: -10px;

        /* Not possible */
        padding: -15px;
    }
    ```

### See also

-   [border-box vs content-box](/border-box-vs-content-box)


margin vs padding


Given a class, there are two common ways to define a method for it.

-   Define the method in the class constructor

```js
function Calculator() {
    this.sum = function (a, b) {
        return a + b;
    };
}
```

-   Or define the method in the class prototype:

```js
function Calculator() {}

Calculator.prototype.sum = function (a, b) {
    return a + b;
};
```

Both approaches produce the same result when the method is invoked by a class instance:

```js
const calc = new Calculator();
calc.sum(1, 2); // 3
```

### Differences

1. In the first approach, the method has to be created every time we create a new instance of the class. The second approach, on the other hand, creates the method once and share it for all instances of the class.

    That's being said, the second approach is more efficient, and requires less memory than the first one.

2. The method created via prototype can be extended and overridden by the sub class.

### Good practice

The first approach could create a huge constructor function that consists of logic of other functions.

Consider the following huge constructor:

```js
function Foo() {
    this.bigFunction = function () {
        // A big function here
    };

    this.anotherBigFunction = function () {
        // ...
    };
}
```

versus

```js
function Foo() {}

Foo.prototype.bigFunction = function() {
    ...
}

Foo.prototype.anotherBigFunction = function() {
    ...
}
```

The latter looks more readable and convenient.

### See also

-   [function vs property in interface](/function-vs-property-in-interface)


method in class constructor vs prototype


### Difference

The `mouseenter` and `mouseover` events are triggered when you move the mouse over an element.

`mouseenter` only triggers when the mouse enters the element on which it is set. The counterpart event is `mouseleave`.

`mouseover` triggers when the mouse enters the element _or any of its children_. Its counterpart is `mouseout`.

### Good practice

Because the `mouseover` event propagates from the child element up through the hierarchy, if you're doing a resource-intensive task on the event you may notice the screen flickering.

It's recommended to use the `mouseenter` and `mouseleave` events instead.


mouseenter vs mouseover


`naturalWidth` is the natural width of an element. It never changes.
For example, a 100px wide image always has `naturalWidth` of 100px even when the image is resized by CSS or JavaScript.

Whereas, `width` is the value of `width` attribute. It is subject to change and can be updated via CSS or JavaScript.

### Good to know

It's possible to get the natural width of an image that can be loaded by given `url`:

```js
const getNaturalWidth = url => {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener('load', () => {
            resolve(img.naturalWidth);
        });
        img.addEventListener('error', () => reject());
        img.src = url;
    });
};

// Usage
getNaturalWidth('https://path/to/image.png').then((naturalWidth) => {
    ...
});
```


naturalWidth vs width


`nodeName` and `tagName` are the properties to get the name of HTML node.

`tagName` is used to get the type of element nodes that have node type of 1. For other type of nodes such as attribute, comment, text, .etc,
`nodeName` is used to get the name of node.

Let's take a look at the following example where we have a simple button:

```html
<button id="login">Login</button>
```

The `nodeName` and `tagName` properties are the same for the HTML element:

```js
const button = document.getElementById('login');
button.nodeType; // 1
button.nodeName; // 'BUTTON'
button.tagName; // 'BUTTON'
```

Let's access the node represents the `id` attribute:

```js
const idNode = button.getAttributeNode('id');
idNode.nodeType; // 2
idNode.nodeName; // 'id'
idNode.tagName; // undefined
```

In a similar way, the button text node gives different result for `nodeName` and `tagName`:

```js
const content = button.firstChild;
content.nodeType; // 3
content.nodeName; // '#text'
content.tagName; // undefined
```


nodeName vs tagName


Each browser provides a set of default styles which are applied for every web pages it renders.
The default style sheet is also known as the user-agent style sheet.

You can take a look at the default styles provided by:

-   [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
-   [Firefox](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css)
-   [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)

Since the default styles are not the same, causing a web page will have different look and feel on each browser. Both normalizing and resetting CSS aim to fix that problem.

1. Resetting CSS, as the name suggests, will reset all the built-in styles.

    The most popular CSS reset library is Meyer's reset.css which you can see the complete code [here](https://meyerweb.com/eric/tools/css/reset/reset.css).
    For example, it resets the `margin` for `body` to 0:

    ```css
    body {
        margin: 0;
    }
    ```

    If you use the _Developer Tool_ of Chrome browser, and inspect the body element of any web page, you will see that it has the margin of 8px by default which we often don't want to have at all:

    ```css
    body {
        margin: 8px;
    }
    ```

2. Normalizing CSS is another alternative to resetting CSS.

    The most popular library in this area is [normalize.css](https://necolas.github.io/normalize.css/). It tries to make built-in browser styling consistent across browsers.

    More than that, the library also:

    - Makes some elements look like what we expect.

    For example, the Chrome, Firefox and Safari browsers use the following styles for the `sub` and `sup` tags:

    ```css
    sub {
        vertical-align: sub;
        font-size: smaller;
    }
    sup {
        vertical-align: super;
        font-size: smaller;
    }
    ```

    It's not easy for us to distinguish these tags with normal one visually. normalize.css improves by declaring the position for these tags:

    ```css
    sub {
        bottom: -0.25em;
    }
    sup {
        top: -0.5em;
    }
    ```

    - Fix display bugs across browsers.

    You can look at its [source code](https://github.com/necolas/normalize.css/blob/master/normalize.css) to see there are lot of bug fixes for different browsers such as Internet Explorer, Edge, Firefox, etc.

You don't need to include normalize.css if you use popular CSS libraries. It's already included in:

-   [Bootstrap's reboot](https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss#L3)
-   [Tachyons](https://github.com/tachyons-css/tachyons/blob/master/src/_normalize.css)
-   [Tailwindcss](https://unpkg.com/tailwindcss@1.1.4/dist/base.css)

### Resources

1. [water.css](https://github.com/kognise/water.css) adds more visual styles for common tags
2. [minireset](https://github.com/jgthms/minireset.css) is another tiny modern CSS reset
3. [This website](https://browserdefaultstyles.com) allows us to get the default styles of various rendering engines for particular element


Normalize vs Reset CSS


### Differences

1. `undefined` indicates that a variable has been declared but not been assigned to any value, including `null`.

    ```js
    let foo;
    console.log(foo); // undefined
    ```

    `null` is used to indicate that a variable doesn't have a value.

    ```js
    let foo = null;
    console.log(foo); // null
    ```

2. `undefined` and `null` are considered to be different types.

    `undefined` is a type itself, whereas `null` is a special value of object.

    ```js
    console.log(typeof undefined); // 'undefined'
    console.log(typeof null); // 'object'
    ```

    Since they are different types, here are the result of [equality and identity](/equality-operator-vs-strict-equality-operator) operators when comparing them to each other:

    ```js
    null == undefined; // true
    null === undefined; // false
    ```

### Good to know

`JSON.stringify` omits `undefined`, but keeps `null`:

```js
JSON.stringify({
    name: 'John',
    address: null,
    age: undefined,
});

// {"name":"John","address":null}
```


null vs undefined


Both `Number()` and `parseInt()` are often used to convert a string to number.

### Differences

1. `Number()` converts the type whereas parseInt parses the value of input.

    ```js
    // Parsing
    parseInt('32px'); // 32
    parseInt('5e1'); // 5

    // Convert type
    Number('32px'); // NaN
    Number('5e1'); // 50
    ```

    As you see, `parseInt` will parse up to the first non-digit character. On the other hand, `Number` will try to convert the entire string.

2. `parseInt` accepts two parameters. The second parameter is used to indicate the radix number.

    ```js
    parseInt('0101'); // 101
    parseInt('0101', 10); // 101
    parseInt('0101', 2); // 5

    Number('0101'); // 101
    ```

3. They return different results when we passing special values such as `undefined` or `null`:

    ```js
    parseInt(); // NaN
    parseInt(null); // NaN
    parseInt(true); // NaN
    parseInt(''); // NaN

    Number(); // 0
    Number(null); // 0
    Number(true); // 1
    Number(''); // 0
    ```

### Good practices

1. Always pass the radix to `parseInt`.

    The `parseInt` method takes two parameters:

    ```js
    parseInt(value, radix);
    ```

    The second parameter specifies the current numeral system. In the case it's not specified, then it will be set automatically based on the value.

    - If the value starts with `0x` or `0X`, then the radix is 16 (hexadecimal)
    - In other cases, the radix is 10 (decimal).

    > In the older versions of JavaScript, if the string starts with 0 then the radix is set as 8 (octal).

    ```js
    parseInt('0xF'); // 15
    parseInt('0XF'); // 15
    parseInt('0xF', 16); // 15

    parseInt('0xF', 10); // 0
    ```

    Since the method could be implemented differently in different versions of JavaScript and browsers, it's recommended to pass the radix number.

2. Trim the spaces before parsing the number.

    Both `Number()` and `parseInt` accept the spaces in input. But be aware that you could get different result when passing a value with spaces as following:

    ```js
    parseInt('   5   '); // 5
    parseInt('12 345'); // 12, not 12345
    ```

    To avoid the similar situations, you should [remove all spaces](https://1loc.dev/#remove-spaces-from-a-string) before parsing:

    ```js
    parseInt(value.replace(/\s+/g, ''), 10);
    ```

3. Don't use `new Number()` to compare the numbers.

    ```js
    Number('2') == 2; // true
    Number('2') === 2; // true

    new Number('2') == 2; // true
    new Number('2') === 2; // false

    const a = new Number('2');
    const b = new Number('2');

    a == b; // false
    a === b; // false
    ```

### Tip

Instead of using the `Number()` constructor to [convert](https://1loc.dev/#convert-a-string-to-number) a string to number, you can use the `+` operator:

```js
+'010'; // 10
+'2e1'; // 20
+'0xF'; // 15
```


Number() vs parseInt()


### Differences

1. `Object.getOwnPropertyNames(obj)` returns all the properties of the object `obj`. `Object.keys(obj)` returns all _enumerable_ properties.

    They provide the same result unless you set `enumerable: false` to any property.

    In the following example, the `screen` object has two properties, `branch` and `size`.

    ```js
    const screen = {
        branch: 'Dell',
        size: '27inch',
    };

    Object.getOwnPropertyNames(screen); // ['branch', 'size']
    Object.keys(screen); // ['branch', 'size']
    ```

    Let's define one more property named `resolution` but it is set as `enumerable: false`:

    ```js
    Object.defineProperties(screen, {
        resolution: {
            enumerable: false,
            value: '2560 x 1440',
        },
    });
    ```

    The `resolution` property then doesn't appear in the list of `Object.keys`:

    ```js
    Object.getOwnPropertyNames(screen); // ['branch', 'size', 'resolution']
    Object.keys(screen); // ['branch', 'size']
    ```

2. For arrays, `Object.getOwnPropertyNames` includes an extra property named `length` which is the size of the array.

    ```js
    const animals = ['dog', 'cat', 'tiger'];

    Object.keys(animals); // ['0', '1', '2']
    Object.getOwnPropertyNames(animals); // ['0', '1', '2', 'length']
    ```


Object.getOwnPropertyNames() vs Object.keys()


### Difference

`Object.is()` behaves the same as `===` (strict equality operator) except for `NaN`, `+0` and `-0`.

```js
+0 === -0; // true
Object.is(+0, -0); // false

NaN === NaN; // false
Object.is(NaN, NaN); // true

Number.NaN === Number.NaN; // false
Object.is(Number.NaN, Number.NaN); // true

NaN === Number.NaN; // false
Object.is(NaN, Number.NaN); // true
```


Object.is() vs ===


In this post, we will see the differences between declaring and accessing the object property with and without quotes:

```js
const obj = { key: 'value' };
obj.key;

// Or
const obj = { key: 'value' };
obj['key'];
```

### Differences

1. If the property name is a numeric literal, then you might to use different key to access the property value.

    ```js
    const obj = { 12e34: 'hello' };

    console.log(obj['1.2e34']); // undefined
    console.log(obj['1.2e+35']); // 'hello'
    ```

    Wrapping the property with quotes will help us avoid the problem:

    ```js
    const obj = { '12e34': 'hello' };

    console.log(obj['12e34']); // 'hello'
    ```

2. If the property is one of [reserved keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), then we have to use with quotes to access the property value.

    ```js
    const styles = { class: 'foo' };

    // Will throw an exception because class is a reserved keyword
    styles[class];

    // returns 'foo'
    styles['class'];
    ```

    The same thing happens with the property contains special characters such as `-`.


object.property vs object['property']


Storing the key and value pairs is a common thing we have to deal with in JavaScript. The most basic approach is to use an object:

```js
const person = {};
person.name = 'Foo';
person.age = 20;

// Or
const person = {
    name: 'Foo',
    age: 20,
};
```

Being introduced from ES6, the `Map` data structure provides the same ability. The sample code above can be rewritten with `Map` as following:

```js
const person = new Map();
person.set('name', 'Foo');
person.set('age', 20);
```

### Differences

1. Object only accepts string and symbol keys. Another types will be converted to string automatically.
   `Map` on the other hand accepts any type of key.

2. We can iterate over the properties of a `Map` directly using `forEach` or `for ... of` statement:

    ```js
    const styles = new Map();
    styles.set('color', 'blue');
    styles.set('fontSize', '12px');

    styles.forEach((value, key) => console.log(key, '=', value));

    // Output:
    // color = blue
    // fontSize = 12px
    ```

    Objects are not iterable directly. In order to loop over the properties of an object, we have to use either `Object.keys`, `Object.values` or `Object.entries` to receives the list of keys, values or pairs of key and value.

    ```js
    styles = {
        color: 'blue',
        fontSize: '12px',
    };

    Object.keys(styles).forEach((key) => console.log(key, '=', styles[key]));

    // Output:
    // color = blue
    // fontSize = 12px
    ```

3. Object have special properties such as `constructor`, `__proto__`, etc.

    ```js
    let person = {};
    person['constructor']; // ƒ Object() { [native code] }
    ```

    While `Map` only consists of what we define:

    ```js
    let person = new Map();
    person.get('constructor'); // undefined
    ```

4. JSON supports `Object`:

    ```js
    const person = {};
    person.name = 'Foo';
    person.age = 20;

    JSON.stringify(person); // "{"name":"Foo","age":20}"
    ```

    With `Map`, it's not possible to get the proper data when being serialized with JSON:

    ```js
    const person = new Map();
    person.set('name', 'Foo');
    person.set('age', 20);

    JSON.stringify(person); // "{}"
    ```

### Good to know

Maps keep the order of items. It means when you loop over keys of a map, we will see the same order as when they're inserted to the map.

It's true for objects that only consists of string and symbol keys. The order of object's keys aren't kept if there is a key that needs to be converted to string.

```js
let codes = { A: 65, B: 66, C: 67, 0: 48 };
codes; // {0: 0, A: 65, B: 66, C: 67}
Object.keys(codes); // ["0", "A", "B", "C"]
```

### Good practice

If we want to store the key/value pairs without caring about serializing them in JSON, then use `Map`.
Looping through and getting the size of a map is more comfortable than doing with an object.

`Object` should be used if we want to convert back and forth between raw data and JSON, or include a specific business logic:

```js
const person = {
    firstName: 'Foo',
    lastName: 'Bar',
    getFullName: function () {
        return `\${this.firstName} \${this.lastName}`;
    },
};
```

### See also

-   [hasOwnProperty vs in](/has-own-property-vs-in)
-   [Map vs WeakMap](/map-vs-weak-map)


Object vs Map


First of all, you need to know the difference between an element and a node.
In summary, an element is a special type of node which represents a single node in our DOM tree.
It can be not only an element but also a comment, a document, a text node, etc.

The `parentElement` and `parentNode` properties in most cases return the same node:

```js
// Both return <html> element
document.body.parentNode;
document.body.parentElement;
```

The only difference is that, the `parentElement` property can be `null` if the parent node is not an element node:

```js
// The exception
// returns the Document node
document.documentElement.parentNode;

// returns null because <html> element does not
// have a parent element node
document.documentElement.parentElement;
```

### Tip

By checking whether the parent element exists or not, we can travel from a given element up to the html tag:

```js
while (ele = ele.parentElement) {
  ...
}
```

The snippet code below calculates the distance from a given element to the top of page:

```js
const distanceToTop = (ele) => {
    let x = 0;
    while ((ele = ele.parentElement)) {
        x += ele.offsetTop;
    }
    return x;
};
```


parentElement vs parentNode


`++` is the increment operator adding one to the operand.
There're two variables of the operator which use `++` as prefix or postfix: `++value` and `value++`.

They have the same affect in for loops. The following loops print the same results which are the numbers from 0 to 4:

```js
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// And
for (let i = 0; i < 5; ++i) {
    console.log(i);
}
```

### Differences

When returning a value, `return value++` returns the original value before the value is increased. While `return ++value` increases the value and returns the updated value.

The following `foo` and `bar` functions returns different results:

```js
const foo = (x) => x++;
const bar = (x) => ++x;

foo(1); // 1
bar(1); // 2
```

### Good to know

`value += 1` is another alternative of the postfix increment `value++`. It's worth noting that they can provide different result when using with strings.

The postfix increment `value++` will convert the value to number first, and then increase the value:

```js
let value = '5';
value++;
value; // 6
```

On the other hand, if value is a string, `value += 1` converts the second argument (`1`) to string first, and then concatenate them together.

```js
let value = '5';
value += 1;
value; // '51'
```


++value vs value++


`<>` is the shorthand tag for `React.Fragment` which allows us to group a list of elements without wrapping them in a new node.

So we can do something like

```js
render() {
    return (
        <>
            <Header />
            <Navigation />
            <Main />
            <Footer />
        </>
    );
}
```

The only difference between them is that the shorthand version does not support the `key` attribute.

Here is a common example that inserts new line (`br`) tags in a multiple lines string:

```js
{
    str.split('\\n').map((item, index) => {
        return (
            <Fragment key={index}>
                {item}
                <br />
            </Fragment>
        );
    });
}
```


<> vs React.Fragment


We often use the `script` tag to insert a regular JavaScript file to page:

```html
<script src="/path/to/script.js"></script>
```

When the browser sees a normal `script` tag declaration, it will perform the following steps:

-   Pause the document parser
-   Create a new request to download the script
-   Execute the script after it's downloaded completely
-   Continue parsing the document

```shell
┌───────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘
```

This flow gives a bad user experience because users can not interact with the page while the script is being downloaded.
They have to wait for all scripts to be downloaded and executed completely before seeing the entire page is parsed.

To fix that problem, HTML 5 provides two attributes for the script tag. They are `async` and `defer`:

```html
<script src="/path/to/script.js" async></script>
<script src="/path/to/script.js" defer></script>
```

These attributes let browser know that the scripts can be downloaded in parallel with the document parser process.

### Differences

1. The `async` and `defer` scripts are executed at different moments.

    After an `async` script is downloaded, the browser will pause the document parser, execute the script and resume parsing the document.

    ```shell
    ┌───────────────────────────────────────────┬───────────────────┬───────────────────┐
    / Parse the document                        / Pause parsing     / Resume parsing    /
    └───────────────────────┬───────────────────┼───────────────────┴───────────────────┘
                            / Download script   /
                            └───────────────────┼───────────────────┐
                                                / Execute script    /
                                                └───────────────────┘
    ```

    The `defer` script, on the other hand, will be executed only when the parser has completed its job.

    ```shell
    ┌───────────────────────────────────────────────────────────┐
    / Parse the document                                        /
    └───────────────────────┬─────────────────┬─────────────────┘
                            / Download script /
                            └─────────────────┘                 ┌───────────────────┐
                                                                / Execute script    /
                                                                └───────────────────┘
    ```

2. The `async` script is executed as soon as it is downloaded completely, hence they might not be executed at the same order as they appear in the page.

    On the other hand, the `defer` scripts guarantee the order of execution.

### Good practices

1. Use `async` for a script that does not depend on other scripts. A statistic script (Google Analytic script, for example) would be fit in this use case.

2. In general, put scripts right before `</body>`.

    ```html
    <body>
        ...
        <script src="..."></script>
        <script src="..."></script>
        <script src="..."></script>
    </body>
    ```

### Good to know

Scripts that are injected to the page [dynamically](https://htmldom.dev/load-a-javascript-file-dynamically) are `async` by default.
However, you can set the `async` attribute to `false` if you want.

```js
const script = document.createElement('script');
script.src = '/path/to/script.js';
script.async = false;
document.head.appendChild(script);
```


script async vs script defer


`slice` and `splice` are common methods to get a sub-array of a given array.

### Differences

1. The signature of methods are different.

    ```js
    array.slice(startingIndex, endingIndex);
    array.splice(startingIndex, length, ...items);
    ```

    While the first parameter are the same as each other indicating the starting index of removed elements, the second parameters aren't.

    The second parameter of `slice` and `splice` are the ending index and the number of sub items, respectively.

    With the `splice` method, it's possible to keep the items not to be removed from the original array by passing them to the last parameters.

2. `splice` changes the original array, while `slice` doesn't.

    Given the array of numbers from 1 to 5:

    ```js
    const array = [1, 2, 3, 4, 5];
    const sub = array.splice(2, 3);

    // The original array is modified
    array; // [1, 2]
    sub; // [3, 4, 5]
    ```

    Now, let's pass the same parameters to `slice`:

    ```js
    const array = [1, 2, 3, 4, 5];
    const sub = array.slice(2, 3);

    // The original array isn't modified
    array; // [1, 2, 3, 4, 5]
    sub; // [3]
    ```

### Tip

We can [clone an array](https://1loc.dev/#clone-an-array) by ignoring the ending index:

```js
const clone = (arr) => arr.slice(0);
```


slice vs splice


The `stopImmediatePropagation()` method prevents the event from bubbling up to the parent elements like the `stopPropagation()` method does.
However, it prevents other listeners of the same event from being called.

Let's say that we attach different listeners that handle the same event to the same element. When the event occurs, the listeners are executed in the same order as they were added.

If we call the `stopImmediatePropagation()` method in a given listener, then the remaining listeners will not be called.

In the following sample code, there are 3 listeners that handle the click event of a button represented by `button`.

```js
button.addEventListener('click', function () {
    console.log('foo');
});

button.addEventListener('click', function (e) {
    console.log('bar');
    e.stopImmediatePropagation();
});

button.addEventListener('click', function () {
    console.log('baz');
});
```

Clicking the button will print `foo` and `bar` in the _Console_. We won't see `baz` because the last listener isn't called.

### See also

-   [event bubbling vs capturing](/event-bubbling-vs-capturing)
-   [event.preventDefault vs return false](/event-prevent-default-vs-return-false)


stopImmediatePropagation vs stopPropagation


There are two ways to access an individual character of a string:

-   using the `charAt[index]` method
-   and using bracket notation such as `'hello'[1]`

In both ways, `'hello'[1]` and `'hello'.charAt(1)` returns the second character `e`.

### Differences

1. The second way is standard of ECMA 5, and is supported in modern browsers. It is not supported in the very old browsers such as IE 6, 7.
   (I don't think we still need to support these versions of IE).

2. Here is a table listing the expect result of both methods:

    | Method                  | `index` is in the range of 0 and `string.length - 1` | Other cases     |
    | ----------------------- | ---------------------------------------------------- | --------------- |
    |  `string.charAt(index)` | character at associate position                      | an empty string |
    | `string[index]`         | character at associate position                      | `undefined`     |

    We will get different results in some edge cases if you don't pass a proper index (not an integer or out of bounds).

    ```js
    'hello'[NaN]; // undefined
    'hello'.charAt(NaN); // 'h'

    'hello'[undefined]; // undefined
    'hello'.charAt(undefined); // 'h'

    'hello'[true]; // undefined
    'hello'.charAt(true); // 'e'

    'hello'['00']; // undefined

    // return 'h' because it will try to convert `00` to number first
    'hello'.charAt('00');

    'hello'[1.5]; // undefined
    // return 'e' because it will round 1.23 to the number 1
    'hello'.charAt(1.23);
    ```

    In the case the index is out of bounds:

    ```js
    'hello'[100]; // undefined
    'hello'.charAt(100); // ''
    ```

### Good to know

_Why does `'hello'.charAt(true)` return `e`?_

The `charAt(index)` method will try to convert the index to the number first. Since `Number(true) === 1`, `charAt(true)` will returns the character at the one index position, i.e, the second character.


string.charAt(i) vs string[i]


`string` and `String` are valid TypeScript types. The following declarations are valid:

```js
let foo: String = 'foo';
let bar: string = 'bar';
```

### Difference

`string` refers to the JavaScript's primitive types and can be created by using either literals (single or double quotes) or `String` function (without the `new` keyword).

The three declarations below create the same string:

```js
const message = 'hello';
const message = 'hello';
const message = String('hello');
```

We often use `typeof variable === 'string'` to check if a given variable is a primitive string.

`String` on the other hand is an object that wraps the primitive string, and used to manipulate strings. We can create an instance of `String` from the constructor such as `new String(...)`:

```js
const message = new String('hello');
```

In order to check whether a variable is an instance of `String` object, we have to use the `instanceof` operator:

```js
if (variable instanceof String) {
    ...
}
```

### Good to know

Given the declarations at the top of this page, you can assign a `String` object to a primitive `string` variable:

```js
let foo: String = 'foo';
let bar: string = 'bar';

foo = bar; // OK
```

As the time of writing, `String` is declared as an [interface](https://github.com/microsoft/TypeScript/blob/master/src/lib/es5.d.ts#L374) so that the `string` is treated as a subtype of `String`. Assigning `foo = bar` therefore does not cause any problem.

But doing the opposite assignment will throw an error:

```js
// ERROR: Type 'String' is not assignable to type 'string'.
// 'string' is a primitive, but 'String' is a wrapper object.
bar = foo;
```

### Good practice

According to the official TypeScript's [Do's and Don'ts](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html), it is recommended to not use `Number`, `String`, `Boolean`, `Symbol`, or `Object`.

```js
// Do NOT
const reverse = (s: String): String => {
    ...
}

// Do
const reverse = (s: string): string => {
    ...
}
```


string vs String

There are two ways to define the dimension for an element:

-   Using the `height` or `width` attributes:

```html
<img height="100" />
```

-   Or using the `height` or `width` property in CSS styles:

```html
<img style="height: 100px" />
```

### Differences

1. The `width` and `height` properties are available for all HTML elements. But the `width` and `height` attributes are only available for some elements such as `canvas`, `image`, `table`, `td`, etc.

    ```html
    
    <img width="200px" />

    
    <div width="200px"></div>
    ```

2. For `canvas` elements, they don't produce the same result.

    According to the [HTML specifications](https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width), if the `width` and `height` attributes are missing then the default value will be used.

    The `width` attribute defaults to 300, and the `height` attribute defaults to 150.

    It's recommended to set the `height` and `width` attributes for canvas directly or via JavaScript to avoid the problem that the canvas is stretched.

    ```html
    
    <canvas height="100" width="100">
        
        <canvas style="height: 100px; width: 100px;"></canvas
    ></canvas>
    ```

    The `width` and `height` attributes of canvas must be positive numbers without the units. `width="100px"` will have no affect despite the fact that it seems to be a valid attribute declaration for other elements.

3. The CSS style properties have the higher priority than the HTML properties.

    In the following example, the `height: 200px` property will override the `height="100px"` attribute:

    ```html
    
    <img height="100px" style="height: 200px" />
    ```

### Good to know

The `width` and `height` attributes are still used widely in emails where we have to support multiple screen sizes (mobile, desktop) and various email clients.

style="width: ___" vs width="___"


Both `substr` and `substring` are common functions to get a sub-string of a given string.

### Differences

1. Both methods have two parameters. The first parameters indicate the index of starting position of sub-string. The second parameters are different.

    ```js
    substr(startPosition, length);
    substring(startPosition, endPosition);
    ```

    As you can see, the second parameters of `substr` and `substring` are the length and the end position of sub-string respectively.
    Given a string of `helloworld`:

    ```js
    'helloworld'.substr(2, 4); // 'llow'
    'helloworld'.substring(2, 4); // 'll'
    ```

2. `substr` allows to use a negative number for the start position parameter.

    ```js
    'helloworld'.substr(-2, 4); // 'ld'
    ```

    `substring`, on the other hand, will turn a negative start position to 0 (zero):

    ```js
    'helloworld'.substring(-2, 5); // 'hello'
    'helloworld'.substring(0, 5); // 'hello'
    ```

### Good to know

`slice` is another function for getting a sub-string. It's not deprecated as [substr](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr), and supports negative indices.

```js
'helloworld'.slice(2, 4); // 'll'
'helloworld'.slice(-10, 5); // 'hello'
'helloworld'.slice(-5); // 'world'
```


substr vs substring


`void` is an operator that evaluates a given expression and then returns `undefined`.

### Difference

In the modern browsers which supports ES5, there's no difference between using the `void` operator and the `undefined` value directly:

```js
void 0 === undefined; // true
void 1 === undefined; // true
void 'Foo' === undefined; // true
```

However, in the old browsers which run ES3 engine, `undefined` is a global property and can be changed.

```js
// In ES3
console.log(undefined);
var undefined = 'foo';
console.log(undefined); // 'foo'
```

On the other hand, it's not possible to override the `void` operator. Hence, `void` is used as a replacement for `undefined` to get the `undefined` value in a safe way.

In ES5, it's impossible to override `undefined` because it's [set](http://es5.github.io/#x15.1.1.3) `Writeable` as `false`.

### Good to know

1. `void` is an operator, not a function. So we don't need to wrap the expression in parentheses. `void 0` is equivalent to `void(0)`.
2. There are minifiers which use `void 0` to shorten `undefined`.
3. If you use immediately-invoked function expression (known as IIFE), `void` can be used to treat the `function` keyword as an expression, not a declaration.

    Assume that we want to execute the following IIFE function:

    ```js
    function run() {
        console.log('Executed');
    }();
    ```

    then we can either use `void`

    ```js
    void (function run() {
        console.log('Executed');
    })();
    ```

    or wrap the function in parentheses as below:

    ```js
    (function run() {
        console.log('Executed');
    })();
    ```

4. `void` can be used to avoid the side effect when using with arrow functions.

    As we know, ES6 arrow functions allow to use the return value of function by omitting the braces from the function body.

    ```js
    const sum = (a, b) => a + b;
    ```

    In some cases, we don't intend to use the return value of function, because it can lead to a different behavior.
    Let's say that we are going to handle the `click` event of a button:

    ```js
    button.onclick = () => doSomething();
    ```

    It works as usual until someone changes `doSomething`, and makes it return a `boolean` value. In the case it returns `false`, the default behavior of the `click` event will be skipped, and it maybe the thing you don't want to.

    Passing the result to `void` will ensure that it doesn't change the behavior of arrow function regardless the result of executed functions:

    ```js
    button.onclick = () => void doSomething();
    ```

5. The advantage of using `void` with arrow functions can be seen in modern libraries such as React, Svelte.

    These libraries allow us to execute a function right after a component mounted to the DOM. For example,
    React [provides](https://reactjs.org/docs/hooks-reference.html#useeffect) `useEffect`, Svelte [has](https://svelte.dev/docs#onMount) `onMount`.

    If we return a function inside the callback, then the function will be invoked to clean up things, free the memory before the component is removed from the screen.

    ```js
    // React example code
    useEffect(() => doSomething());
    ```

    It can produce bugs at run time. To avoid that, we can either use `void`

    ```js
    useEffect(() => void doSomething());
    ```

    or using the braces:

    ```js
    useEffect(() => {
        doSomething();
    });
    ```

### Good practice

The `void` operator has been used in the URL prefixed with `javascript:`.

By default, the browser will evaluate the code when following a `javascript:` URI, and then replaces the contents of page with the returned value.

To prevent the default behavior, the code must return `undefined`. That's why we have been seeing the following code:

```js
<a href="javascript: void(0);" onclick="doSomething">
    ...
</a>
```

Nowadays, using `javascript:` protocol isn't recommended. It can create a security issue since user can put unsanitized input in the event handler:

```js
<a href="javascript: alert('unsanitized input')">...</a>
```

Starting from v16.9.0, React also [deprecates](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls) the usage of `javascript:` URLs.

### See also

-   [variable === undefined vs. typeof variable === "undefined"](/variable-undefined-vs-typeof-variable-undefined)


undefined vs void


There are two common ways to check whether a variable is `undefined`. We can use the identical (`===`) or `typeof` operator:

```js
variable === undefined;
typeof variable === 'undefined';
```

### Difference

The `typeof` operator works with undeclared variables, while the identical operator will throw a _ReferenceError_ exception.

```js
typeof undeclaredVar === 'undefined'; // true
undeclaredVar === undefined; // throws a ReferenceError exception
```

### Good to know

In the old browsers running ES3 enginee, `undefined` is a global variable name whose primitive value is undefined. The value can be changed:

```js
// ES3
var person = {};
person.name === undefined; // true

// Let's modify the value of undefined
undefined = 'Foo';
person.name === undefined; // false
```

In order to avoid the issue where `undefined` can be renamed or modified the value, we can wrap the code in an IFFE (immediately invoked function expression) as following:

```js
(function(undefined){
    // It's safe to use undefined here
})();

// Or
(function(undefined){
    ...
})(_);
```

In the sample code above, `undefined` is a parameter of function. Since we don't pass any parameter or an undefined variable (`_`) to the function, the parameter will be undefined. This common pattern was used in popular libraries such as [jQuery](https://jquery.com), [Backbone](https://backbonejs.org), etc.

It's not the case in modern browsers nowadays. From ES5, `undefined` can't be changed because its `Writable` property is set to `false`.

### Good practice

Always use `typeof`.

### See also

-   [undefined vs void](/undefined-vs-void)


variable === undefined vs typeof variable === "undefined"


### Difference

Assume that we have a string of `This is a sample text in a paragraph` displayed in a container that has limited width such as it can display 9 characters at maximum.

`word-break: break-all` will try to fit maximum characters in each line as it can. So there are words which are split into different lines such as _text_ and _paragraph_ like that:

```shell
/* word-break: break-all */
┌───────────┐
| This is a |
| sample tex|
| t in a par|
| agraph.   |
└───────────┘
```

On the other hand, `word-wrap: break-word` does not break the words that are able to fit in each line. So the _text_ and _paragraph_ words are not split in different lines.

```shell
/* word-wrap: break-word */
┌───────────┐
| This is a |
| sample    |
| text in a |
| paragraph.|
└───────────┘
```

If each line can contains a less number of characters, then `break-word` will break long words that are not fit in each line.

```shell
/* word-wrap: break-word */
┌─────────┐
| This is |
| a       |
| sample  |
| text in |
| a       |
| paragrap|
| h.      |
└─────────┘
```

### Good to know

1. `word-wrap` was a non standard and unprefixed Microsoft extension. It was renamed to `overflow-wrap`.

    However, `word-wrap: break-word` is identical to `overflow-wrap: anywhere`, not `overflow-wrap: break-word`.

2. A browser might break a long text at unexpected places. For example, the specific path (`/this/is/.../folder`) in the following text is placed at the second line:

    ```shell
    ┌───────────────────────────────────────────────────────┐
    | Copy file to the folder:                              |
    | /this/is/a/very/long/path/to/the/destination/folder   |
    └───────────────────────────────────────────────────────┘
    ```

    To prevent this behavior, HTML5 provides the `<wbr>` element. It stands for _Word Break Opportunity_, and is used to specify the positions that a line break would be created.

    Getting back to the example above. If we use `<wbr>` elements right before each path separator (`/`) as follow:

    ```html
    Copy your file to the folder: <wbr />/this <wbr />/is <wbr />/a ... <wbr />/destination <wbr />/folder
    ```

    The browser will break the paths in between the directory names:

    ```shell
    ┌───────────────────────────────────────────────────────┐
    | Copy your file to the folder: /this/is/a/very/long    |
    | /path/to/the/destination/folder                       |
    └───────────────────────────────────────────────────────┘
    ```

    Note that `<wbr>` element is [not supported](https://caniuse.com/wbr-element) in IE 11 and earlier versions.


What is the difference

between ___ and ___ in the front-end development?

CSS

:activevs:focus

border-boxvscontent-box

bordervsoutline

display: nonevs[hidden]

display: nonevsopacity: 0vsvisibility: hidden

marginvspadding

NormalizevsReset CSS

style="width: ___"vswidth="___"

word-break: break-allvsword-wrap: break-word

DOM

addEventListener() functionvson property

clientHeightvsoffsetHeightvsscrollHeight

clientYvspageY

currentTargetvstarget

DOMContentLoadedvsload

event bubblingvscapturing

event.preventDefaultvsreturn false

keyvskeyCodevswhich

keydownvskeypressvskeyup

mouseentervsmouseover

naturalWidthvswidth

nodeNamevstagName

parentElementvsparentNode

stopImmediatePropagationvsstopPropagation

HTML

altvstitle

<b>, <i>vs<strong>, <em>

<button>vs<input type="button" />

classvsid

<div>vs<section>

ElementvsNode

script asyncvsscript defer

JavaScript

applyvscall

argumentvsparameter

array = []vsarray.length = 0

arrowvsregular function

concatvspush

constvsletvsvar

delete obj.propertyvsobj.property = undefined

double quotesvssingle quote

encodeURIvsencodeURIComponent

==vs===

for ... invsfor ... of

function declarationvsfunction expression

hasOwnPropertyvsin

instanceofvstypeof

MapvsWeakMap

method in class constructorvsprototype

nullvsundefined

Number()vsparseInt()

Object.getOwnPropertyNames()vsObject.keys()

Object.is()vs===

object.propertyvsobject['property']

ObjectvsMap

++valuevsvalue++

slicevssplice

string.charAt(i)vsstring[i]

substrvssubstring

undefinedvsvoid

variable === undefinedvstypeof variable === "undefined"

TypeScript

const enumvsenum

constvsreadonly

*.d.tsvs*.ts

functionvsproperty in interface

interfacevstype

literal union typevsstring enums

stringvsString

React

<>vsReact.Fragment

between _ and _ in the front-end development?

style="width: _"vswidth="_"

.d.tsvs.ts