6 советов начинающему Javascript девелоперу.

1. JavaScript не поддерживает ассоциативные массивы(хештаблицы, мапы).

Для этого можно использовать объекты :

var map = { apple : 6, strawberry : 50 }

обращаться к ним можно так :

  map.apple; // 6
  map['strawberry']; // 50

Удаление свойств лучше сделать через метод delete -

delete map.apple  // true
map // Object {strawberry: 50}

таким способом удалиться сама запись из объекта. В противном случаи можно было сделать так :

  map.apple = undefined;
  // или
  map.apple = null;
  // но ключ самого элемента в объекте всё равно останется
  map // Object {apple: undefined, strawberry: 50}

Разница между строковой нотацией

var map = { 'apple' : 6 , 'strawberry' : 50  }

и

var map = { apple : 6 , strawberry : 50  }

в том,что в первом случае, объект map можно использовать как JSON объект.

2. Используйте === вместо ==

Проблема == в том, что этот оператор автоматически преобразовывает типы во время сравнения. Поэтому == и === дают разные результаты :

'10' == 10  // true
'10' === 10 // false

3. Избегайте глобальных переменных

Создание любой переменной, без идентификатора var автоматически делает эту переменную глобальной. Что приводит конфликту имен во время работы с посторонним кодом. JS не поддерживает блочную область видимости. Код :

var a=5;
console.log(a); // 5

и

{
    var a=5;
}
console.log(a); // 5

идентичен.

Для таких случаев в JS есть функциональная область видимости.

function foo(){
    var a = 5; // переменная видна только внутри функции
}
console.log(a); // ReferenceError: a is not defined

4. Сокрытие функций от глобальной области видимости

При написании какой нибудь своей утилиты или либы, желательно скрыть весь её функционал в какой нибудь одной переменной. Это даст вам бесконфликтное внедрение и хорошие условия сосуществования с другим сторонним js-ом.

MyUtil = {
    calculate : function(a,b){
        console.log(a+b);
    },
    sayHello : function(name){
        return "Hello "+name;
    }
}
MyUtil.calculate(5,12); // 17
MyUtil.sayHello("World"); // "Hello World"

Так же можно скрывать не только функции но и переменные, только немного другим способом.

function MyUtil() {
    var counter = 0; // эта переменная является приватной
    return {
        increment : function(){
            return ++counter;
        },
        clear : function(){
            counter = 0;
        }
    }
}

Переменная counter не видна никому, кроме внутренних функций.

var foo = MyUtil(); 
// var foo = new MyUtil(); другой вариант инициализации
foo.counter; // будет ошибка

Использовать MyUtil можно таким способом :

var foo = MyUtil();
foo.increment(); // 1
foo.increment(); // 2
foo.clear(); // 0

Отличие первого способа от второго, в том, что в первом уже происходит инициализация объекта, а во втором можно сказать, только описание, а инициализация во время присваивания. Если сравнивать с языком Java, то первый случай, это статические свойства и методы, а второй, полноценный класс, который необходимо проинициализировать, прежде чем использовать.

5. Альтернативная конкатенация строк и работа с DOM

Допустим необходимо создать список каких нибудь элементов и добавить эти элементы в HTML код. Первый способ который приходит в голову :

var list = ['item1', 'item2', 'item3', ... ];
for(var i=0; i<=list.lenght; i++){
    document.getElementById("some_id").innerHtml = "<div class='class'>"+list(i)+"</div>";
}

В коде есть по крайне мере два проблемных места. Первое. Обращение в элементам DOM модели очень затратный процесс. Поэтому избавимся от него и будем делать это единожды.

var list = ['item1', 'item2', 'item3', ... ];
var htmlList;
for(var i=0; i<=list.lenght; i++){
    htmlList+="<div class='class'>"+list(i)+"</div>";
}
document.getElementById("some_id").innerHtml = htmlList;

Второе. Конкатенация строк может работать быстрее.

var list = ['item1', 'item2', 'item3', ... ];
var htmlList = "<div class='class'>" + list.join("</div><div class='class'>") + "</div>"
document.getElementById("some_id").innerHtml = htmlList;

I won’t bore you with benchmarks; you’ll just have to believe me (or test for yourself) - this is by far the fastest method! Using native methods (like join()), regardless of what’s going on behind the abstraction layer, is usually much faster than any non-native alternative. - James Padolsey, james.padolsey.com

6. Self-Executiong Function

Это функция, которая выполняется автоматически при её создании, и имеет следующий вид:

(function(a,b){
    var result = a+b;
    return result;
})(10,20) 
// 30

Ну и для тех, кому не хватило, вот пару ссылок на полезные ресурсы :