Объясните как работает данный код?

Question

[Дмитрий]

К своей грусти и печали не могу понять как работает данный код :-(
Какую роль тут выполняет obj в конце и почему туда рекурсивно добавляются элементы?

var options = 'a.b.c.d';
var parts = options.split('.');
var obj = {};
var result;
parts.reduce((part, i) => part[i] = {}, obj);

result = obj;
console.log(result);

/*
result wanted:
var result = {
  a: {
    b: {
      c: {
        d: {}
      }
    }
  }
}*/

Comments

[Kovalsky]

Если учесть, что это parts.reduce((part, i) => part[i] = {}, obj); на самом деле то же самое, что и это

parts.reduce((part, i) => {
    part[i] = {};
    return part[i]
}, obj);

то должно стать понятнее

[Дмитрий]

Kovalsky, Каким образом происходит рекурсивное добавление в obj?
Вот так: obj + 'a' = {} + 'b' = {} + 'c' = {} + 'd' = {} ?

[Kovalsky]

Дмитрий, что такое obj + 'a' я не знаю, но алгоритм приблизительно такой:

var options = 'a.b.c.d';
var parts = options.split('.'); // [ 'a', 'b', 'c', 'd' ]
var obj = {};
var result;
parts.reduce((current_object, part) => {
    current_object[part] = {};
    return current_object[part]
}, obj);

// #1: current_object = {} (просто obj), part = 'a', (obj = {})
//    current_object['a'] = {}
//    return current_object['a']
// #2: current_object = {} (obj.a), part = 'b', (obj = { a: {} })
//    current_object['b'] = {}
//    return current_object['b']
// #3: current_object = {} (obj.a.b), part = 'c', (obj = { a: { b: {} } })
//    current_object['c'] = {}
//    return current_object['c']
// #4: current_object = {} (obj.a.b.c), part = 'd', (obj = { a: { b: { c: {} } } })
//    current_object['d'] = {}
//    return current_object['d']

// obj = { a: { b: { c: { d: {} } } } }

[Дмитрий]

Kovalsky, Спасибо, более-менее прояснилось. Сложная штука для понимания конечно

[Kovalsky]

Дмитрий, если непонятен именно reduce, то стоит помедитировать на примеры попроще:

[ 2, 5, 9 ].reduce((sum /** сумма **/, current_number /** текущее число **/) => {
    sum = sum + current_number;

    return sum; 
}, 0 /** начальное значение для суммы **/)
// сумма равна 16


const employees = [
	{
		name: 'Vasiliy',
		age: 29,
		salary: 50000
	},
	{
		name: 'Ben',
		age: 42,
		salary: 76000
	},
	{
		name: 'Emma',
		age: 19,
		salary: 120000
	}
];

const employees_data = employees.reduce((data /** данные по сотрудникам **/, employee /** сотрудник **/) => {
	data.total_age = data.total_age + employee.age;
	data.total_salary = data.total_salary + employee.salary;

	return data;
}, { total_age: 0, total_salary: 0 } /** начальное значение **/)

console.log(`Средний возраст сотрудника: ${ employees_data.total_age / employees.length },\nсредняя зп: ${ employees_data.total_salary / employees.length }`)

[Владимир]

Интересно, только для меня стало новостью что reduce это не чистая функция или я не один такой тупой? :)

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

Answer 1

[Сергей Соколов]

стоит разобраться с методом массива reduce()

Upd. reduce() выполнится для каждой буквы: a, b, c и d.
В функцию аргументом i попадает очередная буква.
Аргументом part первый раз туда попадает пустой объект obj. И ссылка на него сохраняется - её и вернём как результат.
Внутри reduce функцию можно так переписать, делает то же самое:

function (part, i) {
  const empty = {}; // новая матрёшка
  part[i] = empty; // вложили её в предыдущую
  return empty; // новая матрёшка станет part'ом при следующем вызове
}

Comments

[Дмитрий]

Я как раз с этого и начал. Правильно ли я понимаю что происходит вот это:
obj + 'a' = {} + 'b' = {} + 'c' = {} + 'd' = {} ?

[Дмитрий Беляев]

Дмитрий, нет, происходит что-то вроде этого:

var obj = {};
var tmp = obj;
tmp = tmp.a = {};
tmp = tmp.b = {};
tmp = tmp.c = {};
tmp = tmp.d = {};
console.log(obj);

[Дмитрий]

Дмитрий Беляев, Треш, окончательно запутался.

[Дмитрий Беляев]

Дмитрий, просто нужно разложить по шагам

var obj = {};
var tmp0 = obj;
tmp0.a = {};
var tmp1 = tmp0.a;
tmp1.b = {};
var tmp2 = tmp1.b;
tmp2.c = {};
var tmp3 = tmp2.c;
tmp3.d = {};
var tmp4 = tmp3.d; // это действие бесполезное, но в цикле внутри reduce оно будет
console.log(obj);

[Сергей Соколов]

Дмитрий, reduce() выполнится для каждой буквы: a, b, c и d.
В функцию аргументом i попадает очередная буква.
Аргументом part первый раз туда попадает пустой объект obj.
Внутри функции можно так расписать то же самое:

function (part, i) {
  const empty = {}; // новая матрёшка
  part[i] = empty; // вложили её в предыдущую
  return empty; // новая матрёшка станет part'ом при следующем вызове
}

[Дмитрий]

Дмитрий Беляев, Ваш пример помог разобраться. Получается tmp1 это ссылка на элемент a объекта и когда мы пишемvar tmp1 = tmp0.a; tmp1.b = {}; это все равно что {}.a.b = {} и так далее. Отсюда и получается эта рекурсивная вложенность которая загрузила меня.