DEV Community: Nafisa Muntaha

JavaScript Array Methods

Nafisa Muntaha — Mon, 27 Dec 2021 12:18:47 +0000

JavaScript Array Methods

An array is a special variable that holds more than one value, whether it is a string, number, or object inside a third bracket. If you have a list of things, you can store them inside an array. The syntax is like this:

const array_name = [array_item1, array_item2, array_item3, array_item4];

const tasks = [‘Assignments’, ‘Homework’, ‘Coding’, ‘Read story books’];

So if you have a list of tasks to finish today, you can declare an array and write all the
tasks as it’s values. To get the length of the array, we can write
‘const length = tasks.length’; and we’ll get the length of the array, which is 4 in the array tasks.

We can access each task’s individual value. Index numbers represent the position of the task in the array. Index of arrays starts from zero, whatever the number of tasks is there in the array. So if you want to access the 2nd item from the array, you’ll write: tasks[2]; And the output will be ‘Coding’, cause an array starts counting from zero, and by following that rule the 2nd item becomes ‘Coding’.

We can also get the index number of a specific value. tasks.indexOf(‘Coding’) will show the index of the value ‘Coding’ and its index is 2.

Adding or removing an item, or reversing the array is also possible. If you call tasks.push(‘Watching movies’); this task will be added at the end of the array, after all
the previous tasks. And if you think, you want to add this task at the beginning of the array, you can also do it by using the ‘unshift()’ method.

tasks.unshift(‘Watching movies’); will add the task at the beginning of the array. Similarly to remove an item you have to use the ‘pop()’ method, which will remove the
item placed at the end. And to remove the first item of the array ‘shift()’ method will be
used.

If you want to reverse the array, the reverse method will be used.

The ‘concat()’ method is used to join two or more arrays together which returns a new array by joining all the arrays. It doesn’t change the value of those arrays, just joins
those arrays and returns their values together by putting them into a new array. For example: if you have two arrays of summer fruits and winter fruits, then want to join both arrays together; you’ll use the concat method.

The ‘every()’ method is used to return a boolean value. It runs a function for each element but doesn’t run the function if the elements are empty. And returns ‘true’ if the condition is true for all elements but if it is false, it returns ‘false’.

The slice() method is used to select a specific part of an array and returns the selected items of an array. It doesn’t change the original one. The splice() returns the removed items and changes the original array.

The find method returns the first item that matches with the searched one, it doesn’t check the other remaining items once it gets the first matched item. The filter method returns all the matched items found in the array.

JWT_

Nafisa Muntaha — Thu, 23 Dec 2021 18:17:23 +0000

JWT

JWT stands for JSON Web Token. It is used to share security information between the client and server-side.

JWT is used just for authorization. Authorization is mainly what makes sure that the user which sends a request to the server is the same person who logged in. It means it is authorized if the user has access to the system.

JWT uses a web token for this authorization. It works like this-

It executes the authentication process. Then the server creates a JSON web token, which we know stands for JWT, and creates a secret key so the server can check with that if the user is invalid based on that secret key. And then it takes the web token and sends it to the browser and it will send a request to the server with the JWT token. It verifies it so that it can check if the secret key and user information are the same as before to know it is valid or invalid. And if the user is valid, it sends the response back to the server.

CRUD Operations

Nafisa Muntaha — Thu, 23 Dec 2021 17:21:27 +0000

CRUD Operations

CRUD stands for Create, Read, Update and Delete. They are the four basic operations that are necessary for storage application.

The capacity to create, read, update and delete items in a web application is important for the development of a website and making it interactive. For example: if we are making a blog page and someone wants to post blogs, without CRUD operations it would be a real problem.

Create

The create allows adding items or data to the database. It will add a new row on the database table for adding that data. To create data, the HTTP Post method is used, it is used to create new data for the database.

Read

The read allows reading from the database. It would never change the data. To read a resource HTTP Get method is used. No matter how many times you call the Get method, you’ll get the same data stored in there.

Update

The update is used to update any data from the database. If you store the price of stocks and after a few days it has gone up, you would want to change the previous price to the current price. It means you would update the price from the previous one. The PUT method is used for updating data from the database. After updating it, the data will be changed from the database, also the updated data will be displayed on the website.

Delete

The delete is used to delete data from the database or remove any resource from the system. For example, you stored your favorite dishes on the database. You want to remove pizza from the list(Don't think anyone would do that!), then you’ll use the delete operation. For that HTTP Delete method will be used.

All About JSX

Nafisa Muntaha — Thu, 23 Dec 2021 14:24:08 +0000

JSX:

JSX stands for JavaScript XML. JSX allows to write HTML in react and makes it easier to write and add it. It lets to write any JavaScript or react expression inside { }. After the compilation, it becomes a normal JavaScript function calls. JSX properties make use of camelcase notation while naming HTML attributes. That’s why tabindex in HTML is called tabIndex in JSX. Even in event listeners, lowercase is used in HTML but camelcase is used in JSX.

In HTML, there are self-closing tags but in JSX, a forward slash before the closing bracket must be included. It is a must in JSX, or else it will throw an error for elements of self-closing tags like HTML. It allows to write multiple tags inside one parent element like in HTML, but it is needed to put the parent element inside ‘( )’ in JSX.

_With JSX: _

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

Without JSX:

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Advantages and disadvantages:

JSX makes it easier to write and add HTML elements in react, can easily convert HTML elements into react elements, and is faster than normal JavaScript. It places them into the DOM and converts them into react elements. It makes it easier to write react applications. Most of the errors are identified while compiling them.

There are disadvantages of it as well along with advantages. It gives an error if anything in HTML is not correct and if HTML elements are not properly closed JSX. In JSX, HTML codes must have one parent element of all the child elements.