Blog logotype

Введение в JavaScript. Переменные. Codecademy на русском

Данная статья является переводом урока Variables из курса Introduction to JavaScript. Если появятся вопросы, обязательно пишите в комментариях. С радостью отвечу на все. Также принимаются замечания и предложения.

Источник

Variables

Программисты используют переменные, чтобы код был более понятен и мог изменяться.

Представьте, что вы пишете приложение о погоде. Ваш термометр показывает температуру в Цельсиях, но ваша цель записывать температуру в градусах Фаренгейта.

Вы пишите программу, которая принимает температуру в 15 градусов по Цельсию и вычисляет температуру по Фаренгейту.

Как только программа была написана, вы увидели, что сейчас температура 16 градусов по Цельсию. Чтобы вычислить температуру по Фаренгейту, вам нужно написать новую программу, которая будет преобразует теперь 16 градусов по Цельсию в Фаренгейт.

Вот тут-то и могут понадобиться переменные. Переменные позволяют нам назначать данным слово и использовать это слово, чтобы ссылаться на эти данные. Если они изменились (как градусы по Цельсию), мы можем заменить значение переменной, вместо того, чтобы заново перезаписывать программу.

В этом уроке мы изучим два типа переменных: let и const.

Инструкция

  1. Запустите ваш код.
    Что произошло в консоли?

  2. Добавьте внизу следующие строки кода в файл app.js:

console.log(location);
console.log(latitude);
console.log(inNorthernHemisphere);

Запустите ваш код и посмотрите в консоль.
Вы ожидали такой результат?

Create a Variable: const

Давайте углубимся и посмотрим переменные в дикой природе. Вот как объявить переменную константу (постоянную переменную - прим.пер.):

const myName = 'Arya';
console.log(myName);
// Выведет: Arya

Давайте рассмотрим этот пример:

  1. const, коротко от constant (константа), - это оператор (синтаксическая конструкция) в JavaScript, создающее новую переменную со значением, которое не может меняться.
  2. myName - это имя переменной. Заметьте, что слово не включает в себя пробелы, и мы увеличили регистр буквы N. В данном случае это общепринятый стандарт написания переменных в JavaScript, который называется camelCasing("ВерблюжийРегистр" - прим.пер.), потому что заглавные буквы каждого слова выглядит как горбы верблюда. (вообще здесь используется lowerCamelCase, где внутри фразы с заглавной пишутся все слова, кроме первого - прим.пер.)
  3. = это оператор присваивания. Он присваивает значение ('Arya') переменной (myName).
  4. 'Arya' - это значение, которое присваивается (=) переменной myName.

После того, как переменная была объявлена, мы можем вывести 'Arya' в консоль: console.log(myName).
Вы можете сохранить любые данные в переменные. Например, здесь мы сохранили числа:

const myAge = 11;
console.log(myAge);
// Выведет: 11

В данном примере, в первой строке мы установили значение переменной myAge 11. Ниже, при помощи console.log(), мы вывели 11 в консоль.

Инструкция

  1. Создайте константу с именем entree и строковым значением 'Enchiladas'.
  2. Теперь, под переменной entree, создайте константу с именем price, в которой будет сохранено число 12.
  3. После переменной price, используйте команду console.log(), чтобы вывести значение переменной entree.
    На следующей строке выведете значение price.
  4. Скопируйте и вставьте следующий код в вашу программу:
    entree = 'Tacos';
    Как только вы запустите код, то консоль выдаст следующее сообщение об ошибке:
    TypeError: Assignment to constant variable.
    Мы обсудим то, что произошло, в следующем упражнении.

Create a Variable: let

В конце предыдущего упражения мы получили сообщение об ошибке:
TypeError: Assignment to constant variable.

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

Однако переменные с оператором let могут перезаписываться.

let meal = 'Enchiladas';
console.log(meal);
meal = 'Tacos';
console.log(meal);
// выведет: Enchiladas
// выведет: Tacos

В вышеперечисленном примере, оператор let используется для создания переменной meal со строковым значением 'Enchiladas'. В третьей строке, значение переменной meal меняется на 'Tacos'.

Возможно, вам интересно, когда использовать const, а когда let. В основном, используйте только const, если значение, сохранённое в переменной, не меняется в вашей программе.

Инструкция

  1. Создайте переменную changeMe через let с булевым значением true.
  2. Теперь, установите changeMe значение логическое false. Выведите значение changeMe в консоль.

Undefined

Что случиться, если мы создадим переменную, но не присвоим ей значение?

JavaScript создаст пустрое значение переменной в памяти и установит его как undefined. Undefined - это пятый и последний из примитивных типов данных. JavaScript присваивает неопределённый тип данных к переменным, у которых нет значения.
let whatAmI;
В данном примере, мы объявили переменную whatAmI без какого-либо значения. JavaScript установил данной переменной значение undefined.

Инструкция

  1. Создайте переменную с именем notDefined, но не устанавливайте ей значение.
    Выведите результат в консоль.

2 Объявите переменнную valueless.
Выведите результат в консоль.

Mathematical Assignment Operators

В этом упражнении мы рассмотрим, как использовать переменные и математические операторы, чтобы вычислить новое значение и присвоить его к той же переменной. Посмотрите на пример ниже:

let x = 4;
x = x + 1;

В данном примере, мы объявили переменную x со значением 4. На следующей строке операция x = x + 1 увеличивает x с четырёх на пять.

Заметьте, что во второй строке для увеличения x на единицу мы написали x в правой и левой части оператора присваивания (=). Использование переменной дважды в одном выражении бывает запутанным и избыточным.

Чтобы решить эту проблемы, в JavaScript есть набор встроенных математических операторов присваивания, которые позволяют легко вычислять новое значение и присваивать его к той же переменной без написанния её дважды. Посмотрите примеры этих операторов:

let x = 4;
x += 2; // x присваивается число 6

let y = 4;
y -= 2; // y присваивается число 2

let z = 4;
z *= 2; // z присваивается число 8

let r = 4;
r++; // r присваивается число 5

let t = 4;
t--; // t присваивается число 3

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

  1. Первых три оператора(+=, -=, and *=) выполняют математическую операцию(+, -, or *) с числом в правой части, а затем присваивают новое значение переменной.
  2. Последние два оператора - это инкремент (++) and декремент (--). Эти операторы ответственны за увеличение и уменьшение числа на один, соответственно.

Инструкция

  1. Используя назначенные математические операторы, прибавьте к переменной molecule 16.
  2. Используя назначенные математические операторы, умножьте значение переменной particle на 6.02 и присвойте результат той же переменной.
  3. Используйте инкремент, чтобы увеличить значение переменной assay на 1.

String Interpolation

В предыдущих упражнениях мы переменным присваивали строки. Здесь вы узнаете, как вставлять содержимое, сохранённое в переменную, в строку.

Термином в JavaScript, предназначенным для вставки в строку данных, сохраненных в переменную, является строковая интерполяция.

Оператор +, который, как вы знаете, предназначен для сложения, также используется для интерполяции (вставки) переменной с типом string в строку следующим образом:

let myPet = 'armadillo';
console.log('I own a pet ' + myPet + '.'); 
// Выведет: 'I own a pet armadillo.'

В данном примере, мы сохранили значение 'armadillo' в переменную myPet. Во второй строке, оператор + использовался для соединения трёх строковых: I own a pet, значения переменной I own a pet и .. Результат этой интерполяции в консоли выглядит так:
I own a pet armadillo.

Инструкция

  1. Создайте переменную favoriteAnimal со значением вашего любимого питомца.
  2. Используя команду console.log, выведите: 'My favorite animal: Koala', только вместо 'Koala' поместите вашу переменную favoriteAnimal.

String Interpolation II

В новой версии JavaScript (ES6) мы можем легко вставлять переменные в строки другим способом:

  1. Вместо кавычек вокруг строки используйте обратные кавычки (этот символ обычно находится в верхней части клавиатуры, слева от клавиши 1 (или буква Ё - прим.пер.)).
  2. Оберните переменную в символы ${myVariable} в предложении. И нет необходимости в операторе +.

В ES6 интерполяция строк намного легче, чем в предыдущем упражнении. С ES6 мы можем вставить переменные прямо в ваш текст.

Это выглядит так:

let myPet = 'armadillo'
console.log(`I own a pet ${myPet}.`)
// Выведет: 'I own a pet armadillo.'

В приведенном выше примере, вся строка (всё предложение) окружена обратными кавычками (```), а переменная (myPet) заключена в символы ${}. Полученная строка: I own a pet armadillo.

Инструкция

  1. Создайте переменную myName и присвойте ей своё имя.
  2. Создайте переменнную myCity со значением вашего любимого города.
  3. Используйте ${} для интерполяции ваших переменных в предложении ниже. С помощью console.log() выведите предложение в консоль.
    My name is ИМЯ. My favorite city is ГОРОД.
    Замените значения ИМЯ и ГОРОД на ваши переменные, myName и myCity.

Review Variables

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

Давайте рассмотрим, что мы узнали:

  • Переменные хранят повторно используемые данные в программе.
  • JavaScript выводит ошибку, если вы будете переназначать переменную const.
  • Вы можете переназначить переменную, созданную с помощью let.
  • Переменные, объявленные без значений, сохраняются со значением примитивного типа данных, undefined.
  • Математические операторы присваивания помогают легко вычислять новые значения и присваивать их тем же переменным.
  • Оператор + используется для интерполяции (объединения) множества строк.
  • В JavaScript ES6 обратные кавычки() и ${}` используются для интерполяции значений в одну строку.