Know about ES6 and Function

1. Binding

Whenever we declare a variable we usually bind a value to a name under a scope that is a part of the program. Sometimes the binding becomes global and can be accessed from outside the scope, but sometimes it is only restricted to that specified scope where the variable was declared.

Using var, let, and const we initialize binding and binds a value to a name

Ex. var name = ‘fried rice’;

let friend = ‘jarred khushner’;

const fixed = ‘pi value’;

2. Variable declaration and hoisting: when var keyword is used to declare variable javascript engine sets this as global and put this in memory before compiling.

The value or variable is hoisted top of the function or outside the scope, that’s why it accessible even from outside the function.

function getFriend(name) {

if (name == ‘anis’) {

var name = ‘anis rahman’

console.log(name)

}

console.log(name)

}

const one = getFriend(‘anis’);

the expected output is ‘anis rahman’;

‘anis rahman’;

So the console outside the if scope gets the value of name.

But this doesn’t happen with let or const

3. Block Level Declaration

ES6 introduces a method to stop this type of declaration where value is accessed outside a specific scope. Here the term comes let. If a variable is declared using let under a scope, the variable's value is only limited under that scope, and cannot be accessed from outside that scope. This is a declaration, not an initialization.

function getFriend(name) {

if (name == ‘anis’) {

let name = ‘anis rahman’

console.log(name)

}

console.log(name)

}

const one = getFriend(‘anis’);

// console.log(one)

Expected output is ‘anis rahman’

‘anis’,

Look at the output for if scope the name is set for ‘anis rahman’, but outside the if scope it is only ‘anis’. Cause for let declaration the value is not hoisted up the top of the function or globally.

const is used for doing both declaration and initialization at the same time. Cause const means constant and if one declared with a value it cannot be changed or modified.

But there is a difference for declaring an object

Ex. const person = {

name: ‘Nicholas’,

age: 22

}

console.log(person.name = ‘jarred’);

console.log(person)

expected output is ‘jarred’ and {name: ‘jarred’,

age:22};

Modifying objects and modifying the value of a variable are different things even the two things are declared using const.

4. Block Binding in loops

Block binding in loops is most of the cases used in for-loops. For loops can be run using var, but the value will be hoisted outside the loop. But using let-in for loop is only limited in the loop, and block-level declarations are also made using let.

Ex. function value() {

// var items = [‘1’, 2]

for (let i = 0; i < 10; i++) {

console.log(i)

}

// console.log(i)

}

value();

output is 0–9 number serially. But outside for loop, it will show i is not defined.

And when const is used in place of let first it will show 0, but then it will throw an error as declared using const but the value is trying to be changed.

5. Function with default parameter values

Functions are declared with parameters. And sometimes functions are called with a missing parameter. Because of the missing value, the parameter is set to undefine and the function would return undefined. The new version of ECMAScript makes it easier. And it is wise to set a default parameter value if the function is called with fewer arguments than passed or declared.

function add(a, b = 5) {

return a + b;

}

console.log(add(10))

Output is 15. The parameter b is not set when the function was called, but the function will run and won’t give an undefined return because of the default parameter value.

6. The spread Operator

The spread operator allows an array or string to expand which are iterable. This makes it easier when an array or string needs to be displayed with new items added. Spread operator expands the places where 0 or more arguments or elements are expected.

const array1 = [1, 2, 3, 4];

const array2 = […array1, 56, 98, ‘hello’, ‘there’];

console.log(array2)

Output is [ 1, 2, 3, 4, 56, 98, ‘hello’, ‘there’ ]; look at this array2 has copied item of array1 and also its new or own elements. Now without the spread operator, it would be not possible. Spread operator or syntax expands the area of array2 to harness all the elements of array1.it allows listing all items from an object or an array.

7. Block-Level Functions

Whenever you declare a variable in a function, the variable is visible only within the function. You can’t access it outside the function. var is the keyword to define a variable for function-scope accessibility. But with block-level, it is only accessible in if or in conditions that are applied. Function scope is usually called local scope. Functions can be nested based on their calling. And if a function is called in if or for the statement it acts as a block-level function as it is only applicable in the block scope not outside of it.

8. Arrow Function

Arrow function was introduced in ES6. It allows us to write functions in shorter and more efficient way.

let g = 6;

let b = 8;

function newSome(g, b) {

let sum = g + b;

return sum;

}

console.log(newSome(g, b));

This is without arrow function.

But for arrow function it becomes easier and statement cut down to one.

const newArea = (b, h) => { return .5 * b * h };

console.log(newArea(10, 10));

Works like normal but cut the hard work of a developer.

The sign used (=>), because of this it is called the arrow function.

9. Caching

Data caching is some type of storing data. But in this case, it means caching data in a commonly store place from where it can be served as soon as it is requested. It is possible because of the storage of commonly accessed data in several places. Whenever requesters request that data it is easily servable from that common store. This stops generating new data even for the same function calls. This removed pressure from API. API prioritizes based on data storing time and visit level and whenever data is requested it quickly serves which saves time and also removes congestion on API input/output path by saving various network resources.

Many types of caching are done.

1. Client caching

2. Server caching

3. Hybrid caching

4. Local caching

For client caching when a client requests, the API looks at internal resources then external resources the content is generated based on the request. In this way cache memory is stored for few periods of time based on their expiry date and data becomes dynamic and faster to serve.

For server cache, the API feed first looks for local resources, if the file it serves the data.

For hybrid caching the API feed first search in internal sources, then in local sources for requested files, if it exists it serves the data based on the file.

10. Cross Browser Testing

Cross-browser testing is a method to test web applications that have been made is really workable in various browsers. Not all user uses the same browser that a developer usually uses. And not all browsers are efficient enough to load content based on coding. Because still, some users can use old browsers which don’t support modern methods, applications, and technologies. Even the site should be accessible to a visually impaired person who uses screen-readers or something like that.

So it is very important to test web applications before put into market or production.

During the development period, all the functions should be working closely for targeted browsers or it has to make sure that over 90% of functionality works in the same and close way in different kinds of browsers.

Writing different code paths produces functionality in different browsers effectively or using preplanned developed technologies to enable the working functions. Otherwise, you just have to move on keeping in mind that your work or application won’t work in old browsers.

Testing:

Before going into production test your codes in all kinds of browsers like safari, chrome, firefox, edge, etc. Some browsers often do have bugs from the start of their journey so point out this. Test in lo-fi accessibility test is very necessary. Try to use your application using only keyboards or with screen-reader tools. Tests on the different operating systems or in popular phones, tablets, or use emulator and virtual machines as windows do not allow you to install multiple versions of windows on the same computer.

Above out all of this, your site should easily accessible, readable, optimizable, responsive, and smooth.