Discover Top Posts Tagged with #ecma5

Angular 2 그리고 웹 프론트엔드 (1/2)

한동안 마무리 지어야 하는 일때문에 정신이 없다가 이제서야 정리를 할 시간이 오게 되었다..

이 포스트에서는 Angular가 무엇인지 모르는 분들을 위해 Angular를 설명하는 내용을 채울까 한다.

Angular 2 그리고 웹 프론트엔드 (1/2) - 현재 글

Angular 2 그리고 웹 프론트엔드 (2/2)

JavaScript Inheritance Strategy #3: Prototypal

In terms of syntax this is the simplest strategy. Like functional inheritance an object is inherited from directly. But instead of modifying the object directly Object.create extends it. Here is the parent:

var shape = { type: 'shape', announceType: function() { console.log(this.type); } }; shape.announceType(); //shape

The child is based directly on the parent:

var circle = Object.create(shape, { type: {value: 'circle'} }); circle.announceType();// circle

Keep in mind Object.create is ECMA 5 so it will only work in IE 9+. So for older browsers a polyfill will need to be used. This strategy is simple, but the syntax covers up the implementation making it seem somewhat magical (see the polyfill for what it does). So I prefer the functional inheritance style.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2014/prototypalInheritance.js

#javascript #inheritance #object orientation #object.create #ecma5 #programming #coding #web development #cheese #obscure

#javascript #array #ecma5

Javascript code performance review

Within the scope of my latest projects, I had to review a lot of performance details on JavaScript to determine best possible solutions for core functionalities and architecture.

If you follow the classic "by the book" rules, you should avoid, when possible:

loops

closures

object spawning

DOM access, specially DOM writes

DOM queries (find DOM objects)

Ok, but how bad is it? How do they compare to each other? What options do I have? Which are the best ways to get the same result?

This study focuses on answering these questions as best as possible in order to achieve an approximate scale on comparative performance results in JavaScript.

#javascript #ecma5 #performance #html5

#JavaScript #ECMA5

#ECMA5 #JavaScript #Polyfill

#ECMA5

Passing by Value vs Passing by Reference in JavaScript

A thing that I've heard desktop application developers say about web developers is that web developers don't know what phrases passing by value and passing by reference mean. I'm sure most of us, web developers, know what those mean. If you don't, you should learn them ASAP!

To recap, passing by value means that the value that you pass to a function gets cloned and independent, and that changes to that value made within the function are not reflected on the original value. On the other hand, passing by reference means that the object passed to a function is linked to the one that is passed, so the original is affected by any changes that happen in the function.

I've done some testing to see when the values are passed by value, and when they are passed by reference in JavaScript, and here's what I've found out.

tl;dr

Literal values are always passed by value. Object properties are always passed by reference (including array members, because arrays in JavaScripts are objects with numerical properties).

Now the long version.

Suppose we have a few values assigned to a bunch of variables.

var int = 1; var str = 'a'; var obj = { int: 1, str: 'a' }; var arr = [1,2,3,4];

Now, suppose that we have a function like this:

function passme(passed) { passed = 'foo'; }

What this does is change the value of the incoming argument passed to 'foo'. If we run int through this, interesting thing happens:

passme(int); alert(int);

The value of int before and after calling passme is still 1, and it will not change to 'foo'. The exact same thing applies to all other variables, inclluding obj, and arr. They are all passed in by value.

So how do we get the new value assigned to the variable? We have to return it:

function passme(passed) { passme = 'foo' return passme; }

And then, we can assign the return value:

int = passme(int); // int is now === 'foo'

What would you expect to happen if we did this:

var obj1 = { a: 'foo', b: 'bar' }; var obj2 = {}; function cloneAndAddC(o) { o.c = 'baz'; return o; } obj2 = cloneAndAddC(obj1);

Honestly, I expected obj2 to have proerty c, and obj1 to not have it. But what happens in reality is that both have property c. (You can see a demo of failed object cloning in JSFiddle).

To explain it:

[obj1][.property] | \------------> by reference | \------> by value

So while the actual object is passed by value (if you assign something else to it, you won't kill the original), but the properties of the object are passed in by reference (if you modify a property, original property is modified). I hope that makes sense.

So, what if an object's property is an object? I bet you can't guess unless you've done tried this before! So check this out:

var obj1 = { a: 'foo' }; var obj2 = { a: obj1 }; function modme(o) { o.a.a = 'bar'; // supposedly this is obj1.a o.a = 'bar'; // o.a should be obj2.a, meaning it's obj1 } modme(obj2);

So what most of us though this would do is: 1. change obj1.a to 'bar', and then change obj1 itself to 'bar'. In fact, something else happens which is also very logical (and I seriously envy anyone who got this without peeking or knowing in advance): obj1.a is 'bar'```, but instead ofobj1itself turning into'bar'with the second statement,obj2.abecomes'bar', andobj1`` is left intact. (There is a demo for this on JSFiddle, too.)

So now, let's go back to our cloneAndAddC example for a second. How do we make that one work? Before you can do that, you first need to add a bit of boilerplate code:

// For browsers that don't support ECMA5 if (!Object.keys) { Object.keys = function(obj) { var keys = []; for (key in obj) { if (obj.hasOwnProperty(key)) { keys.push(key); } } return keys; }; }

With the above snippets, all non-ECMA5-compliant browsers will get the Object.keys function which can be used like this:

var obj1 = {a: 1, b:2}; Object.keys(obj1); // => ['a', 'b']

Up next, another piece of boilerplate:

if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback, thisObject) { for (var i = this.length, l = this.length; i; --i) { if (!thisObject) { callback(this[l - i]); } else { callback.apply(thisObject, [this[l-i]]); } } }; }

So, you now have access to forEach, which loops thrhough array members and executes a callback function on each element.

Finally, we can define our clone function:

function clone(obj) { var clone = {}; Object.keys(obj).forEach(function(key) { clone[key] = obj[key]; }); return clone; }

The above does shallow copying. You could do some type detection and do recursive cloning. In fact, that's just a few more lines at most, but I'll leave that to you.

Now, we can make our clone thingy work:

var obj1 = { a: 'foo', b: 'bar' }; var obj2 = {}; function cloneAndAddC(o) { var cloned = clone(o); cloned.c = 'baz'; return cloned; } obj2 = cloneAndAddC(obj1);

Now wasn't that fun? You can see it in action on JSFiddle. Happy hacking!

UPDATE: You don't really have to write the boilerplate code. There's this cool little thingy called es5-shim (ECMAScript 5 shim) by Kris Kowal. Just plug it in, and you're ready to rock. You can see the last example using this shim on JSFiddle.

#javascript #value vs reference #programming #ECMA5