# Function declaration naming conventions

**URL:** <https://discuss.emberjs.com/t/function-declaration-naming-conventions/9771>\
**Category:** Design\
**Created:** [February 14, 2016, 9:13pm UTC](https://discuss.emberjs.com/t/function-declaration-naming-conventions/9771 "2016-02-14T21:13:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shaunb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/shaunb/32/12016_2.png) [@shaunb](https://discuss.emberjs.com/u/shaunb)\
**Post date:** [February 14, 2016, 9:13pm UTC](https://discuss.emberjs.com/t/function-declaration-naming-conventions/9771/1 "2016-02-14T21:13:23Z")

</div>

I’m curious about these two ways of declaring functions in ember:

```
export default Ember.Component.extend({
    didInsertElement() {
		...
    },
    didInsertElement: function() {
    	...
    }
});

```

Both seem to work just fine. I’ve seen both in different areas of the documentation (most examples use the second form, but ‘services’ for example uses the first form. Is there a difference? Should I pick one and go with it? Any implications I should know about?

Thanks for you help, Shaun

---

<div class="post-metadata">

**Author:** ![Sarath](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sarath/32/12009_2.png) [@Sarath](https://discuss.emberjs.com/u/Sarath)\
**Post date:** [February 15, 2016, 5:23am UTC](https://discuss.emberjs.com/t/function-declaration-naming-conventions/9771/2 "2016-02-15T05:23:18Z")

</div>

didInsertElement() - is just an ES6 functionality. Almost all the browsers started supporting this.

So, going forward, usage of didInsertElement: function() must be prevented

There is another and more suggested form -

computeName: Ember.on (‘didInsertElement’, fucntion () { … })

This makes your logic more readable.

---

<div class="post-metadata">

**Author:** ![shaunb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/shaunb/32/12016_2.png) [@shaunb](https://discuss.emberjs.com/u/shaunb)\
**Post date:** [February 15, 2016, 6:02am UTC](https://discuss.emberjs.com/t/function-declaration-naming-conventions/9771/3 "2016-02-15T06:02:38Z")

</div>

Thanks for pointing me in the right direction. For anyone else who may be curious, the formal name for this new syntax seems to be “method notation” or “ES6 shorthand method names”. Here’s some more information:

[http://es6-features.org/#MethodProperties](http://es6-features.org/#MethodProperties)

> **[Object initializer - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions)**
>
> Objects can be initialized using new Object(), Object.create(), or using the literal notation (initializer notation). An object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed...

Cheers,

Shaun