Почему этот короткий код JavsScript работает

88
02 июня 2021, 12:10

Учу JS, наткнулся на такой пример и завис(((

Объясните мне пожалуйста смысл и логику того, почему этот код работает. По моему разумению он работать не должен по 2 причинам: 1) не определена переменная "n" 2) addThree не может принять на себя аргумент, так как это переменная, а не функция.

Но код верный и работает. Что не так с моим пониманием JS?

let c = 4 
function addX(x) { 
  return function(n) { 
     return n + x 
  } 
} 
const addThree = addX(3) 
let d = addThree(c) 
console.log('example partial application', d)

Answer 1

он работать не должен по 2 причинам:

addThree не может принять на себя аргумент, так как это переменная, а не функция.

Есть два вида объявления функций: Function Declaration и Function Expression. Первый вид, это когда пишется так:

function hello(world) {
  return 'Значение аргумента: ' +  world;
}
console.log(hello('Привет!'));

Второй вид объявляется так:

let hello = function(параметры) {
  // тело функции
};
hello(Параметр);

не определена переменная "n"

Раз с первым пунктом определились, смотрим на второй.

const addThree = addX(3)

Т.к. addX возвращает не конкретное значение, а опять функцию (а мы уже узнали про объявление Function Expression), то по факту ни что иное как

const addThree = function(n) {
     return n + 3
}

Где переменная x по факту подставилась непосредственно в выражение. Почему так - читай про Замыкания. И теперь у нас по факту имеется функция addThree, которую для наглядности можно переписать вот так:

function addThree(n) {
     return n + 3;
}

Поэтому в итоге в переменную d получаем результат, возвращаемый из функции addThree.

Answer 2

'use strict'; 
 
let c = 4; 
 
function addX(x) { 
  return function(n) { 
     return n + x; 
  }; 
} 
 
//в переменной addThree будет храниться результат вызова функции addX 
//вызов addX(3) вернет функцию, и сохранить контекст (значение параметра x = 3) 
const addThree = addX(3); 
 
//переменная - это всего лишь "контейнер для данных". в данный момент в переменно addThree находиться функция. 
//вызов addThree(с) вернет значение выражения n + x. x = 3, n = 4. 
 
let d = addThree(c); 
 
console.log('example partial application', d);

P.S: Не забывай про ;, и пиши желательно с использованием 'use strict';.

Полезные ссылки:

  • Объявление Function Expression
  • Замыкание
  • Советы по стилю кода
READ ALSO
Добавление блока индексируемного Vue js

Добавление блока индексируемного Vue js

Как сделать такое добавление блока при нажатии на кнопку добавить блок как здесь, чтобы присваивался id и можно было перемещать блоки

95
Медиа запросы меньше 1024рх

Медиа запросы меньше 1024рх

вопрос такойЕсть класс

97
ssh через QProcess

ssh через QProcess

Есть вот такой код :

102
Проблемы с программой [закрыт]

Проблемы с программой [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

119