17 JavaScript Methods And Shorthands That You Must Know

In this article I will talk about JavaScript methods and shorthands you should know to be more efficient developer.

Important JavaScript Methods You Must Know

Some important and fundamentals method you should know as you’ll use them frequently in your projects.

• slice():  The slice() method returns a shallow copy of a portion of an array into a new array object selected and end represent from start to end (end not included) where start and end represent the index of items in that array.

arr.slice([start[, end]])
// start - Zero based index at which to start extraction
// end - Zero based index before which to end extraction

• map(): The map() method is used to apply a function on every element in an array and then return a new array.

let Array = array.map( (v, i, a) => {
    // return element to Array
});

// Array - the new array that is returned
// array - the array to run the map function on
// v - the current value being processed
// i - the current index of the value being processed
// a - the original array

• includes(): The include method returns true if the element in present and false if it’s not.

const array = [1, 2, 3];

console.log(array.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'mouse'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

• reduce(): The reduce() method is used to apply a function to each element in the array to reduce the array to a single value.

let result = array.reduce((acc, v, i, a) => {
  // return the new value to the result variable 
}, initVal);

// result - the single value that is returned. 
// array - the array to run the reduce function on. 
// acc - the accumulator accumulates all of the returned values. 
// v - the current value being processed
// i - the curret index of the value being processed
// a - the original array
// initVal - an optionally supplied initial value. 
// If the initial value is not supplied,
// the 0th element is used as the initial value.

• filter(): The filter() method creates a new array filled with all the elements of the old array that pass a certain test, provided as a function.

let new = array.filter((v, i, a) => {
   // return element to new if condition are met 
  // skip element if conditions are not met
  });

// new - the array that is returned
// array - the array to run the filter function on
// v - the current value being processes
// i - the current index of the value being processed
// a - the original array

• flat(): The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const someArray = [bmw, [lambo, mustang], [car4, car5]]
someArray.flat()
//Output: [bmw, lambo, mustang, car4, car5]

• pop(): The pop method removes the last element from the end of the given array.

const numbers = [bmw, bulldog, dane];
numbers.pop();
console.log(numbers); // [ bmw, bulldog ]

• some(): The some() method tests whether at least one of the elements in the array passes the test implemented by the provided function. The result of the some() method is a boolean.

const new = array.some(( v, i, a) => {
         // return boolean
   });

// newArray - the new array that is returned
// array - the array to run the map function on
// v - the current value being processed
// i - the current index of the value being processed
// a - the original array

• concat(): This method makes two strings into new one

const array = ['1', '2', '3'];
const array1 = ['4', '5', '6'];
const array2 = array.concat(array1);

console.log(array2);
// Output => [ "1", "2", "3", "4", "5", "6" ]

JavaScript Tips And Tricks

• Transform arguments objects into an array :

let Array = Array.prototype.slice.call(arguments);

• Empty the array :

let Array = [69, 79, 89];  
Array.length = 0; // Array will be equal to []

• Before declaring the object, assign a dynamic property:

const dynamic = 'color';
var item = {
    item: 'Sofa',
    [dynamic]: 'Red'
}
console.log(item); 
// { item: "Sofa", color: "Red" }

• Making the conditions short:

if (coffee) {
    spilled();
}

// Another way
coffee && spilled();

string = "6969";
console.log(+string);
// 6969

string = "hello";
console.log(+string);
// NaN

• convert number to string:

var converted = 9 + "";
console.log(converted);
// 9
console.log(typeof converted); 
// STRING

• merging arrays:

// good for small arrays
var array = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array.concat(array2)); 

// for merging large arrays we can use
Array.push.apply(array, array2)