Скрытые фичи JavaScript

Несмотря на высокую востребованность, совсем немногие разработчики знают его скрытые фичи языка JavaScript. Перед вами 10 главных скрытых фишек JavaScript по мнению пользователей stackoverflow.

1. Работа с аргументами функции

Вам не нужно определять параметры для функции. Вы можете просто использовать массиво-подобный объект функции argument.

	
function sum() { 
    var retval = 0; 
    for (var i = 0, len = arguments.length; i < len; ++i) { 
        retval += arguments[i]; 
    } 
    return retval;
} 
sum(1, 2, 3) // вернет 6

2. Операторы === и !==

Всегда используйте === и !== вместо == и !=.

	
alert('' == '0'); //false 
alert(0 == ''); // true 
alert(0 =='0'); // true

== не является транзитивным. Если вы используете === , то оно как и ожидалось будет возвращать false для всех вышеперечисленных случаев.

3. Функции в JavaScript

Функции - граждане первого класса в JavaScript:

	
var passFunAndApply = function (fn,x,y,z) { 
    return fn(x,y,z); 
}; 

var sum = function(x,y,z) {
    return x+y+z;
}; 

alert(passFunAndApply(sum,3,4,5)); // 12

В частности функции могут быть переданы как параметры, например Array.filter() является функцией обратного вызова:


[1, 2, -1].filter(function(element, index, array) { 
   return element > 0 }); // -> [1,2]

Также вы можете объявить "private" функцию, которая существует только в области действия определенной функции:


function PrintName() { 
var privateFunction = function() { 
   return "Steve"; 
}; 
return privateFunction(); 
}

4. Оператор in

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

	
var x = 1; 
var y = 3; 
var list = {0:0, 1:0, 2:0};
x in list; //true 
y in list; //false 
1 in list; //true 
y in {3:0, 4:0, 5:0}; //true

Если вы посчитаете, что литералы объекта недостаточно хорошо выглядят, то вы можете комбинировать их с помощью функции без параметров:


function list() {
var x = {}; 
for(var i=0; i < arguments.length; ++i)
 x[arguments[i]] = 0;
 return x 
}

5 in list(1,2,3,4,5) //true

5. Значения по умолчанию

Вы можете использовать оператор || в выражении присваивания для предоставления значения по умолчанию:

	
var a = b || c;

Переменная a получит значение c только если b = false (то есть если null, false, undefined, 0, empty string, или NaN), иначе a получит значение b.
Это часто полезно в функциях, когда вы хотите присвоить значение по умолчанию аргументу в случае, если оно не указано:


function example(arg1) { 
    arg1 || (arg1 = 'default value'); 
}

 

Например IE отказывает в обработчике событий:


function onClick(e) {
    e || (e = window.event); 
}
The debugger 

Этот оператор позволяет расставить брейкпоинты внутри кода:


// ... debugger; // ...

 

Если отладчик активен, то это приведет к его остановке прямо на этой линии.
Другими словами, если отладчик не работает в данный момент, то выражение не будет иметь видимого эффекта.
Многострочные литералы

	
var str = "This is a \ 
really, really \ 
long line!";

Вы должны быть осторожны, потому как символ рядом с '\' должен заканчивать строку, если у вас стоит пробел после '\', код будет выглядеть так же, но появится SyntaxError.

6. Область действия в JavaScript

JavaScript не имеет области действия блока:


var x = 1; 
{ var x = 2; } 
alert(x); // выводит 2

7. Свойства объекта

Вы можете получить доступ к свойствам объекта с помощью [] вместо '.'. Это позволяет найти свойство, которое соответствует переменной.

	
obj = {a:"test"}; 
var propname = "a"; 
var b = obj[propname]; // "test"

Также вы можете использовать это для получения/установки значения свойства, если его название неразрешенный идентификатор.

	
obj["class"] = "test"; // class - зарезервированное слово; obj.class было бы недоступно. 
obj["two words"] = "test2"; // использования оператора . невозможно с пробелом.

Некоторые люди не знают этого и заканчивают это использованием eval(),что по-настоящему плохая идея:


var propname = "a"; 
var a = eval("obj." + propname);

Так код сложнее читать, сложнее находить ошибки(невозможно использование jslint), он медленнее выполняется и может привести к XSS.

8. mdc

Если вы пробовали гуглить что-нибудь по JavaScript на эту тему, то добавьте в запрос "mdc" тогда первые результаты будут от Mozilla Developer Center.
Например:

Google: javascript array sort mdc

(в большинстве случаев можно исключить "javascript")

UPD: Mozilla Developer Center был переименован в Mozilla Developer Network. Ключевое слово "mdc" работает по-прежнему, но возможно вскоре нужно будет использовать "mdn".

9. Cap Obvious

Установите Firebug и используйте console.log("hello"). Это намного удобнее использования случайных alert();’ов

10. Private методы

Объекты могут иметь private методы

	
function Person(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; //private метод видим только внутри этого конструктора function calcFullName() { 
    return firstName + " " + lastName; } // public метод доступен всем
    this.sayHello = function () { 
        alert(calcFullName()); 
    } 
} 
//Использование: 
var person1 = new Person("Bob", "Loblaw"); 
person1.sayHello(); // Это не сработает так метод отсюда невидим alert(person1.calcFullName());

Также вам могут понравится:

15 советов по программированию на языке JavaScript
62 лучших видео для тех, кто хочет углубить знания в JavaScript

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

eFusion
01 марта 2020

ТОП-15 книг по JavaScript: от новичка до профессионала

В этом посте мы собрали переведённые на русский язык книги по JavaScript – ...
admin
10 июня 2018

Лайфхак: в какой последовательности изучать JavaScript

Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расск...