DEV Community

Cover image for Top 10 Must Know JavaScript Functions!
TheDailyTechTalk
TheDailyTechTalk

Posted on • Originally published at thedailytechtalk.com

Top 10 Must Know JavaScript Functions!

I recently started a new blog TheDailyTechTalk where I create free content. If you liked this post and would like to read more posts about JavaScript please check it out 🎉🎉
🥰

If you like what I write and want to support me, please follow me on Twitter to learn more about programming and similar topics ❤️❤️

Top 10 Must-Know JavaScript Functions

Please check out full article here

1 filter()

This function filters an array based on the condition you provide and it returns a new array which contains items which satisfy those conditions.

filter()

const temperatures = [10, 2, 30.5, 23, 41, 11.5, 3];

const coldDays = temperatures.filter(dayTemperature => {
    return dayTemperature < 20;
});

console.log("Total cold days in week were: " + coldDays.length); // 4
Enter fullscreen mode Exit fullscreen mode

2 map()

Function map() is a very simple, it loops over an array and convert each item into something else.

const readings = [10, 15, 22.5, 11, 21, 6.5, 93];
const correctedReadings = readings.map(reading => reading + 1.5);
console.log(correctedReadings); // gives [11.5, 16.5, 24, 12.5, 22.5, 8, 94.5]
Enter fullscreen mode Exit fullscreen mode

3 some()

some() is very similar to filter() , but some() returns boolean instead.

const animals = [
    {
        name: 'Dog',
        age: 2
    },

    {
        name: 'Cat',
        age: 8
    },

     {
        name: 'Sloth',
        age: 6
    },
];

if(animals.some(animal => {
    return animal.age > 4
})) {
    console.log("Found some animals!")
}
Enter fullscreen mode Exit fullscreen mode

4 every()

every() is also very similar to some() , but every() true only if every single element in array satisfy our condition.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));   // true
Enter fullscreen mode Exit fullscreen mode

5 shift()

The shift() method removes the first element from an array and returns removed element. This method changes the length of the array.

const items = ['meat', 'carrot', 'ham', 'bread', 'fish'];
items.shift()
console.log(items); // ['carrot', 'ham', 'bread', 'fish']
Enter fullscreen mode Exit fullscreen mode

6 unshift()

Just like shift() method removes the first element from an array unshift() adds it. This method changes the length of the array and returns the new length of the array as result.

const items = ['milk', 'fish'];
items.unshift('cookie')
console.log(items); // ['cookie', 'milk', 'fish']
Enter fullscreen mode Exit fullscreen mode

7 slice()

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

let message = "The quick brown fox jumps over the lazy dog";
let startIndex = message.indexOf('brown');
let endIndex = message.indexOf('jumps');
let newMessage = message.slice(startIndex, endIndex);
console.log(newMessage); // "brown fox "
Enter fullscreen mode Exit fullscreen mode

8 splice()

splice() below start at index 2 (the third place, count starts from 0!! ) of the array, and remove one item.
In our array that would mean that "rabbit" got removed. splice() will return new array as result.

const animals = ['dog', 'cat', 'rabbit', 'shark', 'sloth'];
animals.splice(2, 1);
console.log(animals); // ["dog", "cat", "shark", "sloth"]
Enter fullscreen mode Exit fullscreen mode

9 includes()

includes() will check every item in the array, and check if any of them includes our condition. It will return boolean.

const array1 = [1, 2, 3];

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

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

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

console.log(pets.includes('at'));  //  false
Enter fullscreen mode Exit fullscreen mode

10 reverse()

reverse() method reverses an array. Be careful since reverse() is destructive which means it changes the original array.

const array1 = ['one', 'two', 'three', 'four'];
console.log(array1);  //  ["one", "two", "three", "four"]

const reversed = array1.reverse();
console.log(reversed);  //  ["four", "three", "two", "one"]
Enter fullscreen mode Exit fullscreen mode

I recently started a new blog TheDailyTechTalk where I create free content. If you liked this post and would like to read more posts about JavaScript please check it out 🎉🎉
🥰

If you like what I write and want to support me, please follow me on Twitter to learn more about programming and similar topics ❤️❤️

Discussion (5)

Collapse
lukeshiru profile image
LUKESHIRU

Consider that Array.prototype.shift, Array.prototype.unshift, Array.prototype.splice and Array.prototype.reverse change the original array while the others return a new one. So this three methods should be avoided (you can check which methods change the original array here).

Here are some alternatives for each of them:

// Instead of Array.prototype.shift:
// If you want to get the first element...
const firstElement = array[0];
// If you want to get the array without the first element...
const skipFirst = array.slice(1);

// Instead of Array.prototype.unshift...
const arrayWithNewFirst1 = ["new first", ...array];
// or
const arrayWithNewFirst2 = ["new first"].concat(array);

// Instead of Array.prototype.splice...
const skipIndex2 = array.filter((_item, index) => index !== 2);

// For Array.prototype.reverse, you can make a copy first...
const reverse1 = [...array].reverse();
// or
const reverse2 = array.slice().reverse();
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
tohka200213 profile image
tohka20-0213

Thanks for sharing your idea and the link is very useful.

Collapse
pengeszikra profile image
Peter Vivo
[...list].reverse();
Enter fullscreen mode Exit fullscreen mode
Collapse
rborajov profile image
Roschek Borajov

This is resourceful and awesome

Collapse
thedailytechtalk profile image
TheDailyTechTalk Author

Thank you :)