Forem: Samitha Wijesekara

JavaScript Array Methods You Should Know

Samitha Wijesekara — Thu, 07 Apr 2022 11:01:50 +0000

When we are using JavaScript arrays we need to modify the array, find items in the array, insert new items into the array, remove items from the array, and many more. So we can use JavaScript built-in array methods to do the modifications to the arrays according to our requirements.

In this article, I'm discussing about 24 JavaScript Array Methods. To demonstrate the 1 to 6 methods as an example I'll use the below array. In each method, I'll show the code snippet and output result.

const items = [
 { name: "Apple", emoji: "🍎", price: 50 },
 { name: "Grapes", emoji: "🍇", price: 30 },
 { name: "Lemon", emoji: "🍋", price: 40 },
 { name: "Strawberry", emoji: "🍓", price: 80 },
 { name: "Banana", emoji: "🍌", price: 10 },
 { name: "Watermelon", emoji: "🍉", price: 100 },
 { name: "Mango", emoji: "🥭", price: 20 },
 { name: "Pineapple", emoji: "🍍", price: 150 },
];

1. find() Method
This method is used to get the value of the first element in the array that satisfies the provided condition.

const findItem = items.find((item) => {
  return item.name === "Strawberry"
})
console.log(findItem)

//RESULT
//{ name: "Strawberry", emoji: "🍓", price: 80 }

2. filter() Method
By using the filter method it returns an array with the values that pass the filter.

const filterItem = items.filter((item) => {
  return item.price > 120
})
console.log(filterItem)

//RESULT
//[{ name: "Pineapple", emoji: "🍍", price: 150 }]

3. map() Method
This method is used to iterate over an array and calling function on every element of array.

const mapItems = items.map((item) => {
  return item.emoji
})
console.log(mapItems)

//RESULT
//["🍎", "🍇", "🍋", "🍓", "🍌", "🍉", "🥭", "🍍"]

4. forEach() Method
The forEach method is also used to loop through arrays, but it uses a function differently than the classic “for loop”. It passes a callback function for each element of an array together with the current value (required), index (optional) & array (optional).

//Method - 01
items.forEach(demostrateforEach)

function demostrateforEach(item, index, arr){
  console.log(item)
  console.log(index)
  console.log(arr)
}

//Method - 02
items.forEach((item, index, array) => {
  console.log(item, index, array)
})

//RESULT FOR BOTH METHODS
/*
{name:"Apple", emoji:"🍎", price:50} 
0
(8) [{...},{...},{...},{...},{...},{...},{...},{...}]

{name:"Grapes" ,emoji:"🍇", price:30}
1
(8) [{...},{...},{...},{...},{...},{...},{...},{...}]

{name:"Lemon", emoji:"🍋", price:40}
2
(8) [{...},{...},{...},{...},{...},{...},{...},{...}]
etc...*/

5. some() Method
The some() method checks if any array elements pass a test (provided as a function). This method returns true if the function returns true for minimum one element. The method returns false if the function returns false for all elements.

Function returns true for minimum one element -> Method returns true
Function returns false for all elements -> Method returns false

const hasItemsPriceUpto80 = items.some((item) => {
  return item.price > 80
})
console.log(hasItemsPriceUpto80)

//RESULT
//true

6. every() Method
This method executes a function for each array element. This method returns true if the function returns true for all elements. The method returns false if the function returns false for one element.

Function returns true for all elements -> Method returns true
Function returns false for one element -> Method returns false

const hasItemsPriceUpto80 = items.every((item) => {
  return item.price > 80
})
console.log(hasItemsPriceUpto80)

//RESULT
//false

7. reduce() Method
This method apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

const items = [2, 8, 1, 3, 5, 1, 10]

const itemSum = items.reduce((result, currentValue) => {
    return result + currentValue ;
});

console.log(itemSum);

//RESULT
//30

8. includes() Method
The includes() method determines whether a string contains the given characters within it or not. This method returns true if the string contains the characters, otherwise, it returns false. This method is case sensitive.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const checkIncludes = items.includes("🍓")
console.log(checkIncludes)

//RESULT
//true

9. reverse() Method
This method reverse the order of the array. The first array element becomes the last, and the last array element becomes the first.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const reverseItems = items.reverse()
console.log(reverseItems)

//RESULT
//["🍍", "🥭", "🍉", "🍓", "🍋", "🍇", "🍎"]

10. toString() Method
This method returns a string representing the array and its elements.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const stringItems = items.toString()
console.log(stringItems)

//RESULT
//"🍎,🍇,🍋,🍓,🍉,🥭,🍍"

11. join() Method
This method is allowed joins all elements of an array into a string.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const itemsJoinCommas = items.join()
console.log(itemsJoinCommas)
//RESULT
//"🍎,🍇,🍋,🍓,🍉,🥭,🍍"

const itemsJoinDash = items.join('-')
console.log(itemsJoinDash)
//RESULT
//"🍎-🍇-🍋-🍓-🍉-🥭-🍍"

const itemsJoinAll = items.join('')
console.log(itemsJoinAll)
//RESULT
//"🍎🍇🍋🍓🍉🥭🍍"

12. splice() Method
This method allows adds and/or removes elements from an array. When we use splice(4) will start removing elements from index 4. We can also define how many elements we want to remove from the array by passing a second number argument. In a example when we use splice(4, 2) will start removing only two elements from index 4.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const itemsSplice = items.splice(4);
console.log(itemsSplice )
//RESULT
//["🍉", "🥭", "🍍"]

const itemsSpliceSpecificNumber = items.splice(4, 2);
console.log(itemsSpliceSpecificNumber)
//RESULT
//["🍉", "🥭"]

13. slice() Method
This method allows extracts a section of an array and returns a new array.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

// slicing the array from start to end
const itemSliceAll = items.slice();
console.log(itemSliceAll)
//RESULT
//["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

// slicing from the fourth element
const itemSlice = items.slice(3);
console.log(itemSlice)
//RESULT
//["🍓", "🍉", "🥭", "🍍"]

// slicing from the fourth element to fifth element
const itemSliceSpecificNumber = items.slice(3, 5);
console.log(itemSliceSpecificNumber)
//RESULT
//["🍓", "🍉"]

14. indexOf() Method
This method returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const indexItem = items.indexOf("🍓")
console.log(indexItem)

const newItem = items.indexOf("🔴")
console.log(newItem)

//RESULT
//3
//-1

15. findIndex() Method
This method executes a function for each array element. The findIndex() method returns the index (position) of the first element that passes a test. The findIndex() method returns -1 if no match is found.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const findIndexItemOne = items.findIndex((item) => {
    return item === "🍓"
});
console.log(findIndexItemOne)
//RESULT
//3


const findIndexItemTwo = items.findIndex((item) => {
    return item === "🔴"
});
console.log(findIndexItemTwo)
//RESULT
//-1

16. lastIndexOf() Method
This method returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const lastIndexItem = items.lastIndexOf("🍎")
console.log(lastIndexItem)

const newItem = items.lastIndexOf("🔴")
console.log(newItem)

//RESULT
//5
//-1

17. concat() Method
This method allows returns a new array comprised of this array joined with other array(s) and/or value(s).

const itemOne = ["🍎", "🍇", "🍋", "🍓"]
const itemTwo = ["🍉", "🍎", "🍍"]

const itemsArray = itemOne.concat(itemTwo)
console.log(itemsArray)

//RESULT
//["🍎", "🍇", "🍋", "🍓", "🍉", "🍎", "🍍"]

18. push() Method
This method allows adds one or more elements to the end of an array and returns the new length of the array.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const pushItem = items.push('🔴')
console.log(pushItem)
console.log(items)

//RESULT
//8
//["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍", "🔴"]

19. pop() Method
This method allows removes the last element from an array and returns that element.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const popItem = items.pop()
console.log(popItem)
console.log(items)

//RESULT
//"🍍"
//["🍎", "🍇", "🍋", "🍓", "🍉", "🥭"]

20. shift() Method
This method removes the first element from an array and returns that element.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const shiftItem = items.shift()
console.log(shiftItem)
console.log(items)

//RESULT
//"🍎"
//["🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

21. unshift() Method
This method allows adds one or more elements to the front of an array and returns the new length of the array.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const unshiftItem = items.unshift("🔴")
console.log(unshiftItem)
console.log(items)

//RESULT
//8
//["🔴", "🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

22. isArray() Method
This method check whether an object or a variable is an array or not. isArray() method returns true if the value is an array, if not returns false .

const itemArray = ["🍎", "🍇", "🍋", "🍓", "🍉", "🍎", "🍍"]
const isItemsArray = Array.isArray(itemArray)
console.log(isItemsArray)
//RESULT
//true

const itemObject = {"🍎" : "Apple", "🍇" : "Grapes"}
const isSample2Array = Array.isArray(itemObject)
console.log(isSample2Array)
//RESULT
//false

const itemString = "Apple"
const isSample3Array = Array.isArray(itemString)
console.log(isSample3Array)
//RESULT
//false

23. length Property
The length property of an object which is an instance of type Array sets or returns the number of elements in that array.

const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const itemsLength = items.length;
console.log(itemsLength )

//RESULT
//7

Host React JS App for FREE with GitHub Pages

Samitha Wijesekara — Fri, 11 Feb 2022 12:08:52 +0000

Commands Used

Step 1
▶️ git remote add origin [YOUR REPO LINK]
▶️ git add -A
▶️ git commit -m "Initial commit"
▶️ git push -u origin main

Step 2
Add this code line to package.json file -
▶️ "homepage": "https://[USERNAME].github.io/[YOUR REPO NAME]",

Step 3
▶️ npm install gh-pages --save-dev

Step 4
Add this scripts to package.json file -
▶️ "predeploy": "npm run build",
▶️ "deploy": "gh-pages -d build",

Step 5
▶️ npm run deploy

Free Hosting Services For Your React JS App

Samitha Wijesekara — Tue, 18 Jan 2022 15:38:54 +0000

01. Netlify

Netlify is a platform you can use to automatically build, deploy, serve, and manage your frontend sites and web apps. It also provides a variety of other features like form processing, serverless functions, and split testing.

02 .GitHub Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. You can host your site on GitHub's github.io domain or your own custom domain.

03 .Vercel

Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

04 .Heroku

Heroku is a cloud platform as a service supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.

05 .Firebase

Firebase hosting is free service. So, it won't cost you anymore. It by default provides SSL certificate and offers an impressive speed across multiple geographic locations without the need for a separate CDN on top.

Best Visual Studio Code Extensions for Developers

Samitha Wijesekara — Mon, 17 Jan 2022 19:52:06 +0000

1. GitLens — Git supercharged

Usage - GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.(Install Now)

2. Live Server

Usage - Launch a local development server with live reload feature for static & dynamic pages.(Install Now)

3. Bracket Pair Colorizer

Usage - This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.(Install Now)

4. Mithril Emmet

Usage - “Emmet is a plugin for many popular text editors which greatly improves HTML and CSS workflow”. Short and to the point. Emmet can increase your workflow when building sites Emmet also used to be called Zen Coding for those of you that see the syntax is familiar.(Install Now)

5. Material Theme

Usage - Material Theme is a VS code IDE theme.(Install Now)

6. Material Icon Theme

Usage - Material Theme Icon is set VS code files and folder icons matching to the file extension and folder name.(Install Now)

7. Prettier - Code formatter

Usage - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.(Install Now)

8. ES7 React/Redux/GraphQL/React-Native snippets

Usage - By using this plugin you can easily add the codes from snippets.(Install Now | See All Snippets)

9. Vscode-Styled-Components

Usage - The styled-components extension adds highlighting and IntelliSense for styled-component template strings in JavaScript and TypeScript.(Install Now)

10. CodeSnap

Usage - Take beautiful screenshots of your code in VS Code!(Install Now)

11. Better Comments

Usage - The Better Comments extension will help you create more human-friendly comments in your code.(Install Now)

12. Auto Rename Tag

Usage - When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.(Install Now)

13. HTML Snippets

Usage - This extension adds rich language support for the HTML Markup to VS Code.(Install Now)

14. CSS Peek

Usage - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.(Install Now)

15. PowerShell

Usage - This extension provides rich PowerShell language support for Visual Studio Code (VS Code). Now you can write and debug PowerShell scripts using the excellent IDE-like interface that Visual Studio Code provides.(Install Now)

The Difference Between NPM and Yarn

Samitha Wijesekara — Sat, 08 Jan 2022 16:18:55 +0000

What is Package Manager?

A package manager is a tool to create project environments and easily import external dependencies. By using a package manager we could able to automates the process of installing, upgrading, configuring, and removing the dependencies from the project environment.

What is NPM?

NPM is commonly known as node package manager, maintained by NPM, Inc. NPM is the popular package manager among JavaScript developers. It is the default package that is automatically installed whenever we install Node.js on our system. (https://www.npmjs.com/)

What is Yarn?

Yarn package manager developed in 2016 by Facebook. It is a another package manager for the JavaScript programing language. Yarn provides speed, consistency, stability, and security as an alternative to NPM.(https://yarnpkg.com/)

Speed

The main difference between NPM and Yarn is the package installation process. Yarn installs packages in parallel. Yarn is optimized to fetch and install multiple packages at once.

NPM will perform a serial installation process. It install every package independently.

So in this case Yarn has a speed installation process than NPM.

Security

NPM package manager has perform a security check on each install. Yarn checks behind the scenes to ensure you're not downloading any rogue scripts and other files that can conflict with your project's dependencies. Security is one of Yarn’s core features.

Ease of use

NPM and Yarn both package managers are user-friendly and have a good user experience.

Basic Commands

To see list of commands:
NPM - npm
Yarn - yarn

Install dependencies from package.json:
NPM - npm install
Yarn - yarn

Install a package and add to package.json:
NPM - npm install package --save
Yarn - yarn add package

Install a devDependency:
NPM - npm install package --save-dev
Yarn - yarn add package --dev

Remove a dependency:
NPM - npm uninstall package --save
Yarn - yarn remove package

Upgrade a package to its latest version:
NPM - npm update --save
Yarn - yarn upgrade

Install a package globally:
NPM - npm install package -g
Yarn - yarn global add package