DEV Community: Irena Popova 👩🏻‍💻

Blockchain with Vue, Python & Flask

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 19:23:07 +0000

Creating a complete blockchain application with a Vue.js frontend and a Python backend.
Let's outline the basic components and provide some example code snippets to get you started.

Overview

1. Backend (Python with Flask) Create a simple blockchain structure. Set up a Flask API to interact with the blockchain.
2. Frontend (Vue.js)
Create a Vue.js application that communicates with the Flask API.
Display blockchain data and allow user interactions (like adding a new block). Step 1: Setting Up the Backend
Install Flask: Make sure you have Flask installed. You can do this using pip:

Setting up the environment

pip install Flask

Create a Basic Blockchain Class:

# blockchain.py
import hashlib
import json
from time import time
from flask import Flask, jsonify, request

class Blockchain:
    def __init__(self):
        self.chain = []
        self.current_transactions = []
        self.new_block(previous_hash='1', proof=100)

    def new_block(self, proof, previous_hash=None):
        block = {
            'index': len(self.chain) + 1,
            'timestamp': time(),
            'transactions': self.current_transactions,
            'proof': proof,
            'previous_hash': previous_hash or self.hash(self.chain[-1]),
        }
        self.current_transactions = []
        self.chain.append(block)
        return block

    def new_transaction(self, sender, recipient, amount):
        self.current_transactions.append({
            'sender': sender,
            'recipient': recipient,
            'amount': amount,
        })
        return self.last_block['index'] + 1

    @staticmethod
    def hash(block):
        block_string = json.dumps(block, sort_keys=True).encode()
        return hashlib.sha256(block_string).hexdigest()

    @property
    def last_block(self):
        return self.chain[-1]

app = Flask(__name__)
blockchain = Blockchain()

@app.route('/mine', methods=['POST'])
def mine():
    values = request.get_json()
    required = ['proof', 'sender', 'recipient']
    if not all(k in values for k in required):
        return 'Missing values', 400

    index = blockchain.new_transaction(values['sender'], values['recipient'], values['amount'])
    blockchain.new_block(values['proof'])
    response = {
        'message': f'New Block Forged',
        'index': index,
        'block': blockchain.last_block,
    }
    return jsonify(response), 200

@app.route('/chain', methods=['GET'])
def full_chain():
    response = {
        'chain': blockchain.chain,
        'length': len(blockchain.chain),
    }
    return jsonify(response), 200

if __name__ == '__main__':
    app.run(debug=True)

Step 2: Setting Up the Frontend

Create a Vue.js App: If you haven't created a Vue.js project yet, you can do so using Vue CLI:

vue create my-blockchain-app

Install Axios for API Calls:

npm install axios

Create a Simple Component:

// src/components/Blockchain.vue
<template>
  <div>
    <h1>Blockchain</h1>
    <button @click="fetchChain">Fetch Blockchain</button>
    <ul>
      <li v-for="block in blockchain" :key="block.index">
        Block #{{ block.index }} - {{ block.timestamp }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      blockchain: []
    };
  },
  methods: {
    fetchChain() {
      axios.get('http://localhost:5000/chain')
        .then(response => {
          this.blockchain = response.data.chain;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Step 3: Putting It All Together

Run the Flask Backend: Make sure your Python server is running:

python blockchain.py

Run the Vue.js Frontend: Now, run your Vue.js application:


npm run serve

Let’s enhance the blockchain application by adding more advanced features such as:

Proof of Work Mechanism: Implement a basic proof of work algorithm.
Transaction Pool: Allow users to create transactions and see them in a pool before mining. -Node Discovery: Allow multiple nodes to connect and share the blockchain. -Improved Frontend: Create a more interactive UI for displaying the blockchain and transactions. Step 1: Enhancing the Backend
Update the Blockchain Class We will implement a basic Proof of Work algorithm and a transaction pool.


# blockchain.py
import hashlib
import json
from time import time
from flask import Flask, jsonify, request
from urllib.parse import urlparse
import requests

class Blockchain:
    def __init__(self):
        self.chain = []
        self.current_transactions = []
        self.nodes = set()
        self.new_block(previous_hash='1', proof=100)

    def new_block(self, proof, previous_hash=None):
        block = {
            'index': len(self.chain) + 1,
            'timestamp': time(),
            'transactions': self.current_transactions,
            'proof': proof,
            'previous_hash': previous_hash or self.hash(self.chain[-1]),
        }
        self.current_transactions = []
        self.chain.append(block)
        return block

    def new_transaction(self, sender, recipient, amount):
        self.current_transactions.append({
            'sender': sender,
            'recipient': recipient,
            'amount': amount,
        })
        return self.last_block['index'] + 1

    @staticmethod
    def hash(block):
        block_string = json.dumps(block, sort_keys=True).encode()
        return hashlib.sha256(block_string).hexdigest()

    @property
    def last_block(self):
        return self.chain[-1]

    def proof_of_work(self, last_proof):
        proof = 0
        while not self.valid_proof(last_proof, proof):
            proof += 1
        return proof

    @staticmethod
    def valid_proof(last_proof, proof):
        guess = f'{last_proof}{proof}'.encode()
        guess_hash = hashlib.sha256(guess).hexdigest()
        return guess_hash[:4] == "0000"  # Adjust difficulty here

    def register_node(self, address):
        parsed_url = urlparse(address)
        self.nodes.add(parsed_url.netloc)

    def resolve_conflicts(self):
        neighbours = self.nodes
        new_chain = None
        max_length = len(self.chain)

        for node in neighbours:
            response = requests.get(f'http://{node}/chain')
            if response.status_code == 200:
                length = response.json()['length']
                chain = response.json()['chain']
                if length > max_length and self.valid_chain(chain):
                    max_length = length
                    new_chain = chain

        if new_chain:
            self.chain = new_chain
            return True
        return False

    def valid_chain(self, chain):
        last_block = chain[0]
        current_index = 1

        while current_index < len(chain):
            block = chain[current_index]
            if block['previous_hash'] != self.hash(last_block):
                return False
            if not self.valid_proof(last_block['proof'], block['proof']):
                return False
            last_block = block
            current_index += 1
        return True

app = Flask(__name__)
blockchain = Blockchain()

@app.route('/mine', methods=['POST'])
def mine():
    values = request.get_json()
    required = ['sender', 'recipient']

    if not all(k in values for k in required):
        return 'Missing values', 400

    last_block = blockchain.last_block
    last_proof = last_block['proof']
    proof = blockchain.proof_of_work(last_proof)

    blockchain.new_transaction(sender=values['sender'], recipient=values['recipient'], amount=1)
    previous_hash = blockchain.hash(last_block)
    block = blockchain.new_block(proof, previous_hash)

    response = {
        'message': 'New Block Forged',
        'index': block['index'],
        'block': block,
    }
    return jsonify(response), 200

@app.route('/transactions/new', methods=['POST'])
def new_transaction():
    values = request.get_json()
    required = ['sender', 'recipient', 'amount']

    if not all(k in values for k in required):
        return 'Missing values', 400

    index = blockchain.new_transaction(values['sender'], values['recipient'], values['amount'])
    response = {'message': f'Transaction will be added to Block {index}'}
    return jsonify(response), 201

@app.route('/chain', methods=['GET'])
def full_chain():
    response = {
        'chain': blockchain.chain,
        'length': len(blockchain.chain),
    }
    return jsonify(response), 200

@app.route('/nodes/register', methods=['POST'])
def register_nodes():
    values = request.get_json()
    nodes = values.get('nodes')

    if nodes is None:
        return 'Error: Please supply a valid list of nodes', 400

    for node in nodes:
        blockchain.register_node(node)

    response = {
        'message': 'New nodes have been added',
        'total_nodes': list(blockchain.nodes),
    }
    return jsonify(response), 201

@app.route('/nodes/resolve', methods=['GET'])
def consensus():
    replaced = blockchain.resolve_conflicts()

    if replaced:
        response = {
            'message': 'Our chain was replaced',
            'new_chain': blockchain.chain,
        }
    else:
        response = {
            'message': 'Our chain is authoritative',
            'chain': blockchain.chain,
        }

    return jsonify(response), 200

if __name__ == '__main__':
    app.run(debug=True)

Step 2: Enhancing the Frontend

Create a Transaction Form in Vue.js We will now create a form for users to submit transactions.

// src/components/Blockchain.vue
<template>
  <div>
    <h1>Blockchain</h1>
    <button @click="fetchChain">Fetch Blockchain</button>

    <h2>Transactions</h2>
    <form @submit.prevent="submitTransaction">
      <input type="text" v-model="sender" placeholder="Sender" required />
      <input type="text" v-model="recipient" placeholder="Recipient" required />
      <input type="number" v-model="amount" placeholder="Amount" required />
      <button type="submit">Send Transaction</button>
    </form>

    <h2>Blockchain</h2>
    <ul>
      <li v-for="block in blockchain" :key="block.index">
        Block #{{ block.index }} - {{ block.timestamp }}
        <ul>
          <li v-for="transaction in block.transactions" :key="transaction.sender">
            {{ transaction.sender }} -> {{ transaction.recipient }}: {{ transaction.amount }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      blockchain: [],
      sender: '',
      recipient: '',
      amount: 0,
    };
  },
  methods: {
    fetchChain() {
      axios.get('http://localhost:5000/chain')
        .then(response => {
          this.blockchain = response.data.chain;
        })
        .catch(error => {
          console.error(error);
        });
    },
    submitTransaction() {
      const transaction = {
        sender: this.sender,
        recipient: this.recipient,
        amount: this.amount,
      };

      axios.post('http://localhost:5000/transactions/new', transaction)
        .then(response => {
          alert(response.data.message);
          this.fetchChain(); // Refresh the blockchain view
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Step 3: Node Discovery and Consensus

You can test your blockchain with multiple nodes by running several instances of your Flask app on different ports. For example, you can run:

FLASK_RUN_PORT=5001 python blockchain.py

Then, you can register nodes using a POST request:

curl -X POST -H "Content-Type: application/json" -d '{"nodes": ["localhost:5001"]}' http://localhost:5000/nodes/register

This more advanced blockchain application includes:
-Proof of Work: A basic mechanism to mine new blocks.
-Transaction Pool: Users can create transactions before they are mined.
-Node Discovery: Support for multiple nodes and a consensus mechanism.
-Interactive Frontend: A Vue.js UI for submitting transactions and viewing the blockchain.

Happy coding!

Understanding Slots in Vue 3 with Composition API

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 18:49:21 +0000

Slots are a powerful mechanism in Vue that enable components to define content areas that can be customized by the parent component. This promotes reusability and flexibility in building UI components. Vue 3 offers two primary slot types:

Normal Slots: Provide a simple way to inject content from the parent component into the child component's template.
Scoped Slots: Allow for more advanced customization by passing data (a scope) from the child component to the slot content, enabling dynamic rendering based on both parent and child data.

In Vue 3, slots allow you to create flexible components by providing a way to pass content into child components. The Composition API enhances how we use slots, making it more intuitive and powerful.

What are Slots?

Slots are a way to define placeholder content in a component that can be filled with custom content when the component is used. They help in creating reusable and customizable components.

Types of Slots

Default Slot: The most common type, it allows you to pass content without any specific name.
Named Slots: These allow you to specify different slots with unique names, enabling more complex layouts.
Scoped Slots: These provide a way to expose data from the child component to the parent component using a slot. Using Slots with the Composition API

Using Slots with the Composition API

Here’s how you can define and use slots in a Vue 3 component using the Composition API:
Example of a Default Slot

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Usage:

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Named Slots

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Usage:

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

Scoped Slots

Scoped slots allow you to pass data from the child component back to the parent.

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

Usage:

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

Example: Food Products Delivery with Slots in Vue 3

Let's create a simple food delivery application using Vue 3 with the Composition API and slots. This example will showcase a main FoodDelivery component that uses slots to display a list of food items, along with a header and footer.

Step 1: Create the Main Component

Here’s the FoodDeliverycomponent that accepts named slots for the header, food items, and footer.

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

Step 2: Create Food Item Component

Next, let’s create a simple FoodItem component to represent individual food products.

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

Step 3: Using the Components

Now, let’s put everything together in a parent component that uses our FoodDelivery and FoodItem components.

Let me Explain

FoodDelivery Component: This component acts as a layout for our food delivery service. It accepts three slots: a header, a default slot for the food items, and a footer.
FoodItem Component: This represents individual food products. It takes name and price as props and has a method to simulate adding the item to a cart.

App Component: This is the parent component where everything is brought together. It uses the FoodDelivery component and fills the slots with a welcome message, a list of FoodItemcomponents, and a thank you message.

Use Cases

Customizing Lists: Scoped slots are ideal for creating list components where each item can have distinct rendering logic based on its properties. The child component can pass the item data to the slot, and the parent component can define the template for each item using the scoped slot. (BasePaginated.vue)
Conditional Rendering: Scoped slots enable selective rendering within the child component based on data it provides to the slot. For instance, you could conditionally display a message or error state within the slot content.
Complex Layouts: Scoped slots facilitate the creation of more intricate layouts where different parts of the layout can be customized by the parent component while allowing the child component to inject specific content or functionality using the scope.

<template>
  <div>
    <h2>{{ item.name }}</h2>
    <slot :item="item" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { name: 'Item 1', description: 'This is item 1' },
  { name: 'Item 2', description: 'This is item 2' },
]);
</script>

<template>
  <div v-for="item in items" :key="item.name">
    <MyComponent :item="item">
      <template #default="{ item }">
        <p>{{ item.description }}</p>
      </template>
    </MyComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue';
</script>

Advanced Considerations

Named Scoped Slots: You can assign names to scoped slots (e.g., ...), enabling you to have multiple scoped slots within a single child component and reference them by name in the parent component.
Slot Functions: In Vue 2, slots were accessed as $slotswithin the child component. Vue 3 offers a more reactive approach using $scopedSlots, which are functions that provide access to the slot content. This allows for dynamic slot manipulation and conditional rendering within the child component.

Let's enhance the scoped slot example to make it clearer and more functional. This example will demonstrate how to use scoped slots to pass item data from a child component to a parent component, allowing for flexible rendering.

Step 1: Create the ItemList Component

This component will display a list of items and use a scoped slot to allow the parent to customize how each item is rendered.

<template>
  <div>
    <h2>Item List</h2>
    <div v-for="item in items" :key="item.name">
      <h3>{{ item.name }}</h3>
      <slot :item="item">
        <!-- Default slot content if no slot is provided -->
        <p>{{ item.description }}</p>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { name: 'Item 1', description: 'This is item 1' },
  { name: 'Item 2', description: 'This is item 2' },
]);
</script>

Step 2: Using the `ItemList` Component with Scoped Slots

Now, let’s create a parent component that uses the ItemList component and provides a custom template for rendering each item using the scoped slot.


<template>
  <ItemList>
    <template #default="{ item }">
      <div class="custom-item">
        <h4>{{ item.name }}</h4>
        <p>{{ item.description }}</p>
        <button @click="handleClick(item)">Select</button>
      </div>
    </template>
  </ItemList>
</template>

<script setup>
import ItemList from './ItemList.vue';

const handleClick = (item) => {
  alert(`You selected: ${item.name}`);
};
</script>

<style>
.custom-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}
</style>

ItemList Component:

This component defines a list of items and uses a scoped slot to expose each item to the parent component.
If no slot is provided, it defaults to displaying the item's description. ###Parent Component:
This component uses the ItemList and provides a custom template for rendering each item.
It accesses the item data through the scoped slot and includes a button that triggers a function when clicked.

The example demonstrates how to effectively use scoped slots in Vue 3 to create a flexible and reusable component structure. The parent component can customize the rendering of each item while still accessing the data provided by the child component.

Let's recap

This example illustrates how you can utilize slots in a Vue 3 application to create a flexible food delivery component system. You can easily customize the header, footer, and content without modifying the main component. If you have any further questions or need more details, feel free to ask in a comment.

By effectively leveraging normal and scoped slots in Vue 3 with the Composition API, you can build highly reusable and customizable UI components, promoting maintainability and code organization in your Vue applications. You can choose the appropriate slot type based on your specific content injection and dynamic rendering requirements.
The way to grow is to connect.
Happy coding!

Understanding Nested Objects in JavaScript

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 18:21:23 +0000

Objects are what you are dealing with working as a JavaScript developer, and needless to say, that holds true for TypeScript as well. TypeScript provides you with multiple ways to define type definitions for object properties. We'll look at a couple of them throughout this post, starting with simple examples and moving on to some advanced type definitions.

Nested objects in JavaScript are objects that contain other objects or arrays as their properties. This allows for the creation of complex data structures that can represent real-world entities more effectively.
In JavaScript, you can nest objects within other objects. This is also known as object nesting or object composition. Object nesting allows you to create complex data structures by organizing objects within objects.

Creating a Nested Object

Here's a simple example of a nested object representing a user profile:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

For example:
The userProfile object has properties like username, age, and contact.
The contact property itself is an object containing email and phone.
The phone property is another nested object with home and mobile numbers.

Accessing Nested Object Properties

To access properties within nested objects, you can use dot notation or bracket notation. Here’s how you can access the user's mobile phone number:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

You can also modify nested properties. For example, if you want to change the theme preference:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Using Types with Nested Objects

When working with TypeScript, you can define types for nested objects to ensure type safety. Here’s how you can define a type for the userProfile object:


type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

In this TypeScript example, the UserProfile type defines the structure of the userProfile object, ensuring that all properties are correctly typed.

Here is another example of Nested Objects in JavaScript

Let’s look at a more complex example that represents a library system, where each book has various details, including its author, publisher, and genres.
Nested objects can be defined using the type keyword itself. TypeScript can also abstract away the type definitions of a nested object into type definitions. Index signatures can be used when you are unsure of how many properties an object will have but you are sure of the type of properties of an object

Defining a Nested Object for a Library System

Here’s how you can structure a nested object for this scenario:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

Let's breakdown of the Nested Object Structure

Library Object: Represents the entire library and contains properties like name, location, and books.
Location Object: Contains nested objects for address and coordinates.
address includes street, city, state, and zip code. coordinates stores latitude and longitude.
Books Array: An array that holds multiple book objects, each containing:
Title: The title of the book.
Author Object: Nested object that includes firstName and lastName of the author.

-Published Year: The year the book was published.
-Genres: An array of genres that the book belongs to.
-Available Copies: A number indicating how many copies are available.

Accessing and Manipulating Data

You can access and manipulate this nested object in various ways. Here’s how to get the author of the first book:

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

To add a new book to the library:


library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

Using a Method in the Object

You can also utilize methods defined in the object. For example, to get the total number of books:

console.log(library.totalBooks()); // Output: 3

This example illustrates how nested objects can be used to create a more comprehensive structure to represent complex data, such as a library system. By organizing related information together, you can easily manage and interact with the data in a meaningful way.

Another nested example

To improve code organization and maintainability, you can abstract nested objects into separate types. This approach allows you to define a Caterer type separately and use it within the Train type. Here’s how you can do this in TypeScript:

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

Defining the Train Type
Next, we will define the Train type, which will use the Caterer type for its caterer property.

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

Example of a Train Object

Now, we can create an instance of the Train type, including the Caterer details.

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

The benefits of this approach are:

Reusability: The Caterer type can be reused in other parts of your code, such as in different transportation types (e.g., airplanes, buses).
Clarity: Separating the Caterer type makes the Train type cleaner and easier to understand.
Maintainability: If the structure of the Caterer changes, you only need to update it in one place.

By abstracting nested objects into separate types, you can enhance the organization and clarity of your TypeScript code. This approach allows for better reusability and maintainability, making it easier to manage complex data structures.

Let's recap

Nested objects are a powerful feature in JavaScript that allows for the organization of complex data structures.

By using nested objects, you can create more meaningful representations of data, making your code easier to understand and maintain. Additionally, using TypeScript can help enforce structure and type safety when dealing with these complex objects.

Understanding Nested Objects in JavaScript

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 11:30:13 +0000

Creating a Nested Object

Here's a simple example of a nested object representing a user profile:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Accessing Nested Object Properties

To access properties within nested objects, you can use dot notation or bracket notation. Here’s how you can access the user's mobile phone number:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

You can also modify nested properties. For example, if you want to change the theme preference:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Using Types with Nested Objects

When working with TypeScript, you can define types for nested objects to ensure type safety. Here’s how you can define a type for the userProfile object:


type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

In this TypeScript example, the UserProfile type defines the structure of the userProfile object, ensuring that all properties are correctly typed.

Here is another example of Nested Objects in JavaScript

Defining a Nested Object for a Library System

Here’s how you can structure a nested object for this scenario:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

Let's breakdown of the Nested Object Structure

Library Object: Represents the entire library and contains properties like name, location, and books.
Location Object: Contains nested objects for address and coordinates.
address includes street, city, state, and zip code. coordinates stores latitude and longitude.
Books Array: An array that holds multiple book objects, each containing:
Title: The title of the book.
Author Object: Nested object that includes firstName and lastName of the author.

-Published Year: The year the book was published.
-Genres: An array of genres that the book belongs to.
-Available Copies: A number indicating how many copies are available.

Accessing and Manipulating Data

You can access and manipulate this nested object in various ways. Here’s how to get the author of the first book:

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

To add a new book to the library:


library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

Using a Method in the Object

You can also utilize methods defined in the object. For example, to get the total number of books:

console.log(library.totalBooks()); // Output: 3

Another nested example

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

Defining the Train Type
Next, we will define the Train type, which will use the Caterer type for its caterer property.

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

Example of a Train Object

Now, we can create an instance of the Train type, including the Caterer details.

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

The benefits of this approach are:

Reusability: The Caterer type can be reused in other parts of your code, such as in different transportation types (e.g., airplanes, buses).
Clarity: Separating the Caterer type makes the Train type cleaner and easier to understand.
Maintainability: If the structure of the Caterer changes, you only need to update it in one place.

Let's recap

Nested objects are a powerful feature in JavaScript that allows for the organization of complex data structures.

Understanding Nested Objects in JavaScript

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 11:30:13 +0000

Creating a Nested Object

Here's a simple example of a nested object representing a user profile:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Accessing Nested Object Properties

To access properties within nested objects, you can use dot notation or bracket notation. Here’s how you can access the user's mobile phone number:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

You can also modify nested properties. For example, if you want to change the theme preference:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Using Types with Nested Objects

When working with TypeScript, you can define types for nested objects to ensure type safety. Here’s how you can define a type for the userProfile object:


type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

In this TypeScript example, the UserProfile type defines the structure of the userProfile object, ensuring that all properties are correctly typed.

Here is another example of Nested Objects in JavaScript

Defining a Nested Object for a Library System

Here’s how you can structure a nested object for this scenario:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

Let's breakdown of the Nested Object Structure

Library Object: Represents the entire library and contains properties like name, location, and books.
Location Object: Contains nested objects for address and coordinates.
address includes street, city, state, and zip code. coordinates stores latitude and longitude.
Books Array: An array that holds multiple book objects, each containing:
Title: The title of the book.
Author Object: Nested object that includes firstName and lastName of the author.

-Published Year: The year the book was published.
-Genres: An array of genres that the book belongs to.
-Available Copies: A number indicating how many copies are available.

Accessing and Manipulating Data

You can access and manipulate this nested object in various ways. Here’s how to get the author of the first book:

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

To add a new book to the library:


library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

Using a Method in the Object

You can also utilize methods defined in the object. For example, to get the total number of books:

console.log(library.totalBooks()); // Output: 3

Another nested example

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

Defining the Train Type
Next, we will define the Train type, which will use the Caterer type for its caterer property.

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

Example of a Train Object

Now, we can create an instance of the Train type, including the Caterer details.

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

Example of Defining a Train Type in TypeScript


type Train = {
    model: string;             // Model of the train
    trainNumber: string;       // Unique train number
    timeOfDeparture: Date;     // Departure time
    timeOfArrival: Date;       // Arrival time
    caterer: {                   // Nested object for the caterer details
        name: string;             // Name of the catering company
        address: string;          // Address of the catering company
        phone: number;            // Phone number of the catering company
    };
};

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

the Structure

Train: This type defines the properties of a train, including:
model: The model of the train (e.g., "Shinkansen N700").
trainNumber: A unique identifier for the train (e.g., "S1234").
timeOfDeparture: The scheduled departure time as a Date object.
timeOfArrival: The scheduled arrival time as a Date object.
caterer: A nested object that contains details about the catering service, including its name, address, and phone number. By defining the structure clearly, you can ensure type safety and maintainability while working with type-related data.

The benefits of this approach are:

Reusability: The Caterer type can be reused in other parts of your code, such as in different transportation types (e.g., airplanes, buses).
Clarity: Separating the Caterer type makes the Train type cleaner and easier to understand.
Maintainability: If the structure of the Caterer changes, you only need to update it in one place.

Let's recap

Nested objects are a powerful feature in JavaScript that allows for the organization of complex data structures.

Access to Properties-deep dive

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 06:55:59 +0000

JavaScript is a versatile and powerful programming language used extensively in web development. One of its key features is the ability to define objects, which can encapsulate properties and methods. Among the various ways to interact with these objects, accessors play a crucial role.

Let's dive deeper into accessing properties in JavaScript.

Carrot Cake Recipe with JavaScript Objects

Let's create a JavaScript object representing a Carrot Cake recipe. We will use both dot notation and bracket notation to access its properties.

Step 1: Define the Carrot Cake Object

We'll define an object that includes properties such as ingredients, baking time, and instructions.

const carrotCake = {
    name: 'Carrot Cake',
    ingredients: {
        flour: '2 cups',
        sugar: '1 cup',
        carrots: '2 cups grated',
        eggs: '3 large',
        oil: '1 cup',
        bakingPowder: '2 tsp',
        cinnamon: '1 tsp',
        salt: '1/2 tsp'
    },
    bakingTime: '45 minutes',
    instructions: [
        'Preheat the oven to 350°F (175°C).',
        'In a bowl, mix flour, sugar, baking powder, cinnamon, and salt.',
        'In another bowl, whisk eggs and oil together.',
        'Combine the wet and dry ingredients, then fold in grated carrots.',
        'Pour the batter into a greased cake pan.',
        'Bake for 45 minutes or until a toothpick comes out clean.',
        'Let cool before serving.'
    ]
};

Step 2: Accessing Properties Using Dot Notation

You can access the properties of the carrotCake object using dot notation:

console.log(carrotCake.name); // Outputs: Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 45 minutes
console.log(carrotCake.ingredients.flour); // Outputs: 2 cups

Step 3: Accessing Properties Using Bracket Notation

You can also use bracket notation, especially useful for properties with spaces or when using dynamic keys:

console.log(carrotCake['name']); // Outputs: Carrot Cake
console.log(carrotCake['bakingTime']); // Outputs: 45 minutes
console.log(carrotCake['ingredients']['sugar']); // Outputs: 1 cup

Step 4: Looping Through Ingredients

You can loop through the ingredients using a for...in loop to display all ingredients:

for (const ingredient in carrotCake.ingredients) {
    console.log(`${ingredient}: ${carrotCake.ingredients[ingredient]}`);
}

This will output:

flour: 2 cups
sugar: 1 cup
carrots: 2 cups grated
eggs: 3 large
oil: 1 cup
bakingPowder: 2 tsp
cinnamon: 1 tsp
salt: 1/2 tsp

What Are JavaScript Object Accessors?

Accessors are methods that get or set the value of an object's property. They come in two forms: getters and setters.

Getters: Methods that get the value of a property.

Setters: Methods that set the value of a property.

These accessors provide a way to control how properties are accessed and modified. This can be useful for data validation, encapsulation, and providing computed properties.

Defining Getters and Setters

In JavaScript, you can define getters and setters within an object literal or using the Object.defineProperty method.

Using Object Literals

Here’s an example of how to define getters and setters in an object literal:

let person = {
    firstName: "Irena",
    lastName: "Doe",
    get fullName() {
        return `${this.firstName} ${this.lastName}`; // Returns full name
    },
    set fullName(name) {
        let parts = name.split(' '); // Splits the name into parts
        this.firstName = parts[0]; // Sets first name
        this.lastName = parts[1]; // Sets last name
    }
};

console.log(person.fullName); // Outputs: Irena Doe
person.fullName = "Jane Smith"; // Updates first and last name
console.log(person.firstName); // Outputs: Jane
console.log(person.lastName); // Outputs: Smith

Object Definition: You defined an object named person with properties firstName and lastName.

Getter: The fullName getter concatenates firstName and lastName to return the full name when accessed.
Setter: The fullName setter splits a provided full name string into parts and assigns the first part to firstName and the second part to lastName. Usage: When you log person.fullName, it correctly outputs "Irena Doe". After setting person.fullName to "Jane Smith", the firstName and lastName properties are updated accordingly.

To illustrate the difference between getters/setters and dot/bracket notation, let's enhance a Carrot Cake example. We will create an object with both direct property access and property access through getters and setters.
Step 1: Define the Carrot Cake Object
We'll define a carrotCake object that uses both direct properties and getters/setters for specific properties.


const carrotCake = {
    _name: 'Carrot Cake',
    _bakingTime: '45 minutes',
    _ingredients: {
        flour: '2 cups',
        sugar: '1 cup',
        carrots: '2 cups grated',
        eggs: '3 large',
        oil: '1 cup',
        bakingPowder: '2 tsp',
        cinnamon: '1 tsp',
        salt: '1/2 tsp'
    },

    // Getter for name
    get name() {
        return this._name;
    },

    // Setter for name
    set name(newName) {
        if (newName.length > 0) {
            this._name = newName;
        } else {
            console.log("Name cannot be empty.");
        }
    },

    // Getter for baking time
    get bakingTime() {
        return this._bakingTime;
    },

    // Setter for baking time
    set bakingTime(newTime) {
        this._bakingTime = newTime;
    },

    // Method to get ingredients
    get ingredients() {
        return this._ingredients;
    },

    // Method to update an ingredient
    setIngredient(ingredient, amount) {
        if (this._ingredients[ingredient] !== undefined) {
            this._ingredients[ingredient] = amount;
        } else {
            console.log(`Ingredient ${ingredient} does not exist.`);
        }
    }
};

Step 2: Accessing Properties Using Dot and Bracket Notation Let's use dot notation to access and modify properties directly:

// Directly accessing properties using dot notation
console.log(carrotCake._name); // Outputs: Carrot Cake
console.log(carrotCake._bakingTime); // Outputs: 45 minutes

// Modifying properties directly
carrotCake._name = 'Delicious Carrot Cake';
carrotCake._bakingTime = '50 minutes';

console.log(carrotCake._name); // Outputs: Delicious Carrot Cake
console.log(carrotCake._bakingTime); // Outputs: 50 minutes

Step 3: Accessing Properties Using Getters and Setters Now, let's access and modify properties using getters and setters:

// Accessing properties using getters
console.log(carrotCake.name); // Outputs: Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 45 minutes

// Modifying properties using setters
carrotCake.name = 'Yummy Carrot Cake'; // Valid name change
carrotCake.bakingTime = '55 minutes';

console.log(carrotCake.name); // Outputs: Yummy Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 55 minutes

// Trying to set an empty name
carrotCake.name = ''; // Outputs: Name cannot be empty.
console.log(carrotCake.name); // Outputs: Yummy Carrot Cake (no change)

Step 4: Updating Ingredients Using a method to update ingredients:

// Updating an ingredient using method
carrotCake.setIngredient('sugar', '1.5 cups');
console.log(carrotCake.ingredients.sugar); // Outputs: 1.5 cups

// Trying to update a non-existing ingredient
carrotCake.setIngredient('vanilla', '1 tsp'); // Outputs: Ingredient vanilla does not exist.

Let's recap the Differences

Dot/Bracket Notation:

Directly accesses or modifies properties.
No validation or logic is applied. E.g., carrotCake._name = '';would overwrite the name without checks. ###Getters/Setters:
Provides a controlled way to access and modify properties.
Can include custom logic, like validation in the setter. E.g., carrotCake.name = ''; prevents setting an empty name.

This example illustrates how you can use both approaches in a JavaScript object and highlights the benefits of getters and setters for encapsulating logic and ensuring data integrity.

Benefits of Using Accessors

Encapsulation
Accessors allow you to hide the internal representation of an object while exposing a cleaner interface. This is a fundamental principle of encapsulation in object-oriented programming.
Validation
Setters can be used to validate data before updating a property. This ensures that the object remains in a valid state.

Summary

In this example, we've created a simple JavaScript object to represent a carrot cake recipe. We accessed its properties using both dot and bracket notation, demonstrating how versatile property accessors can be in JavaScript.

JavaScript object accessors are a powerful feature that enhances the way you interact with object properties. By using getters and setters, you can add encapsulation, validation, computed properties, and read-only properties to your objects. Understanding and utilizing these accessors can lead to more robust, maintainable, and cleaner code. As you continue to explore and master JavaScript, incorporating accessors into your objects will undoubtedly be a valuable tool in your programming toolkit.

Property accessors

Irena Popova 👩🏻‍💻 — Fri, 25 Oct 2024 06:22:36 +0000

Understanding Property Accessors in JavaScript

In JavaScript, property accessors are mechanisms that allow you to access the properties of an object. There are two primary ways to do this: dot notation and bracket notation.

Dot Notation

Dot notation is the most common way to access properties. You simply use a dot (.) followed by the property name.

Bracket Notation

Bracket notation is useful when the property name is dynamic or not a valid identifier (e.g., it contains spaces or special characters). You use square brackets ([]) and pass the property name as a string

Creating objects in JavaScript

The language provides syntax known as object literal notation for quickly creating objects. Object literals are denoted by curly braces. The following example creates an empty object with no properties.


var animal = {};

Inside of the curly braces, properties and their values are specified as a list of key/value pairs.
Keys can be strings or identifiers, while values can be any valid expression. The list of key/value pairs is comma delimited, with each key and value separated by a colon.

The following example creates an object with three properties using literal notation.

The first property, animal, holds the number one.
The second property, dolphin, is specified using a string, and also stores a string value. The third property, mammal, stores an empty object.


var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

Each property has been written on a separate line and indented. The entire object could have been written on a single line, but the code is more readable in this format. This is especially true for objects with many properties or nested objects.

JavaScript provides two notations for accessing object properties.

The first, and most common, is known as dot notation.
Under dot notation, a property is accessed by giving the host object's name, followed by a period (or dot), followed by the property name.

Dot Notation

Dot notation is the most common way to access properties. You simply use a dot (.) followed by the property name. For example:

The following example shows how dot notation is used to read from and write to a property. If object.dolphin
initially held the value one, then its value would become two after executing this statement.

Note that if animal.dolphon did not already have a value, then it would be undefined.

animal.dolphin = animal.dolphin + 1;

The syntax for accessing object properties is known as bracket notation. In bracket notation, the object name is followed by a set of square brackets.
Inside the square brackets, the property name is specified as a string.
The previous example of dot notation has been rewritten below to use bracket notation. While the code may look different, it is functionally equivalent to the previous example.

object["dolphin"] = object["dolphin"] + 1;

Bracket notation is more expressive than dot notation because it allows a variable to specify all or part of the property name.
This is possible because the JavaScript interpreter automatically converts the expression within the square brackets to a string, and then retrieves the corresponding property.

The following example shows how property names can be created on the fly using bracket notation. In the example, the property name foo is created by concatenating the contents of variable d, with the string "dolphin".

var d = "d";

object[d + "dolphin"] = "bar";

Bracket notation also allows property names to contain characters that are forbidden in dot notation.
For example, the following statement is completely legal in bracket notation. However, if you tried to create the same property name in dot notation, you would encounter a syntax error.

object["!@#$%^&*()."] = true;

Accessing Nested Properties

Properties of nested objects can be accessed by chaining dot and/or bracket references together.
For example, the following object contains a nested object named dolphin, which contains another object named mammal, which has a property named years that holds the value one.


var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

The following expressions access the nested property, years. The first expression uses dot notation, while the second expression uses square bracket notation.
The third expression combines both notations to achieve the same result.


animal.dolphin.mammal.lungs;
animal["dolphin"]["mammal"]["years"];
animal["dolphin"].mammal["years"];

Expressions like the ones shown in the previous example can cause performance to suffer if used improperly.
Evaluating each dot or bracket expression takes time.

If the same property is used multiple times, then it makes more sense to access the property once, and then store the value in a local variable for all future uses. The following example uses bar many times within a loop. However, instead of wasting time computing the same value over and over, bar is stored in a local variable.


var years = animal.dolphin.mammal.years;
var count = 0;

for (var i = 0; i < 100000; i++) {
  count += years;
  // better than count += animal.dolphin.mammal.years;
}

Functions as Methods

When a function is used as an object property, it is called a method. Like properties, methods can also be specified in object literal notation. The following example shows how this is accomplished.

var animal = {
  sum: function(dolphin, years) {
    return dolphin + years;
  }
};

Methods can also be invoked using dot and bracket notation.
The following example invokes the sum() method from the previous example using both notations.


dolphin.sum(1, 2);
dolphin["sum"](1, 2);

Adding Properties and Methods

Object literal notation is useful for creating new objects, but it cannot add properties or methods to existing objects.
Fortunately, adding new data to an object is as simple as creating an assignment statement.

The following example creates an empty object.
Two properties, dolphin and mammal, and a method, years, are then added using assignment statements.
Note, that this example uses dot notation, but bracket notation would work equally as well.


var animal = {};
animal.dolphin = 1;
animal.mammal = null;
animal.years = function() {
  return "I am 5 years()";
};

Summary
Objects are composite data types which are built from primitives and other objects. An object’s building blocks are commonly referred to as its fields or properties. Properties are used to describe some aspect of an object. For example, a property can describe the length of a list, the color of a dog, or a person’s date of birth.
So JavaScript object syntax is crucial to be understood, as it serves as a foundation of the language.
As first you need to understand objects before you can understand object-oriented programming.

Dot Notation: Use when property names are valid identifiers.
Bracket Notation: Use when property names are dynamic or not valid identifiers. These accessors are fundamental in JavaScript for manipulating objects and their properties effectively.

Happy Coding!

SLOTS in Vue

Irena Popova 👩🏻‍💻 — Thu, 24 Oct 2024 10:11:28 +0000

Understanding Slots in Vue.js

Slots in Vue.js are a powerful feature that allows developers to create flexible and reusable components by enabling the passing of content from a parent component to a child component. This mechanism is particularly useful for creating components that can adapt their content based on different use cases.

What are Slots?

A slot is essentially a placeholder in a component's template where content can be injected. This is done using the element, which acts as an outlet for the parent-provided content. When a parent component uses a child component, it can specify what content should fill these slots.
What roles do slots play in dynamic and flexible component composition?

A slot in Vue.js is a way or mechanism for a component to accept and render content(s) provided by its parent component. In other words, a slot is a placeholder in a component’s template where the parent component can inject and customize content. Slots enable dynamic composition as the parent can provide specific content to be rendered within the slots of the child component.

What roles do slots play in dynamic and flexible component composition?

Dynamic Content Insertion: Slots allow the dynamic insertion of content into specific areas of a component, providing flexibility in how components can be composed.
Default Content: Components can define default content within slots, providing fallbacks if the parent component does not supply content for a particular slot.
Named Slots: Provide a way to designate specific insertion points within a component, allowing the parent component to insert content into these named slots.
Scoped Slots: Facilitate communication between parent and child components by allowing the child component to expose data to the parent.

Types of Slots

Default Slots:

A default slot is the most basic type, where any content placed between the opening and closing tags of a component will be rendered in the slot. For example:

<template>
  <div>
    <slot></slot>
  </div>
</template>

When using this component, any content inside the tags will be displayed where the is defined.

Named Slots:

Named slots allow for multiple slots within a single component. Each slot can be given a name, and the parent can specify which content goes into which slot. For example:

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot> <!-- Default slot -->
    <slot name="footer"></slot>
  </div>
</template>

In the parent component, you can specify content for each named slot:


<my-component>
  <template v-slot:header>
    <h1>This is the header</h1>
  </template>
  <p>This is the default content.</p>
  <template v-slot:footer>
    <p>This is the footer</p>
  </template>
</my-component>

Scoped Slots:

Scoped slots provide a way to pass data from the child component back to the parent. This is useful when the parent needs to render content based on data from the child. The child component defines a slot with a scope, and the parent can access this data. For example:
vue

<template>
  <slot :data="someData"></slot>
</template>
In the parent, you can access someData:

<my-component v-slot="{ data }">
  <p>{{ data }}</p>
</my-component>

What are Scoped slots?

Scoped slots in Vue.js provide a powerful way or mechanism for passing data and methods from child to parent components, unlike regular slots, which mainly handle content insertion.

Scoped slots facilitate bidirectional communication between components, allowing child components to expose specific data and functionalities to their parent components.

Scoped slots offer many benefits, of which I’ll highlight a few:

Data and Method Exposition
Customizable Content
Bidirectional Communication
Enhanced Component Reusability
Encapsulation of Logic
Avoidance of Prop Drilling

Benefits of Using Slots

Flexibility: Slots allow components to be more flexible and reusable, as they can accept different content based on the context in which they are used.
Separation of Concerns: By using slots, you can separate the component's structure from its content, making it easier to manage and maintain.
Dynamic Content: Slots enable dynamic rendering of content, allowing for more interactive and responsive user interfaces.

Slots in Vue.js are a powerful tool for creating dynamic and reusable components. By understanding how to use default, named, and scoped slots, developers can build flexible applications that adapt to various content needs. This feature enhances the composability of components, making it easier to manage complex UIs.

Using Slots in Vue.js

Let's create a Vue.js component that represents a pizza, allowing users to customize their pizza with various toppings using slots. This example will demonstrate how to use default slots, named slots, and scoped slots effectively.

Pizza Component

First, we will create a Pizza component that uses slots to allow customization:

<template>
  <div class="pizza">
    <h2>Your Custom Pizza</h2>
    <div class="pizza-base">
      <slot name="base">Thin Crust</slot> <!-- Default base if none provided -->
    </div>
    <div class="pizza-toppings">
      <h3>Toppings:</h3>
      <slot></slot> <!-- Default slot for toppings -->
    </div>
    <div class="pizza-sauce">
      <slot name="sauce">Tomato Sauce</slot> <!-- Default sauce if none provided -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pizza'
};
</script>

<style>
.pizza {
  border: 2px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
</style>

Now, let's see how to use the Pizza component in a parent component, providing different toppings, a base, and a sauce:

<template>
  <div>
    <Pizza>
      <template v-slot:base>
        <strong>Stuffed Crust</strong>
      </template>

      <template v-slot>
        <p>Cheese</p>
        <p>Pepperoni</p>
        <p>Mushrooms</p>
        <p>Olives</p>
      </template>

      <template v-slot:sauce>
        <strong>BBQ Sauce</strong>
      </template>
    </Pizza>
  </div>
</template>

<script>
import Pizza from './Pizza.vue';

export default {
  components: {
    Pizza
  }
};
</script>

Let me explain

Pizza Component:

The Pizza component defines three slots:

A named slot for the base (), which defaults to "Thin Crust" if not provided.
A default slot for toppings (), where any content placed between the opening and closing tags of the Pizza component will be rendered.
Another named slot for the sauce (), which defaults to "Tomato Sauce".

Using the Pizza Component:

In the parent component, we use the Pizza component and provide custom content for each slot:
The base is set to "Stuffed Crust" using a named slot.
The toppings are provided in the default slot, listing cheese, pepperoni, mushrooms, and olives.
The sauce is set to "BBQ Sauce" using another named slot.

Benefits of Using Slots

Customization: This approach allows users to customize their pizza easily by providing different bases, sauces, and toppings.
Reusability: The Pizza component can be reused with different configurations without modifying its internal structure.
Clarity: Using named slots makes it clear what each part of the pizza represents, improving code readability.

Slots vs. Props-based Communication

In Vue.js, both slots and props are essential mechanisms for component communication, but they serve different purposes and are used in different scenarios. Understanding the differences between them can help you choose the right approach for your component design.

Props-based Communication

Props are the primary way to pass data from a parent component to a child component. They allow you to define properties on a child component that can be set by the parent. This is particularly useful for passing simple data types, such as strings, numbers, or objects.

Use Case: Props are ideal when you need to pass data that the child component will use to render its content. For example, if you have a UserProfile component, you might pass a user object as a prop to display the user's information.

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
};
</script>

Slots-based Communication

Slots, on the other hand, are used to pass HTML content or templates from a parent component to a child component. This allows for greater flexibility in how the child component is rendered, as the parent can define the structure and content of the slot.

Use Case: Slots are particularly useful when you want to allow the parent to customize the layout or content of the child component. For instance, if you have a Card component, you might want to let the parent specify the header, body, and footer content.

<template>
  <div class="card">
    <slot name="header">Default Header</slot>
    <slot>Default Content</slot>
    <slot name="footer">Default Footer</slot>
  </div>
</template>

Key Differences

Purpose: Props are for passing data (JavaScript values) to child components. Slots are for passing HTML content or templates to child components.
Flexibility: Props provide a straightforward way to pass data but are limited to the data types you can pass. Slots allow for more complex and customizable content, enabling the parent to dictate how the child component should be rendered.
Use Cases: Use props when you need to pass data that the child component will use to render its content. Use slots when you want to allow the parent to customize the structure or layout of the child component.
Communication Direction: Props facilitate one-way communication from parent to child. Slots can facilitate more dynamic interactions, as the parent can define how the child should render its content based on the provided slot.

Conclusion

Slots in Vue.js provide a flexible way to create customizable components. In this pizza example, we demonstrated how to use default, named, and scoped slots to allow users to build their own pizzas with various toppings and sauces. This pattern enhances the reusability and clarity of components in your Vue applications

Happy Coding!

How to use JavaScript closures with confidence

Irena Popova 👩🏻‍💻 — Thu, 24 Oct 2024 07:04:44 +0000

Understanding JavaScript Closures

Closure is all around you in JavaScript, you just have to recognize it.

Closures are a fundamental concept in JavaScript that allow functions to retain access to their lexical scope even when they are executed outside of that scope. This capability is essential for managing state, creating private variables, and implementing data encapsulation.

When you write in JavaScript, closures just happen, wether you are aware of it or not. Understanding closures to intentionally create them and leverage their power is a challenge that every JavaScript developer has to tackle; let’s give it a try.

Here’s a somewhat academic definition that will help you understand and spot a closure when you see one : closure is when a function is able to remember and access the variables of the outer (enclosing) function even when that function is executing outside its scope.

Closure is when a function is able to remember and access the variables of the outer (enclosing) function even when that function is executing outside its scope.

We will go back to the scope concept later. For the moment remember that, depending on the position of a variable in the code, some functions will have access to it and some will not.

Now about the variables; as you already may know, a variable has two components : a name and a value. The name “variable” makes it very clear : its value can vary from one moment to the next. But sometimes, we need to keep the value as it was at a certain point in time to use it later.

In JavaScript, this situation is frequently encountered when working with functions like setTimeout() and setInterval() for example.

So What is a Closure?

A closure is formed when a function is defined within another function, allowing the inner function to access variables from the outer function's scope. This means that the inner function "remembers" the environment in which it was created, even after the outer function has finished executing.

function outerFunction() {
    let outerVariable = 'I am from outer scope!';

    function innerFunction() {
        console.log(outerVariable); // Accessing outerVariable
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: I am from outer scope!

In this example, innerFunction is a closure that retains access to outerVariable even after outerFunction has executed.
Benefits of Using Closures
Data Privacy: Closures can be used to create private variables that cannot be accessed from outside the function. This is useful for encapsulating data and preventing unintended interference.

The for loop example

Let’s take the example of a for loop used to display a counter, and a setTimout() function used to delay the execution of a function.

Understanding the For Loop with `setTimeout`

When using a for loop in conjunction with setTimeout, many developers expect the loop to print numbers sequentially with a delay. However, due to the asynchronous nature of JavaScript, this often leads to unexpected results. Let's explore this with a real example.

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}

Expected vs. Actual Output

Expected Output: You might expect this code to print the numbers from 0 to 9, each one second apart.
Actual Output: Instead, when you run this code, you will see 10 printed ten times, each at one-second intervals. This happens because the setTimeout function captures the variable i by reference, not by value. By the time the timeout executes, the loop has already completed, and i is equal to 10.

Fixing the Issue

To achieve the expected behavior, you can use an Immediately Invoked Function Expression (IIFE) or let to create a new scope for each iteration of the loop. Here’s how you can do it:
Using IIFE:

for (var i = 0; i < 10; i++) {
    (function(index) {
        setTimeout(function() {
            console.log(index);
        }, 1000 * index);
    })(i);
}

Using let:


for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}

With IIFE: By wrapping the setTimeout call in an IIFE, you create a new scope for each iteration of the loop. The current value of i is passed as index, which retains its value when the timeout executes.
let: Using let instead of var creates a block-scoped variable. Each iteration of the loop has its own i, so when the timeout executes, it refers to the correct value.

Why is that happening ?

When the for loop runs and setTimeout() gets called sometime in the future (in that case, one second later in the future), the value of the variable i has already been incremented to the end of its range by the for loop.

This is a case where we need to store and access the value of a variable at a given time, before it is modified again. At each iteration loop, we need to “capture” the corresponding copy of i and store it for later use. The good news is that closures are going to help us do just this : create a new closured scope at each iteration of the loop.

We will get back to this example and see how to add a closure to our loop. But before diving deeper inside the workings of closures, let’s take a brief detour and review some important concepts we need to understand well to get a full grasp of closures.

A function is also a variable

A function is a special variable : you can reassign a value to it and pass it to another function as parameters (this is useful in writing asynchronous functions which are passed as callbacks arguments).

The scope of a variable

Variables that are defined outside of a function can be accessed by that function. They can be modified outside of that function as well as by the function itself.

Variables that are defined inside of a function, as well as the arguments passed to a function, are only accessible inside the function.

Passing a variable to a function

When a variable is passed as an argument to a function, the value of the variable is copied inside the argument.

Taking closures by storm

Now that we finished our detour and got back, we are ready to tackle closures.

Let’s consider the following code :

function myFunction(number1) {
    return function add(number2) {
        return number1 + number2;
    };
}

const addFive = myFunction(5);
console.log(addFive(3)); // Output: 8
console.log(addFive(10)); // Output: 15

Let’s dive a little deeper into this function : what’s going on here ?

We define an argument number1 that will take the value of the variable passed to the function.

We define a function inside the function myFunction. In this nested function, the variable number1 is accessible because it has been defined outside of the add function, in its parent function myFunction.

We return the add function, but we are not calling it. What does this mean ?

The myFunction function returns a function : the add function. When I print myFunction to the console, it will display the return result of the function, which is another function (the add function) :

Why is this important ? Because it means that I can assign a value to number1, pass it to myFunction, and this new value of number1 will be stored for later use, when I will be ready to finish the job and call the add function.

And here is the awesome thing about closures : you can write functions with an intermediate state that can capture data from your application, at a very specific moment in time, and you can then use this data at another, later moment in time. Using closures is like adding a “pause” button inside your function. You can go back to it later, when there has been a change in your app (a click event from the user for example), and still be able to retrieve the value of your data before this change in the application happened.

Without closures, JavaScript would simply run all the code and return the last known value of your data, with no way to go back to the moment when the data had the value you now want to use.

That’s what happened in our first for loop example : the setTimeout function kind of arrived late for the war.
The battles of the for loop had already been fought and when the setTimeout cavalry arrived, the i variable had long been assigned 10, the latest value in the loop, and stayed that way until setTimeout arrived.

For better understanding lets recap Closures in JavaScript

Closures are a powerful feature in JavaScript that allow functions to retain access to their outer scope even after that outer function has finished executing. This capability is particularly useful for creating functions with an intermediate state.

Breakdown of the Example

Defining the Outer Function: The function myFunction takes an argument number1. This argument will be stored in the closure.
Creating the Inner Function: Inside myFunction, we define another function called add, which takes a parameter number2. This inner function has access to number1 because it is defined within the scope of myFunction.
Returning the Inner Function: myFunction returns the add function without calling it. This means that add can be invoked later, and it will still have access to number1.
Using the Closure: When we call myFunction(5), it returns the add function with number1 set to 5. We assign this returned function to addFive. Now, when we call addFive(3), it executes the add function, which adds 5 (the value of number1) to 3 (the value of number2), resulting in 8. Similarly, calling addFive(10) results in 15.

Importance of Closures

Intermediate State: Closures allow you to capture the state of variables at a specific moment in time. In the example, number1 retains its value even after myFunction has executed.
Delayed Execution: You can create functions that can be executed later, with the context of their original environment preserved. This is particularly useful in scenarios like event handling or asynchronous programming.
Data Encapsulation: Closures enable you to create private variables that cannot be accessed from outside the function, promoting better data encapsulation and modularity.

Still not convinced or not sure when to use a closure? Let’s take an example and explain how closures work by baking a cake.

Hands on practice Cake Baking

Here’s how we can implement the cake baking functionality using closures:
We are going to use this code that uses a function to bake cakes that have different ingredients and cooking temperatures :

The ovenTemperature() function is a closure, a function inside a function, that can be called at any point in time after the bakeCake() function has been called.

Notice how we have to take two steps to get the whole log in the console ? If your run this code and never call chocolateCake() or carrotCake(), the console will only print :


"chocolate cake : add chocolate to the batter""carrot cake : add carrot to the batter"

You wouldn’t get any error, but the function inside the function, the closure, would not run and the completion of baking the cake would not happen.

Notice also that I can use my bakeCake() function to bake two very different cakes, each one being a separate instance of bakeCake() that will remember its own ingredient argument for later use.

Like in a real recipe, it is not enough to just add the ingredient to the batter, you also have to set the right temperature and baking time to have a perfect cake. And for that, you have to call another function inside the function. As we saw in the earlier example with the add() function, if this inner function isn’t called, the return of the outer function is simply another function, waiting for its time to be called, not a result value (yet).

Here, the bakeCake() function will not return the "ready to bake" line until you also call the ovenTemperature() function with the two arguments : it is on hold until called properly.

You can put the chocolate in the batter, let the batter rest, and take all the time you need to check your recipe book for the right temperature and baking time. It can be an hour later, you may have to call your mother to get advice on it, and the batter with chocolate will still be here, waiting for you to give the final instructions. In other words, anytime you will call chocolateCake(), the ingredient argument, chocolate, will still be incorporated.

So how do I call this inner function when I am ready ?

I have created two instances of the bakeCake()function and assigned them to two different variables : chocolateCake and carrotCake.

Let’s concentrate on the chocolate cake. chocolateCake is a function, and an instance of bakeCake, with a chocolate argument. For chocolateCake to return the "ready to bake" sentence, I just have to call it and pass the arguments needed by the ovenTemperature()function.

This means that chocolateCake will not be fulfilled until we pass a second set of arguments for the closure to be triggered.

Here for simplicity of comprehension we first assigned bakeCake("chocolate") to a variable (chocolateCake), and then passed the second arguments to this variable, which is also a function. But if we already knew all the requirements of the recipe, we could have gone directly :

bakeCake("chocolate")(250, 60);

An inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.

function bakeCake(ingredient) {
    console.log(`${ingredient} cake: add ${ingredient} to the batter`);

    return function ovenTemperature(temp, time) {
        console.log(`Set the oven to ${temp} degrees for ${time} minutes.`);
        console.log(`${ingredient} cake is ready to bake!`);
    };
}

// Creating instances for different cakes
const chocolateCake = bakeCake("chocolate");
const carrotCake = bakeCake("carrot");

// Calling the inner function to complete the baking process
chocolateCake(250, 30); // Output: Set the oven to 250 degrees for 30 minutes. Chocolate cake is ready to bake!
carrotCake(200, 45);    // Output: Set the oven to 200 degrees for 45 minutes. Carrot cake is ready to bake!

Modifying the For Loop Example with Closures

Now, let’s revisit the earlier for loop example with setTimeout and modify it to use closures so that it prints the numbers from 0 to 9 instead of printing 10 ten times.

for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}

Using let:

By using let instead of var, we create a block-scoped variable i. Each iteration of the loop has its own instance of i, which retains its value when the setTimeout function executes.

Closure in Action:

The setTimeout function forms a closure around the current value of i for each iteration. When the timeout executes after the specified delay, it logs the correct value of i (from 0 to 9).

Let’s create a more detailed example that demonstrates how to bake a carrot cake using closures and a modified for loop with let. This example will illustrate how closures can help manage state and allow for delayed execution.

function bakeCake(ingredient) {
    console.log(`${ingredient} cake: add ${ingredient} to the batter`);

    return function ovenTemperature(temp, time) {
        console.log(`Set the oven to ${temp} degrees for ${time} minutes.`);
        console.log(`${ingredient} cake is ready to bake!`);
    };
}

// Creating an instance for carrot cake
const carrotCake = bakeCake("carrot");

// Using a modified for loop with closures
for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(`Baking step ${i + 1}: Add more ingredients for the carrot cake.`);
    }, 1000 * i);
}

// Finalizing the carrot cake baking process
setTimeout(() => {
    carrotCake(180, 45); // Set the oven temperature and time for baking
}, 10000); // Wait until all steps are logged before finalizing

What is happening?

Outer Function (bakeCake): The bakeCake function takes an ingredient (in this case, "carrot") and logs a message indicating that the ingredient has been added to the batter. It returns the inner function ovenTemperature, which takes temp (temperature) and time (baking time) as arguments.
Creating the Carrot Cake Instance: We create an instance of the carrot cake by calling bakeCake("carrot"), which logs the initial message and returns the ovenTemperature function.
Modified For Loop: We use a for loop with let to iterate from 0 to 9. The setTimeout function is called within the loop, creating a closure that captures the current value of i. Each timeout logs a message indicating the baking step for the carrot cake, with a delay of one second between each step.
Finalizing the Baking Process: After all baking steps have been logged (after 10 seconds), we call the carrotCake function with the desired temperature (180 degrees) and time (45 minutes) to finalize the baking process. This triggers the inner function, logging the oven settings and confirming that the carrot cake is ready to bake.

Lets add more flavour

Let’s enhance the previous example by adding an array of ingredients for the carrot cake, adding butter, flour, milk, eggs, sugar, and carrots, and demonstrate how to use closures to manage the baking process.

function bakeCake(ingredient) {
    console.log(`${ingredient} cake: add ${ingredient} to the batter`);

    return function ovenTemperature(temp, time) {
        console.log(`Set the oven to ${temp} degrees for ${time} minutes.`);
        console.log(`${ingredient} cake is ready to bake!`);
    };
}

// Array of ingredients for the carrot cake
const ingredients = ['butter', 'flour', 'milk', 'eggs', 'sugar', 'carrots'];

// Creating an instance for carrot cake
const carrotCake = bakeCake("carrot");

// Using a modified for loop with closures to add ingredients
for (let i = 0; i < ingredients.length; i++) {
    setTimeout(function() {
        console.log(`Baking step ${i + 1}: Add ${ingredients[i]} to the batter for the carrot cake.`);
    }, 1000 * i);
}

// Finalizing the carrot cake baking process
setTimeout(() => {
    carrotCake(180, 45); // Set the oven temperature and time for baking
}, 1000 * ingredients.length); // Wait until all steps are logged before finalizing

Outer Function (bakeCake): The bakeCake function takes an ingredient (in this case, "carrot") and logs a message indicating that the ingredient has been added to the batter. It returns the inner function ovenTemperature, which takes temp (temperature) and time (baking time) as arguments.
Array of Ingredients:
We define an array called ingredients that contains the necessary ingredients for the carrot cake: ['butter', 'flour', 'milk', 'eggs', 'sugar', 'carrots'].
Creating the Carrot Cake Instance:
We create an instance of the carrot cake by calling bakeCake("carrot"), which logs the initial message and returns the ovenTemperature function.
Modified For Loop:
We use a for loop with let to iterate over the ingredients array. The setTimeout function is called within the loop, creating a closure that captures the current value of i.
Each timeout logs a message indicating the baking step for the carrot cake, with a delay of one second between each step.
Finalizing the Baking Process:
After all baking steps have been logged (after the total time equal to the number of ingredients), we call the carrotCake function with the desired temperature (180 degrees) and time (45 minutes) to finalize the baking process. This triggers the inner function, logging the oven settings and confirming that the carrot cake is ready to bake.

Here is a closure with TypeScript

function bakeCake(ingredient: string) {
    console.log(`${ingredient} cake: add ${ingredient} to the batter`);

    // Inner function to set the oven temperature and time
    return function ovenTemperature(temp: number, time: number) {
        console.log(`Set the oven to ${temp}°C for ${time} minutes.`);
        console.log(`${ingredient} cake is ready to bake!`);
    };
}

// Array of ingredients for the carrot cake
const ingredients: string[] = [
    '6 cups grated carrots',
    '1 cup brown sugar',
    '1 cup raisins',
    '4 eggs',
    '1 ½ cups white sugar',
    '1 cup vegetable oil',
    '2 teaspoons vanilla extract',
    '1 cup crushed pineapple, drained',
    '3 cups all-purpose flour',
    '4 teaspoons ground cinnamon',
    '1 ½ teaspoons baking soda',
    '1 teaspoon salt',
    '1 cup chopped walnuts'
];

// Creating an instance for carrot cake
const carrotCake = bakeCake("carrot");

// Using a modified for loop with closures to add ingredients
for (let i = 0; i < ingredients.length; i++) {
    setTimeout(() => {
        console.log(`Baking step ${i + 1}: Add ${ingredients[i]} to the batter for the carrot cake.`);
    }, 1000 * i);
}

// Finalizing the carrot cake baking process
setTimeout(() => {
    carrotCake(175, 45); // Set the oven temperature to 175°C and time to 45 minutes
}, 1000 * ingredients.length); // Wait until all steps are logged before finalizing

Sumup

By leveraging closures, we can create flexible and modular code that allows for delayed execution while retaining access to the necessary context.
Closures on the front-end can also help us achieve a lot of things, like passing parameters on a click event from the user or overcoming the google maps API results limit.
On your journey to becoming an intermediate or advanced JavaScript developer, you will come across closures and now be able to spot them, hopefully use them, and understand some bugs that wouldn’t make sense otherwise.
I hope you enjoyed this introduction to JavaScript closures.

Feel free to comment and like this article.

Happy Coding!

Introduction to Smart Wallets and Passkeys authentication

Irena Popova 👩🏻‍💻 — Wed, 23 Oct 2024 09:09:07 +0000

Smart wallets and passkeys represent a significant evolution in the way users interact with cryptocurrencies and blockchain technology. By combining the advanced capabilities of smart contracts with the security and convenience of passkeys, these innovations aim to make digital asset management more secure, user-friendly, and efficient. This shift not only enhances security but also encourages broader adoption of blockchain technologies by simplifying the user experience.

Auth with Passkeys/Smart Wallets

In cryptocurrency, smart wallets integrated with passkeys offer enhanced security and user experience. This article explores various wallet types, the role of passkeys in smart wallets, and key recommendations for their implementation.

smart wallets integrated with passkeys represent a significant advancement in both security and user experience. These innovations address many of the challenges faced by traditional wallets, making digital asset management more accessible and secure.

What are Smart Wallets?

Smart wallets are advanced digital wallets that utilize smart contract technology to enhance functionality and security. Unlike traditional wallets that rely solely on private keys, smart wallets can automate transactions, manage complex interactions with decentralized applications (dApps), and provide a more intuitive user experience. They are designed to facilitate seamless interactions within the blockchain ecosystem, allowing users to engage with various services without the cumbersome processes typically associated with cryptocurrency management.

What are Passkeys?

Passkeys represent a new approach to authentication that aims to replace traditional passwords with a more secure and user-friendly method. They utilize public-key cryptography to create a unique digital lock and key for user accounts. When a user logs in, their device or cloud provider proves ownership of the key without actually sharing it, enhancing security and reducing the risk of phishing attacks.

Passkeys can be integrated with biometric authentication methods (like fingerprint or facial recognition), making the login process faster and more intuitive. This means users no longer need to remember complex passwords or manage seed phrases, which are often required for traditional cryptocurrency wallets.

How Smart Wallets Use Passkeys

Smart wallets utilize passkeys to provide a secure and seamless authentication experience. Here’s how they work together:

Enhanced Security:

By using passkeys, smart wallets eliminate the need for users to remember private keys or seed phrases. Instead, the authentication process relies on cryptographic keys stored securely on the user's device or in the cloud.

User Experience:

The integration of passkeys allows for a more streamlined user experience. Users can authenticate transactions or access their wallets using biometric methods, making it easier and faster to manage their digital assets.
Account Control: Smart wallets with passkeys provide users with greater control over their accounts. Since passkeys are unique to each user and device, they reduce the risk of unauthorized access and enhance the overall security of the wallet.

Transaction Management:

Smart wallets can automate and manage transactions more effectively. With passkeys, users can initiate transactions without needing to input complex keys, allowing for a smoother interaction with dApps and other blockchain services.

The Role of Passkeys

Passkeysare a modern authentication mechanism that enhances the security of smart wallets. They eliminate the need for users to remember complex private keys or lengthy seed phrases, which are often a barrier to entry for new users. Instead, passkeys allow users to authenticate their identity using a simpler and more secure method.

Passwordless Authentication:

Passkeys provide a passwordless experience, making it easier for users to access their wallets and conduct transactions. This method reduces the risk of phishing attacks and unauthorized access, as users do not need to input sensitive information that could be intercepted.

Secure Recovery:

One of the significant advantages of passkeys is their ability to facilitate secure recovery of wallet access. If a user loses their device or forgets their credentials, passkeys can help recover access without the risk of losing funds permanently. This feature bridges the gap between usability and security, making smart wallets a compelling alternative to traditional wallets.

Enhanced User Experience

The integration of smart wallets with passkeys significantly improves the overall user experience in several ways:

Simplified Access: Users can access their wallets with minimal clicks, streamlining the process of managing digital assets. This ease of use is particularly beneficial for newcomers to the cryptocurrency space.

Cross-Device Compatibility: Smart wallets can be accessed across multiple devices, thanks to cloud-based or hardware passkey solutions. This flexibility allows users to manage their assets from anywhere without compromising security.

On-Chain Validation: Passkey signatures are validated directly on-chain through open-source and audited smart contracts. This ensures that transactions are secure and transparent, reinforcing user trust in the system.

Multi-Call Transactions: Smart wallets often support multi-call transactions, allowing users to execute multiple actions in a single transaction. This feature not only saves time but also reduces transaction fees, enhancing the overall efficiency of managing cryptocurrencies.

Smart wallets integrated with passkeys represent a transformative approach to cryptocurrency management. By combining advanced security features with user-friendly interfaces, they address many of the pain points associated with traditional wallets. As the cryptocurrency ecosystem continues to grow, these innovations will likely play a crucial role in promoting broader adoption and enhancing the overall user experience.

Understanding Custodial Wallets

Custodial wallets are a type of cryptocurrency wallet where a third party, typically a cryptocurrency exchange or service provider, manages the private keys on behalf of the user. This arrangement offers a different set of advantages and disadvantages compared to non-custodial wallets, which require users to manage their own keys.

Understanding the different types of cryptocurrency wallets is essential for managing your digital assets securely and effectively. Here’s a breakdown of the main wallet types and their characteristics:

Types of Crypto Wallets

Hot Wallets
Hot wallets are connected to the internet, making them convenient for frequent transactions. They allow users to send and receive cryptocurrencies quickly. However, because they are online, they are more vulnerable to hacking and other security threats.
Examples:
Web Wallets: Accessible through web browsers, these wallets are often provided by exchanges.
Mobile Wallets: Apps on smartphones that allow users to manage their crypto on the go.
Desktop Wallets: Software installed on a computer, providing more control than web wallets but still connected to the internet.
Cold Wallets
Cold wallets are offline storage solutions, making them much more secure against online threats. They are ideal for long-term storage of cryptocurrencies.
Examples:
Hardware Wallets: Physical devices that store private keys offline. They are considered one of the safest options for storing cryptocurrencies.
Paper Wallets: A physical printout of your public and private keys. While they are secure from online attacks, they can be lost or damaged easily.
Custodial vs. Non-Custodial Wallets

Key Characteristics of Custodial Wallets

Third-Party Management:

In custodial wallets, the service provider holds the private keys. This means users do not have direct control over their funds, as they rely on the provider to manage security and access.

Ease of Use:
Custodial wallets are generally more user-friendly, making them ideal for beginners. Users can easily create accounts, deposit funds, and start trading without needing to understand the complexities of private key management.

Convenience:
These wallets often come with additional features, such as integrated trading platforms, customer support, and easy access to various cryptocurrencies. This convenience can be appealing for users who prioritize simplicity over control.

Security Risks:
While custodial wallets can be secure, they are also vulnerable to hacks and breaches. If the service provider is compromised, users may lose their funds. Therefore, it’s crucial to choose reputable providers with strong security measures in place.

Regulatory Compliance:
Many custodial wallet providers comply with regulatory requirements, which can offer users a sense of security. However, this may also mean that users have to undergo identity verification processes, which can be a drawback for those seeking privacy.

Custodial wallets are an excellent option for those who prioritize convenience and ease of use over complete control of their assets. They are particularly suitable for beginners or those who engage in frequent trading. However, users should remain aware of the associated risks, including potential security vulnerabilities and the implications of relying on a third party for asset management. Understanding these factors can help users make informed decisions about whether a custodial wallet aligns with their needs and preferences.

Non-Custodial Wallets

Non-custodial wallets are a type of cryptocurrency wallet where users retain full control over their private keys and, consequently, their digital assets. This self-custody approach offers several advantages and responsibilities compared to custodial wallets.

Key Characteristics of Non-Custodial Wallets

Full Control:
Users have complete ownership of their private keys, which means they are solely responsible for managing their funds. This control allows users to send, receive, and store cryptocurrencies without relying on a third party.

Enhanced Security:

Since private keys are stored locally on the user's device or in a secure environment, non-custodial wallets are generally considered more secure against online threats. Users are less vulnerable to hacks that target centralized exchanges or custodial services.

Privacy:

Non-custodial wallets often provide greater privacy since users do not need to share personal information with a third party. This can be appealing for those who prioritize anonymity in their transactions.
Responsibility:
With great control comes great responsibility. Users must ensure they securely back up their private keys or recovery phrases. If they lose access to these keys, they will lose access to their funds permanently.

Variety of Options:

Non-custodial wallets come in various forms, including software wallets (desktop and mobile), hardware wallets, and even paper wallets. Each type offers different levels of security and convenience, allowing users to choose based on their needs.

Compatibility with dApps:

Many non-custodial wallets are designed to interact seamlessly with decentralized applications (dApps) and decentralized finance (DeFi) platforms. This compatibility allows users to engage in a wide range of blockchain activities without needing multiple wallets.

Non-custodial wallets are an excellent choice for users who value security, privacy, and control over their cryptocurrency assets. While they require users to take responsibility for their keys and backups, the benefits of self-custody can outweigh the risks for many. Understanding how non-custodial wallets work and the responsibilities involved can help users make informed decisions about managing their digital assets effectively.

Coinbase Smart Wallet

The Coinbase Smart Wallet is an innovative feature designed to simplify the user experience in managing cryptocurrencies and interacting with decentralized applications (dApps). Here’s an overview of its key features and functionalities:

Key Features

No Extensions or Apps Required:

The Smart Wallet operates directly in your browser, eliminating the need for additional extensions or mobile app installations. This makes it accessible and easy to use for anyone with a web browser.

Passkey Authentication:

Users can sign transactions using passkeys, which enhances security without the complexity of traditional seed phrases. This method allows for a more streamlined authentication process, making it easier for users to manage their wallets.

Universal Compatibility:

The Smart Wallet is designed to work universally across major Layer 2 solutions and on-chain applications. This means users can interact with a wide range of dApps without needing multiple wallets.

Instant Wallet Creation:

Users can create a wallet in seconds, making it incredibly user-friendly. This feature is particularly beneficial for newcomers to the crypto space who may find traditional wallet setups daunting.

On-Chain Interactions:

The Smart Wallet allows users to utilize their Coinbase balances on-chain without needing to fund their wallet first. This feature is particularly useful for transactions on the Base network, where users can interact with dApps without the hassle of transferring funds.

Enhanced Security:

With enterprise-grade security measures in place, the Smart Wallet aims to protect users' assets while providing a seamless experience. The use of passkeys and the absence of complex seed phrases contribute to a more secure environment.
Support for EIP-5792:
The Smart Wallet is among the first to support EIP-5792, which changes how dApps interact with wallets, further enhancing the user experience and functionalit.

The Coinbase Smart Wallet represents a significant advancement in the way users can manage their cryptocurrencies and interact with the blockchain. By combining ease of use with robust security features, it caters to both new and experienced users, making it a versatile tool in the evolving landscape of digital assets. Whether you're looking to store, swap, or mint cryptocurrencies, the Smart Wallet provides a comprehensive solution without the complexities typically associated with crypto wallets.

Recommendations for Smart Wallet Providers

When developing or choosing a smart wallet, particularly one that integrates passkeys, there are several key recommendations to enhance security and user experience.
Here are some essential considerations:

Enforce Cloud-Synced Passkeys
Cloud-synced passkeys are crucial for ensuring that users do not lose access to their wallets. By backing up passkeys to the cloud, users can seamlessly access their wallets across multiple devices without the fear of losing their credentials. This approach not only enhances convenience but also maintains a high level of security, as reputable cloud services implement robust security measures to protect user data.
Implement Strong Security Protocols
Smart wallets should utilize advanced security protocols to protect user assets. This includes:
End-to-End Encryption: Ensure that all data transmitted between the user’s device and the wallet provider is encrypted to prevent unauthorized access.
Multi-Factor Authentication (MFA): Incorporate MFA to add an extra layer of security, requiring users to verify their identity through multiple methods before accessing their wallets.
User-Friendly Interface
A simple and intuitive user interface is essential for attracting and retaining users, especially those new to cryptocurrency. The wallet should provide clear navigation, easy access to features, and straightforward transaction processes to enhance the overall user experience.
Support for Multiple Cryptocurrencies and Networks
To cater to a broader audience, smart wallets should support a variety of cryptocurrencies and blockchain networks. This flexibility allows users to manage different assets within a single wallet, making it a more versatile tool for their cryptocurrency needs.
Seamless Integration with dApps
Smart wallets should facilitate easy interaction with decentralized applications (dApps). This includes providing users with the ability to connect their wallets to various dApps effortlessly, enabling them to participate in DeFi, NFTs, and other blockchain-based services without complications.
Regular Security Audits and Updates
Conducting regular security audits and updates is vital to identify and address potential vulnerabilities. This proactive approach helps maintain user trust and ensures that the wallet remains secure against emerging threats.

JavaScript Performance Optimisation: Comprehensive Guide

Irena Popova 👩🏻‍💻 — Wed, 23 Oct 2024 07:30:06 +0000

JavaScript, being a dynamic language, can sometimes lead to performance bottlenecks in web applications. However, with careful optimization techniques, you can significantly improve the speed and responsiveness of your code. Let's delve into some key strategies:

Minimize DOM Manipulation

Batch DOM updates: Instead of making frequent DOM changes, group them together and update them in a single operation.
Use document fragments: Create a document fragment to manipulate elements outside the DOM and then insert it into the DOM in a single operation.

Leverage innerHTML: For large-scale changes, consider using innerHTML to directly set the HTML content of an element.

Optimize Event Handling

Event delegation: Attach event listeners to a parent element and use event bubbling to handle events for its children.
Throttle and debounce: Prevent excessive event firing by throttling (limiting the rate of events) or debouncing (delaying events until a period of inactivity).
Remove event listeners: When an element is no longer needed, remove its event listeners to avoid unnecessary processing.

Efficient Data Structures and Algorithms

Choose appropriate data structures: Consider using arrays, objects, maps, or sets based on your specific use case.
Implement efficient algorithms: Optimize algorithms for sorting, searching, and other common operations.
Avoid unnecessary calculations: If a value remains constant, calculate it once and store it for reuse.

Code Minification and Compression

Reduce file size: Minify your JavaScript code to remove unnecessary whitespace, comments, and semicolons.
Compress files: Use compression techniques like Gzip or Brotli to further reduce file size.

Asynchronous Programming

Avoid blocking the main thread: Use asynchronous operations (e.g., promises, async/await) to prevent the UI from freezing.
Web Workers: Offload CPU-intensive tasks to web workers to avoid blocking the main thread.

Caching and Lazy Loading

Cache data: Store frequently used data locally to reduce network requests.
Lazy load resources: Load resources only when they are needed, improving initial page load performance.

Profiling and Optimization Tools
Use developer tools: Chrome DevTools, Firefox Developer Tools, and other browser tools provide profiling features to identify performance bottlenecks.

Consider third-party tools: Explore tools like Lighthouse or WebPageTest for more in-depth analysis.

Code Review and Best Practices

Regular code reviews: Have your code reviewed by peers to identify potential optimizations.
Follow coding conventions: Adhere to coding standards and best practices to improve code readability and maintainability.

By implementing these strategies, you can significantly enhance the performance of your JavaScript applications, providing a better user experience.
Remember to measure and analyze your performance improvements to ensure that your optimization efforts are effective.

Assess local variables

JavaScript locally searches for a variable first, and then slowly extends its scope to global variables. Local variables are found on the basis of the most to the least specific scope and can be moved through different scope levels.
Saving variables in a local scope enables JavaScript to have quick access to them. Keep in mind that to define the current scope you need to specify the scope and also define the scope of functions by preceding each variable with ‘let’ or ‘const’. This prevents the lookup and speeds up the code as well.

Use Variables Correctly

It is recommended to use the let and const keywords when declaring variables. Using var can lead to unexpected errors due to its hoisting behavior.

Understanding Variable Declarations in JavaScript

In JavaScript, variables are used to store data values. To declare a variable, you use the var, let, or const keywords. While var has been used traditionally, it's generally recommended to use let and const for better control and avoiding potential pitfalls.

Key Differences Between var, let, and const

Hoisting:

var: Variables declared with var are hoisted to the top of their scope, meaning they can be used before they are declared. This can lead to unexpected behavior if not handled carefully.
let and const: These keywords do not hoist the variable's value, but they do hoist the variable declaration itself. This means that you cannot use the variable before it's declared, preventing common errors.

Scope:

var: Variables declared with var have function scope, meaning they are accessible within the entire function where they are declared.
let and const: These keywords have block scope, meaning they are only accessible within the block (code block enclosed by curly braces) where they are declared. This helps in creating more modular and organized code.
Redeclaration:

var: You can redeclare a variable using var within the same scope.
let and const: You cannot redeclare a variable using let or const within the same scope. This prevents accidental reassignments and improves code clarity.
Mutability:

var and let: Variables declared with var or let can be reassigned to new values after they are declared.
const:

Variables declared with const cannot be reassigned, making them immutable.
This can help prevent accidental modifications and improve code reliability.

Best Practices for Using Variables

Use let for variables that need to be reassigned.
Use const for variables that should not be reassigned.
Avoid using var unless absolutely necessary.
Declare variables as close to their usage as possible to improve code readability.
Be mindful of variable scoping to avoid unintended consequences.

Example:

// Using var
var message = "Hello, world!";
console.log(message); // Output: "Hello, world!"

// Redeclaring message using var
var message = "Goodbye!";
console.log(message); // Output: "Goodbye!"

// Using let
let greeting = "Hi there";
console.log(greeting); // Output: "Hi there"

greeting = "Hello again";
console.log(greeting); // Output: "Hello again"

// Using const
const PI = 3.14159;
console.log(PI); // Output: 3.14159

// Attempting to reassign PI (will result in an error)
PI = 3.14;

Understanding Function Optimization in JavaScript

Function optimization is a critical aspect of writing efficient JavaScript code. It involves identifying and addressing performance bottlenecks that can slow down your applications. One common optimization technique is to avoid unnecessary function calls, especially within loops.

Avoiding Unnecessary Function Calls

-Store function results: If a function returns a constant value, store the result in a variable outside the loop and use the variable within the loop instead of calling the function repeatedly. This eliminates redundant function calls and improves performance.

-Memorize functions: For functions that take arguments and return a value based on those arguments, consider memoizing them. This involves caching the results of function calls so that subsequent calls with the same arguments can return the cached result without re-executing the function.

-Use function expressions: In some cases, using function expressions instead of function declarations can provide performance benefits, especially when dealing with closures.

JavaScript
// Without optimization
function calculateSquare(x) {
  return x * x;
}

for (let i = 0; i < 1000000; i++) {
  const result = calculateSquare(i);
  // Do something with result
}

// With optimization (storing function result)
const square = calculateSquare;

for (let i = 0; i < 1000000; i++) {
  const result = square(i);
  // Do something with result
}

In the optimized code, the calculateSquare function is stored in the square variable outside the loop. This eliminates the need to call the function repeatedly within the loop, resulting in significant performance improvements.

Additional Optimization Tips

-Avoid nested loops: Nested loops can lead to exponential performance degradation. If possible, restructure your code to reduce the number of nested loops.
-Use efficient algorithms: Choose algorithms that have lower time complexity for the tasks you're performing.
-Profile your code: Use profiling tools to identify performance bottlenecks and focus your optimization efforts on the most critical areas.

Minify and Bundle

Understanding Minification and Bundling in JavaScript

Minification and bundling are essential techniques for optimizing JavaScript code and improving web application performance.

Minification

Removes unnecessary characters: Minification removes whitespace, comments, and other non-essential characters from your JavaScript code, reducing its file size without affecting its functionality.
Improves loading times: Smaller file sizes load faster, resulting in a better user experience.
Can be done manually or with tools: While it's possible to minify code manually, using automated tools like UglifyJS or Terser is much more efficient and effective.
Bundling

Combines multiple files: Bundling combines multiple JavaScript files into a single output file. This reduces the number of HTTP requests required to load your application's JavaScript code, improving performance.

2.Module management: Bundlers like Webpack and Gulp can also handle module management, allowing you to organize your code into modular components and load them on demand.

Benefits of Minification and Bundling

Faster load times: Reduced file sizes and fewer HTTP requests result in faster page loads.
Improved user experience: Users are more likely to stay engaged with a website that loads quickly.
Better SEO: Faster load times can improve your website's search engine ranking.
Best Practices for Minification and Bundling

Use a bundler: Webpack and Gulp are popular choices for bundling JavaScript code.

Configure minification: Configure your bundler to automatically minify your JavaScript files during the build process.

Optimize images and other assets: In addition to JavaScript, minify and optimize other assets like images and CSS files to further improve performance.
Use a content delivery network (CDN): Distribute your minified and bundled files across multiple servers to improve load times.

Test and monitor: Regularly test your website's performance and monitor for any issues that may arise after minification and bundling.
Example:

JavaScript
// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
  },
};

In this example, the Webpack configuration is set to production mode, which automatically enables minification and other optimizations.

Understanding Memory Leaks in JavaScript

Memory leaks occur when JavaScript code unintentionally retains references to objects that are no longer needed. This can lead to memory consumption growing over time, eventually impacting application performance and potentially causing crashes.

Common Causes of Memory Leaks

-Global variables: Declaring variables globally can unintentionally create references to objects, preventing them from being garbage collected.
-Event listeners: If event listeners are not removed when elements are removed from the DOM, they can continue to hold references to those elements, preventing them from being garbage collected.
-Closures: Closures can inadvertently create references to variables that are no longer needed, leading to memory leaks.
-Circular references: When objects reference each other in a circular manner, they can prevent each other from being garbage collected.

Best Practices for Avoiding Memory Leaks

-Use local variables: Declare variables within the scope where they are needed to avoid unintentional global references.
Remove event listeners: When an element is no longer needed, remove its event listeners to prevent memory leaks.

-Break circular references: If circular references are necessary, break them manually to allow for garbage collection.

-Use weak references: In some cases, using weak references can help prevent memory leaks by allowing objects to be garbage collected even if they are referenced by other objects.
Profile your code: Use profiling tools to identify potential memory leaks and track memory consumption over time.

JavaScript
// Creating a memory leak
function createElement() {
  const element = document.createElement('div');
  element.addEventListener('click', () => {
    console.log('Element clicked');
  });
  return element;
}

// Using a memory leak
const element = createElement();
document.body.appendChild(element);

// Removing the element without removing the event listener
document.body.removeChild(element);

// The event listener still references the element, preventing it from being garbage collected

Optimized code:

JavaScript
// Avoiding a memory leak
function createElement() {
  const element = document.createElement('div');
  element.addEventListener('click', () => {
    console.log('Element clicked');
  });
  return element;
}

// Using a memory leak
const element = createElement();
document.body.appendChild(element);

// Removing both the element and the event listener
element.removeEventListener('click', () => {});
document.body.removeChild(element);

In the optimized code, the event listener is removed before the element is removed from the DOM, preventing a memory leak.

By following these guidelines, you can write more robust, maintainable, and error-free JavaScript code.

Happy Coding!

Tuples in TypeScript

Irena Popova 👩🏻‍💻 — Wed, 23 Oct 2024 06:45:47 +0000

TypeScript Tuples Explained

let's take a look at the second most important data structure of Type-level TypeScript – Tuples.
Tuples are much more interesting than Arrays at the type level.
In fact, they are the real arrays of type-level programs. In this chapter, we are going to learn why they are so useful and how to use all their awesome features.
Tuple types define sets of arrays with a fixed length, and each index can contain a value of a different type. For example, the tuple [string, number] defines the set of arrays containing exactly two values, where the first value is a string and the second value is a number.

Tuples are essentially lists of types! They can contain zero, one, or many items, and each one can be a completely different type. Unlike unions, types in a tuple are ordered and can be present more than once. They look just like JavaScript arrays and are their type-level equivalent:

type Empty = [];
type One = [1];
type Two = [1, "2"]; // types can be different!
type Three = [1, "2", 1]; // tuples can contain duplicates

Reading indices of a tuple

Just like with JS arrays, you can access a value inside a tuple by using a numerical index:

type SomeTuple = ["Irena", 30];

type Name = SomeTuple[0]; // "Itena"
type Age = SomeTuple[1]; // 30

The only difference is that tuples are indexed by number literal types and not just numbers.

So, in TypeScript, tuples are a special type of array where:

The types of the elements are fixed and known.
Each element in the tuple can have a different type.
Tuples allow you to define an array with a fixed number of elements, where each element can have a distinct type. This is useful for representing data that comes in pairs or groups where the types are different for each element.

Tuple Syntax

To define a tuple in TypeScript, you use square brackets [], where each element has a specific type, separated by commas.

let tuple: [type1, type2, type3];

Basic Tuple Example

// A tuple with a string, a number, and a boolean
let person: [string, number, boolean] = ['Irena', 30, true];

console.log(person[0]);  // Output: 'Irena'
console.log(person[1]);  // Output: 30
console.log(person[2]);  // Output: true

In this case:

The first element must be a string ('Irene').
The second element must be a number (30).
The third element must be a boolean (true).

Why Use Tuples?

Structured Data: When you want to group different types of data together in a predictable format.
Fixed Length: Tuples have a known, fixed length and order, unlike regular arrays where the number of elements can vary.
Type Safety: You get type safety at compile time since each position in the tuple has a known type.

Tuple vs. Array

An array can have any number of elements of a single type or multiple types.
A tuple has a fixed number of elements, and the types of each element are predefined.

For example:

let names: string[] = ['Alice', 'Bob'];  // Array of strings
let personInfo: [string, number] = ['Alice', 25];  // Tuple with a string and a number

Accessing Tuple Elements

You can access tuple elements just like you do with arrays, using index notation.

let person: [string, number, boolean] = ['Irena', 30, true];

console.log(person[0]);  // 'Irena'
console.log(person[1]);  // 30

Optional Elements in Tuples

Tuples can also have optional elements. Optional elements must come at the end of the tuple.

let person: [string, number?] = ['Alice'];

Tuple Example in a Practical Use Case (Vue/React Project)
Let's say you are creating a portfolio project where you want to display a list of skills and their categories. You could use tuples to represent these skill categories and the associated technologies.

// Define a tuple for each skill
let frontEndSkill: [string, string] = ['Front-End', 'HTML, CSS, JavaScript, React'];
let backEndSkill: [string, string] = ['Back-End', 'Node.js, Express, MongoDB'];
let toolsSkill: [string, string] = ['Tools', 'Git, Docker, Jenkins'];

// Now you can create an array of tuples
let skills: [string, string][] = [
  frontEndSkill,
  backEndSkill,
  toolsSkill
];

// Loop through and display them (in a Vue component for instance)
skills.forEach(([category, techs]) => {
  console.log(`Category: ${category}, Technologies: ${techs}`);
});

In this example:

Each skill is represented as a tuple with two elements: a category (e.g., "Front-End") and a list of technologies (e.g., "HTML, CSS, JavaScript, React").
The tuple enforces that each skill must be defined in this format: first a string for the category, then a string for the technologies.

Tuples with Destructuring

You can use destructuring to easily extract the values from a tuple.

let skill: [string, string] = ['Front-End', 'HTML, CSS, JavaScript'];

// Destructure the tuple
let [category, technologies] = skill;

console.log(category);  // 'Front-End'
console.log(technologies);  // 'HTML, CSS, JavaScript'

Rest Elements in Tuples (it is Advanced, more in another article)

TypeScript 4.0 introduced rest elements in tuples, allowing more flexible tuple types with variadic arguments.

// Tuple with a fixed first element and a rest element
let tuple: [string, ...number[]] = ['Alice', 10, 20, 30];

console.log(tuple);  // ['Alice', 10, 20, 30]

Key Points to Remember:
Tuples allow fixed-length, ordered collections of different types.
Useful for structured data like coordinates, pairs of values (e.g., key-value pairs), or when working with APIs that return mixed-type results.
Tuples are type-safe and can help ensure consistency in the order and types of the data.

For example if you want to build a Portfolio (Vue.js) Project:
Here’s how you could use a tuple in a Vue.js project to display your tech skills:

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      // Define an array of tuples for skill categories
      skills: [
        ['Front-End', 'HTML, CSS, JavaScript, Vue.js'],
        ['Back-End', 'Node.js, Express, MongoDB'],
        ['DevOps', 'Docker, Jenkins, Git']
      ] as [string, string][]  // Type annotation: array of tuples
    }
  }
});
</script>

<template>
  <div>
    <h1>My Skills</h1>
    <ul>
      <li v-for="([category, technologies], index) in skills" :key="index">
        <strong>{{ category }}:</strong> {{ technologies }}
      </li>
    </ul>
  </div>
</template>

This would render:

My Skills:
- Front-End: HTML, CSS, JavaScript, Vue.js
- Back-End: Node.js, Express, MongoDB
- DevOps: Docker, Jenkins, Git

In this example, the skills array consists of tuples where each tuple represents a skill category and the technologies within that category. The Vue template then loops through the tuples and displays each skill category with its corresponding technologies.

Lets summarized

A tuple is a type in TypeScript used to represent an array where the type of a fixed number of elements is known, but not for all elements. It provides a way to represent the ordered set of element types for given elements in a TypeScript array . A tuple always has a fixed number of elements and each of them has their types associated with it.

Tuple types define sets of arrays with a fixed length, and each index can contain a value of a different type. For example, the tuple [string, number] defines the set of arrays containing exactly two values, where the first value is a string and the second value is a number.

Happy coding!

DEV Community: Irena Popova 👩🏻‍💻

Blockchain with Vue, Python & Flask

Overview

Setting up the environment

Step 3: Putting It All Together

Step 3: Node Discovery and Consensus

Understanding Slots in Vue 3 with Composition API

What are Slots?

Types of Slots

Using Slots with the Composition API

Named Slots

Scoped Slots

Example: Food Products Delivery with Slots in Vue 3

Step 1: Create the Main Component

Step 2: Create Food Item Component

Step 3: Using the Components

Let me Explain

Use Cases

Advanced Considerations

Step 1: Create the ItemList Component

Step 2: Using the ItemList Component with Scoped Slots

ItemList Component:

Let's recap

Understanding Nested Objects in JavaScript

Creating a Nested Object

Accessing Nested Object Properties

Using Types with Nested Objects

Here is another example of Nested Objects in JavaScript

Defining a Nested Object for a Library System

Let's breakdown of the Nested Object Structure

Accessing and Manipulating Data

Using a Method in the Object

Another nested example

Example of a Train Object

The benefits of this approach are:

Let's recap

Understanding Nested Objects in JavaScript

Creating a Nested Object

Accessing Nested Object Properties

Using Types with Nested Objects

Here is another example of Nested Objects in JavaScript

Defining a Nested Object for a Library System

Let's breakdown of the Nested Object Structure

Accessing and Manipulating Data

Using a Method in the Object

Another nested example

Example of a Train Object

The benefits of this approach are:

Let's recap

Understanding Nested Objects in JavaScript

Creating a Nested Object

Accessing Nested Object Properties

Using Types with Nested Objects

Here is another example of Nested Objects in JavaScript

Defining a Nested Object for a Library System

Let's breakdown of the Nested Object Structure

Accessing and Manipulating Data

Using a Method in the Object

Another nested example

Example of a Train Object

Example of Defining a Train Type in TypeScript

the Structure

The benefits of this approach are:

Let's recap

Access to Properties-deep dive

Carrot Cake Recipe with JavaScript Objects

Step 1: Define the Carrot Cake Object

Step 2: Accessing Properties Using Dot Notation

Step 3: Accessing Properties Using Bracket Notation

Step 4: Looping Through Ingredients

What Are JavaScript Object Accessors?

Getters: Methods that get the value of a property.

Setters: Methods that set the value of a property.

Defining Getters and Setters

Using Object Literals

Dot/Bracket Notation:

Benefits of Using Accessors

Summary

Property accessors

Understanding Property Accessors in JavaScript

Step 2: Using the `ItemList` Component with Scoped Slots

Understanding the For Loop with `setTimeout`