(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
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
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"
console.log(false == '0') // true
console.log(false === '0') // false
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
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;
};
};
}
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']
A.length = 0;
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.
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
.
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.
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.
var str='Suresh Alagarsamy';
str = str.toLowerCase();
console.log(str);
var myobject=[{test:'Web'},'Technology','Experts','Notes']
JSON.stringify(myobject);
// "[{"test":"Web"},"Technology","Experts","Notes"]"
var myJSONData = '[{"test":"Web"},"Technology","Experts","Notes"]';
JSON.parse(myJSONData);
// output
[{test:'Web'},'Technology','Experts','Notes']
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.
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.
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.
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.
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
}
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());
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
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.
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.
undefined
var x; // declaring x
console.log(x); // output: undefined
not defined
console.log(y); // output: Uncaught ReferenceError: y is not defined
There are many methods:
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
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
var obj1={test:"value-1"};
var obj2={test:"value-2"};
JSON.stringify(obj1) === JSON.stringify(obj2); // false
To do this in any ES5-compatible environment
Object.keys(obj).length
var obj={name:"Suresh", location:"Bengaluru", pincode:560017}
Object.keys(obj).length;
// 3
Browser support from here
<!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>
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
- 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.
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]
});
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();