JavaScript Refersher

JavaScript ES6 вышел в 2015 году, и с тех пор прошло довольно много времени. Я просто расскажу о некоторых основных функциях, которые были введены в ES6 и которые важно понимать.

let и const

До ES6 var был ключевым словом де-факто для объявления переменных, используемым в JavaScript. Теперь рекомендуется использовать let и const. Сначала давайте разберемся, что делает var.

var, если она объявлена вне функций, имеет глобальную область видимости. Она поднимается наверх и инициализируется как undefined. Мы также можем повторно объявить переменную. Некоторая проблема заключается в том, что мы можем использовать переменную до инициализации и ожидать ошибки, но получим undefined. Кроме того, переменные, использующие var, могут быть повторно объявлены и использованы для другой цели. Это особенно актуально в больших проектах.

Ниже мы можем ожидать ошибки или забыть инициализировать переменную. Но мы получаем неопределенное значение.

console.log(test);//undefined
var test = "Hi";

Ниже мы могли неосознанно использовать ту же переменную для другой цели.

var test = "Hi"
var no = 5
if (no == 5) {
    var test = 0;
}
console.log(test);//0

Также могут возникнуть ситуации, когда мы хотим, чтобы переменная не изменялась (константы). Все эти проблемы решаются с помощью let и const. Приведенная ниже таблица даст вам представление о том, как это делается.

Стрелочные функции

Стрелочные функции являются нормой в JavaScript. Обычная функция JS выглядит так, как показано в приведенном ниже фрагменте.

function myDobuleFun(no){
    return no * 2;
}

Стрелочную функцию можно записать несколькими способами. Давайте рассмотрим их.

const myDoubleFun = (no) => {
    return no * 2;
}

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

const myDobuleFun = no => no * 2;

Экспорт и импорт (модули)

В ES6 мы можем писать модульный код. Для этого используются экспорты и импорты. Давайте рассмотрим экспорт и импорт на нескольких примерах.

Ниже приведен экспорт по умолчанию. Мы рассмотрим, как его можно импортировать.

//test.js
const test = 10;
export default-test;

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

//app.js
import test from './test.js'
import t from './test.js'

Ниже мы используем именованные экспорт и импорт. Поскольку их несколько, мы используем именованный импорт.

//util.js
export const pi = 3.14;
export const e = 2.718;

Ниже мы используем именованный импорт, мы можем импортировать по одному, используя имя или в виде пакета. Мы назвали пакет как bundled, и доступ к импортированным свойствам можно получить через bundled.pi или bundled.e.

//app.js
import {pi} from './util.js'
import {e} from './util.js'
import {pi as math_pi} from './util.js'
import * as bundled from './util.js'

Операторы Spread и Rest

Оба оператора представлены по адресу …..

Spread используется для разделения элементов массива или свойств объекта.

let no = [1, 2, 3];
let newNo = [...no, 4];//[1, 2, 3, 4]
let newNo = [no, 4];//[[1, 2, 3], 4]

Rest используется для объединения списка аргументов функции в массив.

const filter = (...args) => {
    return args.filter(e1 => e1 === 1);
}

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

Используется для извлечения элементов массива или свойств объекта и хранения их в переменных.

[a, b] = ['Hi', 'World'];
console.log(a); //Hi
console.log(b); //World
{name} = {name: 'John', age: 20};
console.log(name)//John
console.log(age)//undefined

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