Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Less code is better. In this video we review the Object Property Shorthand and how it reduces your keystrokes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[SOUND] There's a saying that
the best code is no code at all.
0:00
Which is to say the more code we write,
the more likely we are to introduce a bug.
0:07
The more code browsers need to download,
and
0:12
the longer it can take to review your
own in your colleague's program.
0:14
In other words,
writing less code is often a good thing.
0:18
One short ES2015 gives us
is the object property shorthand.
0:22
It's a simple, but
very useful addition to JavaScript.
0:26
Let's see it in action.
0:30
You can follow along using the latest
workspace by opening the workspace for
0:32
this video.
0:35
Suppose I have a form that allows students
to submit feedback about a course.
0:36
The form has three fields,
name, comments and rating.
0:41
Over in shorthand.js,
I have a submit function
0:45
that will compose the data object that
eventually gets sent to the server.
0:49
The function also logs the keys of data
and the values passed in this four loop.
0:55
And you might have noticed that the object
1:01
assigned to the data variable
looks a bit different.
1:03
There aren't any keys.
1:06
Well, ES 2015 provides a shorter syntax
for defining property keys and objects.
1:08
When the interpreter encounters a variable
assignment without a property key,
1:14
the variable name itself is
used as the property key.
1:19
So I'll call the submit function and
pass it some values.
1:23
For name, let's type English.
1:28
And for comments, let's pass great course.
1:32
When I run this file in the console,
you can see that the key names match
1:39
the variable names we passed
to the object definition.
1:44
And you're not limited to
string values as we used here.
1:51
It's also possible to use this new
feature with booleans, numbers, objects,
1:56
arrays and classes.
2:00
So, for instance,
if I set the rating to nine.
2:02
The console returns a rating of nine.
2:08
As you learned, property shorthand is
easy to use, reduces keystrokes, and
2:12
potentially reduces bugs in your code.
2:16
In the next video,
I'll go over the new for of syntax.
2:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up