Функции в JavaScript

В частности функции могут быть переданы как параметры, например 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();
}

#функции

Оператор 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

#операторы

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

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

var a = b || c;

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

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

#операторы

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

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

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

#общее

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

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

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

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

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

#объекты

mdc

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

Например:

Google:

 javascript array sort mdc

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

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

#полезно

Замена IIFEs блоками

Проблема использования немедленно вызываемых функций, заключалась в том, что нужно было задавать значения переменным в пределах области функции. Теперь у нас есть возможность создавать блочные области, которые не ограничены исключительно функциональной областью.

(function () {
    var food = 'Meow Mix';
}());

console.log(food); // Reference Error

А теперь используем блочную область:

{
let food = 'Meow Mix';
};

console.log(food); // Reference Error

#функции

.includes( )

var string = 'food';
var substring = 'foo';

console.log(string.indexOf(substring) > -1);

Чтобы обозначить ограничение строки, мы можем просто использовать .includes(), который вернет логическое значение, вместо проверки > -1:

const string = 'food';
const substring = 'foo';

console.log(string.includes(substring));

#методы

.repeat( )

function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
        strings.push(string);
    }
    return strings.join('');
}

Теперь у нас есть доступ к реализации:

// String.repeat(numberOfRepetitions)
'meow'.repeat(3); // 'meowmeowmeow'

#функции

Литералы шаблонов в языке JavaScript

Используя литералы шаблонов, мы можем задавать строки со специальными символами, без необходимости их явного сокрытия.

var text = "This string contains "double quotes" which are escaped.";
let text = This string contains "double quotes" which don't need to be escaped anymore.;

Литералы шаблонов также поддерживают интерполяцию, что упрощает конкатенацию строк и значений:

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

Еще проще:

const name = 'Tiger';
const age = 13;

console.log(My cat is named ${name} and is ${age} years old.);

#функции

Деструктуризация

Деструктуризация позволяет нам извлекать значения из массивов или объектов и хранить их в переменных.

Деструктурированные массивы

var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
let [a, b, c, d] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2

Деструктурированные объекты

var luke = { occupation: 'jedi', father: 'anakin' };
var occupation = luke.occupation; // 'jedi'
var father = luke.father; // 'anakin'
let luke = { occupation: 'jedi', father: 'anakin' };
let {occupation, father} = luke;

console.log(occupation); // 'jedi'
console.log(father); // 'anakin'

#объекты #массивы

Модули в языке JavaScript

До ES6 мы использовали библиотеки, такие как Browserify, для создания модулей на стороне клиента. С ES6 мы можем напрямую использовать модули всех типов (AMD и CommonJS).

Экспорт в CommonJS

module.exports = 1;
module.exports = { foo: 'bar' };
module.exports = ['foo', 'bar'];
module.exports = function bar () {};

#модули

Оператор распространения

В ES5 мы могли найти максимальные значения в массиве, используя метод apply на Math.max следующим образом:

Math.max.apply(null, [-1, 100, 9001, -32]); // 9001

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

Math.max(...[-1, 100, 9001, -32]); // 9001

Мы можем легко конкатенировать литералы массивов:

let cities = ['San Francisco', 'Los Angeles'];
let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']

#операторы

Symbol( )

Вызов Symbol () или Symbol (описание) создаст уникальный символ, который не может быть просмотрен глобально.

const refreshComponent = Symbol();

React.Component.prototype[refreshComponent] = () => {
// делать что-нибудь
}

#функции

Symbol.for(key)

Symbol.for(key) создает символ, который по-прежнему неизменен и уникален, но может быть просмотрен глобально. Два идентичных вызова Symbol.for(key) возвращают один и тот же символ.

Symbol('foo') === Symbol('foo') // false
Symbol.for('foo') === Symbol('foo') // false
Symbol.for('foo') === Symbol.for('foo') // true

Примечательным примером использования Symbol для взаимодействия является Symbol.iterator, который существует во всех повторяющихся типах в ES6: массивы, строки, генераторы и т. д.

#функции

Maps в языке JavaScript

Maps позволяют нам устанавливать, получать и искать значения (и многое другое).

let map = new Map();
> map.set('name', 'david');
> map.get('name'); // david
> map.has('name'); // true

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

let map = new Map([
['name', 'david'],
[true, 'false'],
[1, 'one'],
[{}, 'object'],
[function () {}, 'function']
]);

for (let key of map.keys()) {
console.log(typeof key);
// > string, boolean, number, object, function
}

Примечание. Использование функций или объектов не будет работать при проверке равенства с использованием таких методов, как map.get(). Таким образом, придерживайтесь примитивных значений, таких как строки, булевы и числа.

#функции

WeakMaps

Чтобы хранить частные версии данны можем использовать WeakMaps для хранения наших значений:

let _age = new WeakMap();
class Person {
constructor(age) {
_age.set(this, age);
}

incrementAge() {
let age = _age.get(this) + 1;
_age.set(this, age);
if (age > 50) {
console.log('Midlife crisis');
}
}
}

Самое интересное в использовании WeakMaps для хранения наших личных данных заключается в том, что их ключи не выдают имена свойств, которые можно увидеть с помощью Reflect.ownKeys():

> const person = new Person(50);
> person.incrementAge(); // 'Midlife crisis'
> Reflect.ownKeys(person); // []

#функции

Async Await в языке JavaScript

Async Await позволяет выполнять то же самое, что мы выполнили с помощью генераторов и промисов, но с меньшими усилиями:

var request = require('request');

function getJSON(url) {
return new Promise(function(resolve, reject) {
request(url, function(error, response, body) {
resolve(body);
});
});
}

async function main() {
var data = await getJSON();
console.log(data); // NOT undefined!
}

#функции

С наступающим Новым Годом, дорогие подписчики ❤️

Пусть 2023 принесёт только счастье, радость и успехов 🎈

Геттеры и сеттеры в языке JavaScript

ES6 начал поддерживать функции getter и setter внутри классов.

Последние браузеры также поддерживают функции getter / setter в объектах, и мы можем использовать их для вычисляемых свойств, добавляя предварительную обработку перед настройкой / получением:

var person = {
firstName: 'James',
lastName: 'Bond',
get fullName() {
console.log('Getting FullName');
return this.firstName + ' ' + this.lastName;
},
set fullName (name) {
console.log('Setting FullName');
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}

#функции