Forem: Syed

Game with Arrays in JavaScript (JavaScript Arrays)

Syed — Fri, 08 Jan 2021 15:27:33 +0000

You probably know that in JavaScript we use arrays to store several values in one variable.

In a JavaScript array for each element there is a number(Index),where an index of an array starts from zero and goes up by one, i.e 0,1,2,3 and so on. The index is basically the identifier of the items in the same array.

So in this short tutorial we will look at basic methods that will help you understand arrays in JavaScript at a basic level.

1. How to create an array in JavaScript ?

You can use the [] markup to create an array in JavaScript

var cars = ['Tesla', 'GTR', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars)
// ['Tesla', 'GTR', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche']

2. How to check the number of items in a JavaScript array ?

You can check the total numbers of items in the array(array length) using the method shown below.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars.length)
// 8

3. How to access the JavaScript array using the index number ?

You can use a specific number to access an item in the array.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[0])
// Tesla

console.log(cars[4])
// Ford

console.log(cars[6])
// Nissan

4. How to access the last item in the JavaScript array ?

The last item in the array can be accessed using the method shown below.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[cars.length - 1])
// Porsche

5. How to loop an array in JavaScript ?

This is the best and most modern way to loop on a javaScript array.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

cars.forEach(function(arrayItem, index){
  console.log(arrayItem, index)
})

// Tesla 0
// Toyota 1
// BMW 2
// Honda 3
// Ford 4
// Hyundai 5
// Nissan 6
// Porsche 7

6. How to add an item to the beginning of a JavaScript array ?

You can add an item to the beginning of an array as follow.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// unshift() method adds 'Mercedes' to the starting of 'cars' array
var newArray = cars.unshift('Mercedes')

console.log(cars)

// New cars array
// [ 'Mercedes', 'Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]

7.How to remove an item from beginning of a JavaScript array?

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// shift() method removes the first item from the array
var newArray = cars.shift()

console.log(cars)

// New cars array
// Tesla has been removed from the array
// [ 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]

8. How to find the index of an item in a JavaScript array ?

The index number of a particular item in the array can be found as follows.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// indexOf() method returns the index number of an item in an array
var getBMWIndex = cars.indexOf('BMW');
var getHyundaiIndex = cars.indexOf('Hyundai');
var getPorscheIndex = cars.indexOf('Porsche');

console.log(getBMWIndex)
// 2

console.log(getHyundaiIndex)
// 5

console.log(getPorscheIndex)
// 7

Conclusion

In this tutorial I have described the basic features and methods of an array in JavaScript. We learned to create an array, access items in an array, find the location of an item, remove and add an item to an array and even loop on an array in JavaScript.

You can find more information about JavaScript arrays in MDN Web Docs.

Why is React asking to render a single DOM element?

Syed — Tue, 05 Jan 2021 03:40:46 +0000

When writing React code , you would have encountered an error related to React asking to render a single DOM element. At this point, the simplest workaround is that you encapsulate the elements by a pair of outer div tags.

However, have you ever wondered

What is the real reason behind this error?
Is this a React bug ?
How to resolve this error?
What are the pros and cons of packing elements into div tags above?

Why render single DOM element?

In this article I will try to help you answer the above questions.
Let's say i have a component that goes as follows:

class App extends React.Component {
  render() {
    return (
      <div> Type: Dog </div>
      <div> Type: Cat </div>
    )
  }
}

I have used JSX to define the above component render. However, this is just "syntactic sugar" for the
React.createElement (component, props, ... children) method

Therefore, the above code would be equivalent to the following code:

class App extends React.Component {
  render() {
    return (
      React.createElement('div', null, 'Type: Dog')
      React.createElement('div', null, 'Type: Cat')
    )
  }
}

In the code above, each React.createElement function will return a React Element. That means the function render () of the App class will return 2 elements simultaneously.

This is completely impossible with functions in JavaScript in particular and any other programming language in general, not just React.

For example, Let's look at a function in pure JavaScript as follows:

const func = (x, y) => {
  return (x + y)(x - y);
};

The above function func is an arrow function - that returns simultaneously (x + y) and (x - y) . And ofcourse we will get an error.

In short, React's request to render the single DOM element is required, not due to React's bug.

Ways to solve render single DOM element problem?
To solve the above problem, There are 3 ways as below.

1. Use one more tag to encapsulate the Elements

This is the easiest way that almost anyone can think of first. That is using one tag to encapsulate the Elements.

Then, the code above becomes:

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <div> Type: Dog </div>
        <div> Type: Cat </div>
      </div>
    );
  }
}

2. Using React.Fragment
You can use React.Fragment as follows to solve the problem:

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div> Type: Dog </div>
        <div> Type: Cat </div>
      </React.Fragment>
    );
  }
}

3. Using <> </>

class App extends React.Component {
  render() {
    return (
      <>
        <div> Type: Dog </div>
        <div> Type: Cat </div>
      </>
    );
  }
}

Note: This is just a shortened syntax for React.Fragment, not a completely different way.

Epilogue

So, I've covered why React requires rendering of a single DOM element. And some ways to help you fix the above error are:

Using an extra pair of tags packing the Elements
Using React.Fragment
Using <> </> In addition to the above methods, do you know any other ways? If yes, share it with me and everyone!