тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Ключи из переменных в JavaScript

Пусть у нас дан вот такой массив:

let arr = ['a', 'b', 'c'];

Выведем на экран элемент с ключом 0:

let arr = ['a', 'b', 'c']; console.log(arr[0]); // выведет 'a'

Давайте теперь ключ выводимого элемента не будем писать непосредственно в квадратных скобках, а запишем его в переменную:

let arr = ['a', 'b', 'c']; let key = 0; // запишем ключ в переменную

Используем теперь нашу переменную для вывода соответствующего элемента:

let arr = ['a', 'b', 'c']; let key = 0; // запишем ключ в переменную console.log(arr[key]); // выведет 'a'

Дан следующий массив:

let arr = {'a', 'b', 'c'};

Дана также переменная key со значением 2.

Выведите на экран элемент, ключ которого хранится в переменной key.

Дан следующий массив:

let arr = [1, 2, 3, 4, 5];

Дана также переменная key1 со значением 1 и переменная key2 со значением 2.

Найдите сумму элементов, ключи которых хранятся в наших переменных.

Ключи объектов

Ключи объектов также могут хранится в переменных, смотрите пример:

let obj = {key1: 'a', key2: 'b', key3: 'c'}; let key = 'key1'; // записываем ключ в переменную console.log(obj[key]); // выведет 'a'

Дан следующий объект:

let obj = {'a': 1, 'b': 2, 'c': 3};

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

Нюансы объектов

Ключи из переменных в объектах имеют некоторые нюансы.

Давайте изучим их вот на таком объекте, в котором для простоты будет только один элемент с ключом key:

let obj = {key: '!!!'};

Давайте выведем элемент объекта, обратившись к нему по ключу. Для этого мы в квадратных скобках пишем этот ключ в кавычках:

let obj = {key: '!!!'}; console.log(obj['key']); // выведет '!!!'

Пусть теперь название нашего ключа хранится в переменной key:

let obj = {key: '!!!'}; let key = 'key'; // храним название в переменной

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

let obj = {key: '!!!'}; let key = 'key'; console.log(obj[key]); // выведет '!!!'

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

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

Описанный нюанс часто является источником ошибок. Давайте посмотрим на примере, как возникают эти ошибки.

Пусть дан вот такой объект:

let obj = {text: '!!!'};

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

let obj = {text: '!!!'}; console.log(obj[text]); // выдаст ошибку, так как переменной text нет

Еще хуже будет, если случайно совпало так, что переменная text у нас уже существует (для совсем других целей). В этом случае содержимое этой переменной и подставится вместо ключа.

Пусть для примера в переменной text лежит строка 'string'. Тогда JavaScript будет искать элемент с ключом string в нашем объекте, не найдет его и вернет undefined:

let text = 'string'; // переменная text с каким-то значением let obj = {text: '!!!'}; console.log(obj[text]); // выведет undefined

А вот если так случайно окажется, что в нашем объекте по чистой случайности окажется ключ string - то на экран и выведется содержимое элемента с этим ключом string, а не с ключом text, как мы этого хотели:

let text = 'string'; // переменная text с каким-то значением let obj = {text: '!!!', string: '???'}; console.log(obj[text]); // выведет '???' - содержимое элемента с ключом string

То есть наш код не будет выдавать ошибку в консоль, будет как-то работать, но делать не то, что мы хотели. Получим трудноуловимую ошибку и все потому, что мы забыли кавычки!

Нюансы альтернативного синтаксиса объектов

Пусть теперь у нас есть вот такой объект:

let obj = {text: '+++', key: '!!!'};

Давайте с помощью альтернативного синтаксиса выведем элемент с ключом text:

let obj = {text: '+++', key: '!!!'}; console.log(obj.text); // выведет '+++'

Пусть теперь мы ключ text будем хранить в переменной key:

let obj = {text: '+++', key: '!!!'}; let key = 'text'; // храним ключ в переменной

Давайте теперь выведем элемент, ключ которого хранится в переменной key. Если мы решим воспользоваться альтернативным синтаксисом - нас ждет сюрприз: вместо содержимого элемента с ключом text, мы увидим содержимое элемента с ключом key:

let obj = {text: '+++', key: '!!!'}; let key = 'text'; console.log(obj.key); // выведет '!!!'

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

Как вы уже поняля, я сделал в нашем объекте ключ, совпадающий с именем переменной. Если такого ключа не будет, то JavaScript будет искать элемент с ключом key, не найдет его и выведет undefined:

let obj = {text: '+++'}; let key = 'text'; console.log(obj.key); // выведет undefined

То есть наша переменная вообще никак не участвует в коде. Если ее убрать, то ничего и не поменяется:

let obj = {text: '+++'}; console.log(obj.key); // выведет undefined