JavaScript syntax – stoimen's web log

You think you know javascript. Quiz results!

Stoimen — Wed, 07 Mar 2012 10:27:37 +0000

After a week again, the “You think you know … JavaScript” quiz results are on!

1. Which loop is faster in JavaScript?

for
while correct answer

2. What will be alerted by the code bellow?

var str = 'my-'; alert(str.split('-')[1]);

Error
An empty string correct answer
“-“
“my”

3. What is server-side JavaScript?

JS scripts files placed on the server that can be publicly accessed by the client
JS engine running on the server accessible via http correct answer

90.91% right answers

4. Is it possible to have private and public methods in a JavaScript object

Yes correct answer
No

54.55% answered with the right answer!

Note that the quiz will remain open, but no results will be published!

A JavaScript Trick You Should Know

Stoimen — Tue, 12 Jul 2011 14:49:46 +0000

JavaScript Strings

You should know that in JavaScript you cannot simply write a multilined code chunk, i.e. something like this:

var str = 'hello
world';

This will result in an error, which can be a problem when you deal with large strings. Imagine a string containing some HTML that should be injected via innerHTML. Now one possible solution is to concatenate two or more strings, by splitting the initial string.

var str = 'hello'
        + 'world';

Howerver this solution result in some additional operations like concatenation. It can be very nice if there was something like the PHP multiline string format.

The PHP Example

In PHP you have the same use case with strings. You can have a string concatenated over multiple lines, but you cannot split lines like so:

// the following line is wrong
$str = 'hello
world'; 

// a possible solution to the line above is
$str = 'hello'
     . 'world';
// which is very similar to the js solution in the second example

// ... but in PHP there is the so called HEREDOC
$str = <<
The heredoc gives us the power to write multiline strings. 
The JavaScript Trick
Actually in JavaScript there is something that's exactly what Heredoc is meant to be for PHP. Take a look at the last example:
var text = <>
this 

is
my
multi-line
text
.toString();

document.body.innerHTML = text;

Thus you can write multiline strings in the JavaScript code.

Related posts:

Powerful PHP: Less Known String Manipulation 
JavaScript Flexibility – Regex match() 
Flexible JavaScript – Splitting Strings 
Flexible JavaScript – Replace in a String

JavaScript Flexibility – Regex match()

Stoimen — Thu, 26 Aug 2010 13:28:04 +0000

Today after two posts [#1, #2] in the past days here’s something that shows again the JavaScript power. This is not a complete example, but it’s good to start.

var str = '/text/1/text/2/';
var a = str.match(/(\d+)/gi);
console.log(a);

in that example you’ll get an array with all the numbers in the string [“1”, “2”] – yet another flexible js snippet!

Flexible JavaScript – Replace in a String

Stoimen — Wed, 25 Aug 2010 12:36:02 +0000

Here’s yet another example of the JavaScript flexibility. You can simply call .replace() on every string and pass a regex as a parameter!

var str = 'my simple string';
str.replace(/ /g, '-'); // now 'str' will contain 'my-simple-string'

Quick Look at JavaScript Objects

Stoimen — Wed, 11 Aug 2010 17:38:55 +0000

JavaScript Objects

As you may know there are different notations of objects in JavaScript, and there are slight differences. However here I’m gonna achieve the same thing with different notations. The first one is the object notation in JavaScript known mostly from JSON. There you’ve to construct a key/value pairs, divided by a colon:

var class1 = {
    a : 0,
    func1 : function() {
        console.log(class1.a);
    },
    func2 : function(a) {
        this.a = a;
    }
}
class1.func2(3);

Here we have two functions – func1 and func2 and one member variable. Func2 is setting up the member variable, it’s something like a setter in some languages like Java and PHP, and the func1 is printing the value of that variable via console.log(). Note that in the body of func1() the variable “a” is accessed with the class name: class1.a. Here the notation can be changed to this.a, which will result in the same thing.

...
console.log(this.a);
...

Notation #2

While in the notation I’ve just used is not possible to have two different instances from the same class, in the next example this is possible. In JavaScript the objects are even the functions, and you can access the function’s private variables with the dot notation.

var class2 = function() {
    this.a = 0;
    this.func1 = function() {
        console.log(this.a);
    }

    this.func2 = function(a) {
        this.a = a;
    }
}

To use this object you’ve to use the “new” operator.

var c = new class2();
c.func2(4);

This helps you create more than one instance of the same class.

var c = new class2();
var d = new class2();
c.func2(3);
d.func2(4);

JavaScript array.pop() – Get The Last Item

Stoimen — Mon, 14 Jun 2010 13:30:18 +0000

Let’s assume there’s a little, simple JavaScript array:

var a = [3,2,4,5,2,4,5,8];

If you pop() an element from it – what element will be taken? The answer is a bit frustrating, but logical – the last one:

var b = a.pop();
alert(b); // this will result in 8

JavaScript Objects Coding Style

Stoimen — Mon, 24 May 2010 07:48:50 +0000

JavaScript vs. PHP

Continuing from my post about PHP arrays coding style and following the comments of that post, I’d like to write a bit about JavaScript objects’ coding style.

You perhaps know that the term object is quite undefined or under estimated in the JavaScript world, but I’d speak about the key/value pairs in JS commonly formatted like that:

var obj = { key : 'value' }

Here you can add more and more key/value pairs, but what’s different from the PHP associative arrays and what’s the same and should be cosidered.

The Same as PHP?

I wrote about the alignment in PHP and hashes. Than I showed how I align them:

$arr = array(
   'short'   => 'val',
   'longkey' => 'val'
);

In JavaScript you should use the same technique of alignment:

var obj = {
   'short'   : 'val',
   'longkey' : 'val'
};

Some Differences

Yes, there are more differences, which is normal. First of all you don’t have the => notation in JavaScript and a : is used. Second and most important you cannot add a trailing comma after the last key/value pair. Note that in PHP that’s fine!

// that will throw an error in MSIE
var obj = {
   'short'   : 'val',
   'longkey' : 'val',
};

while this is OK in PHP and it’s encouraged:

$arr = array(
   'short'   => 'val',
   'longkey' => 'val',
);

JavaScript Snippets: IF Statements Optimization

Stoimen — Sun, 14 Mar 2010 18:28:46 +0000

A “Typical Installation” …

As most of the desktop software gives us opportunity to choose from typical or custom installations, let me write what’s a typical IF conditional statement in JavaScript and … every other programing language.

if ( thisIsTrue ) {
    printMe("some message");
}

A “Custom Installation” …

The first thing you can improve from the code above is removing the brackets.

if ( thisIsTrue )
    printMe("someMessage");

Because in JavaScript everything’s on the client – every symbol matters. What if we remove as much as we can!

thisIsTrue && printMe("someMessage");

JavaScript inheritance example

Stoimen — Tue, 02 Mar 2010 15:24:46 +0000

JavaScript and inheritance

Almost for everybody the JavaScript way of implementing inheritance is odd. For a typical programmer it should look more C or Java like, but is not. However to give you a breve example, I’d like to make two objects, and to make the second one to inherit from the first. Thus I’d like to show how neither parent or child objects interact once they have been instanciated.

	var parent = function() {};
	parent.prototype = {
		name : 'parent',
		m : 1,
		a : function() {
			console.log(this.name + ': ' + this.m);
		},
		setM : function( value ) {
			this.m = value;
		}
	};
	
	var child = function() {};
	child.prototype = new parent;
	child.prototype.name = 'child';
	
	var parentObj = new parent();
	var childObj = new child();
	
	parentObj.a();
	parentObj.setM(12);
	
	childObj.a();
	childObj.setM(3);
	
	parentObj.a();
	childObj.a();

However this describes the ability to make complex JavaScript inheritance patterns. The complete source’s here.

JavaScript optimization. Optimizing IF statements.

Stoimen — Sun, 07 Feb 2010 07:51:41 +0000

IF statements in JavaScript and the normal world!

In fact every normal developer will try to make his code as readable as possible. In a normal world a JavaScript IF statement will look like so:

if ( expression ) myFunc();

where expression is something that can be either true or false and myFunc is just an example what can be called if the expression is true.

But that’s JavaScript?!

Yes, and just because is JavaScript every single character is important. Actually you can convert the row above with that one bellow:

expression && myFunc()

Than if expression is faulty myFunc() will not be called. That is really extreme and in the same time is quite clear to read.