JavaScript notes

#1 What will the output for the below code?

(function(){
  var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

most JavaScript developers would expect typeof a and typeof b to both be undefined in the above example.

However, that is not the case. The issue here is that most developers incorrectly understand the statement var a = b = 3; to be shorthand for:

var b = 3
var a = b

But in fact, var a = b = 3; is actually shorthand for:

b = 3
var a = b

As a result (if you are not using strict mode), the output of the code snippet would be

a defined? false
b defined? true

#2 What will the output for the below code?

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

Answer to this question would be 0.3 and true correct? But your answer is wrong. In javscript all numbers will be treated with floating point precision. So may not yield the correct answer for this.

Surprisingly, it will print out:

0.30000000000000004
false

to get a proper output we may need to do the following work around.

console.log((0.1*10  +  0.2*10)/10);  // output 0.3

#3 What will the output for the below code?

console.log(1 +  "2" + "2");		// 122
console.log(1 +  +"2" + "2");		// 32
console.log(1 +  -"1" + "2");		// 02
console.log(+"1" +  "1" + "2");		// 112
console.log( "A" - "B" + "2");		// NaN2
console.log( "A" - "B" + 2);		// NaN
console.log('1'+'C')			// "1C"
console.log('1'*'C')			// NaN
console.log('1'/'C')			// NaN
console.log('1'-'C')			// NaN
console.log('1'+0)			// "10"
console.log('1'*0)			// 0
console.log('1'/0)			// Infinity
console.log('1'-0)			// 1
console.log("1" - - "1");		// 2
typeof(null)				// "object"

#4 What will the output for the below code?

console.log(false == '0')		// true
console.log(false === '0')		// false

#5 Write palindrome programe

palindrome string

function isPalindrome(str) {
    str = str.replace(/\W/g, '').toLowerCase();
    return (str == str.split('').reverse().join(''));
}

isPalindrome('MALAYALAM');	// true
isPalindrome('Anna');		// true
isPalindrome('Madam');		// true
isPalindrome('SURESH');		// false

#6 Write a mul function which will produce the following outputs when invoked:

console.log(mul(2)(3)(4)); // output : 24 
console.log(mul(4)(3)(4)); // output : 48

function mul (x) {
    return function (y) { // anonymous function 
        return function (z) { // anonymous function 
            return x * y * z; 
        };
    };
}

#7 How to empty an array in JavaScript

Method-1

A = [];

This is perfect if you don't have references to the original array A anywhere else, because this actually creates a brand new (empty) array. Only use this if you only reference the array by its original variable A.

This code sample shows the issue you can encounter when using this method:

var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1;  // Reference arr1 by another variable 
arr1 = [];
console.log(arr2); // Output ['a','b','c','d','e','f']

Method-2

A.length = 0;

#8 What is the difference between the function declarations below?

var first = function() { 
   // Some code
}; 

function second() { 
    // Some code
 }; 

The main difference is the function first is defined at run-time whereas function second is defined at parse time.

#9 What will be the output of the code below?

var Employee = {
  company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

The output would be xyz. Here, emp1 object has company as it is prototype property. The delete operator doesn’t delete prototype property.

emp1 object doesn’t have company as its own property.

However, we can delete the company property directly from the Employee object using delete Employee.company.

#10 What is ‘this’ keyword in JavaScript?

this keyword is used to point at the current object in the code.

For instance: If the code is presently at an object created by the help of the ‘new’ keyword, then ‘this’ keyword will point to the object being created.

#11 What is the difference between window.onload and onDocumentReady?

The window.onload event won’t trigger until every single element on the page has been fully loaded, including images and CSS. The downside to this is it might take a while before any code is actually executed. You can use onDocumentReady to execute code as soon as the DOM is loaded instead.

#12 How to convert a string to lowercase?

var str='Suresh Alagarsamy';
str = str.toLowerCase();
console.log(str);

#13 How to convert JSON Object to String?

var myobject=[{test:'Web'},'Technology','Experts','Notes']
JSON.stringify(myobject);

// "[{"test":"Web"},"Technology","Experts","Notes"]"

#14 How to convert JSON String to Object?

var myJSONData = '[{"test":"Web"},"Technology","Experts","Notes"]';
JSON.parse(myJSONData);

// output
[{test:'Web'},'Technology','Experts','Notes']

#15 Can i declare a variable as CONSTANT in JavaScript?

ES2015 or ECMAScript 6, the latest version of JavaScript, has a notion of const:

const MY_CONSTANT = "SURESH";

This will work in pretty much all browsers except IE 8, 9 and 10. Some may also need strict mode enabled.

#16 What is a Namespace in JavaScript?

Namespace is a container for set of identifiers, functions, methods and all that. It gives a level of direction to its contents so that it will be well distinguished and organized.

To achieve this, what we need to do is to create a namespace in application and use it.

Unfortunately JavaScript doesn’t provide namespace by default. So anything we create in JavaScript is global and we continue polluting that global namespace by adding more to that. As we know, in JavaScript everything is an object and creating an object is very simple. We can achieve namespace very easily with some minor tweaks.

var myProduct = 'SONY';
function abc() {
    // code here
}

function xyz() {
	// code here
}

In the above code two functions abc() xyz() and variable myProduct are fall into global namespace.

• JavaScript Sample Namespace

var MYAPPLICATION = {
	myProduct: 'SONY',
	abc:function() {
    	// code here
    },
	xyz:function() {
    	// code here
    }
}

To access any of the methods or variables, you need to fetch it through the MYAPPLICATION. Even we can create nested JavaScript Namespace as well.

#17 What Is Strict Mode In JavaScript?

It provides following enhancements.

• To use a variable, it has become mandatory to declare it.
• It disallows duplicate property and parameter names.
• It deprecates the “with” statement.
• JavaScript will throw an error if we try to assign a value to a read-only property.
• It decreases the global namespace pollution.

To enable strict mode, we have to add, “use strict” directive to the code. The physical location of the “strict” directive determines its scope. If used at the beginning of the js file, its scope is global. However, if we declare strict mode at the first line in the function block, its scope restricts to that function only.

#18 What Is EncodeURI() Function?

The encodeURI() function is used to encode a URI. This function encodes all special characters, except these < , / ? : @ & = + $ #>.

Let’s See An Example.

var uri="http://www.suresh.com/how to make a website using javaScript";
var encodedURI = encodeURI(uri);
console.log(encodedURI);

// Output
// http://www.suresh.com/how%20to%20make%20a%20website%20using%20javaScript

We see that JavaScript encodes the space between the words in the variable as <%20>. Thus, the encodeURI function is used to encode special reserved characters and other non-ASCII characters in the URI.

#19 What Is Scope In JavaScript?

In JavaScript, the scope is of two types.

• Global Scope
• Local Scope

Global Scope

A variable defined outside a function comes under the Global scope. Variables defined inside the Global scope are accessible from any part of the code.

var name = 'SURESH';
var myObject = {name:'SURESH',company:'xyz'};

function callMe() {
	alert(name);			 // Accessible here
    console.log(myObject);	 // Accessible here
}

Local Scope

Variables defined inside a function comes under the Local scope.

function callMe() {
	var name = "SURESH";	// not accessible in other functions
}

#20 What Is Prototype Property In JavaScript?

Every JavaScript function has a prototype property (by default this property is null), that is mainly used for implementing inheritance. We add methods and properties to a function’s prototype so that it becomes available to that function.

function callMe(a,b) {
	this.x = a;
	this.y = b;
}

callMe.prototype.addMe = function() {
	return 9 + this.x + this.y;
}

var callMeObj = new callMe(2,3);
console.log(callMeObj.addMe());

#21 Is JavaScript case sensitive?

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables.

Historically, programmers have used different ways of joining multiple words into one variable name. I would suggest the developers to use lower camel case letters like below.

myName firstName lastName

upper camel case

#22 What is the difference between ViewState and SessionState?

• ViewState is specific to a page in a session.
• SessionState is specific to user specific data that can be accessed across all pages in the web application.

#23 What are the different types of errors in JavaScript?

There are three types of errors:

• Load time errors Errors which come up when loading a web page like improper syntax errors are known as Load time errors and it generates the errors dynamically.
• Run time errors Errors that come due to misuse of the command inside the HTML language.
• Logical Errors These are the errors that occur due to the bad logic performed on a function which is having different operation.

#24 What is undefined and not defined?

undefined

var x; 				// declaring x
console.log(x); 	// output: undefined 

not defined

console.log(y); 	// output: Uncaught ReferenceError: y is not defined

#25 How do you check if a variable is an array in JavaScript?

There are many methods:

method-1

variable.constructor === Array

function checkVariable(param){
 	if(param.constructor === Array){ 
		console.log('Array');
 	} else {
 	  console.log('Not an array');
 	}
}
checkVariable({name:'SURESH'});		// Not an array
checkVariable(['A']);			// Array

method-2

Array.isArray(obj) == true

function checkVariable(param){
 	if(Array.isArray(param) == true){ 
		console.log('Array');
 	} else {
 	  console.log('Not an array');
 	}
}
checkVariable({name:'SURESH'});		// Not an array

#26 How to compare two objects in javascript?

var obj1={test:"value-1"};
var obj2={test:"value-2"}; 

JSON.stringify(obj1) === JSON.stringify(obj2);   // false

#27 Find number of elements in javascript object

To do this in any ES5-compatible environment

Object.keys(obj).length

Sample

var obj={name:"Suresh", location:"Bengaluru", pincode:560017}
Object.keys(obj).length;

// 3

Browser support from here

#28 HTML data-* Attributes

<!DOCTYPE html>
<html>
<head>
<script>
function showDetail(department) {
    var deptType = department.getAttribute("data-dept-type");
    alert(department.innerHTML + " is into " + deptType + " department.");
}
</script>
</head>
<body>

<h1>Resources</h1>
<p>Click on each resources to see what department they are:</p>

<ul>
  <li onclick="showDetail(this)" id="Civil" data-dept-type="civil">Suresh</li>
  <li onclick="showDetail(this)" id="Medical" data-dept-type="medical">Ganesh</li> 
  <li onclick="showDetail(this)" id="Bank" data-dept-type="bank">Vignesh</li>  
</ul>

</body>
</html>

HTML output

console log

#29 What is the use of console.time method?

I will show you how to use console.time as a low-cost performance testing tool.

console.time("SURESH");
for(var i=0;i<99999999;i++) {
  
}
console.timeEnd("SURESH");

//Output: SURESH: 296.1708984375ms

#30 is http stateful or stateless protocol?

• HTTP is a stateless protocol. This means a HTTP server needs not keep track of any state information.
• At any time, client can send any valid command.
• A HTTP server wil not remember whether a client has visited it before, or how many time.

#31 what is callback function?

A callback function is a function that is passed to another function as an argument and is executed after some operation has been completed.

function modifyArray(arr, callback) {
  arr.push(100);
  callback();
}
var arr = [1, 2];
modifyArray(arr, function() {
    console.log("array has been modified", arr);  // "array has been modified" // [1, 2, 100]
});

Write conditional judgement statements in short

If the function is executed only when the condition is true, you can use the && shorthand.

// Common writing method
if (condition) {
    doSomething();
}

// Abbreviations
condition && doSomething();