[solved] Simplify objects with similar properties not working?

help
1

#Situation
I have a relatively complex layout. Individual parts of said layout can be toggled and/or expanded.
So I would define my initial app-state like this:

var app = {
	header: {
		asideL:	{
			toggled: false,
			expanded: false
		},
		main: {
			toggled: false,
			expanded: false
		},
		asideR: {
			toggled: false,
			expanded: false
		}
	},
	content: {
		asideL:	{
			toggled: false,
			expanded: false
		},
		main: {
			toggled: false,
			expanded: false
		},
		asideR: {
			toggled: false,
			expanded: false
		}
	},
	footer: {
		asideL:	{
			toggled: false,
			expanded: false
		},
		main: {
			toggled: false,
			expanded: false
		},
		asideR: {
			toggled: false,
			expanded: false
		}
	},
	drawerL: {
		toggled: false,
		expanded: false
	},
	drawerR: {
		toggled: false,
		expanded: false
	}
};

#Goal
Now since there is a crazy amount of repetition I tried so simplify the whole thing like so:

var props = {
	toggled: false,
	expanded: false
}
var app = {
	header: {
		asideL: props,
		main: props,
		asideR: props
	},
	content: {
		asideL: props,
		main: props,
		asideR: props
	},
	footer: {
		asideL: props,
		main: props,
		asideR: props
	},
	drawerL: props,
	drawerR: props
};

This makes sense to me, however I’m seeing some strange behavior when I change properties (e.g. in a click event like so app.content.asideL.toggled = !app.content.asideL.toggled; all layout-elements toggle).

Can someone explain this to me?
Or push me in the right direction?

Thanks a lot!!

2

Okay, figured it out.

This is my solution:

var props = function() {
	return {
		toggled: false,
		expanded: false
	};
};
var app = {
	header: {
		asideL: props(),
		main: props(),
		asideR: props()
	},
	content: {
		asideL: props(),
		main: props(),
		asideR: props()
	},
	footer: {
		asideL: props(),
		main: props(),
		asideR: props()
	},
	drawerL: props(),
	drawerR: props()
};