<Image src="astro.jpg" alt="" />

Astro is a framework for building static sites and web applications. It is built on top of modern web technologies like
JavaScript, HTML, and CSS, and uses a component-based architecture to make it easy to build and maintain complex web
projects. With Astro, you can build websites and applications that are fast, efficient, and easy to scale.

## Key Features

Astro offers several key features that make it a powerful tool for building modern web projects.
These include:

- **Performance**: Astro is designed to be fast and efficient, with built-in optimizations that help to reduce page load
  times and improve overall site performance.
- **Ease of use**: Astro is designed to be easy to use, with a simple and intuitive syntax that makes it easy to create
  complex web projects.
- **Themes**: Astro has an impressive array of ready-made [themes](https://astro.build/themes/) and templates to get
  started quickly.
- **Zero JS, by default**: No JavaScript runtime.
- **Component-based** architecture: Astro uses a component-based architecture that makes it easy to build and maintain
  complex web projects.
- **Template directives**: Astro's template directives make it easy to create reusable components that can be used
  throughout your site or application.
- **Built-in CMS functionality**:  Tailwind, MDX, and 100+ other integrations to choose from.
- **UI-agnostic**: Supports React, Preact, Svelte, Vue, Solid, and more.

## Creating Your First Astro Project

To create your first Astro project, you'll need to install the Astro CLI. You can do this by running the following
command:

```shell
# create a new project with npm
npm create astro@latest
```

Then navigate to the project directory and start the development server by running the following commands:

```shell
npm run dev
```

<Image src="astro-dev.jpeg" alt="" />

This will start a live Astro development server, which will automatically rebuild your site as you make changes to your
code.

## File-based routing

One of the key features of Astro is its file-based routing system. With this system, developers can easily create routes
and pages for their websites by simply creating files in the appropriate directories. This makes it easy to create and
manage complex routing structures without the need for additional configuration or setup.

### Static routes

Any `.astro` page elements, as well as Markdown and MDX files (with extensions ".md" and ".mdx"), located in the `
src/pages/` directory, will be automatically transformed into pages on your website. The page's URL will match its path
and file name within the "src/pages/" directory.

```shell
# Example: Static routes for site.com
src/pages/index.astro             -> site.com/
src/pages/about.astro             -> site.com/about
src/pages/about/index.astro       -> site.com/about # Nested folder with index file
src/pages/about/career.astro      -> site.com/about/career
src/pages/articles/1.md           -> site.com/articles/1
```

### Dynamic routes

In an Astro page file, it's possible to define dynamic route parameters within the file name. This allows for the
creation of multiple pages that match the specified parameter.

For instance, by using the file name `src/pages/users/[user].astro`, you can generate a user's page for each user
featured on your blog. The `user` in the file name serves as a parameter that can be accessed within the page.

Because all routes must be determined at build time, a dynamic route must export a `getStaticPaths()` that returns an
array of objects with a params property. Each of these objects will generate a corresponding route.

```md:src/pages/users/[user].astro
---
export function getStaticPaths() {
  return [
    {params: {user: 'Serhii'}},
    {params: {user: 'Roman'}},
    {params: {user: 'Alexander'}},
  ];
}

const { user } = Astro.params;
---

<div>Hello, {user}!</div>
```

## Astro Component Structure

The Astro component consists of two primary components: the Component Script and the Component Template.

```md:src/components/Component.astro
---
// Component Script (JavaScript)
---

```

## Astro slots

The `<slot />` element is a placeholder for external HTML content, allowing you to inject (or “slot”) child elements
from other files into your component template.

By default, all child elements passed to a component will be rendered in its `<slot />`

```md:src/components/Wrapper.astro
---
const { title } = Astro.props
---

<div class="wrapper">
  <h1 class="wrapper__title">{title}</h1>
  <slot />  
</div>
```

```md:src/pages/content.astro
---
import Wrapper from '../components/Wrapper.astro';
---

<Wrapper title="Main Page">
  <p>Here is some stuff.</p>
</Wrapper>
```

## Data Fetching

All Astro components have access to the global [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
function in their component script to make HTTP requests to APIs.

This fetch call will be executed at build time, and the data will be available to the component template for generating
dynamic HTML. If SSR mode is enabled, any fetch calls will be executed at runtime.

I use [randomuser.me](https://randomuser.me/) API to this example. Please, read the documentation before.

```md:src/components/User.astro
---
import Avatar from '../components/Avatar.jsx';

const response = await fetch('https://randomuser.me/api/');
const { results } = await response.json();
const [ user ] = results;
---

<h1>{user.name.first} {user.name.last}</h1>
<p>{user.email}</p>


<Avatar picture={user.picture.large} />
```

> Before using React inside Astro add [integration](https://docs.astro.build/en/guides/integrations-guide/react/)

<Image src="astro-dev.gif" alt="" />

You can read more about data fetching in [official documentation](https://docs.astro.build/en/guides/data-fetching/).

## Styles & CSS

You can either compose your own CSS code within an Astro component or bring in your preferred CSS library, such as
[Tailwind](https://github.com/withastro/astro/tree/main/packages/integrations/tailwind). Additionally, Astro supports
sophisticated styling languages like `Sass` and `Less`.

```md:src/components/Component.astro
<style>
  h1 { color: orange; }
</style>
```

Astro supports a wide amount of popular styling techniques out of the box:

- Import a local stylesheet
- Use a \<style\> block anywhere in `.astro` files and the CSS will be scoped to that component
- [CSS modules](https://css-tricks.com/css-modules-part-1-need/)
- [CSS Preprocessors](https://docs.astro.build/en/guides/styling/#css-preprocessors) [Sass/Less/Stylus]

> The [styling doc](https://docs.astro.build/en/guides/styling/) has more detail.

## Template Directives

By default, a UI Framework component is not hydrated in the client. If no client:* directive is provided, its HTML is
rendered onto the page without JavaScript.

### client:load

- **Priority**: High
- **Useful for**: UI elements that require immediate interactivity and should be visible right away

> Load and hydrate the component JavaScript immediately on page load.

```jsx
<BuyButton client:load />
```

### client:idle

- **Priority**: Medium
- **Useful for**: UI elements with lower priority that do not require immediate interactivity

> Load and hydrate the component JavaScript once the page is done with its initial load.

```jsx
<BuyButton client:idle />
```

### client:visible

- **Priority**: Low
- **Useful for**: UI elements with low priority can be positioned either far down the page or require significant
  resources to load. In case the user never sees such elements, it would be preferable not to load them at all

> Load and hydrate the component JavaScript once the component has entered the user’s viewport.

```jsx
<ImageCarousel client:visible />
```

### client:media

- **Priority**: Low
- **Useful for**: Elements that might only be visible on certain screen sizes.

> Loads and hydrates the component JavaScript once a certain CSS media query is met.

```jsx
<Sidebar client:media="(max-width: 1024px)" />
```

### client:only

Skips HTML server rendering, and renders only on the client.

```jsx
<ReactComponent client:only="react" />
<SvelteComponent client:only="svelte" />
<Component client:only="vue" />
```

## Do you need to learn the Astro?

At the [moment](https://2022.stateofjs.com/en-US/libraries/rendering-frameworks/), Astro is considered a very
interesting framework that most people want to learn and understand. So be the first to figure it out 🚀.

<Image src="astro-state.jpeg" alt="Astro framework interest on stateofjs" />

## Useful Links

If you're interested in learning more about Astro, here are some useful links to get you started:

- [Astro home page](https://astro.build/)
- [Astro documentation](https://docs.astro.build/en/getting-started/)
- [Astro GitHub repository](https://github.com/withastro/astro)
- [Are SPAs better than MPAs? | HTTP 203](https://www.youtube.com/watch?v=ivLhf3hq7eM)
- [Astro usage in npm and ratings](https://bestofjs.org/projects/astro)

Astro is a new Javascript framework, so discover what makes it special and what are its core features.

What is Astro Framework?


<Image src="node-post.jpg" alt="" />

[NVM](https://github.com/nvm-sh/nvm), or Node Version Manager, is essential for managing multiple versions of Node.js on
our development environment.
[Node.js](https://nodejs.org/en) is a JavaScript-based web technology, that allows developers to write server-side code
using JavaScript.

By using NVM to manage different versions with ease, developers can keep their environment up-to-date with the best
tools and achieve their desired results with ease.

In this article, we’ll be looking at how to install NVM with Brew and verify it worked properly. Additionally, we’ll
take a look at why we need NVM, a useful NVM cheatsheet, and how to install NVM on Windows, Linux, and MacOS.

## What is NVM?

Simply put, it is a software that allows you to install and manage different versions of Node.js on your system. You can
also switch easily between them, making it ideal for keeping your development environment updated.

## Why Do We Need NVM?

NVM is essential for managing multiple versions of Node.js on our systems. By using NVM to manage and switch between
different versions, we can make sure our environment is always up-to-date with the latest version. This allows us to
take advantage of the newest tools available in the Node.js ecosystem.

Additionally, NVM helps us become more efficient as developers. With NVM, we can quickly switch between different
versions of Node.js without having to reconfigure our environment and restart our terminal.

## How to Install NVM with Brew

Installing NVM with [Brew](https://brew.sh/) is a fairly straightforward process.

First, you’ll need to install Brew, which you can do simply by entering this on your terminal:

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

Once Brew is installed, you can install NVM by entering `brew install nvm` on your terminal.
This command will download the latest version of NVM for your system, including the necessary libraries and packages.

```shell
brew install nvm
```

### Verify It Worked

Once you’ve installed NVM with Brew, you can verify that it worked by entering `nvm —-v` on your terminal. This command
will show you the version of NVM you’re currently running.

```shell
nvm —-v

#Node Version Manager (v0.39.3) // It's my version of NVM
```

## NVM Cheatsheet

Using NVM can be intimidating at first. To help, here’s a helpful NVM cheatsheet:

```shell
- nvm install 8.0.0                     #Install a specific version number
- nvm use 8.0                           #Use the latest available 8.0.x release
- nvm run 6.10.3 app.js                 #Run app.js using node 6.10.3
- nvm exec 4.8.3 node app.js            #Run `node app.js` with the PATH pointing to node 4.8.3
- nvm alias default 8.1.0               #Set default node version on a shell
- nvm alias default node                #Always default to the latest available node version on a shell
- nvm uninstall [<version>]             #This command will uninstall a specific version of Node.js

- nvm install node                      #Install the latest available version
- nvm use node                          #Use the latest version
- nvm install --lts                     #Install the latest LTS version
- nvm use --lts                         #Use the latest LTS version
```

## How to Install NVM on Windows

Installing NVM on Windows is slightly more involved than with Linux or macOS. To do so, you’ll need to have the [Windows
Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/install) (WSL) installed. Once you have WSL
installed, you can use Brew to install NVM just as you would with Linux or macOS.

## How to Install NVM on Linux

The easiest way to install NVM on Linux is to use Brew. Simply open your terminal and then enter `brew install nvm`.

Before it install Brew 🍻

## Recap

Hopefully this article has helped you get a better understanding of NVM and how to install it on a variety of systems.
Installing and managing multiple versions of Node.js is essential for staying up-to-date with the best tools and
achieving better results.

With NVM, you’ll be able to easily switch between different versions and keep your development
environment updated.



NVM, or Node Version Manager. What is it and why we should use it?

Node Version Manager


Very often, cloud database services such as [neon.tech](https://neon.tech/) allow you to connect via URL.
That is, without credentials such as `user`, `password`, etc.

## Connection details

### Connection URL

It's [official PostgreSQL format for connection URLs](https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING)

<Image alt src="postgresql-connection-string.png" priority={true} alt="S.Shramko personal site screenshot"/>

### Base URL and path

Here's an example of a base URL and path structure using uppercase placeholder values:

```text
postgresql://USER:PASSWORD@HOST:PORT/DATABASE
```

<Image alt src="db-table.png" priority={true} alt="S.Shramko personal site screenshot"/>

## How this site connects to the database

### Store your credentials in .env

Store your credentials in your `.env` file.

```shell
PGHOST='<endpoint_hostname>:<port>'
PGDATABASE='<dbname>'
PGUSER='<username>'
PGPASSWORD='<password>'
ENDPOINT_ID='<endpoint_id>'
```

where:

- `endpoint_hostname` the hostname of the branch endpoint. The endpoint hostname has an ep- prefix and appears similar
  to
  this: **ep-tight-salad-272396.us-east-2.aws.neon.tech**
- `dbname` is the name of the database. The default Neon database is neondb
- `user` is the database user
- `password` is the database user's password, which is provided to you when you create a project
- `endpoint_id` is the ID of the branch endpoint that you are connecting to. The endpoint_id has an ep- prefix and
  appears
  similar to this: **ep-tight-salad-272396**

### Use prisma.io to connect Postgres

```js
// You can create DATABASE_URL in your code
const DATABASE_URL = `postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}`;
```

```shell
# Or better to use .env file
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}
```

### Use Datagrip to connect Postgres

You can use same credentials like `HOST`, `PORT`, `USER`, `PASSWORD`, `DATABSE` for connection to Database with
DataGrip.

<Image alt src="db-datagrip.png" priority={true} alt="S.Shramko personal site screenshot"/>




How to connect postgres database with URL

Postgres connect URL


<Image src="fruits.png" alt="ES modules structure diagram" priority={true} />

## Syntax

Arrays are zero-indexed ordered lists of values. They are a convenient way to store a set of related elements of the
same type (such as numbers or strings), although an array can contain multiple types of elements, including other
arrays.

```js
// An array containing numbers
const numberArray = [0, 1, 2, 3, 4, 5];

// An array containing different data types
const mixedArray = [1, 'chicken', false];
```

## Creating an Array

The easiest way to create an array is to use array literals - `[]`, as in the example above.

```js
const fruits = ['🍎', '🍐', '🍊', '🍋', '🍉', '🍓'];
```

With the Array class by using the new keyword and passing in the elements as arguments:

```js
const fruits = new Array('🍎', '🍐', '🍊', '🍋', '🍉', '🍓');
```

Though, because the effect is exactly the same, it
is [preferable to use the literal method](https://google.github.io/styleguide/jsguide.html#features-arrays-ctor) for
simplicity

## Accessing the Elements of an Array

Array elements are ordered by index values, starting at 0:

- Index 0 has the first element
- Index 1 has the second element
- Index n-1 has the nth element
- Index array.length-1 has the last element

```js
//              [0]   [1]   [2]  [3]   [4]   [5]
const fruits = ['🍎', '🍐', '🍊', '🍋', '🍉', '🍓'];

// Get first element of array
console.log(fruits[0]); // 🍎

// Get third element of array n-1
console.log(fruits[2]); // 🍊

// Get last element of array
console.log(fruits[fruits.length]); // 🍓
```

## Array methods and properties

Arrays provide a lot of methods and properties.

### Array properties

The Array does not have a lot of property 😂.

#### Array length

The `length` property is used to know the amount of items in your array.

```js
const apples = ['🍎', '🍎', '🍎'];

// Length of an array
console.log(apples.length); // logs 3
```

### Array methods

For these examples I use this sample data:

```js:DATA_SAMPLE
const employees = [
  {
    name: 'Serhii',
    age: 29
  },
  {
    name: 'Anna',
    age: 20
  },
  {
    name: 'Roman',
    age: 27
  },
  {
    name: 'Julia',
    age: 25
  },
  {
    name: 'Mykola',
    age: 35
  }
];
```

[//]: # (TODO ADD EXAMPLE OF MY ARR)

#### Add & remove items from array

Methods that add and remove items from the beginning or the end:

- employees.push(...items) – adds items to the end
- employees.pop() – extracts an item from the end
- employees.shift() – extracts an item from the beginning
- employees.unshift(...items) – adds items to the beginning

#### Find element in array

The `.find()` method will return the **_first element_** in the array that matches a test you provide.

```js
const employees = [/* See DATA_SAMPLE */]

// Find employe with name 'Serhii'
const serhii = employees.find((employe) => employe.name === 'Serhii');

// or with object destructuring
const serhii = employees.find(({ name }) => name === 'Serhii');
```

#### Transform elements in array

The `.map()` method will apply a given function to every item in your array and give you a **_new array with those
values_**.

```js
// Transform employees array to new array of names.
// I use object destructuring in this and future examples
const names = employees.map(({ name }) => name);
```

#### Filter elements in array

The `.filter()` method takes your array and removes items that don't pass a test you give it, and return new array.

```js
// Keep employees who are younger than 25
const youngEmployees = employees.filter(({ age }) => age < 25);
```

#### Merge two arrays to one

The `.concat()` method is used to merge two or more arrays, or concat new array to old. This method does not change the
existing arrays, but instead returns a new array.

```js
const evenNumbers = [2, 4, 6];
const oddNumbers = [1, 3, 5];

const allNumbers = evenNumbers.concat(oddNumbers); // [ 2, 4, 6, 1, 3, 5 ]
```

#### Join each element in array

The `.join()` method creates and returns a new string by concatenating all elements in an array.

```js
// Before .join() we must transform each object in array to string
const foematedOutput = employees
  .map(({ name }) => name) // Transform employee object to name string
  .join("\n"); // "\n" – add newline after each element
```

```shell:Output
Serhii
Anna
Roman
Julia
Mykola
```

#### Check if every element in array matches some criteria

The `.every()` method checks that every single item in your array matches some criteria.

```js

const isAdult = (employe) => employe.age > 18;

// Check is every our employe older than 18 age
const isEveryEmployeeYoung = employees.every(isAdult); // true
```

#### Check if at least one item in array matches some criteria.

The `.some()` method checks that at least one item in your array matches some criteria by compare function.

```js

const isAdult = (employe) => employe.age > 18;

// Check is every our employe older than 18 age
const isEveryEmployeeYoung = employees.every(isAdult); // true
```

#### Check if at least one item includes in your array

The `.includes()` method checks that at least one item in your array matches some value.

```js
// Check is name "Serhii" includes in employees array
const isSerhiiNameExist = employees
  .map(({ name }) => name) // Transform employee object to name string
  .includes('Serhii'); // true
```

#### Loop through an array

The `.forEach()` method executes a provided function once for each array element.

It doesn't return a value though. It's useful for side effects.

```js
// Print to console name of each employe
employees.forEach((employe) => console.log(employe.name))
```

## Conclusion

The array has many methods, in this article I have shown the most used in my opinion.

Further, you can learn more methods on the pages of MDN Web Docs, so I wish you inspiration and hope this article will
be useful to you.


JavaScript 101: Arrays


I am a Frontend mentor in a [MacPaw internship](https://macpaw.com/internship) and sometimes my interns get confused 🫠
about how links work in HTML.

So I decided to write a small article about this topic.

## Anatomy of a URL

<abbr title="Uniform Resource Locator">URL</abbr> - is a string that indicates the address of a document or file on the
Internet.

<Image src="anatomy.png" alt="Anatomy of URL" inverted />

### Scheme

The first part of the URL is the scheme, which indicates the protocol that the browser must use to request the resource.
The protocol is usually HTTPS or HTTP, but can also be:

- ftp
- gopher
- file
- mailto
- and others

### Authority

Authority is the domain and optional port like `:80`.

Now you are in `shramko.dev` domain.

### Path to resource or file

```text
/blog/difference-between-absolute-and-relative-url
```

This is the path to the HTML file of this article. You can check it in the console if you write:

```javascript
window.location.pathname
```

## Relative links

These links will always be anchored to the place where they are located.
The browser will use the same protocol and the same domain.

### Relative to the root of the site

An important point, we add `/` to the address at the beginning.

```html
<a href="/about">About page</a>
```

<Image src="root-example.png" alt="Root example" inverted />

### Relative path from the current document

Similar to the previous example, but
the [path to the file](#path-to-resource-or-file) is saved.

An important point, we do not add `/` to the address at the beginning.

```html
<a href="category/js">JS category of Blog</a>
```

<Image src="location.png" alt="Location example" inverted />

## Absolute links

An absolute link is an address to a file or page as a whole, with all the above-described parts of
the <abbr title="Uniform Resource Locator">URL</abbr>. With such a link, regardless of where this link is located, you
will be able to get to the right resource.

You will be taken to any page or site exactly as indicated by a link of this type:

```html
<a href="https://shramko.dev/dashboard">My Dashboard</a>
```

You can not specify the protocol `http/https`, then the browser will automatically use the protocol on which the site
was loaded.

```html
<a href="//shramko.dev/dashboard">My Dashboard</a>
```

## Anchors (links by #id)

Anchor links are usually used to navigate the current page. For example, a link to a paragraph or heading.

The link below moves you to the section about [Anatomy of URL on this page](#anatomy-of-a-url).

Add `#anatomy-of-a-url` to the current URL in your browser.

## Cheat Sheet

Examples that we discussed today.

<Image src="cheat-sheet.png" alt="Links cheat" inverted />

## Useful links

- [Article about how my site works under the hood](https://shramko.dev/blog/introducing-the-new-shramko.dev)
- [Site where I drew pictures](https://okso.app/)
- [Nice tutorial about how DNS works](https://howdns.works/)
- [What is a URL](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)


Everything you need to know about link addresses. Absolute link vs relative

Difference between absolute and relative URL in HTML


## ❌ Problem

In my opinion, one of the most important tasks when writing code is to make it as simple and understandable as possible.
There are even principles in programming aimed at this - [KISS](https://en.wikipedia.org/wiki/KISS_principle).

You can often see such code with a lot of `if`, and `switch` statements in tutorials or answers on StackOverflow:

```js
function handleUserMove(direction) {
  if (direction === 'north') {
    movePlayerTo("north");
  } else if (direction === 'east') {
    movePlayerTo("east");
  } else if (direction === 'south') {
    movePlayerTo("south");
  } else if (direction === 'west') {
    movePlayerTo("west");
  } else {
    console.error("Unknown direction");
  }
}
```

If we had more conditionals who know how long this `if/else` statement could get 🤯, and it's not very dynamic.

We can use a `switch` statement:

```js
function handleUserMove(direction) {
  switch (direction) {
    case "north":
      movePlayerTo("north");
      break;
    case "east":
      movePlayerTo("east");
      break;
    case "south":
      movePlayerTo("south");
      break;
    case "west":
      movePlayerTo("west");
      break;
    default:
      console.error("Unknown direction");
  }
}
```

Although there is a little more code, `switch` itself describes the dispatching process more explicitly, but we write a
lot of static (control) code, and we must not forget about `break`. Too complicated for such a simple task.

## ✅ Solution

So what can we do to simplify it?

```js
const userInputToDirection = {
  north: movePlayer("north"),
  east: movePlayer("east"),
  south: movePlayer("south"),
  west: movePlayer("west")
}

function handleUserMove(direction) {
  userInputToDirection[direction]();
}
```

This option is better than the previous two for several reasons:

- It is shorter
- It is more flexible. Conditional constructs are static code that cannot be changed without rewriting the program
  itself.
- With
  the [Single Responsibility Principle (SRP)](https://www.freecodecamp.org/news/solid-principles-single-responsibility-principle-explained)
  , we have separated the execution function of our `handleUserMove` business logic from the direction determination
  logic.

Conditional constructs are static code that cannot be changed without rewriting the program itself.
But data is a completely different matter.
With this approach, it is easy to add new behavior without changing the application code `handleUserMove` itself.

## Real example

For example, in Next.js applications, you can
configure [next.config.js](https://nextjs.org/docs/api-reference/next.config.js/introduction) and the code there looks
like this:

```js
const nextConfig = {
  /* Next.js config options here */
}

let resultConfig;

if (process.env.NODE_ENV === 'development') {
  resultConfig = withBundleAnalyzer(nextConfig);
} else if (process.env.NODE_ENV === 'production') {
  resultConfig = withSentryConfig(nextConfig);
} else if (process.env.NODE_ENV === 'test') {
  resultConfig = nextConfig;
}

module.exports = resultConfig;
```

With new knowledge, we can rewrite it like this:

```js
const nextConfigByEnv = {
  development: withBundleAnalyzer(nextConfig),
  production: withSentryConfig(nextConfig),
  test: nextConfig,
};

module.exports = nextConfigByEnv[process.env.NODE_ENV];
```

Will it look and read much better?

## Useful links

- [Example in CLI parser app](https://github.com/Shramkoweb/CLI-diff-generator/blob/develop/src/parsers.js#L31)
- [Naming Conventions for Key-Value Maps](https://softwareas.com/naming-conventions-for-key-value-maps/)
- [Dispatch table](https://en.wikipedia.org/wiki/Dispatch_table)


Dispatch table in javascript


## The For Loop

There are many ways to iterate in JavaScript, and probably one of the most common is for a loop.

The for statement is a type of loop that will use up to three optional expressions to implement the repeated execution
of a code block.
Let’s take a look at an example of what that means:

```js
for (initialization; condition; final expression
)
{
  // code to be executed
}
```

```js
// Initialize a for statement with 5 iterations
for (let i = 0; i < 5; i++) {
  // Print each iteration to the console
  console.log(`The number is ${i}`);
}
```

```shell:Output
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
```

But in addition to this `for` loop, there are two other types of for iteration methods we can use: `for...in`
and `for...of`.

## The for...in Statement

The `for...in` statement iterates over
all [enumerable properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
of an object that is keyed by strings (ignoring one keyed by Symbols), including inherited enumerable properties.

The syntax `for...in` looks like this:

```js
for (const variable in enumerable) {
  // Do something
}
```

For example, to loop through and `console.log` all the values in this `user` Object:

```js
const user = {
  name: 'Serhii',
  age: 29,
  email: 'shramko.dev@gmail.com',
  country: 'Ukraine',
  city: 'Kyiv'
}

for (const key in user) {
  console.log(`user.${key} = ${user[key]}`)
}
```

```shell:Output
user.name = Serhii
user.age = 29
user.email = shramko.dev@gmail.com
user.country = Ukraine
user.city = Kyiv
```

We iterate through each `key` of the `user` Object, and then through this key we get the value
with [Bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation)
.

### for...in and Objects

`for...in` is probably the easiest way to go through the object and use the key to get the value from it.

### for...in and Arrays

The keys in the array are indexes (numbers).

```js
const creatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
];

for (const index in creatures) {
  // We need access to creatures value by index
  console.log(creatures[index])
}
```

```shell:Output
octopus
squid
shark
seahorse
starfish
```

### for...in and Strings

```js
const oceanCreature = 'Shark';

for (const index in oceanCreature) {
  console.log(oceanCreature[index])
}
```

```shell:Output
S
h
a
r
k
```

## The for...of Statement

The `for...in` statement is useful for iterating over object properties, but to iterate over iterable objects like
arrays and strings, we can use the for...of statement. The `for...of` statement is a newer feature as of ECMAScript 6.

In this example of a `for...of` loop, we will create an array and print each item in the array to the console.

```js
const sharks = ["tiger", "great white", "hammerhead"];

// Print out each type of shark
for (const shark of sharks) {
  // Unlike for...in, we don't need an index now
  // we have immediate access to the element of the array
  console.log(shark);
}
```

```shell:Output
tiger
great white
hammerhead
```

### for...of and Objects

The `for...of` loop doesn't work with Objects because they don't have a [Symbol.iterator] property.
You can try but you will get an error:

```js
"Uncaught TypeError: Object is not iterable"
```

### Iterating over a DOM collection

Iterating over DOM collections like [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):

```js
const paragraphElements = document.querySelectorAll('p');

for (const paragraph of paragraphElements) {
  // Make all paragraphs red
  paragraph.style.color = 'red';
}
```

## Conclusion

In this post, we understood how for loops work and the difference between `for...of` and `for...in` statements.

Loops are an integral part of any programming language, as they are constantly used in places where you need to perform
the same type of tasks several times.


What is the difference between "for...in" and "for...of"

for...in vs for...of Loops


JavaScript distinguishes _expressions_ and _statements_. A statement is an instruction, an action.

Remember conditions with `if`, `loops` with `while` and `for` — all those are _statements_, because they just perform
actions and control actions, but don't become values.

`Expression` returns (expresses) a value. Each of the following lines contains an expression:

```js
100 // this is a literal that expresses number 100

getUserName() // expresses Serhii

5 + 2 // expresses 7
```

`Statements` produce or control actions, but do not turn into values:

```js
let x; // declare a variable 'x'

function foo() {} // declare a function 'foo'

function bar() {
  return null // return is also a statement
}
```

You can't put statements where expressions are expected. For example, passing a const statement as a function
argument will produce an error. Or trying to assign the if statement to a variable:

```js
let b = if (x > 10) { return 100; };  // error!

console.log(const y);  // error!
```

## Related posts

- [Expressions versus statements in JavaScript](https://2ality.com/2012/09/expressions-vs-statements.html)
- [Expressions - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions)


Understand the important distinction expressions vs statements in JavaScript

Expressions vs Statements


<Image src="es-module.png" alt="ES modules structure diagram" priority={true} />

## Problem

I ran into this error when using ```__dirname``` in an ES module.

```__dirname``` is an environment variable that tells you the absolute path of the directory containing the currently
executing file, and many Node.js projects use this.

But if you use it inside an ES module, you can't use it because of the infamous "__dirname is not defined in ES module
scope" an error appears.

## Solution

What can you do in this case?

To get the current file directory, we'll want to use a combination of a global variable and a few built-in methods:

- `import.meta.url` to get the current file's as a URL
- `url.fileURLToPath` to change the URL to a path
- `path.dirname` to get the directory name

Using these methods, we can reconstruct the global `__dirname` and `__filename` variables:

```js
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);
```

Now you can use `__dirname` as usual:

```js
console.log(__dirname)
```

## Conclusion

Due to the different approaches to modularity in Node.js and EcmaScript, you may encounter such problems.

For further reading, check out
the [Node.js documentation for __dirname](https://nodejs.org/docs/latest/api/modules.html#modules_dirname).


Here is how to fix the "__dirname is not defined in ES module scope" error

How to fix "__dirname is not defined in ES module scope"

The JS category page is a hub for all things related to JS. Discover tips, tricks, tutorials, and more to level up your skills.

JS9 articles

Articles