Most useful JavaScript methods You must need to know

In this article, we will focus on some of the important JavaScript methods. The sections will be broken down by module.

Javascript String Methods

1. charAt()

const name = "Thor"
console.log(name.charAt(0))
//T

In another way, we also find a specific character in our string. This method is like an array value finding.

const movie = "Thor"
console.log(movie[0])
//T

2. concat()

const fristName = "Jon";
const lastName = "Doe";
console.log(fristName.concat(" ",lastName))

3.includes()

Note: The includes methods are case-sensitive.

const country = "Bangladesh is my Born country"
console.log(country.includes("Bangladesh")) //true
console.log(country.includes("bangladesh")) //false

4. endsWith()

Note: The endsWith method is also case-sensitive.

const dialog = "I will must tech you who am i?"
console.log(dialog.endsWith("i?")) //true
console.log(dialog.endsWith("i")) //false

5.indexOf()

const para = 'The quick brown fox';
console.log(para.indexOf('quick')) //4
console.log(para.indexOf('Jump')) //-1

6.lastIndexOf()

Note: The lastIndexOf method also is case-sensitive.

const list = ["Mango", "Apple", "Mango"];
list.lastIndexOf("Mango"); //2

7.replace()

const grettings = "Welcome to Dhaka";
grettings.replace("Dhaka","Noakkhali")
//"Welcome to Noakkhali"

8.splice()

const sing = "I am a disco dancer"
console.log(sing.slice(0,5))// I am

9.split()

const ask = "How are you?"
const res = ask.split(" ") //["How", "are", "you?"]

10.startsWith()

const myName = "I am Jobayer Hossain"
myName.startsWith("I")//true
myName.startsWith("am")//false

11.substr()

const helloMsg = "Hello How are you?"
const res = helloMsg.substr(1,4) //"ello"

12.toLowerCase()

const str1 = "Hellow World"
const str1Res = str1.toLowerCase()//"hellow world"

Note: The toLowerCase() the function doesn't accept any parameters. and does not changers the original string.

13.toUpperCase()

const str2 = "Hellow World"
const str2Res = str2.toUpperCase() //"HELLOW WORLD"

Note: The toUpperCase() method does not modify the original string.

14.trim()

const str3 = "   Hellow   World! "
const str3Res = str3.trim() //"Hellow World!"

Note: The trim() method does not modify the initial string, and it does not accept any parameters.

15.trimStart()

const str4 = "       Hello World!     ";
const str4Res = str4.trimStart() // "Hello World! "

16.trimEnd()

const str5 = "    HelloWorld    ";
const str5Res = str5.trimEnd() // " HelloWorld"

Javascript Number Methods

1.isNaN()

console.log(isNaN(123)) // false
console.log(isNaN(true)) // false
console.log(isNaN(true)) // falseconsole.log(isNaN("Hello")) // true
console.log(isNaN("2020/4/13")) // true
console.log(isNaN(undefined)) // true
console.log(isNaN(NaN)) // true

2.parseFloat()

console.log(parseFloat("40")) //40
console.log(parseFloat(" 50.55 ")) //50.55
console.log(parseFloat("My ID 40")) //NaN

ref:w3Schools

3.parseInt()

console.log(parseInt("10")) //10
console.log(parseInt(" 30.90")) //30
console.log(parseInt("36 10 20")) //36
console.log(parseInt("ID 404")) // NaN

JavaScript Array methods

1.concat()

const marvelHeros =  ["Thor","Ant-man"]
const dcHeros = ["WonderWoman","Bat Man"]
const joniArrays = marvelHeros.concat(dcHeros)
//["Thor","Ant-man", "WonderWoman","Bat Man"]

2.every()

const agesArray = [32,42,53]
const hasAudlt = agesArray.every(age=> age < 18) //false

3.filter()

const numberArrays = [5,9,12,22,53]
const filterdLessThen20 = numberArrays.filter(num => num < 20)
//[5, 9, 12]

4.find()

const districts = ["comilla","Noakhalli","Lakshimipur"]
const myDistrict = districts.find((district) => {
return district == "Lakshimipur"
})
//"Lakshimipur"

5.findIndex()

const array1 = [5, 12, 8, 230, 44];
const lessThen15 = array1.findIndex(num => num > 15) //3

6.forEach()

const friendsArray = ["Jon", "Doyt", "cherry"];
const friendsName = friendsArray.forEach(name => console.log(name))
// "Jon"
// "Doyt"
// "cherry"

7.indexOf()

const bestFriends = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(bestFriends.indexOf("bison"))

8.join()

const arrays3 = ['Fire', 'Air', 'Water'];
console.log(arrays3.join())
// "Fire,Air,Water"

9.map()

let numsArray = [1, 2, 3, 4];const singleValue = numsArray.map((num) => num + 1);console.log(singleValue);//[ 2, 3, 4, 5 ]

10.lastIndexOf()

const movies = ["Avangers", "Thor","Ant Man", "Thor"];console.log(movies.lastIndexOf("Thor"));//3

11.pop()

const movies = ["Avangers", "Thor", "AntMan", "SpiderMan"];
// ["Avangers", "Thor", "AntMan", "SpiderMan"];movies.pop();
//[ 'Avangers', 'Thor', 'AntMan' ]

12.push()

const movies = ["Avengers", "AntMan", "SpiderMan"];
// ["Avengers", "AntMan", "SpiderMan"];movies.push("Thor");
// ["Avengers", "AntMan", "SpiderMan", "Thor"];

13.reduce()

const number = [1, 2, 3, 4];const sum = number.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});console.log(sum); //10

14.reverse()

const number = [1, 2, 3, 4];const reversed = number.reverse();console.log(reversed); //[ 4, 3, 2, 1 ]

15.shift()

const friends = ["Nahid", "Sagor", "Jahid"];friends.shift();console.log(friends); //[ 'Sagor', 'Jahid' ]

16.slice()

const candidate = ["Sagor", "Jahid", "JonDoe"];const selectedCandidate = candidate.slice(0, 2);console.log(selectedCandidate); //[ 'Sagor', 'Jahid' ]

17.sort()

let numbers = [4, 2, 5, 1, 3];numbers.sort((a, b) => a - b);console.log(numbers); //[ 1, 2, 3, 4, 5 ]

18.splice()

const months = ["Jan", "March", "April", "June"];months.splice(3, 0, "Feb");console.log(months); //[ 'Jan', 'March', 'April', 'Feb', 'June' ]

19.unshift()

let numbers = [2, 3, 4];numbers.unshift(1);console.log(numbers); //[ 1, 2, 3, 4 ]

JavaScript Object methods

1.Object.assign()

const person = { name: "Jobayer Hossain", id: 23 };const address = { city: "Dhaka", age: 35 };const info = Object.assign(person, address);console.log(info);//{ name: 'Jobayer Hossain', id: 23, city: 'Dhaka', age: 35 }

2.Object.freeze()

const person = {
name: "Jon Doe",
designation: "Front-End Developer",
skill: {
design: "Photoshop",
codeing: "Javascript",
},};Object.freeze(person);
person.name = "Jobayer Hossain";
person.skill.design = "Figma";
console.log(person);//{
name: 'Jon Doe',
designation: 'Front-End Developer',
skill: { design: 'Figma', codeing: 'Javascript' }
}

3.Object.keys()

const person = {
name: "Jobayer Hossain",
age: 21,
role: "Front-End Developer",
skill: "HTML CSS JS React",
};const ObjKeys = Object.keys(person);
console.log(ObjKeys);
//[ 'name', 'age', 'role', 'skill' ]

4.Object.values()

const person = {
name: "Jobayer Hossain",
age: 21,
role: "Front-End Developer",
skill: "HTML CSS JS React",
};const ObjValue = Object.values(person);
console.log(ObjValue);//['Jobayer Hossain',21,'Front-End Developer','HTML CSS JS React']

JavaScript Math

1.Math.abs()

console.log(Math.abs(5 - 2)); //3
console.log(Math.abs(5.9 - 5.1)); //0.8000000000000007

2.Math.sin()

console.log(Math.sin(1)); //0.8414709848078965console.log(Math.sin(-1)); //-0.8414709848078965console.log(Math.sin(0)); //0

2.Math.cos()

const getRadius = (a, b) => {return Math.cos(a) * b;};console.log(getRadius(1, 10)); //5.403023058681398

3. Math.exp()

console.log(Math.exp(5)); //148.4131591025766console.log(Math.exp(6)); //148.4131591025766

4.Math.floor()

console.log(Math.floor(5.0524352345)); //5

5.Math.log()

console.log(Math.log(4)); //1.3862943611198906

6.Math.min()

console.log(Math.min(5, 10)); //5console.log(Math.min(87, 210)); //87

7.Math.max()

console.log(Math.max(5, 10)); //10console.log(Math.max(87, 210)); //210

8.Math.random()

console.log(Math.random()); //0.9671211951447136console.log(Math.random()); //0.8787034350662186console.log(Math.random()); //0.2373625260886849

9.Math.round()

console.log(Math.round(2.9)); // 3console.log(Math.round(2.5)); // 3console.log(Math.round(2.4)); // 2

10.Math.sqrt()

console.log(Math.sqrt(16)); //4console.log(Math.sqrt(81)); //9

Become a world’s no 1 full-stack web developer. That’s why I am learning and mastering web development. I will not stop until I become the Web Development Hero.