Как работает данный код

Вопрос-ответ JavaScript
1

const getLetter = (name, numLetter) => name[numLetter - 1] || ‘’;

Разьясните непонятливому как работает это выражение !!!

2

Здравствуйте. А где само условие? Я тут вижу лишь функцию которая принимает name и numLetter. А так же результат логических выражений “или”.

3

Как я понял, а точнее прогуглил, ваше решение связано с логическими выражениями. А, именно, извлекает из переданной строки указанный символ (по порядковому номеру, а не по его индексу) и возвращает его наружу. Если такого символа нет, то функция возвращает пустую строку.
test(‘test’, () => {
const name = ‘Hexlet’;
expect(f(name, 0)).toBe(‘’);
expect(f(name, 1)).toBe(‘H’);
expect(f(name, 6)).toBe(‘t’);
expect(f(name, 7)).toBe(‘’);
expect(f(name, 11)).toBe(‘’);
});

4

const getLetter = (name, numLetter) => name[numLetter - 1] || '';

В переменную getLetter записывается функция. Функция с двумя аргументами. Функция возвращает результат выражения name[numLetter - 1] || ''. Стрелочный синтаксис функции позволяет “опускать” return, но неявный return все равно присутствует.

(name, numLetter) => name[numLetter - 1] || '' все это выражение это объявление анонимной функции. Только тут “опущена” часть необязательных символов. Эквивалент этой функции могла бы быть вот такая функция ниже. Единственная разница между ними это то во что вычисляется this, но в данном контексте this не играет роли потому что не используется в теле функции.

function (name, numLetter) {
	return name[numLetter - 1] || ''
}

Далее смотрим на выражениеname[numLetter - 1]. Со строками можно работать как с массивами, обращаясь по индексу к сиволу. 'mama'[1] === 'a' // true. name[numLetter - 1] выражение вычисляется в символ который имеет индекс в строке numLetter - 1. Кстати, как и с массивом, если попробовать вычислить элемент с большим индексом чем длина строки, то выражение вычислется в undefined. 'mama'[999] === undefined // true.

Про ||. Выражения типа a || b вычисляются или в a или в b (в отличии от других языков где логические операторы возвращают булевые значения). a || b вычисляется в a если булевый эквивалент a это true. В b если булевый эквивалент a это false. Кстати, быстро узнать булевый эквивалент значения можно в консоли браузера, применив двойное отрицание к значению. !!'mam' === true // true и !!'' === false. Булевые эквиваленты false, null, undefined, 0, '', NaN это false. У всех других значений (пустой массив, строка с пробелом, пустой объект итд) булевый эквивалент true.

Зная вышесказанное name[numLetter - 1] || '' можно понять так “выражение вернет символ с индексом numLetter - 1 или пустую строку если сивол по тому индексу отсутствует (undefined)”.

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

const getLetter = function (name, numLetter) {
	if (name[numLetter - 1]) {
		return name[numLetter - 1]
	} else {
		return ''
	}
}
2 лайка
5

Спасибо огромное за столь ёмкое обьяснение. Респект!
Думаю, если бы почаще расписывали такие, вроде незамысловатые функции для начинающих, то обучаться было бы значительно эффективнее. К сожалению примеры составлены таким образом, что многие явные или неявные вещи просто ускользают от неопытных. Ещё раз огромное спасибо.

6

Пожалуйста. Я рад что моя работа полезна.

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

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

  • скооперироваться с 3-5 другими людьми и обсуждать непонятки, а так же “эврика!” моменты в чате.
  • найти ментора и обсуждать с ним.
  • найти сообщество людей которые почему-то тратят свои ресурсы на безвоздмездную помощь (как наш форум, например или реддит или javascript.ru).

Кстати, форум и меня можно поддержать на патреоне http://patreon.com/podgorniy

1 лайк