Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 15, 2021 05:11 am GMT

Beginner - Advanced / Top 40 JavaScript Methods You Must Know!!

JavaScript is a programming language used to create web pages and mobile apps. If you have been studying Javascript for so long and still it looks scary to you, probably you haven't learnt these methods yet. This article is for all javascript developers at any level. If you are looking for a specific method, feel free to jump and skip others. If you are familiar with javascript, I recommend you to read ES6 The modern Javascript to explore more about JS.

  1. Array
  2. String
  3. Objects
  4. Numbers
  5. ES6

If you are already familiar with the definition of the above topics, feel free to explore their methods only.

Array

You may know that a variable can store only a value at a time, for example
var student = "jack", this is totally fine and we may use it many times while building a project, however, sometimes it is required to collect many values in a single variable like a list of students names, this is where we can use the Array concept.
Array is a single variable that store a list of values and each element is specified by a single index.

Array methods:

  • pop()

The pop() method removes the last element of an array.

var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); students.pop(); console.log(students)
Output: [ 'Jack', 'James', 'Robert', 'John' ][ 'Jack', 'James', 'Robert' ]
  • shift()

The shift() method removes the first element from an array.

 var students = [ 'Jack', 'James', 'Robert', 'John'];   console.log(students);   students.shift();   console.log(students)
Output:[ 'Jack', 'James', 'Robert', 'John' ][ 'James', 'Robert', 'John' ]
  • push()

The push() method adds one or more elements to the end of an array.

 var students = [ 'Jack', 'James', 'Robert', 'John'];   console.log(students);   students.push('Zahab', 'Kakar');   console.log(students)
Output: [ 'Jack', 'James', 'Robert', 'John' ][ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]
  • unshift()

The unshift method adds one or more elements to the beginning of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];   console.log(students);   students.unshift('Zahab', 'Kakar');   console.log(students);
Output:[ 'Jack', 'James', 'Robert', 'John' ][ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]
  • length

The length returns the number of elements in an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];   console.log(students);var length = students.length;   console.log(length)
[ 'Jack', 'James', 'Robert', 'John' ]4
  • splice()

The splice() method is used to add new elements to an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];   console.log(students);students.splice(2, 1, "Zahab", "Kakar");  console.log(students);
Output:[ 'Jack', 'James', 'Robert', 'John' ][ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

As we said before, this method is used to add elements into an array, however, we must indicate that where the new elements should be added. In the above example, 2 indicates the index number where the new elements should be placed and 1 shows the number of elements that should be deleted, as we mentioned 1 element should be deleted, we do not have the 'Robert' in the second array.

  • concat()

The contact method is used to creates a new array by concatenating or merging existing arrays.

var students = [ 'Jack', 'James', 'Rober', 'John'];   console.log(students);var myFriends = ['Jennifer','Mary','Patricia']  console.log(myFriends);  var allNames =  students.concat(myFriends);    console.log(allNames)
Output:[ 'Jack', 'James', 'Rober', 'John' ][ 'Jennifer', 'Mary', 'Patricia' ][ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]
  • slice()
  1. This method slices out a part of an array starting from mentioned array element index.
  2. Slice can have two arguments, which indicate the starting and up to (but not including) the end argument.
  3. This method also accept negative numbers.
var students = [ 'Jack', 'James', 'Rober', 'John'];   console.log(students); var newStudent  = students.slice(3);    console.log(newStudent);
Output:[ 'Jack', 'James', 'Rober', 'John' ][ 'John' ]
var students = [ 'Jack', 'James', 'Rober', 'John'];   console.log(students); var newStudent  = students.slice(1,3);    console.log(newStudent);
Output:[ 'Jack', 'James', 'Rober', 'John' ][ 'James', 'Rober' ]
var students = [ 'Jack', 'James', 'Rober', 'John'];   console.log(students); var newStudent  = students.slice(-1);    console.log(newStudent);
[ 'Jack', 'James', 'Rober', 'John' ][ 'John' ]

String

A JavaScript string stores a series of characters or a string is a collection of characters. A string can be any text inside double or single quotes.

  • toUpperCase()

The toUpperCase method is used to convert a string to upper case.

var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." var newStr = str.toUpperCase() console.log(newStr)
Output: LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY.
  • toLowerCase()

The to Lowercase is used to convert a string to lower case.

var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. " var newStr = str.toLowerCase() console.log(newStr)
Output:lorem ipsum is simply dummy text of the printing and typesetting industry.
  • slice()

This method is used to return the sliced part of a string, it takes one or two arguments that indicate the initial and end of the slice. The arguments can also be negative.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"var newStr = str.slice(-8, -1)console.log(newStr);
Output:industr
  • substring()

This method is used to return the sliced part of a string, however, it doesn't accept negative numbers as an argument.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"var newStr = str.substring(1, 6)console.log(newStr);
Output:orem
  • substr()

This method is similar to slice, however, the second parameter indicates the length of the part that should be extracted.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"var newStr = str.substr(8, 13)console.log(newStr);
Output:sum is simply
  • replace()

The replace method is used to replace a part of a string with another string.
This method is case sensitive.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"var newStr = str.replace("is", "are")console.log(newStr);
Output:lorem ipsum are simply dummy text of the printing and typesetting industry
  • concat()

This method is used to concatenate two or more strings.

var str1 = "Java";var str2 = "Script";var str = str1.concat(str2);console.log(str)
Output:JavaScript
  • trim()

This method is used to remove the spaces from both sides of the string.

var str1 = "       JavaScript        ";str2 = str1.trim();console.log(str2);
Output:JavaScript
  • split()

The split is used to convert a string to an array.

var str = "JavaScript, is, nice"var newStr = str.split(",")console.log(newStr[0]);
Output:JavaScript
  • charCodeAt

The charCodeAt returns the unicode of the character at a specified index in a string.

var str = "JavaScript is nice"var newStr = str.charCodeAt(str[1])console.log(newStr);
Output:74
  • charAt()

This method returns the character of a specific index in a string.

var str = "JavaScript is nice"var newStr = str.charAt(1)console.log(newStr);
Output:a
  • padStart

This method is used to add padding at the starting of a string.

var str = "15"var newStr = str.padStart(4, "3")console.log(newStr);
Output:3315
  • padEnd

It adds padding at the end of the string.

var str = "15"var newStr = str.padEnd(4, "3")console.log(newStr);
Output:1533
  • length

This method is used to return the length of a string.

var str = "JavaScript is nice."var newStr = str.lengthconsole.log(newStr);
Output:19

Objects

The Object is the JavaScript data type. It is used to store various keyed collections and each key can have a value.

  • keys()

This method returns the keys of an object.

const object1 = {  name: 'John',  age: 20,};console.log(Object.keys(object1));
Output:[ 'name', 'age' ]
  • values()

This method returns the values of an object.

const object1 = {  name: 'John',  age: 20,};console.log(Object.values(object1));
Output:[ 'John', 20 ]
  • create()

This method is used to create an new object from existing object.

const person = {  name: "John",  introduction: function() {    console.log(`My name is ${this.name}`);  }};const me = Object.create(person);me.name = 'Robert'; me.introduction();
Output:My name is Robert
  • freeze()

The Object.freeze() method freezes an object. This method will allow an object to be changed, freezing an object prevents changing, for example, adding new properties to it, removing existing properties from it.

const person = {  name: "John",};Object.freeze(person);person.name = "Robert";console.log(person.name);
Output:John
  • assign()

This method is used to copy the properties of one object to another object.

const person = {  name: "John",  age : 20};const obj = {  ishuman : true}Object.assign(person, obj);console.log(person);
Output:{ name: 'John', age: 20, ishuman: true }

Numbers

The number is the numeric data type of Javascript that stores a normal integer, floating-point values.

  • toFixed()

This method writes the number with a specified number of decimals and return its value as a string.

var x = 9.656;var newX = x.toFixed(0);console.log(newX)var newX = x.toFixed(2); console.log(newX)var newX = x.toFixed(4);  console.log(newX)var newX = x.toFixed(6);  console.log(newX)console.log(typeof(newX))
Output:109.669.65609.656000string
  • toPrecision()

This method is used to convert a number to a specified precision and return its value as a string.

var x = 9.656;var newX = x.toPrecision(2);console.log(newX)var newX = x.toPrecision(4);  console.log(newX)var newX = x.toPrecision(6);  console.log(newX)console.log(typeof(newX))
Output:9.79.6569.65600string
  • parseFloat()

This method converts the function argument to a string first and returns a floating-point number.

function addition(r) {  return parseFloat(r) * 2.0;}console.log(addition(2))console.log(addition("2"))console.log(addition("3.3"))
outPut:446.6
  • Number()

This method is used to convert the value of other data types to numbers.

var x = true;console.log(Number(x))var x = false;console.log(Number(x))var x = "999";console.log(Number(x))
10999
  • parseInt()

This method converts the function argument to a string first and returns an integer.

function addition(r) {  return parseInt(r) * 2.0;}console.log(addition(2))console.log(addition("2"))console.log(addition("3.3"))
Output:446

ES6

ES6 introduced many important methods in javascript that we will discuss in this article.
If you don't know the ES6 yet, I recommend you to have a look at this article because, in the below paragraphs, we used a few topics which might look tough, however, they include their definition and example.

  • map()

This method takes an array, and performs a particular function on each of the elements of the array, and returns a new array.

var arr=[2.1,3.5,4.7]; var result= arr.map((num) => 2*num );  console.log(result)
Output:[ 4.2, 7, 9.4 ]
  • every()

This method is used to check whether elements in a given array satisfy a particular given condition or not. It returns true if all of the array elements satisfy the condition, otherwise, it return false

const ages = [32, 33, 16, 40];function checkAge(age) {  return age > 18;}console.log(ages.every(checkAge))
Output:false
  • includes()

This method is used to check a particular element exists in an array or not. it returns true if the element includes in the array.

const ages = [32, 33, 16, 40];console.log(ages.includes(33))
Output:true
  • forof iterator

The for ...of creates a loop over object and array.

const ages = [33, 32, 16];for (const element of ages) {  console.log(element + "b");}
Output:33b32b16b
  • Spread operator

The spread operator is used to )take an array and expands it into individual elements. The ... indicates the spread operator.

const ages = [33, 32, 16];console.log(...ages)
Output:33 32 16
  • filter()

This method creates a new array with all elements that pass the provided condition.

const ages = [33, 32, 16];console.log(ages.filter((age)=> age>20))
Output:[ 33, 32 ]
  • reduce()

This method is used to reduces an array to a value.

const ages = [33, 32, 16];const reducer = (first, second) => first + second;console.log(ages.reduce(reducer))
Output:81

That's all for now.
Thanks for reading, I hope you found this article useful.

Feel free to connect with me on Twitter :)


Original Link: https://dev.to/zahab/top-40-javascript-methods-you-must-know-fj5

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To