Some Modern E6 Features
1.Var Declaration & hoisting:
Var delaration:
When Var is a available in global you can excess from any scope .But within a function called function that can excess in function scope. It will be undefined outside function scope.
// Global variable-global scope:
var globalVar=”i am global”
// local variable-functon scope
function any(){
var localVar=”i am local”
console.log(globalVar);
console.log(localVar);
}
output//console.log(localVar);undefined
any()
Hoisting: Hoisting is the javascript’s default behavior that move to the top. A variable can be used before declaration or after declaration.
function hoisting(){
console.log(hoistTxt);
var hoistTxt=”hoisting text”
console.log(hoistTxt);
}
hoisting()
output// undefined/ hoisting text
2.Block-Level Declarations:
Var is function scope where let is block scope. Let can not allow outside a block. For this types of problems , let and const method have been developed after 2015.The different between let and const is that Let can be redefined within block but Const can not be redefined . .
if (true){
var varVariable=”this is var”
}
console.log(varVariable);
if (true){
let letVariable=”this is let”
}
console.log(letVariable);
expected output// this is var & letVariable is not defined
3.Block-Level Functions:
To know block –level function , we have knowledge let, var, const
The difference between var, let and const variables
There are three ways to declare variables in JS:
var width = 100;
let height = 200;
const key = ‘abc123’;
var
What is unique about var? It can be reassigned and updated. For example:
// Define the variable:
var width = 100;
// Call the variable:
width;
// It returns:
100
// Reassign the variable and call it again:
width = 200;
width;
// Returns:
200
var variables are ‘function scope.’ What does this mean? It means they are only available inside the function they’re created in, or if not created inside a function, they are ‘globally scoped.’
If var is defined inside a function and I subsequently try to call it outside the function, it won’t work.
For example:
function setWidth(){
var width = 100;
console.log(width);
}
width;
// Returns:
Uncaught ReferenceError: width is not defined
Again, because var is defined within the function, it is not available outside the function.
Understanding scope
Example:
var age = 100;
if (age > 12){
var dogYears = age * 7;
console.log(`You are ${dogYears} dog years old!`);
}
In the example above, the console returns:
100
Recap;
var is function scope.
let and const are block scope.
Function scope is within the function.
Block scope is within curly brackets.
4.FUNCTION WITH DEFAULT PARAMETER :
In JavaScript, In JavaScript, function parameters default to undefined. However, it’s often useful to set a different default value. This is where default parameters can help.In the past, the general strategy for setting defaults was to test parameter values in the function body and assign a value if they are undefined.
function multiply(a, b) {
return a * b
}
multiply(5, 2) // 10
multiply(5) // NaN !
function with default parameter :
function multiply(a, b=2) {
return a * b
}
multiply(5,) // 10
5.SPREAD OPERATOR :
ES6 has introduced many new features into JavaScript, among them the spread operator (…), which expands an iterable object into a list of its individual elements .Spread operator has dimensional uses in javascript. Like array, object,passing arguments,etc
The spread operator is very useful to copy objects, but we can also use it to merge multiple objects or lists into a single object.
Let’s look at an example of merging lists and one merging objects:
const list1 = [1, 2, 3]
const list2 = [4, 5]
const mergedList = […list1, …list2]
console.log(‘Merged List: ‘, mergedList)
output// [ 1, 2, 3, 4, 5 ]
6.Arrow Function:
Arrow functions were introduced into JavaScript with the release of ECMAScript 2015, also known as ES6.it makes short the function .
Here the examples to declare a function and then call it in JavaScript:
// function declaration
function sayName () {
return ‘Hi, stranger!’
}
// call the function
sayName ()
// You can also write the same function as a function expression, like this:
Const sayName = function () {
return ‘Hi, stranger!’
}
// Arrow functions are always expressions .You can write the above function is like this :
const sayName = () => ‘Hi, stranger’ ;
The benefits of this include:
- just one line of code
- no function keyword
- no return keyword
- no curly braces {}
7.Primitive values:
Primitives are the simplest elements of a programming language. JavaScript currently has six primitive types: string, number, boolean, null, undefined, symbol , everything else is an object — yes, including arrays and dates.Boolean type
· Allowed values: true,false.
Null type
· Allowed values: null.
It is worth noting that the typeof operator returns object for null
Undefined type
· Allowed values: undefined.
The Undefined type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined.
Number type
· Size: 8 bytes
· Allowed values: 18437736874454810624 finite numbers (half positive half negative, including positive and negative zero) and three symbolic values NaN, Positive Infinity & Negative Infinity
String type
- Size: variable (string.length * 2 bytes)
- Max size: 18014398509481982 bytes (~16gB)
7.Objects and Functions:
Object and function are both values but not primitive.
In JavaScript, almost “everything” is an object.
Booleans can be objects (if defined with the new keyword)
Numbers can be objects (if defined with the new keyword)
Strings can be objects (if defined with the new keyword)
Dates are always objects
Maths are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are always objects
All JavaScript values, except primitives, are objects.
Function:
8:Cross browser Testing:
When you make web application you have to think that your application
is running every browser .As still, there are may users use Old browser .
every browser loading system has different capabilities .You should also
people with disabilities.
Cross browser issue commonly occur because:
Ø some browsers may have different levels of support for technology features than others
Ø sometimes browsers have bugs, or implement features differently.
Ø some devices may have constraints that cause a web site to run slowly, or display badly.
Workflows for cross browser testing: The workflow for testing and bug fixes on a project can be broken down into roughly the following four phases: Initial planning > Development > Testing/discovery > Fixes/iteration
Initial planning: Initial stage , you have to make clear with you boss or client what content and functionality should it have. what should it look like, etc. How much they will pay for this application .you have to set your target audience.
Development: There are multiple general strategies to cross browser development, for example:
Ø Get all the functionality working as closely as possible in all target browsers
Ø Accept that your site just isn’t going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it
Testing/discovery: you can text liks this:
Ø Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.
Ø .Test on a mobile platform, such as Android or iOS
9. Unnamed Parameters in ECMAScript 5:
Early on, JavaScript provided the arguments object as a way to inspect all function parameters that are passed without necessarily defining each parameter individually. While inspecting arguments works fine in most cases, this object can be a little cumbersome to work with. For example, examine this code, which inspects the arguments object:
function pick(object){
let result =Object.create(null);
// start at the second parameter
for(let i =1, len = arguments.length; i < len; i++){
result[arguments[i]]=object[arguments[i]];
}
return result;
}
let book ={
title:”Understanding ECMAScript 6",
author:”Nicholas C. Zakas”,
year:2015
};
let bookData = pick(book,”author”,”year”);
console.log(bookData.author);// “Nicholas C. Zakas”
console.log(bookData.year);// 2015
10:How javascript works :
The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading. … Based on the command received from the call stack, the API starts its own single-threaded operation.
The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading. Let’s take a look at what happens on the back-end.
The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.
The event queue is responsible for sending new functions to the track for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution.