Christian Heilmann советует начинающим программировать на JavaScript, как писать более компактный код с использованием встроенных возможностей JavaScript.

Краткая запись

В JavaScript для некоторых конструкций имеется альтернативная сокращенная запись

Задание свойств объекта

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

Эквивалентная запись:

var car = {
  colour:'red',
  wheels:4,
  hubcaps:'spinning',
  age:4
}

Массивы

Создание массива

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
);

можно записать короче:

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
];

В то же время, ассоциативный массив - это тот же объект, и вместо создания массива car:

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;

проще задать свойства объекта car (см. выше Задание свойств объекта).

Тернарный оператор

Очень часто встречается конструкция присвоения значения переменной в зависимости от выполнения условия:

var direction;
if(x < 200){
  direction = 1;
} else {
  direction = -1;
}

Все это можно записать с использованием тернарного оператора

var direction = x < 200 ? 1 : -1;

Если заданное условие выполняется, переменной присваивается значение после знака вопроса, а если не выполняется - значение после двоеточия.

Еще пример - проверка попадания числа в заданный интервал на JavaScript в одну строку:

function IsInRange()
{  // Переменные с примерными значениями:
   var value=5 // проверяемое значение
   var v_left=0 // граница интервала слева
   var v_right=10 // граница справа
   leftInclude=true, rightInclude=true // включать граничное значение

/* Без тернарного оператора было бы так:
   var c1, c2;

   if (leftInclude)
      c1 = (value >= v_left);
   else
      c1 = (value > v_left);

   if (rightInclude)
      c2 = (value <= v_right);
   else
      c2 = (value < v_right);

   return (c1 && c2);

   А вот так в одну длинную строку:
*/
  return (leftInclude ? (value >= v_left) : (value > v_left)) &&
         (rightInclude ? (value <= v_right) : (value < v_right));
}

(Для заданных значений IsInRange() возвращает true)

Формат данных JSON

Данные можно хранить в массивах и строках с символами-разделителями, но для их использования в JavaScript потребуется преобразование.  JavaScript  работает с данными как с объектами, поэтому сложные данные удобно создавать и хранить как объекты в формате JSON с применением описанного выше синтаксиса краткой записи.

*** Формат JSON (JavaScript Object Notation -Нотация объекта JavaScript - для передачи данных в сериализованном виде), хотя и создан для JavaScript, является универсальным и теоретически поддерживается всеми современными языками программирования.

Например,  описание рок-группы:

var band = {
  "name":"The Red Hot Chili Peppers",
  "members":[
    {
      "name":"Anthony Kiedis",
      "role":"lead vocals"
    },
    {
      "name":"Michael 'Flea' Balzary",
      "role":"bass guitar, trumpet, backing vocals"
    },
    {
      "name":"Chad Smith",
      "role":"drums,percussion"
    },
    {
      "name":"John Frusciante",
      "role":"Lead Guitar"
    }
  ],
  "year":"2009"
}

JavaScript работает с данными в формате JSON без дополнительного преобразования, а в этом формате возвращают данные многие API (JSON-P).

Например, следующий код получает из веб-службы Delicious последние 15 закладок с меткой JavaScript  в формате JSON и выводит их в виде списка:

<div id="delicious"></div><script>
function delicious(o){
  var out = '<ul>';
  for(var i=0;i<o.length;i++){
    out += '<li><a href="' + o[i].u + '">' +
           o[i].d + '</a></li>';
  }
  out += '</ul>';
  document.getElementById('delicious').innerHTML = out;
}
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

JSON - это, возможно, самый простой способ описания сложных данных, к тому же, поддерживаемый браузерами (см. JSON). А для использования JSON в PHP применяется функция json_decode().

Встроенные функции JavaScript (Math, Array и String)

Чтобы писать более компактный код, следует внимательно изучать встроенные функции JavaScript.

Найти наибольшее число

Например, вот поиск наибольшего значения в массиве с помощью перебора:

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){
  if(numbers[i] > max){
    max = numbers[i];
  }
}
alert(max);

То же самое можно сделать без цикла с помощью функции сортировки:

numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
// или весь массив:
alert(numbers.join());

Просто sort() без задания функции сравнения нельзя использовать для массива чисел, т.к. по умолчанию сортировка выполняется лексикографически (сравниваются символы).
Еще одна полезная функция - Math.max(), которая возвращает наибольшее число из списка параметров:

Math.max(12,123,3,2,1123); // возвращает 1123

Эту функцию можно использовать для проверки поддержки некоторых свойств браузером:

var scrollTop= Math.max(
 doc.documentElement.scrollTop,
 doc.body.scrollTop
);

Это решает проблему Internet Explorer. Вы можете прочитать scrollTop текущего документа, но в зависимости от DOCTYPE значение будет присвоено одному свойству, а другое будет undefined  (на эту тему here.)

Функции split() и join() и добавление CSS-классов к элементам DOM

При добавлении класса к элементу DOM это может быть первый класс или этот класс нужно добавить к существующему классу, поставив перед ним пробел.  При удалении класса нужно удалить также пробелы  (это актуально для некоторых старых браузеров).

Возможный вариант функции добавления класса:

function addclass(elm,newclass){
  var c = elm.className;
  elm.className = (c === '') ? newclass : c+' '+newclass;
}

Или с использованием split() и join():

function addclass(elm,newclass){
  var classes = elm.className.split(' ');
  classes.push(newclass);
  elm.className = classes.join(' ');
}

Все наглядно и выполняется автоматически.

Источник - сайт coding.smashingmagazine.com