10 Main Core Concept Of JavaScript For Beginner.

Payal Paul
7 min readNov 2, 2020

--

Let’s learn some new JS you’ve never heard of

You probably already know a lot about JavaScript from the internet, especially MDN Web Docs. But that knowledge of yours has just been rubbed a little further, where you will learn about something unknown. Because JavaScript is a confusing language of the whole world.

So let’s turn around a bit.

1. String

In JavaScript, the textual data is stored as strings. There is no separate type for a single character. Simply put, a string is a collection of characters.

Quotes

Let’s recall the kinds of quotes.

Strings can be enclosed within either single quotes, double quotes, or backticks:

Single and double quotes are essentially the same. Backticks, however, allow us to embed any expression into the string, by wrapping it in ${…}.

2. String toLowerCase() & toUpperCase() Method

The JavaScript string toLowerCase() method is used to convert the string into a lowercase letter. This method doesn’t make any change in the original string.

The toLowerCase() the method returns the calling string value converted to lower case.

The JavaScript string toUpperCase() method is used to convert the string into an uppercase letter. This method doesn’t make any change in the original string.

The toUpperCase() the method returns the calling string value converted to uppercase.

3. JavaScript String charAt() & Concate Method

The JavaScript string charAt() method is used to find out a char value present at the specified index in a string.

The index number starts from 0 and goes to n-1, where n is the length of the string. The index value can’t be a negative, greater than or equal to the length of the string.

JavaScript String charAt() example to print all characters of a string

Java string Concat() method concatenates multiple strings. This method appends the specified string at the end of the given string and returns the combined string. We can use the Concat() method to join more than one strings.

The value of s1 would be BeginnersBook.com after the execution of the above statement.

4. Searching For a substring(), indexOf() & lastIndexOf()

Method substring() returns a new string that is a substring of a given string. Java String substring() method is used to get the substring of a given string based on the passed indexes. There are two variants of this method. In this guide, we will see how to use this method with the help of examples.

This method returns a string that is part of the given string. If the length is 0 or a negative value then it returns an empty string.

The JavaScript string indexOf() method is used to search the position of a particular character or string in a sequence of given char values. This method is case-sensitive.

The index position of the first character in a string always starts with zero. If an element is not present in a string, it returns -1.

The optional second parameter allows us to search starting from the given position.

There is also a similar method str.lastIndexOf() that searches from the end of a string to its beginning.

It would list the occurrences in the reverse order.

You can change the position where the search will start in the string by providing a start_position parameter to the lastIndexOf() method.

5. Array

In JavaScript, an array is a single variable that is used to store different elements. It is often used when we want to store a list of elements and access them by a single variable. Unlike most languages where the array is a reference to the multiple variables, in JavaScript array is a single variable that stores multiple elements.

Syntax

Use the following syntax to create an Array object −

var fruits = new Array( "apple", "orange", "mango" );

The Array parameter is a list of strings or integers. When you specify a single numeric parameter with the Array constructor, you specify the initial length of the array. The maximum length allowed for an array is 4,294,967,295.

You can create an array by simply assigning values as follows −

var fruits = [ "apple", "orange", "mango" ];

6. Array filter, find & findIndex

The JavaScript array filter() method filter and extract the element of an array that satisfying the provided condition. It doesn’t change the original array.

The filter() the method creates a new array with all elements that pass the test implemented by the provided function.

The JavaScript array find() method returns the first element of the given array that satisfies the provided function condition.

The JavaScript array findIndex() method returns the index of the first element of the given array that satisfies the provided function condition. It returns -1 if no element satisfies the condition.

7. Array pop, push & reduce

The JavaScript array pop() method removes the last element from the given array and returns that element. This method changes the length of the original array.

Extracts the last element of the array and returns it

The JavaScript array push() method adds one or more elements to the end of the given array. This method changes the length of the original array.

Append the element to the end of the array

The reduce() method reduces the given array into a single value by executing a reducer function. The user implements the reducer function that works on every element present in the array.

8. Array slice, sort & splice

The JavaScript array slice() method extracts the part of the given array and returns it. This method doesn’t change the original array.

start — It is optional. It represents the index from where the method starts to extract the elements.

The JavaScript array sort() method is used to arrange the array elements in some order. By default, the sort() method follows the ascending order.

The JavaScript array splice() method is used to add/remove the elements to/from the existing array. It returns the removed elements from an array. The splice() method also modifies the original array.

9. JavaScript Number

The Number object represents the numerical date, either integers or floating-point numbers. In general, you do not need to worry about Number objects because the browser automatically converts number literals to instances of the number class.

isNaN(value) converts its argument to a number and then tests it for being NaN

But do we need this function? Can’t we just use the comparison === NaN? Sorry, but the answer is no. The value NaN is unique in that it does not equal anything, including itself:

alert( NaN === NaN ); // false

The JavaScript number parseFloat() method parses a string argument and converts it into a floating-point number. It returns NaN if the first character of the given value cannot be converted to a number.

The JavaScript number parseInt() method parses a string argument and converts it into an integer value. With a string argument, we can also provide a radix argument to specify the type of numeral system to be used.

10. JavaScript Math

The math object provides you with properties and methods for mathematical constants and functions. Unlike other global objects, Math is not a constructor. All the properties and methods of Math are static and can be called by using Math as an object without creating it.

The JavaScript math abs() method returns an absolute value of a given number. The abs() is a static method of Math.

The Math.abs() the method is used to calculate the absolute (positive) value of a number. Therefore, -1 is returned as 1, -5 as 5, and so on. Here is an example:

The JavaScript math random() method returns the random number between 0 (inclusive) and 1 (exclusive).

The JavaScript math ceil() method increases the given number up to the closest integer value and returns it. If the given number is already an integer, the ceil() method returns it directly.

The JavaScript math floor() method decreases the given number up to the closest integer value and returns it. If the given number is already an integer, the floor() method returns it directly.

Conclusion

We have now learned the Core Concept of what can accomplish. If you feel inspired to build on these examples. Cheers!

--

--

Payal Paul
Payal Paul

Written by Payal Paul

I’m A Professional MERN Stack Web Developer & Cyber Security Specialist that will assist me in developing, improving, and obtaining the necessary skills.

No responses yet