DEV Community

loading...
Cover image for 17 Javascript methods and shorthands must know

17 Javascript methods and shorthands must know

Dev Write Ups
Group of Devs providing free resources to the beginners
Originally published at devwriteups.com ・4 min read

We occasionally send e newsletters to our subscribers about many amazing things. You can subscribe it from here

The most clear justification for learning JavaScript is on the off chance that you have any desires for turning into a web designer. Regardless of whether you haven't got your heart set on a tech vocation, being capable in JavaScript will empower you to develop sites without any preparation—a lovely helpful expertise to have in the present occupation market!

Here I'll tell you about 13 important JavaScript methods, tricks and tips respectively.


JavaScript important methods 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. Read more -> Slice method
arr.slice([start[, end]])
// start - Zero based index at which to start extraction
// end - Zero based index before which to end extraction
Enter fullscreen mode Exit fullscreen mode
  • forEach(): The forEach() method executes a provided function once for each array element.

Syntax:

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"
Enter fullscreen mode Exit fullscreen mode
  • map(): The map() method is used to apply a function on every element in an array and then return a new array.

Syntax:

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

Enter fullscreen mode Exit fullscreen mode
  • 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', 'bat'];

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

console.log(pets.includes('at'));
// expected output: false
Enter fullscreen mode Exit fullscreen mode
  • 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.

Enter fullscreen mode Exit fullscreen mode
  • 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

Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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" ]
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • 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 ]
Enter fullscreen mode Exit fullscreen mode

Tips and Tricks🤩

  • Transform arguments objects into an array : var Array = Array.prototype.slice.call(arguments);
  • Empty the array :
var Array = [69, 79, 89];  
Array.length = 0; // Array will be equal to []
Enter fullscreen mode Exit fullscreen mode
  • Disable right click on your website:
<body oncontextmenu="return false">
    <div></div>
</body>
Enter fullscreen mode Exit fullscreen mode
  • Before declaring the object, assign a dynamic property
const dynamic = 'color';
var item = {
    brand: 'Mustang',
    [dynamic]: 'Fuchsia'
}
console.log(item); 
// { brand: "Mustang", color: "Fuchsia" }
Enter fullscreen mode Exit fullscreen mode
  • Making the conditions short
if (coffee) {
    spilled();
}

// Another way
coffee && spilled()
``

- convert string to number : We've used the `+` operator. Be careful with it as it only works with `string numbers`. 

Enter fullscreen mode Exit fullscreen mode


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

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


- convert number to string: We just faked javascript 😂, we just have used concatenation operator with an empty set of quotation

Enter fullscreen mode Exit fullscreen mode


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


- merging arrays: Using the `array.concat()` function will lower the consumption of memory. 


Enter fullscreen mode Exit fullscreen mode


javascript
// 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)





--------

**Being mindful is undeniably more significant than being proficient**. 
Thank You for Reading this post 🤩

> We occasionally send newsletters to our subscribers about many amazing things. You can subscribe it from [here](https://www.devintro.com)
Enter fullscreen mode Exit fullscreen mode

Discussion (1)