DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Top 11 things you should be know about  JavaScript
chayan999
chayan999

Posted on

Top 11 things you should be know about JavaScript

1.null vs undefined

undefined
undefined means, value of the variable is not defined. JavaScript has a global variable undefined whose value is "undefined" and typeof undefined is also "undefined". Remember, undefined is not a constant or a keyword. undefined is a type with exactly one value: undefined. Assigning a new value to it does not change the value of the type undefined.
8 Ways to get Undefined:

  • A declared variable without assigning any value to it.
  • Implicit returns of functions due to missing return statements.
  • Return statements that do not explicitly return anything.
  • Lookups of non-existent properties in an object.
  • Function parameters that have not passed.
  • Anything that has been set to the value of undefined.
  • Any expression in the form of void(expression)
  • The value of the global variable undefined

null

null means empty or non-existent value which is used by programmers to indicate β€œno value”. null is a primitive value and you can assign null to any variable. null is not an object, it is a primitive value. For example, you cannot add properties to it. Sometimes people wrongly assume that it is an object, because typeof null returns "object".

2.== Vs ===

The simplest way of saying that, == will not check types and === will check whether both sides are of same type. So, == pe to have both in same type and then do the comparison.
=== compares the types and values. Hence, if both sides are not same type, answer is always false. For example, if you are comparing two strings, they must have identical character sets. For other primitives (number, boolean) must share the same value.

Rule for implicit coercion: Comparison by using == does implicit type conversion under the hood. And rules for implicit coercion are as follows-

  • If both operands are same type use ===
  • undefined == null
  • If one operands is string another is number, convert string to number
  • If one is boolean and another is non-boolean, convert boolean to number and then perform comparison
  • While comparing a string or number to an object, try to convert the object to a primitive type and then try some to compare

3.True False

now I will discuss about which are true or false

  • 'False' It is true Because, it's a string. Only empty string is false

    • ' ' is true Because, it's not an empty string. There is a white space in it.
    • {} is true. It's an object. An object without any property is an object will be true.
    • []This is also truthy. It's an array object (array is child of object) is truthy.
    • '' Only string are also false
    • If any variable value Represent undefined value. then this undefine its also false
    • All Integer Value will be true but 0 is false.
    • If any variable will be undefine by default this value will be false.

4.This

At the time of execution of every function, JavaScript sets a property to the function called this which refer to the current execution context. this is always refer to an object and depends on how function is called. There are different cases where the value of this changing.

  • In the global context or inside a function this refers to the window object.
  • While executing a function in the context of an object, the object becomes the value of this
  • Inside a setTimeout function, the value of this is the window object.
  • If you use a constructor (by using new keyword) to create an object, the value of this will refer to the newly created object.
  • You can set the value of this to any arbitrary object by passing the object as the first parameter of bind, call or apply
  • For dom event handler, value of this would be the element that fired the event

5. Scope

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
In the JavaScript language there are two types of scopes:

  • Global Scope
  • Local Scope

6.Global Scope

// the scope is by default global
var name = 'Chayan';
Enter fullscreen mode Exit fullscreen mode

Variables inside the Global scope can be accessed and altered in any other scope.

var name = Chayan;

console.log(name); // logs Chayan

function logName() {
    console.log(name); // 'name' is accessible here and everywhere else
}

logName(); // logs Chayan
Enter fullscreen mode Exit fullscreen mode

7.Local Scope

Variables defined inside a function are in the local scope. And they have a different scope for every call of that function. This means that variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions.

8.Block Scope

Block statements like if and switch conditions or for and while loops, unlike functions, don't create a new scope. Variables defined inside of a block statement will remain in the scope they were already in.

if (true) {
    // this 'if' conditional block doesn't create a new scope
    var name = Chayan; // name is still in the global scope
}

console.log(name); // logs Chanyan
Enter fullscreen mode Exit fullscreen mode

9.Difference between bind, call and apply

The major cause of confusion between the call() and apply() methods is how to pass in the additional arguments besides this. And why do we have bind() anyway?
So let’s learn how to easily tell the three apart.
Apply()
apply(this [, [arg1, arg2,...]]): Calls a function with a provided this value. Further arguments are provided as a single array.

Way to remember: β€œApply accepts arguments as an Array” or β€œAA”

Call()
call(this [, arg1, arg2...]): Calls a function with a provided this. Further arguments are provided as a comma separated list

Ways to remember: β€œCall’s arguments are separated by commas” or β€œCC”.

Bind()
bind(this): Returns a new function whose this value is bound to the provided value.

Ways to remember: bind() is the only method out of the three that returns a new function altogether. It does not call the function.

10.JavaScript Closure

Closure is one of important concept in JavaScript. It is widely discussed and still confused concept. Let's understand what the closure is.
Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. Inner function can access variables and parameters of an outer function. Consider the following example.

function OuterFunction() { 
var outerVariable = 1;
 function InnerFunction() { 
alert(outerVariable); 
} 
InnerFunction();
 }
Enter fullscreen mode Exit fullscreen mode

In the example, InnerFunction() can access outerVariable.
Now, as per the definition above, InnerFunction() can access outerVariable even if it will be executed separately. Consider the following example.

 function OuterFunction() {
 var outerVariable = 100;
 function InnerFunction() {
 alert(outerVariable);
 }
 return InnerFunction;
 }
 var innerFunc = OuterFunction(); 
innerFunc(); // 100
Enter fullscreen mode Exit fullscreen mode

In the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

11.Encapsulation

Encapsulation means information hiding. It’s about hiding as much as possible of the object’s internal parts and exposing a minimal public interface.
The simplest and most elegant way to create encapsulation in JavaScript is using closures. A closure can be created as a function with private state. When creating many closures sharing the same private state, we create an object.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.