DEV Community: AdewoleCode

5 must-know Array Methods in JavaScript.

AdewoleCode — Tue, 27 Dec 2022 16:35:26 +0000

As a JavaScript developer, working with arrays are a must. That's why i think it's very important to understand some common and important methods used in manipulating arrays.

I have a list of 5 array methods you should know to make your working with arrays in JavaScript much easier and enjoyable

To get started with this tutorial, i have an array of items below that i am going to use to explain some of the array methods. i believe being able to visualize with examples is the best way of learning and making these methods stick in your memory.

//array of items

const itemsList = [
  { name: "phone", price: 300 },
  { name: "laptop", price: 200 },
  { name: "Xbox", price: 250 },
  { name: "television", price: 400 },
  { name: "shoe", price: 500 },
  { name: "speaker", price: 50 },
];

Filter method: creates a new array filled with elements that passes a condition provided by a callback function. we call the method on an array, pass in a callback function and provide a condition and we get back elements that meets the condition we pass into the callback function.

for example: say on our items list, we only want to get items that the price is greater than 200.

const filteredItems = itemsList.filter((item) => {
  return item.price > 200;
});

console.log(filteredItems) // prints items with 
                              prices greater than 200
                              to the console;

in the above code, we call the filter method on the itemsList array, passed a callback function that will execute for every element, in the call back funtion, we passed in "item" as an argument which is going to be a representation of each item in the array. we then pass in a condition, which is; for every price on our itemsList, return "true" if items are greater than 200, return "false" for the items that are not greater than 200.
we go through every "price" in the array, save the prices that returned true (greater than 200) in the "filteredItems" variable and discard the rest of the items that did not meet the condition. so, the "filteredItems" variable is a new array that only consists of element with price above 200.

important note: the filter method does not change/mutate the original array we are filtering over.

console.log(itemsList); //returns the original array untouched console.log(filteredItems); // returns the filtered Array

map method: map method allows you to take an array and convert it into a new array with modified values.

say in our ItemsList, we want to get a new array that consists only of the item names.
we call the map method on the array, pass in a callback function that executes for every elements in the array, we then pass in conditions we want the new array to be modified by (e.g return item.name), and this will return a new array with only item names.

examples

const ItemNames = itemsList.map(item => {
    return item.name
})

//returns new array that consists only of item names.

const ItemPrices = itemsList.map(item => {
    return item.price
})

//returns new array that consists only of item prices.

Find method: as the name suggests, it allows us to find a single object in an array. we call the find method on the array, pass in a callback function that executes for every elements in the array, pass in a condition and we get back first item that meets the conditions we passed in. sweet and straightforward.

example

const speakerItems = itemsList.find(item => {
    return item.name === "speaker"
})

//returns first item in the array with the name of "speaker"

const laptopItem = itemsList.find(item => {
    return item.name === "laptop"
})

//returns first item in the array with the name of "laptop"

forEach method: Unlike the other methods, this method does not actually return anything. it is similar to the for loop, it is used to loop through an array and perform a function for every element in the array.This function makes working with arrays much simpler, especially when you need to loop over them to perform some operation. you won't have to write out the weird for-loop syntax just to look over an array.

example

itemsList.forEach(item=> {
    console.log(item.price + 50);
})

////adds 50 to each price item of the itemsList array and prints to console.

itemsList.forEach(item=> {
    console.log(item.name);
})

//print names of all items to the console.

includes method: This method is a bit different from all other type of array methods, because it doesn't actually take a callback function like most array methods, it just takes one argument and return true or false depending on if the argument passed in, is present in the array or not. it's very convenient if you just need to check if an array has a value present in it or not.much better than working with a slightly more complex "find" method.

simple example.

const numbers = [1,2,3,4,5,10,40,33]

const includesTwo = numbers.includes(2)

console.log(includesTwo);

//includes true returns a Boolean and prints "True" to the console.

const numbers = [1,2,3,4,5,10,40,33]

const includesHundred = numbers.includes(100)

console.log(includesHundred);

//includesHundred returns a Boolean and prints "False" to the console.

That concludes the list of incredible useful JavaScript array methods that i want to cover. hope you found this article helpful.

Understanding the Concept of Scope in JavaScript

AdewoleCode — Sun, 25 Dec 2022 12:32:45 +0000

As a beginner learning JavaScript, getting a hang of everything that's going on can be overwhelming. some concepts can be hard
to grasp. However, one very important concept that every JavaScript beginner or even intermediate must know is the concept of scope in JavaScript. If you want to write executable programs in JavaScript, understanding scoping is a must.

First of all, what is scope?
In simple terms, scope of a variable refers to the accessibility of a variable within the program. Don't worry too much if that definition flew over your head (when i was a beginner, it did too).
What you need to know is that; How and where you declare a variable in your JavaScript program, determines how and where it can be accessed within the program. Still not clear? let's talk about the 3 types of scopes in JavaScript with examples.

Global Scopes
Function Scopes
Block Scopes

1. Global Scopes
The variables within the global scopes can be accessed from anywhere within our program.
say we declare a variable "userName" and assign it a value of "20". we can access the "userName" variable globally across our program. that includes inside a function, or inside any blocks we have in our program.

let us look at a simple example.

let userName = "adewole";
function greetAdewole (){ console.log(`hello ${userName}`) }
greetAdewole();

the above function prints "hello Adewole" to the console. notice how the "userName" was declared outside of the function and yet we still have access to it inside the function to print something to the console.

another example

let userName = "ademola";
let age = 30;

if ( userName === "ademola" && age >= 25){
console.log(`hello ${username}, you are ${age} years old, which means you're old enough to vote)}

we'll get "hello ademola, you are 30 years old which means you're old enough to vote" in the console.

we could access the "userName" and "age" variable inside our if statement even though it wasn't created inside the if statement.

2. Function scopes
From the name, i think we should have an idea of what it entails. these are variables that can be accessed only inside the function it was created in. we have no access to them on a global level and we definitely cannot access them in any other function or blocks in our program.
let's look at an example to make it clearer

function greetUser(){
let UserName = "adewole"
}
greetUser()
console.log(userName)

in the above function, we created a function "greetUser" and in the function, we created a variable "userName" and we assigned it a value of "adewole", then we tried to access it outside the function with the console.log() function which is obviously going to throw an error because we don not have access to that "username" variable on a global level. if we wanted to have access to the "userName" variable, we would have to take it out of the function and declare it globally.

another example

function greetUser(){
let UserName = "adewole"
let Age = 30
}

if ( age >= 20){
console.log(`hello ${username}, you are ${age} years old)

this also returns an error as we tried to access a "userName" and "age" variable that's scoped to the "greetUser" function, in the if block. we would have to take out "username" and "age" from the "greetUser" function and declare them globally, if we want access to them in the if block.

3. Block Scopes
First of all, what is a block? a block is simply anything within a opening curly braces and a closing one. think about when you try to write an if statement, the opening and closing curly braces that comes after the condition itself, is essentially a block.
example

if (conditions){ block where code to be executed goes}.

when a variable is declared inside a Block scope, it is only accessible inside that block scope. if we try to access it on a global level or inside another function or even another scope, we get an error.

example

if ( 100 > 20){ let number = 20 }
console.log(number)

in the above code, we created a variable in the block of an if statement with the name "number" and assigned a value "20" to it.
on the next line, we tried to access the "number" variable in the console.log function which will obviously throw an error.
so, essentially, we are restricting the access of the "number" variable to that single if block.

NOTE: There's one important note though, if you declare a variable inside the block scope with the "var" keyword instead" of "let", you get access to it globally.
example

( 100 > 20){ var number = 20 }
console.log(number)

"20" will be printed to the console.

this is one of the biggest difference between declaring a variable with "var" and "let" keywords. personally, i always use "let" and "const" that just got introduced in the new JavaScript es6 syntax for all my projects. it helps avoid weird behaviors that happens with the "var" keyword.

I hope this article was helpful.

How to build a RESTful crud API with ExpressJS and mongoDB Database for newbies

AdewoleCode — Fri, 23 Dec 2022 23:12:14 +0000

in this tutorial, i am going to be be listing a step by step guide and explanations on how to create a restFUL crud API with ExpressJS and MongoDB database.

first of all, what is an API? API is an acronym for Application Programming Interface. I like to think about an API as the layer between the frontend and the backend part of our app, a link where information is being exchanged between the browser and the server

REST(representational site transfer) is basically an architecture for how an API should be structured(a set of guidelines
for how the browser should send resources to the server) e.g using HTTPS, using cachable data that streamlines interactions. in summary, REST is a set of guidelines for creating APIs which makes web applications faster and more lightweight,
with increased scalability.

so a restFUL API is basically an application programming interface that adheres to the constraint of a REST architecture to exchange information between the browser and server(frontend and backend).

Now that we understand what a RESTful API means, let's look at how we create one in ExpressJS.

Step 1: we create the express application

create a new folder named "ExpressJS API".
open the folder with your visual studio code application.
open the integrated terminal in your visual studio code and run "NPM init -y". that command will create a package.JSON file( a file that keeps track of borrowed code from the NPM library that we will be using to build our application)
next, we install some borrowed code from NPM(dependencies) to help jump-start our application. In the terminal we run "NPM install expressJS body-parser mongoose --save" and what that will do is, install the 3 dependencies we need to fire up our application. the expressJS package creates our express library that gives us access to some cool functions that makes whipping up our server way easier, body-parser is a middleware that parses incoming requests(gives us access to the request object from the browser in a way that makes it readable on our application, the mongoose package is to communicate with our mongoDB database(a database that stores our application data)

Step 2: setting up the web server to listen and respond to request from the browser

create a new JavaScript file inside the "expressJS API" folder, named "server.JS"
in the new server.JS file, import the express package(one of the borrowed code) we installed earlier, into the new JavaScript file and create an instance of it. your code should look something like
const express = require("express") then we instantiate the express instance we created and store in a new variable named "app". see example const app = express()
next, we add the body-parser middleware to our application by adding it to our server.JS setup, by using a method provided to us by express. the use method. this is a method we use to pass in a middleware to our ExpressJS application. we create an instance of the body parser object and then pass it to our use method as a middleware, const bodyParser = require("body-parser) app.use(bodyParser.urlencoded({extended: true}) app.use(bodyParser.JSON()
after we setup our express and body parser instances, next we define a simple GET method by calling the get method on the variable that's holding our instantiated object. the get method takes 2 argument, the route and a callback function that triggers every time our route gets a request. the callback function takes 2 arguments, "req" and "res", each representing the request and the response object respectively. and we can use the get object the callback is giving us access to, exchange data with the browser.
we then use the request object to send a simple message to the browser every time it hits our route.

example app.get('/', (req, res)=> { res.send('server is running') })

. we call the GET method on the express instance we created earlier, the get function takes 2 arguments, a path(route) and a
call-back funtion that triggers everytime our route gets a request. we use the res object to return a simple message "server running".

example app.get('/', (req, res) => res.json{"msg": server is running"})

we create a port( a port represents a place where our browser and server connects) eg const port = 5050
listen on that port for incoming requests by using another method made available to us by express, a "LISTEN" method on instance we created. the listen method. the listen method takes
2 arguments which is, the port we set up,
and a call back function that we can use to write something to the console. example app.listen(PORT, ()=> {console.log(server is running on ${port}}
finally, we open the integrated VScode terminal, and run
node server.js, then navigate to localhost:5050(port) on your web browser, and you should "server running.

...and congrats, you just created a web server with ExpressJS

Step 3: Connecting our ExpressJS application to mongoDB database.

remember we installed a mongoose dependency from NPM? we use that package to communicate with our
mongoDB database(I'm assuming you have created one already, if not, search mongoDB on google and follow process on how to create account).

still In our server.JS file, below the express instance and the body parser, create a new instance of the mongoose object(remember how we created the express instance earlier on?), we require
the object and store in a new variable named "mongoose"
on the mongoose instance we created, we call a "connect" method(provided to us by the mongoose library) and pass in a connection string we get from mongoDB(you should have one if you created a mongoDB account and data clusters), since it's an asynchronous function it's better we wrap it in a tryCatch. so that we can spit back the error if there is one.
example const start = async () => { try { await connectDB(process.env.MONGO_URI) console.log('connected'); app.listen(port, () => console.log('Server is listening on port ${port}...') ); } catch (error) { console.log(error); } }; start();

note: it is good practice to setup your MONGO_URL connection strings in a dotenv file and reference it like i did in my code. since you'll be pushing your code to GitHub or a public code sharing platform, it's not very smart to leave your connection naked for everyone to see. they could use it to mess with your database.

sweet. our application is connected to the mongoDB database.

Step 4: We create a mongoose model.

A mongoose model is a wrapper on the mongoose schema.

A mongoose schema on the other hand is basically the structure of our document. like a skeleton of how we want our data to be stored in the mongoDB database( yes, we get to create the structure of how our data should be stored on the database), MongoDB gives us that flexibility(cool, right?).

to setup our mongoose model, we need to

create a new file on the root level of our folder named "model" and as the name suggests, any mongoose model we create goes in there.
inside the model folder, we create a new file called "appModel.js", in that file, we create a mongoose instance, and save in a new variable. on that variable, we call a method named "Schema" with a capital "S" to create a schema(remember?, skeletal structure of how we want our document to look in the mongoDB database). the schema Method takes an object and in the object, we create properties as exactly as we want them stored in our Database.
finally, export mongoose model we created to get access to it in other files.

e.g const AppSchema = mongoose.Schema( { username: { type: String }, message: { type: String, }, module.exports = mongoose.model("App", AppSchema)

Step 5: Define other routes that performs rest of our crud operations.

we created a get route in the server.js file, when we created the server earlier on. where we returned a "server is running" with the response object.
remember:this is a getmessage route that handles a get request app.get('/getmessage', (req, res) => res.json{"msg": server is running"})

now, back in the server.js file, we want to create other routes for our crud functionalities

setting up other routes

a createMessage route that handles post request to our route. we also get access to the request and response object. app.post('/createMessage', (req, res) => res.json{"msg": server is running"})
a "/updatemessage" route that handles update request to our route: app.post('/updatemessage', (req, res) => res.json{"msg": server is running"})
a "/deletemessage" route that handles delete request to our route: app.post('/deletemessage', (req, res) => res.json{"msg": server is running"})

we setup 4 routes(getmessage route, createMesage route, updatemessage route and a deletemessage route).
next, we create controller functions( the callback functions that get triggered when any of the routes we set up gets
a request.

Step 6: Create Controller Functions

create a new folder inside the ExpressJS API folder named "controllers".
create a file in the controllers folder named appController.js
inside the appcontroller.Js file, we import the mongoose model we created, the APP model(hope you didn't forget about it yet?), the one that has the "message and name" as properties on it. we store in a new variable "appMessage"
we then use the appMessage variable that holds our mongoose model to construct the controller functions.
so we create a new asynchronous funtion getMessage, we have access to the req and res since we'll be using this functions as a callback function we pass next to the routes we setup in server.js
mongoose gives us a couple of method we can use to query our database, which makes performing our crud functionalities easier
create message functionality.
e.g const messageModel = require(//"path of model") const createMesage= async (req, res) => { const message = await messageModel.create({"name", "message") _our model takes 2 properties_ res.json({message})
we created an async function, created a message based on the model with the "create" method we got from mongoose, and used the response object to send a reply to the browser. we could also extract data from on the request body and use it to create our message.
get message functionality.
e.g const messageModel = require(//"path of model") const getMesage= async (req, res) => { const message = await messageModel.find({name: "ade"}) res.json({message})

here, we basically call a "findOne" on the model and pass in "name" and that should get all messages in our database, with that particular name property we passed in as a property

update message functionality. e.g const messageModel = require(//"path of model") const updateMesage= async (req, res) => { {name} = req.body const message = await messageModel.findOne({name: "ade"}) message.name = newName res.json({newName})

we get a new name from the body of the request object(req.body), extracted it, find the user with the name of "ade" and basically set the name property to what we get from the browser, we then send the send the update name back as response.

delete message functionality e.g const messageModel = require(//"path of model") const deleteMesage= async (req, res) => { const message = await messageModel.findOneandDelete({name: "ade"}) res.json({"message deleted})

we are using the "findOneAndDelete" method from mongoose to delete the message property with the name of ade. and using the response object to send back a response.

these are just a few examples, they could be get more elaborate and complex than the few basic examples i created here.

Step 7: Connect our controller functions to our routes

after we created the controller functions and the routes. we connect them by importing the controller functions into the server.JS and setting them as a second arguments after the routes.

example app.post('/createmessage', createMessage) app.get('/getmessage', getMessage) app.patch('/updateMessage', updateMessage) app.delete('/deletemessage', deleteMessage)

so we have a route and it's corresponding controller functions that fires when any of the routes gets a request that's part of what our setup handles.

Ended up being a long write up but i had fun writing it, i hope you learnt a thing or 2. feed-backs are always welcomed if you found the article helpful.