DEV Community: Phyllis

Useful JavaScript array methods - Part 2

Phyllis — Fri, 10 Jul 2020 17:59:25 +0000

JavaScript provides a bunch of helpful methods for working with arrays. This article, which is a follow up to my previous post, will take you through some of the commonly used array callback methods. Again, I will group these methods by the purpose of data transformation.

We will use ES6 arrow functions in the examples below. If you haven't used them and would like to find out more about it, you may find this article helpful.

Table of content

Iterate - forEach
Transform - map
Filter - filter
Query - every, some

Iterate - forEach

This method is used for running a function for each array element. You can also get the current index of each element if you need it.

Examples 1 & 2: extract values from an array of objects

const restaurants =[{
  name: 'Tasca da Avenida',
  cuisine:'Mediterranean',
  rating: 4.3
 },
 {
  name:'Decor & Salteado',
  cuisine:'European',
  rating: 4.6
 },
 {
  name:'Carnes do Convento',
  cuisine:'Mediterranean',
  rating: 4.8
 }
]

//printing all restaurants' names
restaurants.forEach((r) => {
  console.log(r.name);
});

// Tasca da Avenida
// Decor & Salteado 
// Carnes do Convento

//printing all restaurants' name with their indices
restaurants.forEach((r, index) => {
  console.log(`${index}: ${r.name}`);
});

// 0: Tasca da Avenida
// 1: Decor & Salteado
// 2: Carnes do Convento

Example 3: multiply each element in the array by 3

const numbers = [2,4,6,8,10];
numbers.forEach((num) => {
  console.log(num * 3);
});

numbers
// 6
// 12 
// 18
// 24
// 30

Transform - map

This method iterates over each element of an array and transforms them into new elements. The original array will not be changed, but a new array, consists of these new elements, will be created.

When to use map and forEach?

map: it returns values after manipulating data of the original array and those values are saved in a new array which can be used later.

forEach: There is no return value from the method. It only manipulates the data of the original array without creating a new array.

Therefore if we simply want to do something with the array without creating a new array, we can use .forEach(). But if we want to capture the result of data manipulation in a new array, we should go for .map().

Example 1: Transform each element in an array and save them in a new array

const tea = ['cranberry', 'breakfast', 'earl grey', 'strawberry'];

// turn the tea names into uppercase characters and save them in a new variable uppercased
const uppercased = tea.map((t) => {
  return t.toUpperCase();
});

console.log(uppercased);

//["CRANBERRY", "BREAKFAST", "EARL GREY", "STRAWBERRY"]

Example 2: return an object which includes the numbers in the array and whether each of them can be divided by 5

const numbers = [ 5, 3, 7, 10, 15];

const fiveMultiples = numbers.map((num) => {
  return {
    value: num,
    dividedByFive: num % 5 === 0
  }
});

fiveMultiples
//0: {value: 5, dividedByFive: true}
//1: {value: 3, dividedByFive: false}
//2: {value: 7, dividedByFive: false}
//3: {value: 10, dividedByFive: true}
//4: {value: 15, dividedByFive: true}

Filter -filter

.filter() returns a new array with elements which fulfils a condition specified by you. It works like this:

It loops over each element of an existing array.
If the element fulfils a testing function specified by you, the result will be true and that element will be included in the new array.
If the element does not pass the testing function, the result will be false and that element will be excluded from the new array.
The original array will not be changed.

Example 1: find out numbers which are greater than 100 and save them in a new array bigNumbers.

const numbers = [10, 50, 102, 789, 5, 101];
const bigNumbers = numbers.filter(num => num > 100);
bigNumbers
// [102, 789, 101]

Example 2: find out Mediterranean restaurants and save them in a new array called seacrhResult.

const restaurants = [{
    name: 'Tasca da Avenida',
    cuisine: ['Mediterranean', 'Seafood'],
    rating: 4.3
  },
  {
    name: 'Decor & Salteado',
    cuisine: ['European', 'International'],
    rating: 4.6
  },
  {
    name: 'Carnes do Convento',
    cuisine: ['Mediterranean', 'Steakhouse'],
    rating: 4.8
  }
]

const searchResult = restaurants.filter((r) => {
  return r.cuisine.includes("Mediterranean");
})

searchResult

//{name: "Tasca da Avenida", cuisine: Array(2), rating: 4.3}
//{name: "Carnes do Convento", cuisine: Array(2), rating: 4.8}

Query - every, some

Every

.every() is used when we want to see if all the elements in an array passes a condition defined by us. It returns a boolean value. In other words, if all the elements passes the condition, it will return true. Otherwise, it will return false.

Example: check if all the restaurants above have a rating of at least 4.5.

const allGoodRestaurants = restaurants.every(restaurant => restaurant.rating >= 4.5);

allGoodRestaurants
//false

Some

.some() is similar to .every(). The only difference is, instead of checking if all array elements fulfil the condition, .some() only checks if at least one array element passes the test function.

In other words, if one or more elements passes the test function, it will return true. If none of the elements fulfils the condition, it will return false.

Example: check if at least one of the restaurants above has a rating of at least 4.5.

const someGoodRestaurants = restaurants.some(restaurant => restaurant.rating >= 4.5);

someGoodRestaurants
//true

Thanks for reading! This article is far from comprehensive. There are still some methods which have not been covered. If you want to find out more about JS array methods, you can check out the docs on MDN. It's really good reference for learning and understanding how they work.

Useful JavaScript array methods

Phyllis — Thu, 25 Jun 2020 16:52:02 +0000

Array is one of the most frequently used data structure in JavaScript. It is an object that can store a collection of values of the same type. For example, comments of a blog post or images in a carousel can be stored in an array.

There are a lot of built-in array methods which can help us add, remove or manipulate data. This article will cover a number of common array methods, which are grouped by the purpose of data transformation.

Table of content

Insert - push, unshift
Remove - pop, shift
Remove/ replace / insert - splice
Slice - slice
Merge - concat
Search - includes, find, findIndex, indexOf
Reverse - reverse

Insert - push, unshift

push: This method can be used when you want to add one or more items to the end of an array. The original array will be transformed with the addition of the new item. The method itself will return the new length of the array.

let tea = ['breakfast','lemon','green'];
let count = tea.push('peach');
console.log(tea);
//['breakfast','lemon','green','peach']
console.log(count);
// 4

tea.push('black','strawberry','cranberry');
console.log(tea);
//['breakfast','lemon','green','peach','black','strawberry','cranberry']

unshift: This method adds one or more items to the beginning of an array. Same as 'push', the array in place will be modified and the function itself returns the new length of the array.

let letters = ['a', 'b', 'c', 'd', 'e'];
let count = letters.unshift('x', 'y', 'z');
console.log(letters);
//['x', 'y', 'z', 'a', 'b', 'c', 'd', 'e'];
console.log(count);
// 8

Remove - pop, shift

pop: It removes the last item from an array. The original array will be transformed with the removal of the last item. The function itself returns the deleted item.

let letters = ['a', 'b', 'c', 'd', 'e'];
let poppedItem = letters.pop();
console.log(letters);
//['a', 'b', 'c', 'd']
console.log(poppedItem);
//'e'

shift: This removes the first element from an array. Again, the array in place will be changed and the function returns the deleted element.

let letters = ['a', 'b', 'c', 'd', 'e'];
let shiftedItem = letters.shift();
console.log(letters);
//['b','c', 'd', 'e']
console.log(shiftedItem);
//'a'

Remove/ replace / insert - splice

splice: This method modifies the content of an array by removing or replacing existing elements and/or adding new elements. The original array will be changed.

The syntax would be

let modifiedArray = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Example 1: at index 0, delete two items "salad" & "steak"

let food = ['salad', 'steak', 'pudding', 'carrot cake'];
food.splice(0,2);
console.log(food); 
//["pudding", "carrot cake"]

Example 2: at index 1, delete zero items and insert "snake" and "rabbit"

let animals = ["koala", "fish", "tortoise", "whale"]
animals.splice(1,0,"snake","rabbit");
console.log(animals); 
//["koala", "snake", "rabbit", "fish", "tortoise", "whale"]

Example 3: at index 0, delete two items "earl grey" & "lemon" and replace them with "breakfast" & "peach"

let tea = ["earl grey", "lemon", "green"];
tea.splice(0, 2, "breakfast", "peach");
console.log(tea); 
//["breakfast", "peach", "green"]

Slice - slice

slice: This method returns a desired portion of an array from your specified start point and before your specified end point. Negative index can be passed in and it will count backwards from the end of an array. If the end point is not specified, the rest of the array will be returned. If the start point and end point are not specified, it returns a copy of the whole array. One thing to note - it does not modify the original array but returns the desired portion.

let food = ['steak', 'pasta', 'cake', 'pudding', 'salad', 'soup'];
let copy = food.slice();
console.log(copy);
//['steak', 'pasta', 'cake', 'pudding', 'salad', 'soup']
let dessert = food.slice(2, 4);
console.log(dessert);
//['cake', 'pudding']
let starter = food.slice(-2); 
console.log(starter);
//['salad', 'soup']
let sweets = food.slice(-4, -2);
console.log(sweets);
//['cake', 'pudding']

Merge - concat

concat: This method is used to merge two or more arrays. The original arrays will not be changed. The function itself returns a new array.

let tea = ['breakfast','earl grey','green'];
let juice = ['orange', 'pineapple', 'pear'];
let drinks = tea.concat(juice);

console.log(drinks);
//['breakfast','earl grey','green','orange','pineapple', 'pear']

console.log(tea);
//['breakfast','earl grey','green']

console.log(juice);
//['orange', 'pineapple', 'pear']

Search - includes, find, findIndex, indexOf

includes: This methods returns a boolean whether an array contains an element we are looking for. The second argument, which indicates the index to start searching at, is optional.

let tea = ['breakfast','earl grey','green'];

console.log(tea.includes('breakfast')); 
// true
console.log(tea.includes('strawberry'));
//false
console.log(tea.includes('earl grey', 1));
//true
console.log(tea.includes('earl grey', 2));
//false

find: If you have a search criteria, you may consider using this method. This returns the first item which satisfies the criteria specified by you. If the item cannot be found, undefined is returned.

In the first example below, the criteria states that the number we look for should be bigger than 3. The search function will return 4 because 4 is the first element in the array that meets the criteria.

In the second example below, the criteria states that the number needs to be smaller than 1. The search function will return undefined because none of the elements in the array meets this criteria.

let numbers = [ 1, 2, 3, 4, 5, 6];
let found = numbers.find(num => num > 3);
console.log(found);
// 4
found = numbers.find(num => num < 1);
console.log(found);
// undefined

findIndex: This method is almost the same as find. Find returns the first matching item as per the specified criteria, whereas findIndex returns the index of first matching item. It returns -1 if no matching item is found.

In the first example below, the criteria states that the number needs to be bigger than 3. The search function will return 1 because 1 is the index of number 4, which is the first number matches the criteria.

In the second example below, the criteria states that the number needs to be smaller than 2. The search function will return -1 because none of the numbers in the array is smaller than 2.

let numbers = [ 2, 4, 6, 7, 9, 10];
let foundIndex = numbers.findIndex(num => num > 3);
console.log(foundIndex);
// 1
foundIndex = numbers.findIndex(num => num < 2);
console.log(foundIndex);
// -1

indexOf: This method is almost the same as findIndex, but instead of taking a function as the search criteria and argument, this takes a value. The second argument, which indicates the index to start searching at , is optional.

let juice = ['orange', 'pineapple', 'pear'];
let index = juice.indexOf('orange');
console.log(index);
// 0
index = juice.indexOf('orange', 1);
console.log(index);
// -1

Reverse - reverse

reverse: This method reverses an array by modifying the original array.

let array = ["Y", "P", "P", "A", "H"];
let reversed = array.reverse();
console.log(reversed);
// ["H", "A", "P", "P", "Y"]

Thank you for reading this article! This article is far from comprehensive. There are still many methods which have not been covered. If you want to find out more about JS array methods, you can check out the docs on MDN. It's really good reference for learning and understanding how they work.

How to deploy a MEN stack app from our local machines to Heroku

Phyllis — Sat, 30 May 2020 13:28:03 +0000

Introduction

Recently when I deployed a web application on Heroku, I spent a lot of time debugging and researching. A seemingly simple process turned into a few hours task. Hence, I would like to share my experience.

In this article, I will describe how to deploy an existing web application that is built using MongoDB, Express.js and Node.js from our local machines to Heroku.

Prerequisites

You'll need to have:

An existing MEN stack app
Git installed. Read this guide if you need to install Git. Learn about how to set up Git here
Heroku Command Line Interface (CLI) installed. This CLI will make it easier to create and manage your Heroku apps directly from the terminal. The simplest way to install it on macOS machines is using brew.

brew tap heroku/brew && brew install heroku

For other operating systems, please refer to here
After you go through the installation process, you can check if the CLI has installed correctly by running:

heroku --version

If it has been installed successfully, you should see heroku/x.y.z (x, y, z are numbers) in the output.

You will also need an account at Heroku website.

1. Configure package.JSON

We need to check if package.JSON has all the correct dependencies, as Heroku will need the list to know what to install for the app to work. Then modify the file by adding the following script. This will tell Heroku how to start the app.

"scripts": {
        "start": "node server.js",
        [...]
    }

2. Using process.env.PORT

When we test our Express.js app in the local environment, it is usually configured to bind to a port instead of the one provided by Heroku via the $PORT environment variable. For example in app.js file,

app.listen(3000, function (){
  console.log("App is listening on port 3000");
});

However, When Heroku's port for the app to bind to is dynamic, its value is exposed in the $PORT env var. To make sure our app bind to this port instead, we need to change our code to:

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Our app is running on port ${PORT}`);
});

By using this code, the app will use the $PORT env var if available or fallback to a default port 3000 if we are running locally.

3. Connecting with Database using MongoDB Atlas

I am going to use mongoDB Atlas to host the database of our application on the cloud.

After registering, we can login and create a new database cluster.
If you want a free option, make sure 'FREE TIER AVAILABLE' options are selected and it says FREE on the bottom-left corner, before clicking the green button to create our cluster.

After the cluster is created (which would take some time), we can click CONNECT button.

Then we need to paste 0.0.0.0/0 for IP address and click the green "Add IP Address" button. This will enable access to our database server from any IP.

Create a user by entering a new username and a strong password. Make sure to remember our credentials as we would need that for our SRV address later. Press the "Create MongoDB User" button.

After this is done, we can press the "Choose a connection method" button on the bottom right.

Click the "Connect Your Application" button in the next window.

Choose the "Short SRV connection string" and click COPY button.

In the SRV address we need to replace PASSWORD with the password we chose when we created a user. Then remember to save the address somewhere for later usage.

4. Login to Heroku

You can login to Heroku using the Heroku CLI. If you would like to login through the web browser, use the following command in the terminal.

heroku login

If you want to log in through the command line instead, add the -i flag.

heroku login -i

5. Initialise a Git repository, add and commit files to Git

When we are in the project folder, initialise a new Git repository (if we have not done it) by using the following command in the terminal.

This step is very important because Heroku relies on Git for deploying app from our local machine to its cloud servers.

git init

Afterwards, follow the following steps to add and commit files to Git.

git status

git add .

git commit -m "<your-commit-message>"

6. Create a new Heroku project

Now, we can create a new Heroku project with a name we choose. I name mine as demo_app.

If we don't name our project, Heroku will create a random name for our project.
The name will form part of the URL which can be used to access our project. It means we need to choose a special name for our project that no one has used.
It is possible to rename our project later so don't need to worry too much. Read here for more details.

heroku create demo_app

7. Setting up environment variables for database URL

At the moment one database is shared between development and production environments. This is not good practise because if we lose any data in our development environment, the same data will be lost in production. We also do not want to expose sensitive data such as MongoDB Atlas SRV address on Github.

To prevent these issues, we need to set up environmental variables of DATABASEURL locally and on Heroku.

To set up DATABASEURL locally to localhost, run the following script on the terminal. Remember to plug in name of your app folder in the URL.

export DATABASEURL=mongodb://localhost:27017/<name_of_your_app_folder>

Add the following after variable declaration in app.js file. process.env is the way Node.js used to access environment variable. Then start the server to see if the correct localhost URL appears in the output on terminal.

console.log(process.env.DATABASEURL)

If the correct URL appears, modify mongoose.connect script in app.js file to the following. This allows localhost acts as a backup if something goes wrong with the environment variable.

var url = process.env.DATABASEURL || "mongodb://localhost:27017/<name_of_your_app_folder>"
mongoose.connect(url, { useNewUrlParser: true });

To set up a separate DATABASEURL for Heroku, go to our application settings after we logged in Heroku on web browser.

Scroll down to Config Vars section and click Reveal Config Vars button.

Enter DATABASEURL as key and your MongoDB Atlas SRV address as value. Then click Add.

8. Add and commit files to Git and push to Heroku

Before we deploy to Heroku, make sure we have Git added all the relevant files and committed them.

git add .
git commit -m "ready to deploy"

The final step is to push to our Heroku master branch.

git push heroku master

We should see a bunch of information prints out in the terminal as Heroku builds and deploys our app.

If Verifying deploy...done appears, it means our build was successful.

Congratulations! Now you app is hosted on your-project-name.herokuapp.com for all to visit!

If there is "application error" appears when you visit your app, I would recommend checking logs with the following command and referencing Heroku docs.

heroku logs

Thanks for reading! I hope this article is helpful.