<commit_before><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow Functions and their scope - ES6 Rocks</title>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta property="og:image" content="http://es6rocks.com/images/es6rocks.jpg" />
    <meta property="og:title" content="Arrow Functions and their scope" />
    <meta property="og:type" content="article" />
    <link href="/css/vendor/prism.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<nav class="social">
    <ul class="flags">
        
            <li>
                <a href="/ ">
                    <img src="/images/flag-en.svg" alt="en" title="en" />
                </a>
            </li>
        
            <li>
                <a href="/pt-br">
                    <img src="/images/flag-pt-br.svg" alt="pt-br" title="pt-br" />
                </a>
            </li>
        
    </ul>

    <a class="avatar" href="https://es6rocks.com">
        <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
    <path id="path3" fill="#f4d122" d="M32,26.18c0,3.22-2.6,5.82-5.82,5.82h-26.18v-26.18c0-3.219,2.599-5.818,5.818-5.818h20.36c3.218,0,5.818,2.599,5.818,5.818v20.36z"/><g id="g5" fill="#323132" transform="matrix(0.1939394,0,0,0.1939394,-9.1151514,-3.39394)"><path id="path7" d="m142,157.5v-24.7c0-2.5,1.6-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path9" d="m157,157.5v-24.7c0-2.5,1.5-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path11" d="m170.5,157.6,13.2-45.8c0.7-2.4,3.2-3.8,5.6-3.1l1.6,0.5c2.4,0.7,3.8,3.2,3.1,5.6l-13.2,45.8"/><path id="path13" d="M139.2,157.4,121.7,113c-0.9-2.3-3.6-3.5-5.9-2.5l-1.5,0.6c-2.3,0.9-3.5,3.6-2.5,5.9l17.6,44.3"/></g>
</svg>
    </a>

    <ul class="social__list">
        <li class="social__item">
            <a class="social__link" href="https://twitter.com/es6rocks">
                <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
    <path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff" />
</svg>
            </a>
        </li>
        <li class="social__item">
            <a class="social__link" href="https://github.com/es6rocks">
                <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
    <path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935 0.271 1.174 0.647 2.193 1.127 3.059 0.48 0.866 1.090 1.627 1.831 2.285 0.741 0.657 1.544 1.195 2.41 1.612 0.866 0.417 1.854 0.756 2.965 1.017 1.111 0.261 2.245 0.443 3.403 0.548 1.158 0.104 2.431 0.156 3.818 0.156 1.398 0 2.676-0.052 3.834-0.156 1.158-0.104 2.295-0.287 3.411-0.548 1.116-0.261 2.11-0.6 2.981-1.017 0.871-0.417 1.68-0.954 2.425-1.612 0.746-0.657 1.361-1.419 1.846-2.285 0.485-0.866 0.863-1.886 1.134-3.059 0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853 0.078-0.318 0.151-0.772 0.219-1.361 0.068-0.589 0.042-1.27-0.078-2.042-0.12-0.772-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814-0.798 0.402-1.64 0.905-2.527 1.51-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51-0.808-0.402-1.453-0.673-1.933-0.814-0.48-0.141-0.928-0.232-1.346-0.274-0.417-0.042-0.681-0.055-0.79-0.039-0.11 0.016-0.196 0.034-0.258 0.055-0.323 0.803-0.545 1.591-0.665 2.363-0.12 0.772-0.146 1.453-0.078 2.042 0.068 0.589 0.141 1.043 0.219 1.361 0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853 0.542-0.193 1.155-0.302 1.839-0.329 0.683-0.026 1.338-0.021 1.964 0.016 0.626 0.037 1.398 0.086 2.316 0.149 0.918 0.063 1.711 0.094 2.379 0.094 0.668 0 1.46-0.031 2.378-0.094 0.918-0.063 1.69-0.112 2.316-0.149 0.626-0.037 1.28-0.042 1.964-0.016 0.683 0.026 1.296 0.136 1.839 0.329 0.542 0.193 1.017 0.477 1.424 0.853 1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386-0.224 0.694-0.511 1.275-0.861 1.745-0.349 0.469-0.834 0.868-1.455 1.197-0.621 0.329-1.226 0.582-1.815 0.759-0.589 0.177-1.346 0.316-2.269 0.415-0.923 0.099-1.747 0.159-2.472 0.18-0.725 0.021-1.646 0.031-2.762 0.031-1.116 0-2.037-0.010-2.762-0.031-0.725-0.021-1.549-0.081-2.472-0.18-0.923-0.099-1.68-0.237-2.269-0.415-0.589-0.177-1.194-0.43-1.815-0.759-0.621-0.329-1.106-0.728-1.455-1.197-0.349-0.469-0.636-1.051-0.861-1.745-0.224-0.694-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3-1.105 0-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3-1.105 0-2-1.343-2-3z" fill="#fff" />
</svg>
            </a>
        </li>
    </ul>
</nav>
<body>
	<header class="postContent__title">
		<h2>
			<a href="http://es6rocks.com">
				<svg class="logo" id="es6rocksLogo" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" height="100%" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 266.5 233" xml:space="preserve" viewBox="0 0 165 195.2" width="100%" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" class="logo"><metadata id="metadata37"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path id="path3" fill="#f4d122" d="m165,135c0,16.6-13.4,30-30,30h-135v-135c0-16.6,13.4-30,30-30h105c16.6,0,30,13.4,30,30v105z"/><g id="rocksHand" fill="#323132" transform="translate(-47,-17.5)"><path id="path7" d="m142,157.5v-24.7c0-2.5,1.6-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path9" d="m157,157.5v-24.7c0-2.5,1.5-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path11" d="m170.5,157.6,13.2-45.8c0.7-2.4,3.2-3.8,5.6-3.1l1.6,0.5c2.4,0.7,3.8,3.2,3.1,5.6l-13.2,45.8"/><path id="path13" d="M139.2,157.4,121.7,113c-0.9-2.3-3.6-3.5-5.9-2.5l-1.5,0.6c-2.3,0.9-3.5,3.6-2.5,5.9l17.6,44.3"/></g><g id="rocksTitle" transform="translate(-47,-17.5)"><path id="path17" d="m60.1,201.8h-6.8v5h8.8c0.2,1,0.5,3.4,0,5.4h-15v-25.2h14.8c0.1,0.5,0.5,3.4,0,5.5h-8.6v3.9h6.8c0.2,1,0.6,3.5,0,5.4z"/><path id="path19" d="m75.4,196.8c7,2.5,6.4,6.5,6.4,7.7,0,5-4.6,11-17.3,6.7,0-1.3,1-4.5,1.3-5.4,2.2,0.9,4,1.4,5.6,1.4,3.6,0.3,5.4-3.6,1.3-4.9-12.8-3.9-7.6-16.6,1.2-15.7,2.2,0,5.2,0.6,7,1.4-0.1,0.8-0.6,3.4-1.4,5-0.7-0.3-7.6-2.3-8,0.4-0.8,2.4,3.9,3.4,3.9,3.4z"/><path id="path21" d="m99,186.7c0.2,0.2,1.4,2.3,0.4,5.3-7.1,0.9-7.7,5.2-7.7,5.2,4.4-3.8,11.6,1,11.2,6.7,0,1.4-0.6,8.6-8.9,8.7-2.9,0-9.1-1.1-9.1-10.2,0.4-14.1,11.7-15.5,14.1-15.7zm-4.9,13.8c-0.9,0-1.6,0.3-2.2,0.9s-0.8,1.4-0.8,2.6,0.3,2.2,0.8,2.8,1.2,0.9,2.1,0.9,1.6-0.3,2.1-0.9c0.6-0.6,0.9-1.5,0.9-2.7,0-1.3-0.3-2.2-0.8-2.8s-1.2-0.8-2.1-0.8z"/><path id="path23" fill="#808284" d="m106.3,187.1c17.6-2.5,17,6,17,7.7-0.2,4.4-2.9,6.3-3.3,6.6l5.5,10.8c-0.6,0.1-3.9,0.7-6.9,0l-5-11.5s3-1.4,3.2-5.3c0-4.2-4.3-3.3-4.3-3.3v20.1c-1.2,0.2-4.6,0.5-6.2,0v-25.1z"/><path id="path25" fill="#808284" d="m126.2,199.7c0-13.1,9.1-13.1,11.1-13.1,11,0,11,11.3,11,13.1,0,12.7-9.1,13-11,13s-11.1-0.3-11.1-13zm15.6,0c0-5.1-1.5-7.7-4.5-7.7s-4.6,2.6-4.6,7.7c0,2.6,0.4,4.5,1.1,5.7,0.7,1.3,1.9,1.9,3.4,1.9,3.1,0,4.6-2.5,4.6-7.6z"/><path id="path27" fill="#808284" d="m157.7,199.7c0,5,2,9.6,10.8,6.5,0.8,1.7,1.3,3.4,1.5,5.2-0.7,0.3-18.3,6.5-18.9-11.7,0.8-17.7,17.3-12.4,18.6-11.9,0,1-0.4,3.3-1.5,5.2-0.4-0.2-10.2-4.4-10.5,6.7z"/><path id="path29" fill="#808284" d="m173.2,187.1c3-0.8,5.6-0.1,6.2,0v25.1c-1.2,0.2-3.7,0.5-6.2,0v-25.1zm13.6,12.1,6.6,13c-0.4,0.1-3.8,0.7-7,0l-6.4-12.6,5.9-12.4c3.3-0.6,6.7,0,6.9,0l-6,12z"/><path id="path31" fill="#808284" d="m205.2,196.7c7,2.5,6.4,6.5,6.4,7.7,0,5-4.6,11-17.3,6.7,0-1.3,1-4.5,1.3-5.4,2.2,0.9,4,1.4,5.6,1.4,3.6,0.3,5.4-3.6,1.3-4.9-12.8-3.9-7.6-16.6,1.2-15.7,2.2,0,5.2,0.6,7,1.4-0.1,0.8-0.6,3.4-1.4,5-0.7-0.3-7.6-2.3-8,0.4-0.8,2.4,3.9,3.4,3.9,3.4z"/></g></svg>

			</a>
		</h2>
	    <h1>
	      Arrow Functions and their scope
	    </h1>
	</header>
    <ul class="categories">
    	
    		<li>
    			<a class="categoryTag scope"
    				href="/categories/scope">
    				scope
    			</a>
    		</li>
    	
    		<li>
    			<a class="categoryTag  articles"
    				href="/categories/articles">
    				 articles
    			</a>
    		</li>
    	
    		<li>
    			<a class="categoryTag  basics"
    				href="/categories/basics">
    				 basics
    			</a>
    		</li>
    	
    </ul>
    
     <div class="postContent__author">
        By <a href="http://twitter.com/felipenmoura"><NAME></a> at <time pubdate="" class="date">Tue Sep 23 2014 01:01:41 GMT-0300 (BRT)</time>
    </div>
	<article class="postContent">
		<p>Among so many great new features in ES6, Arrow Functions (or Fat Arrow Functions) is one that deserves attention!
It is not just awesome, it&#39;s also great to work with scopes, shortcuts some techniques we are used to use nowadays, shrinks the number of lines of code...
But it may be a little harder to read if you are not used to the way it works.
So, let&#39;s take a look at it, right now!</p>
<h2 id="making-it-work">Making it work</h2>
<p>To study and try it for yourself, you can simply copy some of the examples and paste them on your browser&#39;s console.
By now, you can use the Firefox (22+) Developer Tools, which already supports arrow functions, or on Google Chrome.
But to use it in your Chrome, you will have to:</p>
<ul>
<li>- Enable it: Open about:flags in the address bar, and enable the &quot;Experimental JavaScript&quot; flag</li>
<li>- Use it always in a function in &quot;use strict&quot; mode, so, to run it on Google Chrome&#39;s console:</li>
</ul>
<pre><code class="lang-javascript">(function(){
    &quot;use strict&quot;;
    // use arrow functions here
}());
</code></pre>
<p>With time, fortunately, more browsers will support the new ES6 features.
Now that it&#39;s all set up, let&#39;s dive deep into it!</p>
<h2 id="a-new-token">A New Token</h2>
<p>A new token has been added to ES6, and it is called &quot;fat arrow&quot;, represented by</p>
<pre><code class="lang-javascript">=&gt;
</code></pre>
<h2 id="the-new-syntax">The new Syntax</h2>
<p>With this new token and feature, came this new syntax:</p>
<pre><code class="lang-javascript">param =&gt; expression
</code></pre>
<p>Syntax with which we can use some variations, according to the number of statements in the expression, and number of parameters we want to use:</p>
<pre><code class="lang-javascript">// single param, single statement
param =&gt; expression;

// multiple params, single statement
(param [, param]) =&gt; expression;

// single param, multiple statements
param =&gt; {
    statements;
}

// multiple params, multiple statements
([param] [, param]) =&gt; {
   statements
}

// with no params, single statement
() =&gt; expression;

// with no params, multiple statements
() =&gt; {
    statements;
}

// one statement, returning an object
([param]) =&gt; ({ key: value });
</code></pre>
<h2 id="how-it-works">How it works</h2>
<p>If we would &quot;translate&quot; it to something we already do today, it would be something like this:</p>
<pre><code class="lang-javascript">// this function
var func = function (param) {
    return param.split(&quot; &quot;);
}

// would become:
var func = param =&gt; param.split(&quot; &quot;);
</code></pre>
<p>That means this syntax actually returns a new function, with the given statements and params.</p>
<p>Therefore, we can call the function the same way we are already used to:</p>
<pre><code class="lang-javascript">func(&quot;<NAME>&quot;); // returns [&quot;Felipe&quot;, &quot;Moura&quot;]
</code></pre>
<h2 id="immediately-invoked-function-expression-iife-">Immediately-invoked function expression (IIFE)</h2>
<p>Yes, you can invoke such functions immediately, as they are, indeed, expressions.
Like so:</p>
<pre><code class="lang-javascript">( x =&gt; x * 2 )( 3 ); // 6
</code></pre>
<p>It creates a function, which receives the argument <code>x</code> and returns <code>x * 2</code>, then it immediately executes this expression, passing the value <code>3</code> as argument.</p>
<p>In case you have more statements to execute, or more params:</p>
<pre><code class="lang-javascript">( (x, y) =&gt; {
    x = x * 2;
    return x + y;
})( 3, &quot;A&quot; ); // &quot;6A&quot;
</code></pre>
<h2 id="relevant-considerations">Relevant considerations</h2>
<p>Considering:</p>
<pre><code class="lang-javascript">var func = x =&gt; {
    return x++;
};
</code></pre>
<p>We may point some relevant considerations:</p>
<p><strong>- <code>arguments</code> works just as expected</strong></p>
<pre><code class="lang-javascript">console.log(arguments);
</code></pre>
<p><strong>- <code>typeof</code> and <code>instanceof</code> work just fine as well</strong></p><commit_msg>Fixed typo with wrong information<commit_after><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow Functions and their scope - ES6 Rocks</title>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta property="og:image" content="http://es6rocks.com/images/es6rocks.jpg" />
    <meta property="og:title" content="Arrow Functions and their scope" />
    <meta property="og:type" content="article" />
    <link href="/css/vendor/prism.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<nav class="social">
    <ul class="flags">
        
            <li>
                <a href="/ ">
                    <img src="/images/flag-en.svg" alt="en" title="en" />
                </a>
            </li>
        
            <li>
                <a href="/pt-br">
                    <img src="/images/flag-pt-br.svg" alt="pt-br" title="pt-br" />
                </a>
            </li>
        
    </ul>

    <a class="avatar" href="https://es6rocks.com">
        <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
    <path id="path3" fill="#f4d122" d="M32,26.18c0,3.22-2.6,5.82-5.82,5.82h-26.18v-26.18c0-3.219,2.599-5.818,5.818-5.818h20.36c3.218,0,5.818,2.599,5.818,5.818v20.36z"/><g id="g5" fill="#323132" transform="matrix(0.1939394,0,0,0.1939394,-9.1151514,-3.39394)"><path id="path7" d="m142,157.5v-24.7c0-2.5,1.6-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path9" d="m157,157.5v-24.7c0-2.5,1.5-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path11" d="m170.5,157.6,13.2-45.8c0.7-2.4,3.2-3.8,5.6-3.1l1.6,0.5c2.4,0.7,3.8,3.2,3.1,5.6l-13.2,45.8"/><path id="path13" d="M139.2,157.4,121.7,113c-0.9-2.3-3.6-3.5-5.9-2.5l-1.5,0.6c-2.3,0.9-3.5,3.6-2.5,5.9l17.6,44.3"/></g>
</svg>
    </a>

    <ul class="social__list">
        <li class="social__item">
            <a class="social__link" href="https://twitter.com/es6rocks">
                <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
    <path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff" />
</svg>
            </a>
        </li>
        <li class="social__item">
            <a class="social__link" href="https://github.com/es6rocks">
                <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
    <path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935 0.271 1.174 0.647 2.193 1.127 3.059 0.48 0.866 1.090 1.627 1.831 2.285 0.741 0.657 1.544 1.195 2.41 1.612 0.866 0.417 1.854 0.756 2.965 1.017 1.111 0.261 2.245 0.443 3.403 0.548 1.158 0.104 2.431 0.156 3.818 0.156 1.398 0 2.676-0.052 3.834-0.156 1.158-0.104 2.295-0.287 3.411-0.548 1.116-0.261 2.11-0.6 2.981-1.017 0.871-0.417 1.68-0.954 2.425-1.612 0.746-0.657 1.361-1.419 1.846-2.285 0.485-0.866 0.863-1.886 1.134-3.059 0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853 0.078-0.318 0.151-0.772 0.219-1.361 0.068-0.589 0.042-1.27-0.078-2.042-0.12-0.772-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814-0.798 0.402-1.64 0.905-2.527 1.51-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51-0.808-0.402-1.453-0.673-1.933-0.814-0.48-0.141-0.928-0.232-1.346-0.274-0.417-0.042-0.681-0.055-0.79-0.039-0.11 0.016-0.196 0.034-0.258 0.055-0.323 0.803-0.545 1.591-0.665 2.363-0.12 0.772-0.146 1.453-0.078 2.042 0.068 0.589 0.141 1.043 0.219 1.361 0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853 0.542-0.193 1.155-0.302 1.839-0.329 0.683-0.026 1.338-0.021 1.964 0.016 0.626 0.037 1.398 0.086 2.316 0.149 0.918 0.063 1.711 0.094 2.379 0.094 0.668 0 1.46-0.031 2.378-0.094 0.918-0.063 1.69-0.112 2.316-0.149 0.626-0.037 1.28-0.042 1.964-0.016 0.683 0.026 1.296 0.136 1.839 0.329 0.542 0.193 1.017 0.477 1.424 0.853 1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386-0.224 0.694-0.511 1.275-0.861 1.745-0.349 0.469-0.834 0.868-1.455 1.197-0.621 0.329-1.226 0.582-1.815 0.759-0.589 0.177-1.346 0.316-2.269 0.415-0.923 0.099-1.747 0.159-2.472 0.18-0.725 0.021-1.646 0.031-2.762 0.031-1.116 0-2.037-0.010-2.762-0.031-0.725-0.021-1.549-0.081-2.472-0.18-0.923-0.099-1.68-0.237-2.269-0.415-0.589-0.177-1.194-0.43-1.815-0.759-0.621-0.329-1.106-0.728-1.455-1.197-0.349-0.469-0.636-1.051-0.861-1.745-0.224-0.694-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3-1.105 0-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3-1.105 0-2-1.343-2-3z" fill="#fff" />
</svg>
            </a>
        </li>
    </ul>
</nav>
<body>
	<header class="postContent__title">
		<h2>
			<a href="http://es6rocks.com">
				<svg class="logo" id="es6rocksLogo" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" height="100%" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 266.5 233" xml:space="preserve" viewBox="0 0 165 195.2" width="100%" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" class="logo"><metadata id="metadata37"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path id="path3" fill="#f4d122" d="m165,135c0,16.6-13.4,30-30,30h-135v-135c0-16.6,13.4-30,30-30h105c16.6,0,30,13.4,30,30v105z"/><g id="rocksHand" fill="#323132" transform="translate(-47,-17.5)"><path id="path7" d="m142,157.5v-24.7c0-2.5,1.6-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path9" d="m157,157.5v-24.7c0-2.5,1.5-4.3,4.1-4.3h1.6c2.5,0,4.3,1.8,4.3,4.3v24.7"/><path id="path11" d="m170.5,157.6,13.2-45.8c0.7-2.4,3.2-3.8,5.6-3.1l1.6,0.5c2.4,0.7,3.8,3.2,3.1,5.6l-13.2,45.8"/><path id="path13" d="M139.2,157.4,121.7,113c-0.9-2.3-3.6-3.5-5.9-2.5l-1.5,0.6c-2.3,0.9-3.5,3.6-2.5,5.9l17.6,44.3"/></g><g id="rocksTitle" transform="translate(-47,-17.5)"><path id="path17" d="m60.1,201.8h-6.8v5h8.8c0.2,1,0.5,3.4,0,5.4h-15v-25.2h14.8c0.1,0.5,0.5,3.4,0,5.5h-8.6v3.9h6.8c0.2,1,0.6,3.5,0,5.4z"/><path id="path19" d="m75.4,196.8c7,2.5,6.4,6.5,6.4,7.7,0,5-4.6,11-17.3,6.7,0-1.3,1-4.5,1.3-5.4,2.2,0.9,4,1.4,5.6,1.4,3.6,0.3,5.4-3.6,1.3-4.9-12.8-3.9-7.6-16.6,1.2-15.7,2.2,0,5.2,0.6,7,1.4-0.1,0.8-0.6,3.4-1.4,5-0.7-0.3-7.6-2.3-8,0.4-0.8,2.4,3.9,3.4,3.9,3.4z"/><path id="path21" d="m99,186.7c0.2,0.2,1.4,2.3,0.4,5.3-7.1,0.9-7.7,5.2-7.7,5.2,4.4-3.8,11.6,1,11.2,6.7,0,1.4-0.6,8.6-8.9,8.7-2.9,0-9.1-1.1-9.1-10.2,0.4-14.1,11.7-15.5,14.1-15.7zm-4.9,13.8c-0.9,0-1.6,0.3-2.2,0.9s-0.8,1.4-0.8,2.6,0.3,2.2,0.8,2.8,1.2,0.9,2.1,0.9,1.6-0.3,2.1-0.9c0.6-0.6,0.9-1.5,0.9-2.7,0-1.3-0.3-2.2-0.8-2.8s-1.2-0.8-2.1-0.8z"/><path id="path23" fill="#808284" d="m106.3,187.1c17.6-2.5,17,6,17,7.7-0.2,4.4-2.9,6.3-3.3,6.6l5.5,10.8c-0.6,0.1-3.9,0.7-6.9,0l-5-11.5s3-1.4,3.2-5.3c0-4.2-4.3-3.3-4.3-3.3v20.1c-1.2,0.2-4.6,0.5-6.2,0v-25.1z"/><path id="path25" fill="#808284" d="m126.2,199.7c0-13.1,9.1-13.1,11.1-13.1,11,0,11,11.3,11,13.1,0,12.7-9.1,13-11,13s-11.1-0.3-11.1-13zm15.6,0c0-5.1-1.5-7.7-4.5-7.7s-4.6,2.6-4.6,7.7c0,2.6,0.4,4.5,1.1,5.7,0.7,1.3,1.9,1.9,3.4,1.9,3.1,0,4.6-2.5,4.6-7.6z"/><path id="path27" fill="#808284" d="m157.7,199.7c0,5,2,9.6,10.8,6.5,0.8,1.7,1.3,3.4,1.5,5.2-0.7,0.3-18.3,6.5-18.9-11.7,0.8-17.7,17.3-12.4,18.6-11.9,0,1-0.4,3.3-1.5,5.2-0.4-0.2-10.2-4.4-10.5,6.7z"/><path id="path29" fill="#808284" d="m173.2,187.1c3-0.8,5.6-0.1,6.2,0v25.1c-1.2,0.2-3.7,0.5-6.2,0v-25.1zm13.6,12.1,6.6,13c-0.4,0.1-3.8,0.7-7,0l-6.4-12.6,5.9-12.4c3.3-0.6,6.7,0,6.9,0l-6,12z"/><path id="path31" fill="#808284" d="m205.2,196.7c7,2.5,6.4,6.5,6.4,7.7,0,5-4.6,11-17.3,6.7,0-1.3,1-4.5,1.3-5.4,2.2,0.9,4,1.4,5.6,1.4,3.6,0.3,5.4-3.6,1.3-4.9-12.8-3.9-7.6-16.6,1.2-15.7,2.2,0,5.2,0.6,7,1.4-0.1,0.8-0.6,3.4-1.4,5-0.7-0.3-7.6-2.3-8,0.4-0.8,2.4,3.9,3.4,3.9,3.4z"/></g></svg>

			</a>
		</h2>
	    <h1>
	      Arrow Functions and their scope
	    </h1>
	</header>
    <ul class="categories">
    	
    		<li>
    			<a class="categoryTag scope"
    				href="/categories/scope">
    				scope
    			</a>
    		</li>
    	
    		<li>
    			<a class="categoryTag  articles"
    				href="/categories/articles">
    				 articles
    			</a>
    		</li>
    	
    		<li>
    			<a class="categoryTag  basics"
    				href="/categories/basics">
    				 basics
    			</a>
    		</li>
    	
    </ul>
    
     <div class="postContent__author">
        By <a href="http://twitter.com/felipenmoura"><NAME></a> at <time pubdate="" class="date">Tue Sep 23 2014 01:01:41 GMT-0300 (BRT)</time>
    </div>
	<article class="postContent">
		<p>Among so many great new features in ES6, Arrow Functions (or Fat Arrow Functions) is one that deserves attention!
It is not just awesome, it&#39;s also great to work with scopes, shortcuts some techniques we are used to use nowadays, shrinks the number of lines of code...
But it may be a little harder to read if you are not used to the way it works.
So, let&#39;s take a look at it, right now!</p>
<h2 id="making-it-work">Making it work</h2>
<p>To study and try it for yourself, you can simply copy some of the examples and paste them on your browser&#39;s console.
By now, you can use the Firefox (22+) Developer Tools, which already supports arrow functions, or on Google Chrome.
But to use it in your Chrome, you will have to:</p>
<ul>
<li>- Enable it: Open about:flags in the address bar, and enable the &quot;Experimental JavaScript&quot; flag</li>
<li>- Use it always in a function in &quot;use strict&quot; mode, so, to run it on Google Chrome&#39;s console:</li>
</ul>
<pre><code class="lang-javascript">(function(){
    &quot;use strict&quot;;
    // use arrow functions here
}());
</code></pre>
<p>With time, fortunately, more browsers will support the new ES6 features.
Now that it&#39;s all set up, let&#39;s dive deep into it!</p>
<h2 id="a-new-token">A New Token</h2>
<p>A new token has been added to ES6, and it is called &quot;fat arrow&quot;, represented by</p>
<pre><code class="lang-javascript">=&gt;
</code></pre>
<h2 id="the-new-syntax">The new Syntax</h2>
<p>With this new token and feature, came this new syntax:</p>
<pre><code class="lang-javascript">param =&gt; expression
</code></pre>
<p>Syntax with which we can use some variations, according to the number of statements in the expression, and number of parameters we want to use:</p>
<pre><code class="lang-javascript">// single param, single statement
param =&gt; expression;

// multiple params, single statement
(param [, param]) =&gt; expression;

// single param, multiple statements
param =&gt; {
    statements;
}

// multiple params, multiple statements
([param] [, param]) =&gt; {
   statements
}

// with no params, single statement
() =&gt; expression;

// with no params, multiple statements
() =&gt; {
    statements;
}

// one statement, returning an object
([param]) =&gt; ({ key: value });
</code></pre>
<h2 id="how-it-works">How it works</h2>
<p>If we would &quot;translate&quot; it to something we already do today, it would be something like this:</p>
<pre><code class="lang-javascript">// this function
var func = function (param) {
    return param.split(&quot; &quot;);
}

// would become:
var func = param =&gt; param.split(&quot; &quot;);
</code></pre>
<p>That means this syntax actually returns a new function, with the given statements and params.</p>
<p>Therefore, we can call the function the same way we are already used to:</p>
<pre><code class="lang-javascript">func(&quot;<NAME>&quot;); // returns [&quot;Felipe&quot;, &quot;Moura&quot;]
</code></pre>
<h2 id="immediately-invoked-function-expression-iife-">Immediately-invoked function expression (IIFE)</h2>
<p>Yes, you can invoke such functions immediately, as they are, indeed, expressions.
Like so:</p>
<pre><code class="lang-javascript">( x =&gt; x * 2 )( 3 ); // 6
</code></pre>
<p>It creates a function, which receives the argument <code>x</code> and returns <code>x * 2</code>, then it immediately executes this expression, passing the value <code>3</code> as argument.</p>
<p>In case you have more statements to execute, or more params:</p>
<pre><code class="lang-javascript">( (x, y) =&gt; {
    x = x * 2;
    return x + y;
})( 3, &quot;A&quot; ); // &quot;6A&quot;
</code></pre>
<h2 id="relevant-considerations">Relevant considerations</h2>
<p>Considering:</p>
<pre><code class="lang-javascript">var func = x =&gt; {
    return x++;
};
</code></pre>
<p>We may point some relevant considerations:</p>
<p><strong>- <code>arguments</code> will not be passed/defined for your function</strong></p>
<pre><code class="lang-javascript">console.log(arguments); // not defined
</code></pre>
<p><strong>- <code>typeof</code> and <code>instanceof</code> work just fine as well</strong></p>
{'fraction_non_alphanumeric': 0.24403859662094718, 'fraction_numerical': 0.26440903545417577, 'mean_word_length': 2.876468902264259, 'pattern_counts': {'":': 0, '<': 449, '<?xml version=': 0, '>': 449, 'https://': 6, 'lorem ipsum': 0, 'www.': 4, 'xml': 12}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3012066', 'n_tokens_mistral': 16889, 'n_tokens_neox': 13598, 'n_words': 2088}