10 Tricky things about JavaScript
1. What is Arrow function?
Arrow functions are short hand notation of writing a function in JavaScript. Arrow function consists with a parameter list with an arrow (=>) symbol and a function body.
For single parameter, the parenthesis can be omitted.
If the arrow function are implemented without ({}), it does not need a return statement to return data.
arrow functions capture the this value of the nearest enclosing context.
There are four fundamental differences between arrow functions and function functions
· They close over this, and do not have their own versions.
· They can have a concise body (without { }) rather than a verbose one (but they can have a verbose body as well).
· They cannot be used as constructors. E.g., you can’t use new with an arrow function. Hence arrow functions do not have a protoype property on them.
· There is no generator syntax for arrow functions. E.g., there is no arrow equivalent to function *foo() { … }.
2. Describe object literal notation in ES6?
ES6 provides shorthand methods for initializing properties from functions and defining function methods in object literal notation. It allows computed property keys using object literal notation.
var a=42, b=[], c=0
//shorthand object declaration
var o={a,b,c}
console.log(o) //{ a: 42, b: [], c: 0 }
//shorthand method
var o={
add(a,c){ return a+c }
}
console.log(o.add(10,20)) // 30
//computed property name
var prop=’foo’
var o={
[prop]:’bar’
}
console.log(o) //{ foo: ‘bar’ }
3. What is generator function?
Generator function allows a function to generate many values over time by returning an object. This object can be iterated over to pull values from the function one value at a time.
A generator function returns an iterable object when it’s called. It is written using the new * syntax as well as the new yield keyword introduced in ES6.
function *infiniteNumbers(){
let n=1;
while(true){
yield n++
}
}
const numbers= infiniteNumbers() //returns an iterable object
console.log(numbers.next()) // { value: 1, done: false }
console.log(numbers.next()) // { value: 1, done: false }
console.log(numbers.next()) // { value: 1, done: false }
4. What is the difference between undefined and not defined?
When a variable is declared, but its value is not set, the variable has an undefined value. Because the variable takes space in memory but it has no value assigned. So, it returns undefined.
But when does neither have a value nor it is declared, it returns not defined.
//undefined
var a;
console.log(a)
//not defined
console.log(b)
5. Describe closure in JavaScript?
A closure is something where a function is wrapped inside another function.
The inner function have access to the,
· The variable inside it.
· The variable of the outer function
· The global variables
var c=100
function outer() {
var b = 10;
function inner() {
var a = 20;
console.log(`a= ${a} b= ${b} c= ${c}`);
a++;
b++;
c++;
}
return inner;
}
var X = outer(); // outer() invoked the first time
var Y = outer(); // outer() invoked the second time
X(); // X() invoked the first time output a= 20 b= 10 c= 100
X(); // X() invoked the second time output a= 20 b= 11 c= 100
X(); // X() invoked the third time output a= 20 b= 12 c= 100
Y(); // Y() invoked the first time output a= 20 b= 10 c= 103
Here the inner function is returned by the outer function. It is stored in X and Y variables. When X() is first called the output is a a= 20 b= 10 c= 100, then an increment occurs. Same thing happened when Y() is first called. When X() is called second time, a remained the same because a is inside the inner function, but b is stored inside the X() function and c is global variable. So, their value is modified. This will happen whenever you call X() and Y() again.
6. How can you execute functions with multiple parenthesis?
If there are functions inside a function, you can have multiple parenthesis to one function.
function mul (x) {
return function (y) { // anonymous function
return function (z) { // anonymous function
return x * y * z;
};
};
}
console.log(mul(2)(3)(4)); // output : 24
console.log(mul(4)(3)(4)); // output : 48
Here, the mul() accepts the first parenthesis and returns an anonymous function. That anonymous function takes the second parenthesis and returns another anonymous function. That anonymous function takes the third parenthesis and returns the multiplied value of the three parenthesizes.
A function defined inside a function has access to the outer function’s variables.
7. What is the usage of delete keyword?
The delete keyword is used for deleting properties from an object,
var x = 1;
var output = (function(){
delete x;
return x;
})();
console.log(output); // 1
Here x is a value not a property of an object, so the delete has no effect with it.
var x = { foo : 1};
var output = (function(){
delete x.foo;
return x.foo;
})();
console.log(output); //undefined
Here, the delete keyword will delete the foo property from x object. So, x.foo returns undefined.
var Employee = {
company: ‘xyz’
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company); // ‘xyz’
Here, emp1 has company as its prototype property. After it gets deleted it will retrieve the company property from Employee object through prototype chain.
var arr=[1,2,3,4,5]
delete arr[4] //deletes 5
console.log(arr) // [ 1, 2, 3, 4, undefined]
Here, the fifth element(4th index) of the array is deleted. So, the value of this index becomes undefined. But the array length does not change. So, array length is 5.
8. Describe calculation with Boolean?
The formulas for Boolean calculation are given below,
· Number + Number -> Addition
· Boolean + Number -> Addition
· Boolean + Number -> Addition
· Number + String -> Concatenation
· String + Boolean -> Concatenation
· String + String -> Concatenation
var bar = true;
console.log(bar + 0); //1
console.log(bar + “xyz”); //truexyz
console.log(bar + true); //2
console.log(bar + false); //1
For string, Boolean remains Boolean and for number Boolean converts into number.
9. Describe how assignment operator works?
var z = 1, y = z = typeof y;
console.log(y);
Here, the information flows from right to left. According to this rule, 1 is assigned to z. The variable y does not exist so the typeof y is undefined. This undefined flows from right to left, first it is assigned to z and then to y.
The detailed code is given below,
var z = 1 // value assigned to z
z = typeof y; // y is not declared before.
y = z; // here y is default global variable, it is not same as previous line’s y.
10. What is the problem of re-declaring same named global variable inside a function?
Re-declaring the same name global will cause problems in your code.
var salary = “1000$”;
(function () {
console.log(“Original salary was “ + salary); // Original salary was undefined
var salary = “5000$”;
console.log(“My New Salary “ + salary); // My New Salary 5000$
})();
console.log(“My New Salary “ + salary); // My New Salary 1000$
Here, we have a global variable named salary. Inside the IIFE(immediately invoked function expression) we have declared another variable named salary. After its declaration, the inside salary variable is hoisted at the top of the function so, in the first console.log() it returns undefined. The next one works normally.
The global salary remains unchanged throughout the program. After executing the function, the global salary can be used, which can see in the last line.