Most Important Concept of JavaScript for Beginners

1. What is JavaScript ?

JavaScript is a client-side scripting language, even then a server-side language. It is an interpreted language and does not need compiler. JavaScript is a high-level programming language. It makes more efficient and easier for developers.

2. Truthy and Falsy value

When is declare a variable that has true value is called truthy and which is false is called falsy value. We can check what does it mean for variable to be truthy or falsy.

falsy values
1. false
2. null
3. undefined
4. 0
5. NaN
6. ‘’, “”, ``(Empty template string)

truthy values
1. true
2. {}
2. []
3. ‘true’ (no empty string)
4. ‘false’ (no empty string)
5. new Date() Date object
6. All numbers are truthy value (whether positive or negative)

3. Null vs Undefined

Null and Undefined is a misunderstood value. Null is an assignment value because i can assign it to a variable. And If we don’t assign a value It means a variable undefined. let’s see the example.

var basket;
console.log(basket); // Output is: undefined
console.log(typeof basket); // Output is: undefined

var basket = null;
console.log(basket); //Output is: null
console.log(typeof basket); //Output is: object

4. Double equal (==) and Triple equal (===)

Double equal and triple equal are the comparison operator. Double equal checks only the value not type but triple equal always check value and type.

var x = 5;
var y = ‘5’;

if(x == y){
console.log(‘condition is true’);
} else{
console.log(‘condition is false’)
}
//Output is: condition is true

Here double equal compare only value not type that’s why condition is true.

var x = 5;
var y = ‘5’;

if(x === y){
console.log(‘condition is true’);
} else{
console.log(‘condition is false’)
}
//Output is: condition is false

Here triple equal compare value and type that’s why condition is false.

5. Scope in JavaScript

When a variable works in the function that is scope or area under the function, can’t be access from outside. That’s why it is called block scope. let and const only works in the own scope. But when variables are declared outside of the function it is called global scope. When we declare in a var it can be works from anywhere. Let’s see a example.

var name2 = “football”;
let sports = () => {
let name1 = “cricket”;
console.log(`john’s favorite sports ${name1}`); //Output is: john’s favorite sports cricket
console.log(`Don’s favorite sports ${name2}`); //Output is: john’s favorite sports football
}
sports()
console.log(`john’s favorite sports ${name2}`); //Output is: john’s favorite sports football
console.log(`Don’s favorite sports ${name1}`); //Output is: ReferenceError name1 is not defined

6. Closure in JavaScript

When a function is called from another function, those are make a closed environment with a own area. And when we call the function, it is accessed in its own environment. Let’s try it on the code.

function count () {
let digit = 0;
return function () {
return ++ digit;
}
}
const result = count();
console.log(result()); //Output is: 1
console.log(result()); //Output is: 2
console.log(result()); //Output is: 3
const result2 = count();
console.log(result2()); //Output is: 1
console.log(result2()); //Output is: 2
console.log(result()); //Output is: 4

7. this Keyword

This keyword refers to an object and what are we using now. it run in which context, that is the value of this. let’s see the example

const singer1 = {
firstName: ‘jon’,
lastName: ‘kabir’,
fullName: function () {
console.log(this)
return this.firstName + “ “ + this.lastName;
}
}
singer1.fullName();

const singer2 = {
firstName: ‘ron’,
lastName: ‘kabir’
}
singer2.fullName = singer1.fullName;
singer2.fullName();

8. Window object

Window object such a things where JavaScript has running environment. When all variables and functions declared globally with the var keyword become the properties and methods of the window object.

9. What is DOM ?

JavaScript can access all elements in the webpage use in the Document Object Model (DOM). The browser in response to user input, thereby making the page interaction. The DOM model is created as a tree of objects like this.

DOM tree

10. Arrow Function

Arrow function is a new feature introduced in ES6 . Arrow function syntax is flexible, and you can pass multiple parameters. Arrow functions dramatically more concise from simple functions.