# How to Set Dynamic Property Keys with ES6 🎉
Previously, we had to do 2 steps - create the object literal and then use the bracket notation. With ES6, you can now directly use a variable as your property key in your object literal. YAY! 👏
let cake = '🍰';
// ❌ Old way requires 2 steps
let pan = {
id: 1,
};
pan[cake] = '🥞';
// ✅ YAY, much easier with ES6
let pan = {
id: 1,
[cake]: '🥞',
};
# The 3 ways to access the object value
We can output the object value by passing in the appropriate key. Because I used emoji as the key in my example, it's a bit tricky. So let's look at a easier example.
let me = {
name: 'samantha',
};
// 1. Dot notation
me.name; // samantha
// 2. Bracket notation (string key)
me['name']; // samantha
// 3. Bracket notation (variable key)
let key = 'name';
me[key]; // samantha
# How to Access Object Value With Emoji Keys
Alright back to our emoji example. Let's take a look at the output.
let cake = '🍰';
let pan = {
[cake]: '🥞',
};
// Output -> { '🍰': '🥞' }
Unfortunately, when you're using an Emoji as a key, you won't be able to use the dot notation. You're limited to the Bracket Notation.
// 2. Bracket notation (string key)
pan['🍰']; // '🥞'
// 3. Bracket notation (variable key)
let key = '🍰';
me[key]; // '🥞'
