Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Improving the Application Code Refactor 1: Create List Items

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Why do we need to use bracket syntax when calling createElement()?

Hi guys,

In this code snippet:

  function createElement(elementName, property, value) {
      const element = document.createElement("span");
      element[property] = value;
      return element;
  }

Why can't we use element.property = value;? I tried using this however the name does not appear when you submit the form. Moreover there are no errors in the console?

Some clarification on this would be great.

Thanks, James.

2 Answers

Clayton Perszyk
MOD
Clayton Perszyk
Treehouse Moderator 48,850 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,850 Points

Hey James,

You must use square brackets since you are using the string passed to the property parameter; if you use dot notation JS thinks you're looking for a property with the name property. When you put it in brackets, the property parameter gets evaluated to a string and the string is used to access the property.

Here are a couple links that explains this concept better than I have:

Best,

Clayton

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Awesome! Was confused by that too.

Wes House
Wes House
6,944 Points
Wes House
Wes House
6,944 Points

Thanks for those links!

Oriol Jurnet
Oriol Jurnet
9,515 Points
Oriol Jurnet
Oriol Jurnet
9,515 Points

I had the same doubt and the explanation it's just perfect. Many thanks Clayton Perszyk !