CRUD Operations using Javascript.
Tags: javascript, discuss, objects, crud
Published: 2021-07-04 06:00:30

CRUD operation is the first step for any programmer who starts learning a new language.Here in this blog i have discussed about the CRUD operations ie.., Create Read Update Delete using modern javascript syntax.

##Sample data
This is an simple array of objects example similar to simple todo app data. 
```javascript
const Todo =[
    {
        title:'Go for a Walk',
        done:true
    },
    {
        title:'Finish Remaining Chapters in udemy',
        done:false
    },  
    {
        title:'Scrum call @4',
        done:true
    },  
    {
        title:'Code review @5',
        done:false
    }, 
    {
        title:'Fix Bugs in Current projects',
        done:true
    },  
]
```
#CREATE
Create is something like adding a new entry to our array.In this example i had added a new todo **'Hit the GYM'** using **Push** operation in js.Push basically pushes the input to the array that we pass to it as an parameter.It adds the input to the tail of the array.

```javascript 
const addTodo =(todo,done)=>{
    Todo.push({title:todo,done:done})
    console.log("TODO ADDED SUCCESSFULLY");
    displayTodo()
}
addTodo('Hit the GYM',false)
``` 
**Result** Todo added at index **6**
![Create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arrwm5v4ic6gjzu31plw.png)

#Read
Read is like reading the entire the content of the array.
In the below example I have used **forEach loop**  to loop to the entire array of objects and logged each object in console.**The forEach() method executes a provided function once for each array element.**
```javascript
const displayTodo =()=>{
    Todo.forEach((item,index)=>{
        return console.log(`${index+1}. Todo : ${item.title}  || Done : ${item.done}`)
    })
}
displayTodo()
```
**Result**
![display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq2wtrbwdjakmhqfj9ek.png)

#Update 
update is like updating the content of an existing object with new value.In this example I had looped through the entire array and by using **findIndex** method the index of the old todo is found.**The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.**
Now we can update the value of array at the particular index.
```javascript
const updateTodo =(oldTodo ,newTodo)=>{
     let todoToUpdateIndex= Todo.findIndex((todo)=>{
         return todo.title === oldTodo
     })     

    Todo[todoToUpdateIndex].title=newTodo;
    console.log('');
    console.log('TODO 3 IS UPDATED SUCCESSFULLY');
     displayTodo()
     
}
updateTodo('Scrum call @4','Scrum call @6')
```
**Result**
![update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6hqlrogev8ncpjc9it4.png)

#Delete
Similar to update we will find the index of the object to be deleted and we will delete the object at that index using **Splice** method **The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it**
```javascript
const deleteTodo=(title)=>{
    let deleteTodoIndex=Todo.findIndex((todo)=>{
        return todo.title === title
    })
    
    Todo.splice(deleteTodoIndex,1);
    console.log('');
    console.log(`TODO ${title} IS DELETED SUCCESSFULLY`);
    displayTodo()
}
deleteTodo('Code review @5')
```
**Result**
![Delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wf0gl5t6j5874lzjush.png)

**BONUS Search Operation**
```javascript
const searchTodo=(title)=>{
    let searchTodoIndex = Todo.findIndex((todo)=>{
        return todo.title === title
    })
    console.log(Todo[searchTodoIndex]);
}
console.log('SEARCHING...');
searchTodo('Finish Remaining Chapters in udemy')
```
**Result**
![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc015ftuukavfwps8r97.png)