DEV Community: Abdulhadi Bakr

A quick dive 🏊 into the data types in JavaScript to understand them from behind the scenes 📽️.

Abdulhadi Bakr — Tue, 26 Jan 2021 01:00:13 +0000

In Javascript there are 2 categories of data types:

1- Primitive data types:

All primitives are immutable (unchangeable) 🛌, there are 7 primitive data types:

Number: for numbers of any kind: integer or float.
String: may have zero or more characters.
Boolean: has only two values (true and false).
Null: for unknown values – a standalone type that has a single value null.
Undefined: for unassigned values – a standalone type that has a single value undefined.
Symbol: for unique identifiers.
BigInt: is for integer numbers of arbitrary length.

2- Non-Primitive data type:

Non-primitive is mutable (changeable) 🦎, there is only one non-primitive data type:

Object: for more complex data structures.

Arrays and functions in JavaScript belong to the object data type.

Let's dive deeper into these data types

Look at this code, I will use a string (primitive) and an array (non-primitive).

var str = 'Berlin'
var arr = [1,2,3]

You can access the value inside them by the same way

console.log(str[0]) // 'B'
console.log(arr[0]) // 1

You can change array's item, like this..

arr[0] = 5
console.log(arr[0]) // 5

What about a string? can we do the same and change any char in this string?

str[0] = 'G'
console.log(str) // ??

So here is the point, you can't do that with string 🙅‍♂️.
Because a string is a primitive data type. And you can't change any primitive value.

str[0] = 'G'
console.log(str) // 'Berlin'

What about this case?

var city = 'Berlin'
city = 'Frankfurt'
console.log(city) // ??

The variable may be reassigned a new value, but the existing value can't be changed in the ways that objects, arrays, and functions. Immutability here doesn't make any effect, look how this happens..

Here we assign a brand new value 'Frankfurt', so there is no problem.

What about this case?

function square(x){
  x = x * x
}
var num = 10
square(num)
console.log(num) // ??

In this case, square() will only ask, what the value of variable num? then it receives this value as argument.
So square() will not effect the value of num.

console.log(num) // 10

Now we are in objects phase, let's explore it.. 🔭

var num1 = 5, num2 = 5, obj1 = {}, obj2 = {};
console.log(num1 === num2) // ?
console.log(obj1 === obj2) // ?

In primitive data types, if we have 2 variables with the same value, so they both will pointing to this value, like this..

But with objects (non-primitive) it's different, every time we assign object {} to a variable, Javascript will create a brand new object value. The same goes for array, dates, functions and other objects, look how..

The image above explain us this answers.

console.log(num1 === num2) // true
console.log(obj1 === obj2) // false

Let's dive deeper in objects to see how they are mutable!

var car1 = {
  model:'G 63',
  brand: {
    name: 'Mercedes'
  }
}

var car2 = {
  model:'GT 63 S',
  brand: car1.brand
}

car2.model = 'GT Coupe'
car2.brand.name= 'Audi'

console.log(car1.model); // ?
console.log(car1.brand.name); // ?
console.log(car2.model); // ?
console.log(car2.brand.name); // ?

Let's break this problem down to figure out the answers..
1- First object's draw:

2- Second object's draw:

3- Then 2 changes:

As you saw, we can change the properties value within the object, this is called 'Mutation'.

console.log(car1.model); // "G 63"
console.log(car1.brand.name); // "Audi"
console.log(car2.model); // "GT Coupe"
console.log(car2.brand.name); // "Audi"

Well done, diver, you are in an interesting area. Go on.. 👏

var city = {
  name:'München',
}

var _location = {
  state:'Bavaria',
}

console.log(_location.name); // ?

Yes, as you said the answer is undefined, but how do we access property name from object location?
First off, let's see how the console prints the object.

var _location = {
  state:'Bavaria',
}
console.log(_location);

Each object in Javascript by default contains a property called __proto__, so we will use this property to achieve our goal, as follows..

var _location = {
  __proto__: city,
  state:'Bavaria',
}

Now we will draw our visual explanation after this modification:

Based on this case, we can access name from location object, but we can't access state from city object.

console.log(_location.name); // 'München'
console.log(city.state); // undefined

Look at this example and try to get the answer.

var city = {
  name:'München',
}

var _location = {
  __proto__: city,
  name:'Bavaria',
}
console.log(city.name); // ?
console.log(_location.name); // ?

The location object will look for a name property in the city object, only when it does not contain the required property name.
In this example, the location object has its own property name, so the city object will not be seen.

console.log(city.name); // 'München'
console.log(_location.name); // 'Bavaria'

Last interesting point about using `proto`

var humans = {}
var animals = {}
var plants = {}

humans.__proto__.need= 'Water'

console.log(humans.need); // 'Water'
console.log(animals.need); // 'Water' 
console.log(plants.need); // 'Water'

As you saw if we add property need to __proto__ we can access the value of this property need from any other object.

This is where our diving trip ends 📍 I hope you have enjoyed and found it a useful trip. Wait for me on other exciting diving trips ✨.

Resources:

just javascript a great email list (highly recommend course), explaining the basic principles of Javascript using mental models (illustrations in the article 👆) to explain how they work behind the scenes.
MDN web docs.
Javascript info.
All illustrations were made using excalidraw.

Infinite scroll in Firebase (firestore) and React.js

Abdulhadi Bakr — Wed, 20 Jan 2021 00:10:01 +0000

Why you should use infinite scroll in your App?

When you have a lot of data, that should be shown in any page in your app, it's not efficient and not recommended to fetch them all at once. This way will make the app slow and will provide a bad user experience.
So the solution here is to use 'Infinite Scroll' to fetch them as batches.

How does infinite scroll work in firebase?

First off, fetch first 10 documents for example, then store key of last fetched document (key could be any field in document), then use this key to execute new query to fetch next 10 documents starting after last fetched document.

In firebase you can apply pagination by using 3 methods:

orderBy(): specify the sort order for your documents by using any filed in document.
stratAfter(): to define the start point for a query. After any document should the next batch start?
limit(): limit the number of documents retrieved.

The queries will looks like:

const firstBatch = db.collection('posts')
  .orderBy('createdAt')
  .limit(5)
  .get();

const nextBatch = db.collection('posts')
  .orderBy('createdAt')
  .startAfter(last_doc_in_firstBatch.createdAt)
  .limit(5)
  .get();

⚠️ Note: the field that will be used in orderBy() and startAfter() should be the same field ex. 'createdAt'

Let's start coding.. 👨‍💻🏃‍♂️

Database (firestore)

Folders and files structure

Project structure plays an important role in project maintenance, and provides the ability to scale. so our structure will looks like:

services
contains the files which will execute the queries on database (fetch posts).

utils
contains utility functions that will be used repeatedly in the project (firebase reference).

firebase.js
Contains firebase config and reference to database, that will be used in Post.js to execute the queries.

import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

export default db;

Post.js
Contains the queries, that will fetch the posts from database.

import db from "../utils/firebase";

export default {
  /**
   * this function will be fired when you first time run the app,
   * and it will fetch first 5 posts, here I retrieve them in descending order, until the last added post appears first.
   */
  postsFirstBatch: async function () {
    try {
      const data = await db
        .collection("posts")
        .orderBy("createdAt", "desc")
        .limit(5)
        .get();

      let posts = [];
      let lastKey = "";
      data.forEach((doc) => {
        posts.push({
          postId: doc.id,
          postContent: doc.data().postContent
        });
        lastKey = doc.data().createdAt;
      });

      return { posts, lastKey };
    } catch (e) {
      console.log(e);
    }
  },

  /**
   * this function will be fired each time the user click on 'More Posts' button,
   * it receive key of last post in previous batch, then fetch next 5 posts
   * starting after last fetched post.  
   */
  postsNextBatch: async (key) => {
    try {
      const data = await db
        .collection("posts")
        .orderBy("createdAt", "desc")
        .startAfter(key)
        .limit(5)
        .get();

      let posts = [];
      let lastKey = "";
      data.forEach((doc) => {
        posts.push({
          postId: doc.id,
          postContent: doc.data().postContent
        });
        lastKey = doc.data().createdAt;
      });
      return { posts, lastKey };
    } catch (e) {
      console.log(e);
    }
  }
};

App.js
First off, import 'Post.js' file.

import Post from "./services/Post";

Then init local state using 'useState' hook.

  const [posts, setPosts] = useState([]);
  const [lastKey, setLastKey] = useState("");
  const [nextPosts_loading, setNextPostsLoading] = useState(false);

Then in 'useEffect' fetch first batch of posts and lastKey, and set them in local state, when you first time run the app, first 5 posts will be shown.

  useEffect(() => {
    // first 5 posts
    Post.postsFirstBatch()
      .then((res) => {
        setPosts(res.posts);
        setLastKey(res.lastKey);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

Then create a function to fetch next batch of posts, this function receive 'lastKey' as argument. It will be fired when user click on 'More Posts' button.

  const fetchMorePosts = (key) => {
    if (key.length > 0) {
      setNextPostsLoading(true);
      Post.postsNextBatch(key)
        .then((res) => {
          setLastKey(res.lastKey);
          // add new posts to old posts
          setPosts(posts.concat(res.posts));
          setNextPostsLoading(false);
        })
        .catch((err) => {
          console.log(err);
          setNextPostsLoading(false);
        });
    }
  };

Then create a constant to store all our posts

  const allPosts = (
    <div>
      {posts.map((post) => {
        return (
          <div key={post.postId}>
            <p>{post.postContent}</p>
          </div>
        );
      })}
    </div>
  );

Last step, UI

  return (
    <div className="App">
      <h2>Infinite scroll in Firebase(firestore) and React.js</h2>
      <div>{allPosts}</div>
      <div style={{ textAlign: "center" }}>
        {nextPosts_loading ? (
          <p>Loading..</p>
        ) : lastKey.length > 0 ? (
          <button onClick={() => fetchMorePosts(lastKey)}>More Posts</button>
        ) : (
          <span>You are up to date!</span>
        )}
      </div>
    </div>
  );

⚠️ Note: when there are no more posts 'lastKey' will be set to '', therefore we check its length here, until we can detect that there are no more posts.

Live demo 🎊

Get the full code of this article. 📁

If you would like to check this feature in a real project, look here I applied it to home page posts in my last social network project (in react.js).

I hope that you found this article useful, and you enjoyed the article 😊

Bye 👋

DEV Community: Abdulhadi Bakr

A quick dive 🏊 into the data types in JavaScript to understand them from behind the scenes 📽️.

1- Primitive data types:

2- Non-Primitive data type:

Let's dive deeper into these data types

What about this case?

What about this case?

Now we are in objects phase, let's explore it.. 🔭

Let's dive deeper in objects to see how they are mutable!

Well done, diver, you are in an interesting area. Go on.. 👏

Last interesting point about using __proto__

Resources:

Infinite scroll in Firebase (firestore) and React.js

Why you should use infinite scroll in your App?

How does infinite scroll work in firebase?

Database (firestore)

Folders and files structure

Live demo 🎊

Last interesting point about using `proto`