Popular JavaScript Methods for Developers

JavaScript is one of the most popular web languages in use today. It has built-in methods that make JavaScript easier to write. Part of being part of a development team is writing readable code, and methods are incredibly useful in terms of readability. Methods are functions that are stored and used as object properties that look like this: objectName.methodUsed(). I will go through the most popular methods and explain what they do, as well as give examples.

Strings Methods

str.includes();
Performs a case-sensitive search to find if the value can be found in the string.

str.slice();
Extracts a section of a string and returns it as a new string so the original string is not modified.

str.split();
Divides the string into substrings and adds them into a new array.

str.concat();
Combines two or more strings together to create a new string without changing the original strings.

const mySentence = 'Zion National Park is located in southern Utah'
mySentence.includes('located');
// returns true
mySentence.includes('Moab');
// returns false
mySentence.slice(5, 18);
// returns 'National Park'
mySentence.split(' ');
// returns ['Zion', 'National', 'Park', 'is', 'located', 'in', 'southern', 'Utah']
mySentence.concat(' and is very beautiful.')
// returns 'Zion National Park is located in southern Utah and is very beautiful.'

Array Methods

arr.find();
Returns the first element that matches the input value.

arr.every();
Tests whether all elements in the array pass a test provided by a function. It will return a Boolean value.

arr.filter();
Iterates through all elements in an array and creates a new array that pass a test provided by a function.

arr.map();
Creates a new array with the results of calling a function on each element in the array.

arr.indexOf();
Returns the first index where an element can be found in the array.

const numbers = [1, 2, 3, 4, 5];
numbers.find(number => number > 3);
// returns 4
numbers.every(number => number < 6);
// returns true
numbers.filter(number => number > 2);
// returns [3, 4, 5]
numbers.map(number => number * 2);
// returns [2, 4, 6, 8, 10]
numbers.indexOf(2);
// returns 1

Object Methods

Object.keys(obj);
Returns an array of an object’s property names.

Object.values(obj);
Returns an array of an object’s property values in order.

const studentInfo = {
  name: 'Erin',
  major: 'Web Design and Development',
  emphasis: 'Web and App Development'
}
console.log(Object.keys(studentInfo));
// returns ['name', 'major', 'emphasis']
console.log(Object.values(studentInfo));
// returns ['Erin', 'Web Design and Development', 'Web and App Development']

Putting everything together may seem daunting, but it helps to start with small projects. I created a pizza ordering system using custom object methods where the user could select toppings and crust type and the function would return ingredients necessary to create the pizza.

Pizza selection

The code snippet below shows that when the “Build Pizza” button is clicked, a message is added to the page with details of the pizza selections. I created my own custom method called buildPizza() and call it when the user clicks the button.

const pizza = {
   crust: 'thin', 
   size: 'large',                           
   topping: 'sausage',                           
   buildPizza: function () {
                                                           
     message = `Baking a ${pizza.size} pizza on a ${pizza.crust} 
     crust with ${pizza.topping} and cheese. Just for you!` 
     document.querySelector('#feedback').textContent = message       
     }
}
document.querySelector('#build').addEventListener('click', pizza.buildPizza)

Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Literal Objects Project in the DGM 2760 Course and representative of the skills learned.