Концепции Javascript, которые вы должны знать как новичок #1

Здесь мы изучим некоторые концепции Javascript, которые, по моему мнению, должны знать все начинающие, прежде чем думать о повышении квалификации и изучении более сложных вещей. Если вы освоите эти концепции, вы будете готовы идти дальше.

Индекс

• Var, let и const
• Значения VS ссылки (примитивы и объекты)
• Условия

Var, let и const

Проще говоря, это способы определения поведения и области видимости переменной. Var был обычным способом объявления переменной, let и const появились позже и являются стандартным способом в настоящее время.

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

Ключевое слово let используется для объявления переменной, которая может менять свое содержимое в любое время, например:

let name = 'Will';
console.log(name) // 'Will'
name = 'Mike'
console.log(name) // 'Mike'

Ключевое слово const является более строгим в этом смысле, вы не можете изменить его значение, за исключением некоторых случаев, например, с массивом и обычным объектом, когда может показаться, что вы можете добавить что-то в этот массив и новые свойства к объектам, и этого не должно произойти, на самом деле это не так. const служит для предотвращения дальнейших присваиваний, но в некоторых случаях вам разрешено изменять его содержимое.

const price = 100
// trying to assign another value to it
price = 200
// Will throw: Uncaught TypeError: invalid assignment to const 'price'

Эта ошибка не произойдет с содержимым таких объектов, как массивы и простые объекты, вы можете изменять их содержимое. Понимание того, почему и как предотвратить ее возникновение, выходит за рамки данного поста.

И последнее, о чем полезно знать:

• Переменные let и const имеют область видимости.
• Они могут быть объявлены с тем же именем внутри другой области видимости.

Значения VS ссылки

Если вы знаете, что существуют примитивы и объектные типы, вы должны знать, что примитивы передаются по значению, а объекты — по ссылке.

По значению

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

Даже если мы попытаемся сделать копию одного, на нее не повлияют изменения, внесенные в другое число:

let one = 1;
let otherNumber = one;

// Sum some quantity to the otherNumber variable:
otherNumber = otherNumber + 10;

// Logging the contents:
console.log(one); // 1
console.log(otherNumber); // 11

По ссылке

Сейчас мы увидим, что непримитивы, такие как объекты и массивы, в некотором смысле являются полной противоположностью. Когда вы присваиваете значения объекту, создаете «копию» и изменяете исходный объект, вы увидите изменения в новой копии:

let person = { name: 'Dustin' };
let newPerson = person;
// Changing the first object:
person.pet = 'Demogorgon';
// Logging the newPerson object:
console.log(newPerson); // { name: 'Dustin', pet: 'Demogorgon'}

Переменные в Javascript хранят «значения», которые являются ссылками в памяти для всего, что не является примитивом. Полезно перечитать последнее предложение, и если оно еще не имеет смысла, я обещаю, что оно будет иметь смысл, если вы покопаетесь в нем самостоятельно.

Совет: Вы должны помнить об этой разнице при сравнении вещей, даже если вы сравниваете два абсолютно одинаковых массива с одинаковым содержимым, знайте, что Javascript по умолчанию будет сравнивать не их значения, а их эталонные значения, и они будут разными. Что касается сравнения значений массивов и объектов, я рекомендую вам изучить этот вопрос подробнее.

Условия

Полезно иметь возможность принимать решения в определенных сценариях. Условия — это способ создания реакций на некоторые логические сравнения, которые оцениваются в значения true или false.

Простой оператор if:

// Ask the user his/her age and save it to the 'age' variable
let age = prompt('How old are you?')

// Make a conditional check:
if (age > 30) { 
    alert('You can be a part of the group!');
}

Это означает, что если переменная age больше числа 30, это условие оценивается как true, поэтому выполняется блок кода, заключенный в фигурные скобки. Если нет, то весь блок игнорируется.

Совет: Приятно понимать, что у каждого значения в Javascript есть фальшивое и истинное значения, и это может быть использовано в вашу пользу:

let zero = 0;
let one = 1;

if (zero) {... // '0' is falsy

if (one) {... // '1' resolves to truthy

Что если мы хотим, чтобы было оценено больше условий? Мы можем сделать это с помощью предложения else:

if (year === '2020') {
    alert('That was two years from now');
} else {
    alert('The year value is not 2020');
}

В приведенном выше примере мы предполагаем, что если значение, присвоенное year, равно ‘2020’, то будет выполнен первый блок кода. В других случаях второй блок кода является запасным вариантом для неудачного первого сравнения.

Еще случаи для проверки?

if (age < 18) {
    alert('You are not allowed to drive');
} else if (age <= 21) {
    alert('You may get a license to drive');
} else if (age <= 30 ) {
    alert('You can drive and enter to a bar');
} else {
    alert('You are more that thirty years old')
}

Еще один хороший способ проверки — троичное выражение:

let isAllowedMessage = age > 21 ? 'You are allowed' : 'You need to be 21 or older'

если age > 21 оценивается как true, то возвращается часть после ‘?’. Если false, то возвращается часть после двоеточия. Хороший способ сделать простую условную проверку. Будьте осторожны с такими упрощениями, всегда стремитесь к читабельности кода.

Когда цепочка if else может выйти из-под контроля с большим количеством условий, для лучшей читабельности можно использовать switch statement, идите и изучайте различные способы проверки условий, вы будете использовать их каждый день в работе.

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

Если вы хотите порекомендовать этот пост другу или коллеге, которым, по вашему мнению, он может помочь, я буду рад помочь!

Дайте мне знать, что вы думаете в комментариях!