Javascript most useful inbuilt function that essential for every JS learner

7 min readNov 6, 2020

Undoubtly world one of the best programming languages is JavaScript in 2020. More specifically, If you are interested in web technology you have to grasp JavaScript first. So, without farther do, let’s begin.

String

chartAt(): It is a string method that basically returns a single character from the specific index. We know string representing the character at the specified index. Let’s focus on the example first.

const str = 'I love problem.';const index = 0;console.log('The character at index ' + index + ' is ' + str.charAt(index));// Output: "The character at index 4 is I"

Through the example, we see the variable of an index representing an integer between 0 and 1 less than the length of the string (str.length -1). So In sort, chartAt() is a method that returns a character.

concat(): We all know the word of concatenate. Its meaning is so easy, right. Actually, the string method of concat() works with concatenating of two string. It will be more clear after showing the example.

const str1 = 'Love';const str2 = 'You';console.log(str1.concat(' ', str2));// Output: "Love You"

Here, the concat() function concatenates the string arguments to the calling string and returns a new string. But the interesting thing is somehow if the arguments are not of the typed string, it converted to string values before concatenating.

includes(): This method determines one string may be found or not within another string. That’s why It returns only true or false and the syntax of the method is str.includes(searchString[, position])

const str = "The purpose of my lives is to be happy. Aren't You?";const word = 'happy';console.log(`The word "${word}" ${str.includes(word)? 'is' : 'is not'} in the sentence`);// Output: "The word "happy" is in the sentence"

Remember that, the method of includes() is case sensitive.

'Live is awesome'.includes('live') // returns false

Let’s play a game with you.

const sentence = 'I love you';console.log(sentence.includes('v', 3));console.log(sentence.includes('v', 4));console.log(sentence.includes('v', 5));

Guess this answer. Don’t worry, I am here to remove your all confusion. We know string length starts with 0 indexes. So, in ‘I’ to ‘v’, the total index is 4. So, the middle console returns true but what about 1st and 3rd console. Through the index, 3rd is definitely false. Here is the amazing part, what about the first console. Is it true or false?

Actually the answer is true. I know you have a little bit of doubt. why true? Basically, in this case, index 0 to 4 position is true, otherwise false.

endsWith(): It works whether a string ends with the characters of a specified string. This method also returns true or false and the syntax is str.endsWith(searchString[, length]).

const str = 'Stay Home';console.log(str.endsWith('Home')); // return trueconsole.log(str.endsWith('Stay')); // return falseconsole.log(str.endsWith('Stay', 4)); // return true

Keep in mind, this method is case-sensitive.

indexOf(): This method returns the index within the calling string of the specified value. If the value is not found then it returns -1.

'Hello Learner'.indexOf('') // returns 0'Hello Learner'.indexOf('Hello', 0) // returns 0'Hello Learner'.indexOf('Learner', 3) // returns 6'Hello Learner'.indexOf('Learner', 7) // returns -1

lastIndexOf(): Following the code, first.

'Stay at Home'.lastIndexOf('a'); // return 5'Stay at Home'.lastIndexOf('a', 3); // return 2'Stay at Home'.lastIndexOf('A'); // return -1

Here, initial one the lastIndexOf() method returns the index within the calling String object of the last occurrence of the specified value. The second one returns 2 because the fromIndex of the input string is 3. In that 0 to 3 position ‘a’ last index is 2 that why to return 2. Finally, the last one, this method behaves like a case-sensitive. If the passing argument is don’t match the input string then it returns -1.

Number

isNaN(): Before explaining this method we have to understand what is NaN in JavaScript. Joshua Claton on A Drip of JavaScript book writer said “ the special value NaN (meaning ‘not a number’) is used to represent the result of a mathematical calculation that cannot be represented as a meaningful number”

There are different ways you can get NaN in your JavaScript code.

Division of zero by zero
Dividing an infinity by an infinity
Multiplication of an infinity by a zero
Any operation in which NaN is an operand
Converting a non-numeric string or undefined into a number

let zeroOverZero = 0 / 0;console.log(zeroOverZero); // NaNlet divisionByZero = 12 / 0;console.log(divisionByZero); // Infinity

Note that in JavaScript, When division something by 0 returns Infinity. Here, 12/0 is the limit of 12/x as x approaches zero. On the other hand, 0/0 has no reasonable interpretation at all, that’s why the result is NaN.

Through the MDN Docs — NaN is a property of the global object. The initial value of NaN is Not-A-Number — the same as the value of Number.NaN. More important things the type of NaN is “number”. And interestingly NaN is unequal to every other value in JavaScript.

let justNaN = NaN; // or let justNaN = Number.NaNconsole.log(justNaN == NaN); // falseconsole.log(justNaN === NaN); // false

Simply, NaN, and only NaN, will compare unequal to itself. Lets discuss about isNaN(). Basically, this method has an implementation to check for NaN called Number.isNaN().

let willBeNaN = NaN;console.log(Number.isNaN(willBeNaN)); // truewillBeNaN = 1;console.log(Number.isNaN(willBeNaN)); // false

Here’s the some difference between isNaN() & Number.isNaN()

isNaN() will return true if the value is currently NaN, or if it is going to be NaN after it is coerced to a number. In other words, if it receives a value that can be coerced to a number, isNaN() will return false.
Number.isNaN() will return true only if the value is currently NaN.

parseFloat(): This is an inbuilt function in JavaScript which is used to accept the string and convert it into a floating-point number. Keep in your mind, If the string does not contain a numeral value or If the first character of the string is not a Number then it returns NaN.

console.log(parseFloat('100')); // 100console.log(parseFloat('2020@happiness')); // 2020console.log(parseFloat('happiness@2020')); // NaNconsole.log(parseFloat('8.2')); // 8.2console.log(parseFloat('27 04 2020')); // 27

parseInt(): This method used to accept the string, radix (the base in mathematical numeral systems) parameter, and convert it into an integer. Remember that the radix parameter is used to specify which numeral system to be used. For example

console.log(parseInt('20', 16)); // 32console.log(parseInt('11', 2)); // 3console.log(parseInt('8', 8)); // NaN

Note that, ‘8’ is a character that is not defined in the radix 8 numeral system therefore it returns NaN. Also, If the string does not contain a numeric value then it returns NaN.

console.log(parseInt('100')); // 100console.log(parseInt('2020@happiness')); // 2020console.log(parseInt('happiness@2020')); // NaNconsole.log(parseInt('8.2')); // 8console.log(parseInt('27 04 2020')); // 27

Math

abs(): Basically, this function is used to return the absolute value of a number.

console.log(Math.abs(-6)); // 6console.log(Math.abs(0)); // 0

sin(): This method returns a numeric value between -1 and 1, which represents the sine of the angle given in radians.

console.log(Math.sin(1)) // 0.8414709848078965console.log(Math.sin(Math.PI / 2)) // 1

exp(): This function used to return ex, where x is the argument, and e is Euler’s number, which is the base of the natural logarithms.

console.log(Math.exp(0)); // 1console.log(Math.exp(1)); // 2.718281828459 (approximately)

floor(): This method returns a number representing the largest integer less than or equal to the specified number.

console.log(Math.floor(4.95)); // 4console.log(Math.floor(-4.75)); // 5

log(): This function returns the natural logarithm (base e) of the given number. It is equivalent to ln(x) in mathematics. Note that, If the number is negative, NaN is returned.

Math.log(-1); // NanMath.log(0); // -InfinityMath.log(10); // 2.302585092994046

Object

Through the documentation of w3school, JavaScript objects are king. If you understand objects, you understand JavaScript. Simply, almost “everything” is an object. Such as,

Booleans can be objects (if defined with the new keyword)
Numbers can be objects (if defined with the new keyword)
Strings can be objects (if defined with the new keyword)
Dates are always objects
Maths are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are always objects

create(): This object method creates a new Object, using an existing object as the prototype of the newly created object.

const virus = {isHumanVirus: true,printIntroduction: function () {console.log(`The name of virus is ${this.name}. Is it human           virus? ${this.isHumanVirus}`);}};const coronaVirus = Object.create(virus);coronaVirus.name = 'Corona'; // "name" is a property set on "coronaVirus", but not on "virus"coronaVirus.isHumanVirus = true; // inherited properties can be overwrittencoronaVirus.printIntroduction();

Keep in your mind the keyword Object 1st letter ‘O’ must be in uppercase.

assign(): This method helps you to copy one or more source objects to a target object. It returns the target object.

const target = {name: 'Hero Alom', age: 28};const source = {name: 'Khan Helal', age: 22, profession: 'YouTuber'};const newTarget = Object.assign(target, source);console.log(target); // Object {name: 'Khan Helal', age: 22, profession: 'YouTuber'}console.log(newTarget); // Object {name: 'Khan Helal', age: 22, profession: 'YouTuber'}

I think after seeing this code, it’s clear to understand that the target Object is copied with source Object. That’s why the newTarget and target result is the same. But, If the syntax is like “Object.assign(source, target)” so guess, what about the new answer is!

freeze(): This function syntax is quite straightforward. It works on values, and more specifically, object values. It makes an object immutable so that you cannot change its properties. Like,

const happiness = {defination: 'comming soon',isTrue: true,change: {innerChange: 'Changeable'}};const frozenObject = Object.freeze(happiness);frozenObject.defination = 'YaY, Comming'; // Uncaught TypeErro Cause object is Freeze

Array

forEach(): This is a special Array function that provides once for each element of the array. The function may perform any kind of operation on the elements of the given array. The syntax of the function is,

const items = [1, 2, 3];const copy = [];items.forEach(function(item){copy.push(item);});console.log(copy); // Array [1, 2, 3]