javascript language basics

Javascript - Language BasicsFarhan Faruque

SyntaxECMAScript’s syntax borrows heavily from C and other C-like languages such as Java and Perl.

Case-sensitivity

In Javascript,everything is case-sensitive

Identifiers➢ The first character must be a letter, an underscore (_), or a dollar

sign ($)➢ All other characters may be letters, underscores, dollar signs, or

numbers.By convention, ECMAScript identifiers use camel case

firstSecondmyCardoSomethingImportant

Strict ModeStrict mode is a different parsing and execution model for JavaScript, where some of the erratic behavior of ECMAScript 3 is addressed and errors are thrown for unsafe activities.

To enable strict mode for an entire script, include the following at the top:“use strict”;

Statementsvar sum = a + b //valid even without a semicolon - not recommendedvar diff = a - b; //valid - preferred

if (test)alert(test); //valid, but error-prone and should be avoided

if (test){alert(test); //preferred

}

DATA TYPESThere are five simple data types (also called primitive types) in ECMAScript:➢ Undefined➢ Null➢ Boolean➢ Number➢ String There is also one complex data type called Object, which is anunordered list of name-value pairs.

The typeof OperatorECMAScript is loosely typedUsing the typeof operator on a value returns one of the following strings:➢ “undefined” if the value is undefined➢ “boolean” if the value is a Boolean➢ “string” if the value is a string➢ “number” if the value is a number➢ “object” if the value is an object (other than a function) or null➢ “function” if the value is a function

The Undefined TypeThe Undefined type has only one value, which is the special value undefined. var message;alert(message == undefined); //true

The typeof operator returns “undefined” when called on an uninitialized variable, but it also returns “undefined” when called on an undeclared variablevar message; //this variable is declared but has a value of undefinedalert(typeof message); //”undefined”alert(typeof age); //”undefined”

The Null TypeThe Null type is the data type that has only one value: the special value null.a null value is an empty object pointer, which is why typeof returns “object” when it’s passed a null value in the following example:

var car = null;alert(typeof car); //”object”alert(null == undefined); //true

Any time an object is expected but is not available, null should beused in its place.

The Boolean TypeThe Boolean type has only two literal values: true and false.All types of values have Boolean equivalents in ECMAScript.>> var message = “Hello world!”;>> var messageAsBoolean = Boolean(message);

DATA TYPE VALUES CONVERTED

TO TRUE VALUES CONVERTED VALUES CONVERTED TO FALSE

Boolean true false

String Any nonempty string “” (empty string)

Number Any nonzero number (including infinity)

0, NaN

Object Any object null

Undefined n/a Undefined

The Number TypeNumber, which uses the IEEE-754 format to represent both integers and floating-point valuesvar intNum = 55; //integervar octalNum1 = 070;//octal for 56var hexNum1 = 0xA; //hexadecimal for 10

- Octal literals are invalid when running in strict mode and will cause the JavaScript engine to throw a syntax error.

Floating-Point Valuesvar floatNum1 = 1.1;var floatNum2 = 0.1;var floatNum3 = .1;//valid, but not recommendedvar floatNum2 = 10.0; //whole number - interpreted as integer 10

For very large or very small numbers, floating-point values can be represented using e-notation.var floatNum = 3.125e7; //equal to 31250000var floatNum = 3e-17 ; //equal to 0.00000000000000003By default, ECMAScript converts any floatingpoint value with at least six zeros after the decimal point into e-notation

Range of ValuesThe smallest number that can be represented in ECMAScript is stored in Number.MIN_VALUE5e-324 on most browsersthe largest number is stored in Number.MAX_VALUE1.7976931348623157e+308 on most browsers

- a number that cannot be represented by JavaScript’s numeric range, the number automatically gets the special value of Infinity.

To determine if a value is finite there is the isFinite() function.

NaNNaN, short for Not a Number- indicate when an operation intended to return a number has failed. In ECMAScript, dividing a number by 0 returns NaN, which allows other processing to continue.NaN properties -

- any operation involving NaN always returns NaN- NaN is not equal to any value, including NaN.

ECMAScript provides the isNaN() function -to determine if the value is “not a number.”

alert(isNaN(NaN)); //truealert(isNaN(10)); //false

Number ConversionsThree functions to convert nonnumeric values into numbers:➢ Number() casting➢ parseInt() function➢ parseFloat() fuction

Number() function performs conversions based on these rules:➢ Boolean values, true and false get converted into 1 and 0➢ null, Number() returns 0➢ undefined, Number() returns NaN.➢ strings, the following rules are applied:

➔ If the string contains only numbers, optionally preceded by a plus or minus sign, it is always converted to a decimal number

➔ string contains a valid floating-point format, such as “1.1”, it is converted into the appropriate floating-point numeric value

Number Conversions➢ the string contains a valid hexadecimal format, such as “0xf”, it is

converted into an integer that matches the hexadecimal value➢ string is empty (contains no characters), it is converted to 0➢ string contains anything other than these previous formats, it is

converted into NaN.- when applied to objects, the valueOf() method is called and the returned value is

converted based on the previously described rules. If that conversion results in NaN, the toString() method is called and the rules for converting strings are applied.

var num1 = Number(“Hello world!”); //NaN

var num2 = Number(“”); //0

var num3 = Number(“000011”); //11

var num4 = Number(true); // 1

parseInt() The parseInt() function examines the string much more closely to see if it matches a number pattern -

var num1 = parseInt(“1234blue”); //1234var num1 = parseInt(“”);//NaNvar num1 = parseInt(“0xA”);//10 - hexadecimalvar num1 = parseInt(22.5);//22var num1 = parseInt(“70”);//70 - decimalvar num1 = parseInt(“0xf”); //15 - hexadecimal

All of the different numeric formats can be confusing to keep track of. so parseInt() provides a second argument: the radix (number of digits) to usevar num = parseInt(“0xAF”, 16); //175

parseFloat()works in a similar way to parseInt()

var num1 = parseFloat(“1234blue”); //1234var num1 = parseFloat(“0XA”);//0var num1 = parseFloat(“0908.5”); // 908.5var num1 = parseFloat(22.5);//22.5var num1 = parseFloat(“22.34.5”);//22.34var num1 = parseFloat(“3.125e7”); //31250000

Hexadecimal numbers always become 0. Because parseFloat() parses only decimal values, there is no radix mode.

The String TypeStrings can be delineated by either double quotes (“) or single quotes (‘), so both of the following are legal:

var firstName = “Nicholas”;var lastName = ‘Zakas’;

The Nature of Strings- Strings are immutable

Converting to a String- use the toString() method toString() actually accepts a single argument: the radix in which to

output the number.

String() casting The String() function follows these rules:➢ If the value has a toString() method, it is called (with no

arguments) and the result is returned.➢ If the value is null, “null” is returned.➢ If the value is undefined, “undefined” is returned.

The Object Typevar o = new Object();var o = new Object; //legal, but not recommended

Object instance has the following properties and methods: ➢ constructor➢ hasOwnProperty(propertyName)➢ isPrototypeOf(object)➢ propertyIsEnumerable(propertyName)➢ toLocaleString()➢ toString() ➢ valueOf()

OPERATORS

Operators are unique in ECMAScript in that they can be used on a wide range of values, including strings, numbers, Booleans, and even objects.

operators typically call the valueOf() and/or toString() method to retrieve a value

Increment/Decrementtaken directly from C and come in two versions: prefix and postfix.The increment and decrement operators follow these rules regarding values:● When used on string that is a valid number then convert to numbers.

Variable is changed to number.● When used on string that is not a valid number then variable value change

to NaN● When used on Boolean - 0 for false ,1 for true. ● When used on an object, call its valueOf() method.if it returns NaN then

call toString() methods apply string rules.

Logical NOT

alert(!false); //truealert(!”blue”); //false

alert(!!false); //falsealert(!!”blue”); //true

operand return

object false

empty string

true

nonempty string

false

number 0 true

any number other than 0

false

null true

undefined true

Logical ANDWhen either operand is not a primitive Boolean, logical AND does not always return a Boolean value; instead, it does one of the following:➢ If the first operand is an object, then the second operand is always

returned.➢ If the second operand is an object, then the object is returned only if the

first operand evaluates to true .➢ If both operands are objects, then the second operand is returned.➢ If either operand is null , then null is returned.➢ If either operand is NaN , then NaN is returned.➢ If either operand is undefined , then undefined is returned.The logical AND operator is a short-circuited operation, meaning that if the first operand determines the result, the second operand is never evaluated.

Logical ORif either operand is not a Boolean, logical OR will not always return aBoolean value; instead, it does one of the following:➢ If the first operand is an object, then the first operand is returned.➢ If the first operand evaluates to false , then the second operand is

returned.➢ If both operands are objects, then the first operand is returned.➢ If both operands are null , then null is returned.➢ If both operands are NaN , then NaN is returned.➢ If both operands are undefined , then undefined is returned.the logical OR operator is short-circuited. In this case, if the first operand evaluates to true,the second operand is not evaluated.

Multiplicative OperatorsThere are three multiplicative operators in ECMAScript: multiply, divide, and modulus.

- These operators work in a manner similar to other languages but they also include some automatic type conversions when dealing with nonnumeric values.

Multiplythe multiply operator also has the following unique behaviors when dealing with special values:

Operand-1 Operand- 2 Result

Number Number regular arithmetic multiplication

NaN any operand NaN

Infinity 0 NaN

Infinity any number other than 0 Infinity or – Infinity , depending on the sign of the second operand

Infinity Infinity Infinity

not number/anything not number/anything Number() casting calls

Dividethe divide operator also has the following unique behaviors when dealing with special values:



NaN/any operand any operand/Nan NaN


0 0 NaN

nonzero finite number 0 Infinity or – Infinity

Infinity any number Infinity or – Infinity


Modulusthe divide operator also has the following unique behaviors when dealing with special values:

dividend divisor Result


infinite number finite number NaN

finite number 0 NaN

Infinity Infinity NaN

finite number infinite number dividend

0 nonzero 0


Addthe divide operator also has the following unique behaviors when dealing with special values:


NaN NaN NaN


–Infinity –Infinity –Infinity

+0 +0 +0

+0 -0 +0

-0 +0 +0

-0 -0 -0

Addone of the operands is a string, then the following rules apply:➢ If both operands are strings, the second string is concatenated to the first.➢ If only one operand is a string, the other operand is converted to a string

and the result is the concatenation of the two strings.➢ If either operand is an object, number, or Boolean, its toString()

method is called to get a string value and then the previous rules regarding strings are applied.

Subtractthe divide operator also has the following unique behaviors when dealing with special values:


number number normal arithmetic

NaN NaN NaN

Infinity infinity Nan

-Infinity -infinity Nan

-Infinity infinity Infinity

Infinity -infinity Infinity

string/Boolean/null/undefined string/Boolean/null/undefined Number() casting calls

Subtractobject / any operand object / any operand valueOf() method is called

+0 +0 +0

-0 +0 -0

-0 -0 +0

Relational OperatorsThe less-than ( < ), greater-than ( > ), less-than-or-equal-to ( <= ), and greater-than-or-equal-to ( >= )there are some conversions and other oddities that happen when using different data types. They are as follows:Operand -1 Operand-2 Result

number number numeric comparison

string string compare the character codes of each corresponding character in the string.

number any operand convert second operand to number and do comparison

object any operand call valueOf()if not available call toString()

Boolean any operand convert it to a number and perform the comparison

Relational Operators➢ Whenever a number is compared to a string, the string is converted

into a number and then numerically compared to the other number.

var result = “a” < 3; //false because “a” becomes NaN

Equality OperatorsOriginally ECMAScript’s equal and not-equal operators performed conversions into like types before doing a comparison.When performing conversions, the equal and not-equal operators follow these basic rules:➢ If an operand is a Boolean value, convert it into a numeric value before checking

for equality. A value of false converts to 0, whereas a value of true converts to 1.➢ If one operand is a string and the other is a number, attempt to convert the string

into a number before checking for equality.➢ If one of the operands is an object and the other is not, the valueOf() method is

called on the object to retrieve a primitive value to compare according to the previous rules.

Equality OperatorsExpression

null == undefined true

“NaN” == NaN false

5 == NaN false

NaN == NaN false

false == 0 true

true == 2 false

undefined == 0 false

null == 0 false

“5” == 5 true

Identically Equal and Not Identically Equal

The identically equal and not identically equal operators do the same thing as equal and not equal,except that they do not convert operands before testing for equality.

var result1 = (“55” == 55); //true - equal because of conversionvar result2 = (“55” === 55); //false - not equal because different data types

null === undefined is false because they are not the same type

The for-in StatementThe for-in statement is a strict iterative statement. It is used to

enumerate the properties of an object.

for (var propName in window) {document.write(propName);

}

Object properties in ECMAScript are unordered

Labeled Statements

start: for (var i=0; i < count; i++) {alert(i);

}

The with StatementThe with statement sets the scope of the code within a particular object.each variable inside the statement is first considered to be a local variable. If it’s not found to be a local variable, the location object is searched to see if it has a property of the same name.

var qs = location.search.substring(1);

var hostName = location.hostname;

var url = location.href;

with(location){var qs = search.substring(1);var hostName = hostname;var url = href;

}

The switch Statementswitch statement says, “If the expression is equal to the value, execute the statement.”

Although the switch statement was borrowed from other languages, it has some unique characteristics in ECMAScript. First, the switch statement works with all data types , so it can be used with strings and even with objects.

FUNCTIONSFunctions are the core of any language, because they allow the encapsulation of statements that can be run anywhere and at any time.

Strict mode places several restrictions on functions:➤ No function can be named eval or arguments .➤ No named parameter can be named eval or arguments .➤ No two named parameters can have the same name.

FUNCTIONS- An ECMAScript function doesn’t care how many arguments are passed in,

nor does it care about the data types of those arguments.- arguments in ECMAScript are represented as an array internally.- there actually is an arguments object that can be accessed while inside a

function to retrieve the values of each argument that was passed in- The arguments object acts like an array- changing the named argument does not result in a change to the

corresponding value in arguments .- the length of the arguments object is set based on the number of

arguments passed in, not the number of named arguments listed for the function.

- Any named argument that is not passed into the function is automatically assigned the value undefined.

No OverloadingECMAScript functions cannot be overloaded in the traditional sense.

If two functions are defined to have the same name in ECMAScript, it is the last function that becomes the owner of that name.

Reference

javascript language basics

Software