Some Most Important Topics Of JavaScript
Scope
There are two types of scope- Local Scope and Global Scope.
If variables are declared inside a function or block, then we will say that their scope is local and can only be accessible inside this function/block. And those variables are called Local variable.
Others all the variables/functions (outside of a function or block) are in the global scope and they can be accessed anywhere in the code. And they are called global variables.
//global scope
var age = 22; //global variable
var price, stock; //declared in global scopefunction
getItem(x) {
//local scope
x = 3; //local variable
var num = 123; //local variable
price = 55; //global variable as declared without var
}
Hoisting
When any variable or function are accessible before they are assigned to a value, it is called hoisting.
console.log(name); //ReferenceError
let name = "sakib";
let address, number, customer; //undefinedfunction
person() {
address = "Palashi";
number = 234;
return `name: ${name}, address: ${address}, number: ${number}`
}
customer() //typeError
customer = person() //"name: sakib, address: Palashi, number: 234"
Data Types
Before starting the discussion, let’s see some examples -
Example with Number:
var a = 10;var b = a;a = 11;console.log(a); //expected outcome 11console.log(b); //expected outcome 10
Example with String:
var player = “Messi”;var player1 = player;player = “Neymar”;console.log(player); //expected outcome :Neymarconsole.log(player1);//expected outcome :Messi
Here, we find the expected behaviour.
On the other hand, we can observe some unexpected behaviour too. Let’s see the examples-
Example with object:
var player1 = player;var player = {name: “Messi”,};var player1 = player;player.name = “Neymar”;console.log(player); // Generally, expected outcome : {name: “Neymar”}console.log(player1); // Generally, expected outcome :{name: “Messi”}
But the real outcome is the same in both cases. Outcome is {name: “Neymar”}. Let’s see another example-
Example with Array:
var players = [“Messi”, “Neymar”];var players1 = players;players.push(“Ronaldo”);console.log(players); // Generally, expected outcome :[“Messi”, “Neymar”, “Ronaldo”]console.log(players1); // Generally, expected outcome :[“Messi”, “Neymar”]
However, the real outcome is the same in both cases. The outcome is — [“Messi”, “Neymar”, “Ronaldo”]. So, why it is happening? The reason behind it is Data Types.
In JavaScript, Data Types are classified into 2 categories -
1) Primitive Values 2) Reference Values
Primitive Values includes — String, Numbers, Boolean, Null, Undefined, BigInts, Symbols (ES6).
On the contrary, Reference Values includes the rest of the things excluding Primitive Values. For example- Object, Array, Function, Date and so on.
Note: In JavaScript, all Reference Values are Objects.
So, every JavaScript developer should have sound knowledge about Data Types.
undefined
Here are some examples of when the value undefined is returned:
- Accessing the (unmodified) global variable undefined.
- Accessing a declared but not yet initialized variable.
- Implicit returns of functions due to missing return statements.
- return statements that do not explicitly return anything.
- Lookups of non-existent properties.
- Function parameters that do not have any explicit value passed.
- Anything that has been set to the value of undefined.
- Any expression in the form of void(expression)
Cross Browser Testing
Cross Browser Testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers.
As a web developer, you need to test your work by following ways:
- Test your work in different browsers other than the one or two that you use regularly on your devices, including slightly older browsers that some people might still be using.
- Test your work in different devices with different capabilities, from the latest greatest tablets and smartphones, through smart TVs, right down to cheap tablets and even older feature phones that may run browsers with limited capabilities.
- Also keep that in mind that people with disabilities, who use the Web with the aid of assistive technologies like screen readers or don’t use a mouse (some people use only the keyboard).
Arrow Function
One of the most interesting new parts of the ES6 is the arrow =>
function.
// ES5function add(x, y) {
return x + y;
}
console.log(add(15, 25));
Expected outcome: 40
// ES6const add = (x, y) => x + y;
console.log(add(15, 25));
Expected outcome: 40
The Spread Operator
The ...
spread operator allows repeaters to extend where 0+ arguments are expected. It is mostly used in a variable array where more than 1 values are expected. This allows us to get a list of parameters from the array.
// ES6const ages = [45, 12, 24, 43, 26];
console.log(ages);
console.log(...ages);
Expected outcome: [ 45, 12, 24, 43, 26 ]
and 45 12 24 43 26
Functions With Default Parameter
JavaScript Functions are allowed to the passed of any parameter regardless of the number of declared parameters. This allows you to define functions that can handle different parameters, often by default, if parameters are not provided.
// ES5function add(a, b) {
a = a || 5;
b = b || 6;
return a + b;
}
console.log(add());
Expected output: 11
The logical OR operator ||
always returns the second operand after the first has been falsy. Here when used function then no parameters have been given that's why the value of the parameters are undefined
.
In ES6 there is no need to use a logical OR operator ||
to set default parameters:
// ES6const add = (a = 5, b = 6) => a + b;
console.log(add());
Expected output: 11
GLOBAL BLOCK BINDINGS
let
and const
global scope behaviour is different from var
global scope behaviour.
When var
is used in the global scope, it creates a new global variable, which is a property of the window object. That means you can overwrite existing global using var
.
// ES5In a Browser consolevar age = 22;
window.age;
var RegExp = "Hello Earth!";
window.RegExp;
Expected output: 22
and Hello Earth!