JavaScript Basic

Understanding basic concept of JavaScript

If you are experienced JavaScript developer or a beginner, everyone must know it for better understand JavaScript language. Many of all developer are write code, but few thing we can’t understand, just if code is running perfectly, we do that without understand code. Now we learn about some basic concept to understand better what we will write in JavaScript program.

1. null vs undefined

What is null? null means n value present in here. This means an empty value. If you declare a variable with null value, that means this variable has no value.

example: const variable = null;

What is undefined? Suppose you declare a variable and don’t give any value, if you console log that variable the result you show undefined. That means you declare something in JavaScript code and don’t give any value it return undefined. We get undefined in many way.

  • Suppose you declare function parameter and when you call the function if you do not pass any value the parameter will be undefined.
  • If you do not return anything from the function and try to console log that function it will be undefined.

example: function add(num1, mun2) {

console.log(num1 + num2); // 4

}

const addition = add(2, 2);

console.log(addition) // undefined

In this article we understand if we declare anything with null value, then it give null as output and if we only declare variable name without any value it give undefined.

2. == vs === in JavaScript

If I say in one word, the difference between == and === that, == check only one thing, only value, if values are equal it return true. On the other hand, === check two things, 1. type, 2. value. If the given conditions type and and value are equal then it return true. That means condition is true.

example:

  1. if(2 == ‘2’) {

console.log(‘Condition is true’);

} else {

console.log(‘Condition is false’);

}

Output: Condition is true.

That’s because == check only value and if the values are different typed, == convert one type into other type that you given, that means it convert two value into same type then compare with them and give result.

if (2 === ‘2’) it return false cause type are different. 1st value is Number type and 2nd value is String type.

3. Scope

Scope is very important in JavaScript. In JavaScript, if another function is declared a function and that child function is returned from parent function then child function create a block in which code inside the function will execute is called scope. Only single function also create it’s own scope to run and execute code.

example:

function timerWatch() {

return function () {

const counter = 1;

return counter ++;

}

}

const timer1 = timerWatch();

const timer2 = timerWatch();

console.log(timer1());

console.log(timer1());

console.log(timer1());

console.log(timer1());

output: 2, 3, 4, 5

console.log(timer2());

console.log(timer2());

console.log(timer2());

console.log(timer2());

output: 2, 3, 4, 5

4. Use an Object property for another object without code-repetition

In JavaScript object it is very common factor that in an object has a method that need another object to calculate or do something. In this case re-write same code for every object is very unexpected and un organized and it make code large and useless. Three different way that we can solve this problem.

  1. First of all we use bind() method to reuse same object property. it works like your friend have something that you take that for your need and use it and return him.

example:

const friend = {

name: ‘Rahim’,

career: ‘Android developer’,

salary: 30000,

actualSalary : function (amount, tax) {

this.salary = this.salary - amount - tax;

return this.salary;

}

}

const mySelf = {

name: ‘Tanvin’,

career: ‘Web developer’,

salary: 40000

}

const myActualSalary = friend.actualSalary.bind(mySelf);

console.log(myActualSalary(4500, 500));

output: {

name: ‘Tanvin’,

career: ‘Web developer’,

salary: 35000

}

2. You can directly call the object method for another object without bind this method with another object. We can use call() method to call directly the method.

example: From above example we take 2 object, friend and mySelf.

friend.actualSalary.call(mySelf, 4500, 500);

console.log(mySelf);

output: {

name: ‘Tanvin’,

career: ‘Web developer’,

salary: 35000

}

3. Third way is use apply() method. apply() and call() are almost same method. The difference is in call() method you pass all argument with coma, (example above) and in apply() method 1st argument is object name (this) and method arguments pass throw array. That’s the difference between call() and apply().

example: From above example we take 2 object, friend and mySelf.

friend.actualSalary.call(mySelf, [4500, 500]);

console.log(mySelf);

output: {

name: ‘Tanvin’,

career: ‘Web developer’,

salary: 35000

}

5. this

this keyword is very confusing keyword. In fact, junior developer can’t understand this keyword at first a long time. Even I am also suffer that.

Let’s try to clear this keyword for beginner so that everyone can understand this keyword.

this keyword value depend on which context inside you declare it. this keyword meaning same to this word meaning. Mainly it use into an object and a class. If this keyword use inside an object then this means the whole object.

example:

const hello = {

name: ‘Tanvin’,

salary: ‘20000’,

actualSalary: function(tax) {

return this.salary - tax; // In this case this.salary means the salary property of this hello object.

}

}

In class this keyword means same like that example. The interesting thing is if this keyword declare out side of object and class it call window object.

example :

function add(num1, num2) {

console.log(this);

return (num1 + num2);

}

add(2, 2)

//output: window{..}

In event handler you can also use this keyword.

example:

<p onclick= “ this.innerText = ‘You Clicked’ ”>This is a paragraph.</p>

if you click it the paragraph text change and show You Clicked. So what is happened..!? In this case this means event handler. Inside event handler we add text. For that when we clicked it it change to the event handler inner text that we give.

6. Event Loop

JavaScript code execute mainly based on event loop. When a function is executing it create event loop and store them in stack. Then execute from top of the stake synchronously and when executing complete stack then JavaScript take waiting list from queue and execute them asynchronously.

example:

function second (b) {

let a = 10;

return a +b + 11

}

function first(x) {

let y = 3;

return second (x * y);

}

console.log(first(7)) // returns 42

When calling first, a first frame is created containing first's arguments and local variables. When first calls second, a second frame is created and pushed on top of the first one containing second's arguments and local variables. When second returns, the top frame element is popped out of the stack (leaving only first's call frame). When first returns, the stack is empty.

7. Array

Array is most important for all programming language. In real life array mostly use.

Syntax: const arr = [];

In array it’s very common operation to remove duplicate element. Now we learn how to remove duplicate element from array.

example:

const numbers = [1, 2, 3, 4, 5, 6, 3, 4, 5, 6, 2, 1];

const uniqueNumber = [];

for(let i = 0; i < numbers.length; i++) {

const element = numbers[i];

const index = uniqueNumber.indexOf(element);

if(index == -1) {

uniqueNumber.push(element);

}

}

console.log(uniqueNumber); //output: [1, 2, 3, 4, 5, 6];

8. String

String is very common in programming world. Work with string is not so easy for beginners, So, I will try to give a basic knowledge about string. String is a combination of characters. Like array we can iterate string, find length, reverse them and so many operation we do in String. But as it’s not array so everything we can’t do in String like array.

Syntax: const str = ‘Hello’;

Let’s write a simple program for count how many word present in this string.

const speech = ‘Hello, I am Tanvin Ahmed. A junior web developer.’;

const count = 0;

for(let i = 0; i < speech.length; i++) {

const element = speech[i];

if(element == ‘ ’ && element[i-1] != ‘ ’) {

count++;

}

}

count++;

console.log(count) // 9

In this example I just iterate the string and separate them if there is any white space.

Now let’s reverse the string.

example:

const speech = ‘Hello, I am Tanvin Ahmed. A junior web developer.’

let reverse = ‘’;

for(let i = 0; i < speech.length; i++) {

const element = speech[i];

reverse = element + reverse;

}

console.log(reverse);

9. Recursive function

Recursive function means this function call itself conditionally. It’s very expensive process. It’s little bit slower process. In large application it’s better to ignore recursive function. Lets find factorial with recursive function.

example:

function factorial(n) {

if(n == 0) return 1 // because 0! = 1

} else return (n * factorial(n - 1));

In this example we see that though factorial() function have already a value from previous call, then we just multiply with n.

Explain: suppose n = 4; what is the factorial of 4? 1* 2* 3* 4. That means 3! * 4 or 4 * 3!. In else condition exactly same process. Factorial() function have already the value of 3!. For then I just multiply with next number.

10. Event bubble

When you clicked or run an event like ‘click’ It first go to the root(window object) of the project. Then Travers every parent element and then go to child to define exactly where the event is execute. When it define the event element then execute the event and the go to parent and if search for event. If there are also an event, it also execute and go to the parent, otherwise direct go to parent element and search event. When it reach the root(window object) it stop. It’s called event bubble. It’s like a loop. Like a bubble it go up.

Event bubble

In this diagram you can understand easily what is event bubble.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store