DEV Community: Precious Longe

Getting Started with BootstrapVue

Precious Longe — Sat, 10 Jun 2023 07:51:04 +0000

Are you looking to create stunning and responsive online applications easily? Then you've come to the right place! With BootstrapVue, you can quickly create beautiful and user-friendly interfaces in no time. This open-source toolkit is built on Vue.js and Bootstrap, which is perfect for developing modern web applications.

In this article, we'll go through the fundamentals of BootstrapVue and illustrate how to get started with this powerful framework. So, please sit back, grab a cup of coffee, and let's dive into the world of BootstrapVue!

What is BootstrapVue

BootstrapVue is a popular open-source front-end framework that combines Bootstrap (a front-end UI framework) and vue.js (a progressive JavaScript framework) to create reusable UI components and web applications.

It is designed to be highly customizable, allowing developers to easily modify the appearance and behavior of the components to fit the specific needs of their project. It also includes support for CSS preprocessors like Sass and Less, making it easy to customize the styles of the components.

Why use BootstrapVue?

Fast Development: One of the main reasons to use BoostrapVue is that it provides many pre-built UI components (such as buttons, forms, modals, and tooltips) that can be easily integrated into your web application.
Large Community: Another benefit of using BootstrapVue is that it has a large and active community of developers who contribute to the framework and provide support to users.
Easy Migration: BootstrapVue makes it easy for developers to switch from Vanilla JavaScript to Vue.js without bothering about Bootstrap's heavy dependency on JQuery.

Prerequisites

Before we start installing BootstrapVue and learning about some components, it will help if you have the following:

Basic knowledge of Bootstrap.
Basic knowledge of Vue.js.
Vue CLI tool globally installed on your machine. You can follow the installation guide if you don't have it installed.

Integrating BootstrapVue with Vue.js

The first step would be to create a Vue.js project. This is essential for you to integrate BootstrapVue. Create a Vue.js project by running the following commands in your terminal.

vue create my-project

Note: BootstrapVue does not presently support the stable version of Vue.js 3. To get it working, you'd need to integrate it with the vue2-3 migration build. However, this is not recommended due to recognized limitations with this method. Regardless, you can use the vue2-3 migration build to create a new application by following the steps here.

Then navigate into your project’s directory using cd my-project. You can now proceed to integrate BootstrapVue.
There are two ways to integrate BootstrapVue into your Vue.js project:

Using a package manager like NPM and Yarn
Using CDN links

Using NPM or Yarn

Run one of the commands below depending on the package manager you are working with:

# With npm
npm install bootstrap bootstrap-vue

# With yarn
yarn add bootstrap bootstrap-vue

Using CDN

Visit CdnJS website to get the current CDN link, then open the index.html file in the public folder and add the code below:

<!-- Add Bootstrap and Bootstrap-Vue CSS in the <head> section -->
<link
 rel="stylesheet"
 href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
 rel="stylesheet"
 href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.min.css"
/>

<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

The code above will pull each package's minified and the latest version into our project, clean and simple!

For this article, we will stick to using package managers. Let’s continue setting up the BootstrapVue package we have installed.

Setting up BootstrapVue

To set up the Bootstrap and BootstrapVue packages we just installed. In the src folder, you will find the main.js file. Import BootstrapVue, and its CSS files as seen below:

import Vue from 'vue'

// Import BootstrapVue
import { BootstrapVue } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files ( ensure to follow the order)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)

In the code above, we registered BootstrapVue in the application's entry point using the Vue.use() function so our application can recognize it.

BootstrapVue Components

If you have ever used Bootstrap, you will know it uses some pre-built components. This is the same with BootstrapVue. BootstrapVue components are built specifically for Vue.js, making them easier to use and integrate into your Vue.js applications.

Some popular BootstrapVue components include buttons, forms, modals, tooltips, navigation menus, carousels, and more. BootstrapVue also includes some unique components not available in standard Bootstrap, such as the BTable component for creating dynamic and interactive tables.

BootstrapVue also includes a range of utility classes and mixins that can customize the appearance and behavior of components even further. This makes it possible to create highly customized and unique websites and applications that stand out.

Let’s explore some basic BootstrapVue components, including buttons, forms, and cards.

Buttons

BootstrapVue provides a variety of button components that can be used to create different types of buttons with various styles and functionalities. The most basic button component is the b-button, which can be used to create a simple clickable button.

Here is an example:

<template>
  <div class="m-5 d-flex justify-content-center">
    -<b-button variant="primary">Click me!</b-button>
  </div>
</template>;

This code above will create a primary-colored button with the text "Click me!" — this is because the variant prop is set to primary. You can change the color and style of the button by specifying other variant values, such as danger or success.

BootstrapVue also provides other button components that can be used to create dropdown menus, toggle buttons, and more. You can learn more about button components via the BootstrapVue documentation.

Forms

BootstrapVue provides a variety of form components that can be used to create forms with different types of input fields, labels, and validations. The most basic form component is b-form-input, which can be used to create a simple text input field.

Here is an example:

<template>
  <div class="m-5">
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Food:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="form.checked"
          id="checkboxes-4"
          :aria-describedby="ariaDescribedby"
        >
          <b-form-checkbox value="me">Check me out</b-form-checkbox>
          <b-form-checkbox value="that">Check that out</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: "",
        name: "",
        food: null,
        checked: [],
      },
      foods: [
        { text: "Select One", value: null },
        "Carrots",
        "Beans",
        "Tomatoes",
        "Corn",
      ],
      show: true,
    };
  },
  methods: {
    onSubmit(event) {
      event.preventDefault();
      alert(JSON.stringify(this.form));
    },
    onReset(event) {
      event.preventDefault();
      // Reset our form values
      this.form.email = "";
      this.form.name = "";
      this.form.food = null;
      this.form.checked = [];
      // Trick to reset/clear native browser form validation state
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
  },
};
</script>

The code above will create a simple form requesting the user's email, name, and food choice. We can always customize this form to suit our use-case.

BootstrapVue provides other form components that can be used to create radio buttons, checkboxes, dropdown menus, and more. It provides form validation functionality through the v-validate directive, the ValidationProvider, and ValidationObserver components.

Cards

BootstrapVue provides a variety of card components that can be used to style text, headings, and images. The most basic card component is the b-card, which can be used to display an image, a heading, and text.

Here is an example:

<template>
  <div class="m-5 d-flex justify-content-center">
    <b-card
      title="Card Title"
      img-src="https://images.unsplash.com/photo-1653387137517-fbc54d488ed8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHZ1ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
      img-alt="Image"
      img-top
      tag="article"
      style="max-width: 20rem"
      class="mb-2"
    >
      <b-card-text>
        You can add some text in your card to suit your use case
      </b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </div>
</template>

The code above will create a card component with an image, a title, and some text displayed using the b-card component.

BootstrapVue provides other card components that can be used to create headings, paragraphs, lists, and more. BootstrapVue also provides a utility class system for card-related styles, in which you can apply common styles like text color, font weight, and text alignment.

Advanced Components

BootstrapVue provides many advanced components that can be used to add more complex functionality to your Vue.js applications. Some of these advanced components are modals, carousels, and tooltips.

Modals

Modals are a popular way to display content in a modal dialog that appears on the current page. BootstrapVue provides a b-modal component that can be used to create modals with various functionalities, such as showing/hiding the modal, changing its size, and adding custom content.

Here is an example:

<template>
  <div
    class="d-flex justify-content-center align-items-center"
    style="height: 100vh"
  >
    <b-button variant="primary" @click="showModal = true">Open Modal</b-button>
    <b-modal v-model="showModal" title="My Modal">
      <p>Hello, world!</p>
    </b-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

The code above will create a button that, when clicked, will show a modal dialog with the title "My Modal" and the text "Hello, world!".

BootstrapVue also provides other modal-related components that can be used to create confirmation dialogs, scrollable modals, and more. BootstrapVue also provides events that can be used to trigger actions before and after the modal is shown or hidden.

Carousels

Carousels are a popular way to display a series of images or other content in a rotating carousel. BootstrapVue provides a b-carousel component that can be used to create carousels with various functionalities, such as autoplay, navigation controls, and indicators.

Here is an example:

<template>
  <div
    class="d-flex justify-content-center align-items-center"
    style="height: 100vh"
  >
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
      class="w-75"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="Our First slide"
        text="A beautiful day in the streets"
        img-src="https://picsum.photos/1024/480/?image=57"
      ></b-carousel-slide>
      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=62">
        <h1>Welcome to BootstrapVue</h1>
      </b-carousel-slide>
      <!-- Slides with just an image -->
      <b-carousel-slide
        text="my text"
        img-src="https://picsum.photos/1024/480/?image=64"
      ></b-carousel-slide>
      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=50"
            alt="image slot"
          />
        </template>
      </b-carousel-slide>
    </b-carousel>
  </div>
</template>

This code will create a carousel with three slides containing an image and a caption. BootstrapVue also provides other carousel-related components that can be used to create slide transitions, fade transitions, and provides events that can be used to trigger actions before and after each slide is shown.

Tooltips

Tooltips are a popular way to display additional information when the user hovers over an element. BootstrapVue provides a b-tooltip component that can be used to create tooltips with various functionalities, such as changing the position, adding custom content, and controlling when the tooltip is shown.

Here is an example:

<template>
  <div
    class="d-flex justify-content-center align-items-center"
    style="height: 100vh"
  >
    <b-button variant="primary" v-b-tooltip.hover.top="'Hello, world!'"
      >Hover me!</b-button
    >
  </div>
</template>

This code will create a button that, when hovered over, will show a tooltip with the text "Hello, world!".

BootstrapVue also provides other tooltip-related components that can be used to create tooltips with HTML content, programmatically show/hide tooltips, and more.

Customizing BootstrapVue components

Customizing BootstrapVue components allows you to tailor the appearance and behavior of the components to your specific needs. Let’s now learn how to customize two BootstrapVue components, buttons, and modals using examples.

Customizing Buttons

BootstrapVue provides many customization options for buttons, such as changing the size, color, shape and adding custom classes or styles.

Here is an example of how to change the color and shape of a button using BootstrapVue classes:

<template>
  <div class="m-5">
    <b-button variant="primary" class="rounded-pill"
      >Primary Pill Button</b-button
    >
    <b-button variant="danger" class="rounded-0">Danger Square Button</b-button>
  </div>
</template>

This code will create two buttons, one with a primary color and a rounded pill shape, and one with a danger color and a square shape. The rounded-pill and rounded-0 classes are BootstrapVue classes that control the border radius of the button.

You can also add custom classes or styles to the button by using the class or style attributes:

<template>
  <div class="m-5 d-flex justify-content-center">
    <b-button
      variant="success"
      class="my-custom-class"
      style="font-size: 1.2rem"
      >Customized Button</b-button
    >
  </div>
</template>

This code will create a success button with a custom class of my-custom-class and a custom style of font-size: 1.2rem;.

Customizing Modals

BootstrapVue provides many customization options for modals, such as changing the size, position, backdrop and adding custom content or styles.

Here is an example of how to change the size and position of a modal using BootstrapVue props:

<template>
  <div
    class="d-flex justify-content-center align-items-center"
    style="height: 100vh"
  >
    <b-button variant="primary" @click="showModal = true">Open Modal</b-button>
    <b-modal v-model="showModal" title="My Modal" size="lg" centered>
      <p>Hello, world!</p>
    </b-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

This code will create a button that, when clicked, will show a modal dialog with the title "My Modal" and the text "Hello, world!" with a large size and centered position.

You can also add custom content or styles to the modal by using slots or the style attribute:

<template>
  <div class="d-flex justify-content-center m-5">
    <b-button variant="primary" @click="showModal = true">Open Modal</b-button>
    <b-modal v-model="showModal" title="My Modal">
      <template #default>
        <h2>Custom Heading</h2>
        <p>This is some custom content.</p>
      </template>
      <template #modal-footer="{ ok }">
        <b-button @click="ok()">Custom OK Button</b-button>
      </template>
      <template #modal-body="{ css }">
        <p :style="css">This paragraph has custom CSS.</p>
      </template>
    </b-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

This code will create a modal dialog with a custom heading and content, a custom OK button, and a paragraph with custom CSS.

Styling with BootstrapVue

BootstrapVue provides powerful styling features that allow you to style your components with CSS easily. In this article, we will provide an explanation of how to style BootstrapVue components using CSS.

Styling Components

BootstrapVue components have a set of default styles that you can easily customize. You can apply styles to a component by adding a class or style attribute to the component:

<template>
  <div class="m-5">
    <b-button
      variant="primary"
      class="my-custom-class"
      style="background-color: red"
      >Custom Button</b-button
    >
  </div>
</template>

In the code above, we've added a custom class of my-custom-class to the button and a custom style of background-color: red. This will change the background color of the button to red.

CSS Preprocessors

BootstrapVue also supports the use of CSS preprocessors like Sass and Less. Using a preprocessor allows you to write more powerful and modular CSS code. To use a preprocessor with BootstrapVue, you can simply include the preprocessor file in your project and import it into your code:

/* In your main.scss file */
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-vue/src/index.scss";

Once you've imported the preprocessor files, you can use their features to style your components. For example, in Sass, you can use variables to define colors and other properties:

$primary-color: #007bff;

.custom-button {
  background-color: $primary-color;
  border-radius: 0.25rem;
}

In this example, we've defined a variable for the primary color, and we've used it to style a custom button with a custom class of custom-button. This will give the button a background color of #007bff (the primary color) and a border radius of 0.25rem.

Scoped Styles

Sometimes you may want to apply styles to a component that only affects that component and not any other components on the page. In this case, you can use scoped styles. Scoped styles are only applied to a specific component and its children.

To use scoped styles in BootstrapVue, you can add a scoped attribute to the <style> tag in your component:

<template>
  <div class="m-5">
    <b-button variant="primary" class="my-custom-class m-2"
      >Custom Button</b-button
    >
    <b-button variant="primary">Custom Button</b-button>
    <b-button variant="primary">Custom Button</b-button>
  </div>
</template>
<style scoped>
.my-custom-class {
  background-color: red;
}
</style>

In this example, we've added a scoped attribute to the <style> tag, and we've defined a style for the my-custom-class class. This style will only be applied to the button in this component and not to any other buttons on the page.

Conclusion

In this article, we have covered the basics of BootstrapVue, including its installation and setup, configuration, and usage. We have explored some of its key components, such as buttons, modals, tooltips, and others.

BootstrapVue is a powerful tool that can help developers create beautiful, responsive web applications quickly and easily. Whether you are building a simple website or a complex web application, it can help you get started and make building user interfaces much easier.

Arithmetic Operations In JavaScript

Precious Longe — Mon, 11 Jul 2022 10:58:28 +0000

In this tutorial, you will learn how to use arithmetic operators to perform arithmetic calculations in JavaScript.

As you probably already know, operators are used in JavaScript to modify the value of variables. They are used for changing the value of variables by performing mathematical computations.
They are helpful approaches to giving a variable a numerical value.

Numerical values are passed to an arithmetic operator as operands, and the outcome is always a single numerical value. These operands can either be literals or variables or a combination of both.
When the numbers are literals:

let x = 10 +20;
console.log(x); //30

When the operands are variables:

let x = y + z;

When both literals and variables are combined:

let x = (20 + 30) + a;

JavaScript arithmetic operators include the following:

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
/	Division
**	Exponentiation
%	Modulus
++	Increment
--	Decrement

Addition Operator `(+)`

The addition operator adds numbers together and returns the sum as a result. Example

let sum = 10 + 30;
console.log(sum); //40

Here, we used the addition operator to add two literal numbers together. Let's add two variables next:

let a = 20;
let b = 30;
let sum = a + b;
console.log(sum); //50

What happens when either one or both operands are strings?

Let's see what the addition operator will do in any of these cases.
When both operands are strings, the second operand is concatenated to the first operand.

let a = "20";
let b = "30";
let sum = a + b;
console.log(sum); //2030

When one of the operands is a string and the other is a number. The number is converted into a string and the second operand is concatenated to it afterward.

let a = "30";
let b = 20;
let result = a + b;
console.log(sum);//3020

When the values to be operated on are not straightforward numbers or strings like we have seen above, the table below shows us how the operation JavaScript handles them.

First Operand	Second Operand	Outcome	Explanation
+0	+0	+0	+0 + (+0) = +0
-0	+0	+0	+0 + (-0) = +0
-0	-0	-0	-0 + (-0) = -0
Infinite	Infinite	Infinite	Infinity + Infinity = Infinity
Infinite	-Infinite	NaN	Infinity + -Infinity = NaN
-Infinite	-Infinite	-Infinite	-Infinite + -Infinite = -Infinite

In the case where either value is NaN, the outcome will be NaN.

Subtration Operator `(-)`

This operator subtracts one number from another. Example:

let x = 30 - 20;
console.log(x); //10

Variables containing literal values can also be operated on. Example

let a = 30;
let b = 20;
let sub = a - b;
console.log(sub); //10

When the values to be operated on are not straightforward numbers like we have seen above, the table below shows us how the - operation JavaScript handles them.

First Operand	Second Operand	Outcome	Explanation
+0	+0	+0	+0 - (+0) = +0
-0	+0	-0	-0 - (+0) = -0
-0	-0	+0	-0 - (-0) = +0
Infinite	Infinite	NaN	Infinity - Infinity = NaN
Infinite	-Infinite	-Infinite	Infinity - (-Infinity) = -Infinite
-Infinite	-Infinite	NaN	-Infinite + (-Infinite) = NaN

Multiplication Operator `(*)`

The multiplication Operator * multiplies numbers. It multiplies two numbers and returns a number as output. Example:

let x = 20 * 30;
console.log(X); //600

It can operate on variables also.

let a = 10;
let b = 20;
let multi = a * b;
console.log(multi); // 200

When one operand or both are strings, JavaScript converts the string into a number and performs the multiplication operation. Example:

let x = "5";
let y = "4";
let result = x * y;

console.log(result); //20

In the case of special operands in the multiplication operation, the table below shows how Javascript handles them.

First Operand	Second Operand	Outcome	Explanation
+0	+0	+0	+0 * (+0) = +0
-0	+0	-0	-0 * (+0) = -0
-0	-0	+0	-0 * (-0) = +0
Infinite	0	NaN	Infinite * 0 = NaN
Infinite	Infinite	Infinite	Infinity * Infinity = Infinite
Infinite	-Infinite	-Infinite	Infinity * (-Infinity) = -Infinite
-Infinite	-Infinite	Infinite	-Infinite * (-Infinite) = Infinite

Division Operator `(/)`

This operator divides numbers. It divides the first operand into the second operand. Example:

let x = 30 / 5;
console.log(x); //6

We can have the operator operate on variables too.

let a = 30;
let b = 5;
let result = a / b;
console.log(result); //6

When one or both operands are strings, JavaScript converts the string into a number and performs the division operation.

let a = "30";
let b = 5;
let result = a / b;
console.log(result); //6

In the case of special operations, the table below shows how JavaScript handles them.

First Operand	Second Operand	Outcome	Explanation
0	0	NaN	0 / 0 = NaN
A number	0	Infinite	30 / 0 = Infinite
A number	Infinite	0	30 / Infinite = 0
Infinite	positive number	Infinite	Infinite / 30 = Infinite
Infinite	a negative number	-Infinite	Infinity / -30 = -Infinite

Exponenciation Operator `(**)`

This operator is the raised to power operator i.e., it raises the first operand to the power of the second operand. It multiplies the first operand by itself in the number of the second operand. Example:

let x = 6 ** 5;
console.log(x); //7776

The operation above multiplied 6 by 6 in 5 places. In simple terms, what happened is 6*6*6*6*6 = 7776.

When the operands are variables, this operator can still be used.

let a = 6;
let b = 5;
let result = a ** b;
console.log(result); //7776

The exponentiation operator performs the same operation as the Math.pow function.

let a = 6;
let b = 5;
let result = Math.pow(a,b); // result is 7776

So with the example above, we now know that a ** b will produce the same result as Math.pow(a,b).

Modulus Operator `(%)`

This operator is commonly known as remainder. The operator returns the remainder when one operand is divided by another.

let x = 30 % 20;
console.log(x) //10

In the operation above, 30 is divided by 20, and the remainder is returned as the result. 30 can be divided by 20 only once and the remainder is 10 and that is what we got as our result.
Variables can also be operated. Example:

let a = 30;
let b = 20;
let result = a % b;
console.log(result); //10

Increement Operator `(++)`

This operator is used to increment a number by 1.

If used postfix(operand before operator) a++, the operator returns the value before incrementing.

let a = 30;
let b = a++;
console.log(b); //30

If used prefix(operand after operator) ++a, the operator returns the value after incrementing.

let a = 30;
let b = ++a;
console.log(b);// 31

Decreement Operator `(--)`

This operator is used to decrease a number by 1.

If used postfix(operand before operator) a++, the operator returns the value before decreasing.

let a = 30;
let b = a--;
console.log(b); //30

If used prefix(operand after operator) ++a, the operator returns the value after decreasing.

let a = 30;
let b = --a;
console.log(b);// 29

Summary

Operator	Description	Explanation
+	Addition	Adds numbers together
-	Subtraction	Subtracts one number from another
*	Multiplication	Multiplies two numbers
/	Division	Divides one number by another
**	Exponentiation	Raises one number to the power of another
%	Modulus	Returns the remainder in a division operation
++	Increment	Increases a number by 1
--	Decrement	Decreases a number by 1

Conclusion

In this article, we discussed the arithmetic operators we have in JavaScript and how they are used.
Take your time to go through them slowly and understand each of them, because they will help you in your daily JavaSript tasks.

Thanks for reading and don't forget to drop your questions and observations in the discussion box.

Please leave a comment or tweet me if you have any questions or recommendations! Make sure to follow me on social media!

Manipulating Arrays in JavaScript

Precious Longe — Tue, 31 May 2022 21:12:46 +0000

Manipulation of arrays refers to the numerous operations that can be performed on them, such as adding to an already declared array, deleting from it, or altering it in various ways. And these activities can be carried out through the use of methods.

Every JavaScript developer must interact with arrays at some time, and we'll go over the various ways these arrays can be modified here.
In this tutorial, you'll learn how to modify arrays using various methods in a step-by-step manner.

What are Arrays and How Do I Use Them?

An array is a variable that can contain elements of various data types, such as strings(" "), numbers (0....infinity), booleans(true/false) etc. There is no datatype discrimination in an array. These elements are saved in this variable, which can be accessed at any time.
Let's start by declaring our array.

var arrayName = []; //Initial array declaration
var resources = ["chrome","google","notion","youtube"];

The first line declares an empty array, whereas the second declares an array of elements.

Methods for Array Manipulation

Now let's get to work and explain some of the various methods available to us.
As mentioned earlier, we can use methods to carry out some specific tasks such as adding and removing. So we will kick off with the methods for doing that.

var arr = ["JS",123,false,"or","today"]; //remember an array can contain any datatype

push()

This method is used to add a new element to the end of the array thereby changing the length of the array.

var arr = ["JS",123,false,"or","today"];
arr.push("New-Element");
console.log(arr);//This will leave the array as ["JS",123,false,"or","today","New-Element"]

pop()

This method is used to remove the last element of an array thereby changing the length of the array. It does not require any parameters.

var arr = ["JS",123,false,"or","today"];
arr.pop();//"today" will be removed from the array
console.log(arr);//['JS', 123, false, 'or']

shift()

This method is used to remove the first element of an array, thereby changing the length of the array. It does not require any parameters.

var arr = ["JS",123,false,"or","today"];
arr.shift();//"JS" will be removed from the array
console.log(arr);//[123,false,"or","today"]

unshift()

This method is used to add an element to the beginning of an array, thereby changing the length of the array. It requires the new array element to be added, as a parameter.

var arr = ["JS",123,false,"or","today"];
arr.unshift("react");//This will add "react" to the array
console.log(arr);//["react","JS",123,false,"or","today"]

We just discussed the methods that we can use to add and remove elements from both the beginning and end of an array. How about adding and removing from any part of an array if we want to?
Let's look at which method(s) helps us achieve that!!

splice( )

This method is used to remove, remove and add or just add a new element(s) to an array. We can achieve any of these with this method. Let's get to understand how that can be achieved.

Syntax

array.splice(index, delete-Count, element1, ...,elementn);

Index:

This specifies where to start removing elements from in the array.

delete-Count:

This parameter specifies the number of elements to be removed from an array.

elements1...,elementn:

Specifies the new elements to be added.
Now let's see this in action.

var arr = ["JS",123,false,"or","today"];
arr.splice(0,3);//This will remove JS,123 and false from the array
console.log(arr);//["or","today"]

The index 0 contains element ["JS"] and the delete-count which is 3 deletes three elements ["JS",123,false] starting from index 0.
The code above is using splice() to remove elements from our array, now lets remove and replace elements.

var arr = ["JS",123,false,"or","today"];
arr.splice(2,3,"React","Angular","Vue","Codes");//this will remove false,"or" and "today" and add "React","Angular","Vue","Codes"
console.log(arr)//["JS",123,"React","Angular","Vue","Codes"]

Here, our index is 2, which contains element [false] and our delete-count is 3. This deletes three elements starting from [false] and adds ["React","Angular","Vue","Codes"] to the array.
Finally lets only add elements without having to remove any.

var arr = ["JS",123,false,"or","today"];
arr.splice(4,0,"React","Angular");// this adds "React"and "Angular"  to the array.
console.log()arr//["JS",123,false,"or","today",today"];

So we can see from the examples that at different points, we can have different numbers of parameters and when the delete-Count is set to 0, no element is removed. Take a few minutes to go through that again before we continue.

slice()

This method can be used to copy a specified number(s) of elements in an array and assigns them to a new array. This does not affect the original array.

Syntax

arr.slice(start,end)

start:

This specifies where to start copying from.

end:

This specifies where the copying stops.

Lets see how that works.

var arr = ["JS",123,false,"or","today"];
arr.slice(1,4);//this will return [123,false,"or","today"]
console.log(arr);//["JS",123,false,"or","today"]

Best practice is to always asign the Slice() to a new variable

var arr = ["JS",123,false,"or","today"];
let newArr = arr.slice(1,4);
console.log(newArr);// [123, false, 'or']

That should be easy to grasp right?? Let's roll and learn some other methods.

toString()

This methods is used to convert every element in an array to strings. Remember we learnt earlier that an array can contain any datatype. So this method helps convert all datatypes in an array to strings separated by a comma.

var arr = ["JS",123,false,"or","today"];
console.log(arr.toString());// JS,123,false,or,today

join()

This method is very similar to the toString() method, the difference is that here you can specify the separator. Remember toString separates the elements with a comma, here we are able to specify what to use as our separator.

var arr = ["JS",123,false,"or","today"];
console.log(arr.join("="));//JS=123=false=or=today

concat

This method is used to combine two arrays or add more elements to an array then return a new array after adding.

var frontEnd = ["Javascript","React","Angular","Swift"];
var backEnd = ["Java","Ruby","Python","PHP"];
var fullStack = frontEnd.concat(backEnd);
console.log(fullStack);//['Javascript', 'React', 'Angular', 'Swift', 'Java', 'Ruby', 'Python', 'PHP']

Conclusion

In this article, we learned how to manipulate arrays in JavaScript using several methods. These methods we discussed will help you in performing simple tasks on arrays. Feel free to ask questions if you have any.

Please leave a comment or tweet me if you have any questions or recommendations! Make sure to follow me on social media!

DEV Community: Precious Longe

Getting Started with BootstrapVue

What is BootstrapVue

Why use BootstrapVue?

Prerequisites

Integrating BootstrapVue with Vue.js

Using NPM or Yarn

Using CDN

Setting up BootstrapVue

BootstrapVue Components

Buttons

Forms

Cards

Advanced Components

Modals

Carousels

Tooltips

Customizing BootstrapVue components

Customizing Buttons

Customizing Modals

Styling with BootstrapVue

Styling Components

CSS Preprocessors

Scoped Styles

Conclusion

Arithmetic Operations In JavaScript

Addition Operator (+)

What happens when either one or both operands are strings?

Subtration Operator (-)

Multiplication Operator (*)

Division Operator (/)

Exponenciation Operator (**)

Modulus Operator (%)

Increement Operator (++)

Decreement Operator (--)

Summary

Conclusion

Manipulating Arrays in JavaScript

What are Arrays and How Do I Use Them?

Methods for Array Manipulation

push()

pop()

shift()

unshift()

splice( )

Syntax

Index:

delete-Count:

elements1...,elementn:

slice()

Syntax

start:

end:

toString()

join()

concat

Conclusion

Addition Operator `(+)`

Subtration Operator `(-)`

Multiplication Operator `(*)`

Division Operator `(/)`

Exponenciation Operator `(**)`

Modulus Operator `(%)`

Increement Operator `(++)`

Decreement Operator `(--)`