Basic’s of JavaScript

The most commonly used programming language is JavaScript. According to Stack Overflow, Nearly 70% of professional developer use this technology. Over 97% of websites use it for client-side web page. Today I am going to introduce you with some of its core concepts. Let’s get started.

What is JavaScript?

It is a multi-paradigm, dynamic language with types, operators, methods, objects and a tons of things to play with. Today we will look at some JavaScript Types, Number and String.

In JavaScript Number values are not real integers, let’s see an example,

console.log(3 / 2); // 1.5, not 1

console.log(Math.floor(3 / 2)); // 1

In this example, we can see apparently the integers in fact is float, in second line I used Math function which is a built-in object of JavaScript. Using floor function, rounded up the value of (3/2).

On the Contrary, String is representing Character, Unicode Characters.

console.log('Hello World');             // Hello World

Let’s dig deep into, Number Types, in JS arithmetic operations like addition, subtraction, multiplication are supported, here is a sneak peak of this,

console.log(3 + 2);             // 5console.log(3 - 2);             // 1console.log(3 * 2);             // 6console.log(3 / 2);             // 1.5console.log(3 % 2);             // 1

Here we can easily understand all the operations except the last one, which is kind of unknown to us, what it is actually? “%” Operator is called modulus operator which gives us the remainder. Now, let’s get back into the last line, if 3 is divided by 2, the remainder is 1.

Let’s look at some functions,

parseInt(), when we have to convert a given string or character into number, we use parseInt(), which is a pre-built function of JavaScript.

parseInt('123', 10); // 123parseInt('F', 16); // 15parseInt('17', 8); // 15parseInt('Rafi', 10);  // NaN

Here, we can see we passed two parameter in this function, the first one is string, and the second one is radix. Here, a radix of 10 converts from a decimal number, 8 converts from octal, 16 from hexadecimal, and so on. In the last line of the example, it returns NaN, which means Not A Number, because its quiet clear that the String Rafi is not a number of decimal type.

Now, let’s get into Nan (Not A Number)

It’s a special value, when parsing an string, If the string is non-numeric it’ll return NaN. There is a reliable built in function inNaN(), which helps us to test the values if there is non-numeric value.

Number.isNaN(NaN); // trueNumber.isNaN('javascript'); // falseNumber.isNaN('1'); // false

We can easily understand here that why the first line returns true, and in other case it shows false.

Let’s move into some Strings functions, look at the example of string declaration

'Rafi'.charAt(0);         // "R"'hello, guys'.replace('guys', 'rafi'); // "hello, rafi"'aman'.toUpperCase(); // "AMAN"

In this example we see three completely different functions which returns different sort of things, let’s try to work this out,

charAt(), charAt() is a pre-built functions as we go through like others, here a value is passes as a parameter, just look at the first line, 0 is passed in charAt(), which means return the 0 index of the String “Rafi”, and it returns the 0 index character R. let’s see another example of this function to make it clear,

'Barcelona'.charAt(1);    // "a"B a r c e l o n a
0 1 2 3 4 5 6 7 8
'Madrid'.charAt(3); // "r"M a d r i d
0 1 2 3 4 5

Here, the first line returns “a” because, the 2 index of the string is a, secondly the example gives a clear view about Index of String.

replace(), we can easily understand the action of this function by its name, it will replace a

certain string with another. Two parameters are passed, first one is the string to be replaced and the second one is strings to be replaced with.

'hello, guys'.replace('guys', 'rafi'); // "hello, rafi"

Next up is the last in our list, toUpperCase(), it returns the whole string into Upper Case.

'aman'.toUpperCase(); // "AMAN"

Now, let’s end this journey with some interesting topics about Array.

Wait, what is Array?

According to MDN, Array is a high-level, list like objects. In easy way, Array is basically a list. List of anything, It’s like shopping list, movie list.

let movies = ['Pulp Fiction', 'Schindler’s List'];let first = movies[0] //           Pulp Fiction

It is the basic example of creating an array, using third brackets. Here it is an array of strings. We are accessing the array using the index position.

Let’s do some fun, in the movie array what if we want to add another best movies of all time, so the question is how to add an item in an Array, right? Let’s look at the next example, where push() is used to do this.

let newMovie = movies.push('Forest Gump');// ["Pulp Fiction", "Schindler’s List", "Forest Gump"]

Wow, we can add an item into an Array, what if we wish to remove one?

let last = movies.pop() // remove Forest Gump (from the end)// ["Pulp Fiction", "Schindler’s List"]let first = fruits.shift() // remove Pulp Fiction from the front// ["Schindler’s List"]

In this two example, we can learn that if we want to remove an item from the end, we have to use pop() function, and if we want to remove from the beginning, we have to use shift() function.

Isn’t it really fun??

These are some basic core concepts of the widely used programming language JavaScript aka JS.

Happy Coding.

Learner | Enthusiastic | Noob Programmer