DEV Community: Larissa Avila

Hoisting: facing Temporal dead zone

Larissa Avila — Wed, 04 Dec 2024 20:04:06 +0000

So, maybe you're thinking about the basic differences between var vs let and const : "const is only for reading, let is mutable and var is both" and that the only difference is that ES6 introduced const and let, and var is an old-school syntax.
Well, not at all.

Analyzing some examples

1.- Here, is evident that we can't call let value before declare it

favCoffee = 'espresso'

function showFavoriteCoffe() {
  console.log(favCoffee)
}

showFavoriteCoffe() // Cannot access 'favCoffee' before initialization

let favCoffee

2.- That could change if we use var instead let:

favCoffee = 'espresso'

function showFavoriteCoffe() {
  console.log(favCoffee)
}
showFavoriteCoffe() //espresso

var favCoffee

Yeah, maybe it looks like an extra power of var using.
This is called Hoisting a process that allows you to use variables before they are declare.

3.- Let's consider this other example:

console.log(favCoffee) // undefined
var favCoffee = 'americano'

Although, in this example var is also hoisting here we face with the TDZ.

Temporal Dead Zone

It is defined as the state where variables are inaccessible, although they are within in the scope, they have not been declared.

{
/* TDZ starts
.
.
. */
var favCoffee = 'expresso' // TDZ ends
console.log(favCoffee) // expresso

}

Thanks ES6*

So in hoisting process due to the TDZ, by default JS returns var value initialized as undefined, but with let or const it returns an error specifying that the variables hasn't been declared. So this is very helpful to catch errors and forces you to avoid using variables before they are declared

//using var
favCoffee = 'expresso'
var favCoffee
console.log(favCoffee) // undefined

//using const
favCoffee = 'expresso'
const favCoffee
console.log(favCoffee) // uncaught ReferenceError: Cannot access 'favCoffee' before initialization

(and this is why is important to consider using reporter ruler like ESLint to avoid some mistakes when you are coding).

Conclusion

Hoisting is always there, so it is important to use let and const as far as you can, this avoid undefined errors and let you catch them faster.

** ES6

Toggle favourite button with vue

Larissa Avila — Fri, 15 Jan 2021 01:58:39 +0000

What do we need?

A Vue project with SassCSS (I'm using my last project and modified it to use it in this example).
A SCSS base styles, also I added in the repo in assets folder

Step 1

In a ToggleButton.vue file we will create our button

<template>
  <label
    :for="'button-'+id"
    :class="{ active: isActive }"
    class="toggle__button"
    @change="OnChange"
  >
    <span v-if="isActive" class="toggle__label">{{ enableText }}</span>
    <span v-if="!isActive" class="toggle__label">{{ disabledText }}</span>

    <input
      type="checkbox"
      :disabled="disabled"
      :id="'button-'+id"
      v-model="checkedValue"
    />
    <span class="toggle__switch"></span>
  </label>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },

    labelEnableText: {
      type: String,
      default: "On"
    },

    labelDisableText: {
      type: String,
      default: "Off"
    },

    id: {
      type: String,
      default: "primary"
    },

    defaultState: {
      type: Boolean,
      default: false
    },

    item: Object
  },

  data() {
    return {
      currentState: this.defaultState
    };
  },

  watch: {
    defaultState: function defaultState() {
      this.currentState = Boolean(this.defaultState);
    }
  },

  methods: {
    OnChange() {
      this.$emit("OnChange");
    }
  },

  computed: {
    isActive() {
      return this.currentState;
    },

    enableText() {
      return this.labelEnableText;
    },

    disabledText() {
      return this.labelDisableText;
    },

    checkedValue: {
      get() {
        return this.currentState;
      },

      set(newValue) {
        this.currentState = newValue;
        this.$emit("change", newValue);
      },
    },
  }
};
</script>

Step 2

In a CardItem.vue file we will create a card component

<template>
  <div class="carditem">
    <div class="carditem__image">
      <img :src="pathBase+'futurama'+character.id+'.jpg'" />
    </div>
    <div class="carditem__info">
      <strong class="carditem__title">{{ character.name.first }} {{ character.name.last }}</strong>
      <span>{{ character.occupation }}</span>
      <span>{{ character.species }}</span>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "CardItem",

  props: {
    character: {
      type: Object,
    },
    index: Number,
    showPage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pathBase: "https://res.cloudinary.com/lariicsa/image/upload/v1602727260/futurama/",
      charImages: [
        { name: "Philip", url: "" },
        { name: "Turanga", url: "" },
        { name: "Bender", url: "futurama4_pxj04y.jpg" },
        { name: "Hubert", url: "" },
        { name: "Amy", url: "" },
        { name: "Hermes", url: "" },
        { name: "Carol", url: "" },
        { name: "John", url: "" },
        { name: "Zapp", url: "" },
        { name: "Scruffy", url: "" },
        { name: "Cubert", url: "" },
        { name: "Kif", url: "" },
        { name: "Dwight", url: "" },
        { name: "LaBarbara", url: "" },
      ],
    };
  },

  mounted() {
    this.index;
  },
};
</script>

Step 3

In App.vue file, our main view, we will integrate our components

<template>
  <div id="app" class="space">
    <div class="container">
      <div class="row center">
        <h1>Futurama</h1>
      </div>
      <div class="row center">
        <div class="row between">
          <CardItem
            v-for="(character, index) in characters"
            :character="character"
            :key="index"
            :index="index"
          >
            <ToggleButton
              :item="character"
              :defaultState="false"
              :id="index.toString()"
              @OnChange="AddTofavs()"
            />
          </CardItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/fakeStore/characters";
import CardItem from "@/components/CardItem";
import ToggleButton from "@/components/ToggleButton";
export default {
  name: "App",
  components: {
    CardItem,
    ToggleButton
  },

  data() {
    return {
      characters: store.characters
    };
  },

  methods: {
    AddTofavs() {
      this.$emit("AddTofavs")
    }
  }
};
</script>

We are using Watch Vue property to listen the checkbox state.
Also we can use this component with store actions.

Here you can check the Demo Link

Here is the repo

Happy wapi Coding! :D

Vue responsive infinite-scroll component with Vuex and SCSS

Larissa Avila — Tue, 22 Dec 2020 18:10:45 +0000

Technologies to use:

Vue CLI, How to install it here
Sass CSS
Vuex

Step 1
Generate a project with vue cli:

vue create infinite-scroll

Select this option

? Please pick a preset: (Use arrow keys)
  tipical (node-sass, babel, router, vuex)
  default (babel, eslint)
> Manually select features

Select these with tab space, then enter

? Check the features needed for your project:
 > ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 > ◉ Vuex
 > ◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

Step 2

In our components folder we will add this 2 components:

Button.vue

<template>
  <button
    v-if="ui !== 'submit'"
    @click="btnClick"
    :type="type"
    :class="ui ? 'btn__' + ui : 'btn__primary'"
  >
    {{ text }}
  </button>
  <button
    v-else
    @click="btnClick"
    formData.action="/submit"
    :type="type"
    :class="ui ? 'btn__' + ui : 'btn__primary'"
  >
    {{ text }}
  </button>
</template>
<script>
export default {
  name: "btn-fc",
  props: ["text", "type", "disabled", "ui"],
  methods: {
    btnClick() {
      this.$emit("btnClick");
    },
  },
};
</script>

CardItem.vue

<template>
  <div class="carditem">
    <div class="carditem__image">
      <img :src="pathBase+'futurama'+character.id+'.jpg'" />
    </div>
    <div class="carditem__info">
      <strong class="carditem__title">{{ character.name.first }} {{ character.name.last }}</strong>
      <span>{{ character.occupation }}</span>
      <span>{{ character.species }}</span>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "CardItem",

  props: {
    character: {
      type: Object,
    },
    index: Number,
    showPage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pathBase: "https://res.cloudinary.com/lariicsa/image/upload/v1602727260/futurama/",
      charImages: [
        { name: "Philip", url: "" },
        { name: "Turanga", url: "" },
        { name: "Bender", url: "futurama4_pxj04y.jpg" },
        { name: "Hubert", url: "" },
        { name: "Amy", url: "" },
        { name: "Hermes", url: "" },
        { name: "Carol", url: "" },
        { name: "John", url: "" },
        { name: "Zapp", url: "" },
        { name: "Scruffy", url: "" },
        { name: "Cubert", url: "" },
        { name: "Kif", url: "" },
        { name: "Dwight", url: "" },
        { name: "LaBarbara", url: "" },
      ],
    };
  },

  mounted() {
    this.index;
  },
};
</script>

Step 3
In a new folder called assets we will add new folder called scss and then add these scss files

And we will modify the main.js file

import Vue from 'vue'
import axios from "axios";
import VueAxios from "vue-axios";
import App from './App.vue'
import Vuex from 'vuex'
import router from './router'
import store from './store'
import "./assets/scss/index.scss";

Vue.use(axios);
Vue.use(Vuex)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Step 4
We will create a new folder called service and in a index.js file we will call our service from a Futurama API from sampleapis.com

import axios from "axios";
const headers = {
  "Content-Type": "application/json",
};

const baseURL = () => {
  (axios.defaults.baseURL = "https://sampleapis.com/futurama/api"), headers;
};

const FUTURAMA_SERVICE = axios.create(baseURL());
const GET_DIMENSION = "/characters";

const characterInfo = (idCharacter) => FUTURAMA_SERVICE.get(GET_DIMENSION+idCharacter);
const characterAll = () => FUTURAMA_SERVICE.get(GET_DIMENSION);

export { characterInfo, characterAll };

And in our Store folder at file index.js we will add next:

import Vue from 'vue'
import Vuex from 'vuex'
import { characterInfo, characterAll } from "../service/index"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    characterInfo: {},
    charactersList: []
  },
  mutations: {
    setCharactersList:(state, payload) => (state.charactersList = payload),
    setCharacterInfo:(state, payload) => (state.characterInfo = payload)
  },
  actions: {
    async getCharactersList({commit}) {
      try {
        const response = await characterAll()
        const list = response.data
        commit("setCharactersList", list)
        console.log('all',list);
      } catch (error) {
        console.log(error.response);
      }
    },

    async getCharactersDimension({ commit }, idCharacter) {
      try {
        const response = await characterInfo(idCharacter)
        console.log('response', response);
      } catch (error) {
        console.log(error.response);
      }
    }
  },

  getters: {
    gtrCharacters(state) {
      return state.charactersList
    }
  }
})

Step 5
Now we will create our important component InfiniteScroll.vue

<template>
  <div class="infscroll__container">
    <div id="infinite-list" class="infscroll__items">
      <transition name="fade">
        <div class="infscroll__loader-bg" v-show="showLoading">
          <div class="infscroll__loader">{{ textLoading }}</div>
        </div>
      </transition>
      <slot></slot>
      <ButtonFan
        v-show="isMobile"
        @btnClick="loadMore()"
        text="Load more ..."
        ui="primary infscroll"
      />
    </div>
  </div>
</template>
<script>
import ButtonFan from "@/components/Button";
export default {
  name: "InfiniteScroll",

  components: {
    ButtonFan,
  },

  props: {
    showLoading: {
      type: Boolean,
      default: false,
    },
    textLoading: {
      type: String,
      default: "Loading ...",
    },
  },

  data() {
    return {
      isMobile: false,
    };
  },

  mounted() {
    const listElm = document.querySelector("#infinite-list");
    listElm.addEventListener("scroll", (e) => {
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      ) {
        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
          this.isMobile = true;
        }
      } else {
        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
          this.loadMore();
        }
      }
    });
  },

  methods: {
    loadMore() {
      this.$emit("loadMore");
    },
  },
};
</script>

Step 6
And finally we will set the Home View in Home.vue

<template>
  <div class="container">
    <div class="row center">
      <h1>Futurama <span>{{cards.length}} from {{gtrCharacters.length}}</span></h1>
    </div>
    <div class="row center">
      <InfiniteScroll :showLoading="loading" @loadMore="loadMore()">
        <div class="row between">
          <CardItem
            v-for="(character, index) in cards"
            :character="character"
            :key="index"
            :index="parseInt(index + 1)"
          />
        </div>
      </InfiniteScroll>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
import CardItem from "@/components/CardItem";
import InfiniteScroll from "@/components/InfiniteScroll";

export default {
  name: "Home",
  components: {
    CardItem,
    InfiniteScroll,
  },

  data() {
    return {
      loading: false,
      items: [],
      upto: 6,
      pages: [],
      pageArea: "",
      isMobile: false,
    };
  },

  static: {
    limitScrollItems: 6,
  },

  async created() {
    await this.getCharactersList();
  },

  mounted() {
    this.cards;
  },

  methods: {
    ...mapActions(["getCharactersList"]),

    loadMore() {
      const listItems = document.querySelector("#infinite-list");
      let heightToTop = listItems.scrollTop;
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      ) {
        setTimeout((e) => {
          listItems.scrollTo(0, heightToTop);
        }, 1000);
      }

      this.loading = true;
      setTimeout((e) => {
        const card = this.cards.map((item) => {
          this.cards.push(item);
        });
        this.upto += this.$options.static.limitScrollItems;
        this.loading = false;
      }, 800);
    },
  },

  computed: {
    ...mapState(["charactersList"]),
    ...mapGetters(["gtrCharacters"]),

    cards() {
      const card = this.gtrCharacters.slice(0, this.upto).map((item) => {
        return item;
      });
      return card;
    },
  },
};
</script>

And that's all folks!

You can check the code here https://github.com/Lariicsa/infinite-scroll/blob/master/src/components/InfiniteScroll.vue
And the demo here Infinite Scroll Futurama