Files
objects2
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
parent directory.. | ||||
<!DOCTYPE HTML>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<title>Closure and Objects | Javascript Challenges</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="generator" content="GitBook 1.5.0">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="../conditionals_functions/README.html" />
<link rel="prev" href="../objects1/README.html" />
</head>
<body>
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-exercises/exercises.css">
<div class="book" data-level="0.5" data-basepath=".." data-revision="1498683876884">
<div class="book-summary">
<div class="book-search">
<input type="text" placeholder="Type to search" class="form-control" />
</div>
<ul class="summary">
<li class="chapter " data-level="0" data-path="index.html">
<a href="../index.html">
<i class="fa fa-check"></i>
Intro
</a>
<ul class="articles">
<li class="chapter " data-level="0.1" data-path="autoexecute/README.html">
<a href="../autoexecute/README.html">
<i class="fa fa-check"></i>
<b>0.1.</b>
Self Invoking Functions
</a>
</li>
<li class="chapter " data-level="0.2" data-path="banking/README.html">
<a href="../banking/README.html">
<i class="fa fa-check"></i>
<b>0.2.</b>
Floats Operations Imprecision
</a>
</li>
<li class="chapter " data-level="0.3" data-path="hoisting1/README.html">
<a href="../hoisting1/README.html">
<i class="fa fa-check"></i>
<b>0.3.</b>
Hoisting and Conditionals
</a>
</li>
<li class="chapter " data-level="0.4" data-path="objects1/README.html">
<a href="../objects1/README.html">
<i class="fa fa-check"></i>
<b>0.4.</b>
Checking Properties
</a>
</li>
<li class="chapter active" data-level="0.5" data-path="objects2/README.html">
<a href="../objects2/README.html">
<i class="fa fa-check"></i>
<b>0.5.</b>
Closure and Objects
</a>
</li>
<li class="chapter " data-level="0.6" data-path="conditionals_functions/README.html">
<a href="../conditionals_functions/README.html">
<i class="fa fa-check"></i>
<b>0.6.</b>
Conditionals and Functions
</a>
</li>
<li class="chapter " data-level="0.7" data-path="delete/README.html">
<a href="../delete/README.html">
<i class="fa fa-check"></i>
<b>0.7.</b>
Delete
</a>
</li>
<li class="chapter " data-level="0.8" data-path="detectIE/README.html">
<a href="../detectIE/README.html">
<i class="fa fa-check"></i>
<b>0.8.</b>
Detect Internet Explorer
</a>
</li>
<li class="chapter " data-level="0.9" data-path="utf8/README.html">
<a href="../utf8/README.html">
<i class="fa fa-check"></i>
<b>0.9.</b>
Don't judge a book by its cover
</a>
</li>
<li class="chapter " data-level="0.10" data-path="encapsulate_collection/README.html">
<a href="../encapsulate_collection/README.html">
<i class="fa fa-check"></i>
<b>0.10.</b>
Encapsulate collection
</a>
</li>
<li class="chapter " data-level="0.11" data-path="even_odd/README.html">
<a href="../even_odd/README.html">
<i class="fa fa-check"></i>
<b>0.11.</b>
Even or Odd
</a>
</li>
<li class="chapter " data-level="0.12" data-path="nested_loop/README.html">
<a href="../nested_loop/README.html">
<i class="fa fa-check"></i>
<b>0.12.</b>
Exit nested loop
</a>
</li>
<li class="chapter " data-level="0.13" data-path="fooling_around_boolean/README.html">
<a href="../fooling_around_boolean/README.html">
<i class="fa fa-check"></i>
<b>0.13.</b>
#1 Fooling around boolean
</a>
</li>
<li class="chapter " data-level="0.14" data-path="fooling_around_boolean_2/README.html">
<a href="../fooling_around_boolean_2/README.html">
<i class="fa fa-check"></i>
<b>0.14.</b>
#2 Fooling around boolean
</a>
</li>
<li class="chapter " data-level="0.15" data-path="ghost_array/README.html">
<a href="../ghost_array/README.html">
<i class="fa fa-check"></i>
<b>0.15.</b>
Ghost Array
</a>
</li>
<li class="chapter " data-level="0.16" data-path="input_search/README.html">
<a href="../input_search/README.html">
<i class="fa fa-check"></i>
<b>0.16.</b>
Input Search
</a>
</li>
<li class="chapter " data-level="0.17" data-path="invaluable/README.html">
<a href="../invaluable/README.html">
<i class="fa fa-check"></i>
<b>0.17.</b>
Invaluable
</a>
</li>
<li class="chapter " data-level="0.18" data-path="json/README.html">
<a href="../json/README.html">
<i class="fa fa-check"></i>
<b>0.18.</b>
JSON
</a>
</li>
<li class="chapter " data-level="0.19" data-path="nested_scopes/README.html">
<a href="../nested_scopes/README.html">
<i class="fa fa-check"></i>
<b>0.19.</b>
Nested Scopes
</a>
</li>
<li class="chapter " data-level="0.20" data-path="now_you_see_me/README.html">
<a href="../now_you_see_me/README.html">
<i class="fa fa-check"></i>
<b>0.20.</b>
Now you see me...
</a>
</li>
<li class="chapter " data-level="0.21" data-path="frozen/README.html">
<a href="../frozen/README.html">
<i class="fa fa-check"></i>
<b>0.21.</b>
Frozen
</a>
</li>
<li class="chapter " data-level="0.22" data-path="point/README.html">
<a href="../point/README.html">
<i class="fa fa-check"></i>
<b>0.22.</b>
Point
</a>
</li>
<li class="chapter " data-level="0.23" data-path="running_man/README.html">
<a href="../running_man/README.html">
<i class="fa fa-check"></i>
<b>0.23.</b>
Running Man
</a>
</li>
<li class="chapter " data-level="0.24" data-path="scope/README.html">
<a href="../scope/README.html">
<i class="fa fa-check"></i>
<b>0.24.</b>
Scope
</a>
</li>
<li class="chapter " data-level="0.25" data-path="spartacus/README.html">
<a href="../spartacus/README.html">
<i class="fa fa-check"></i>
<b>0.25.</b>
Spartacus
</a>
</li>
<li class="chapter " data-level="0.26" data-path="terminator/README.html">
<a href="../terminator/README.html">
<i class="fa fa-check"></i>
<b>0.26.</b>
Terminator
</a>
</li>
<li class="chapter " data-level="0.27" data-path="timers/README.html">
<a href="../timers/README.html">
<i class="fa fa-check"></i>
<b>0.27.</b>
Timers
</a>
</li>
<li class="chapter " data-level="0.28" data-path="undefined_values_in_array/README.html">
<a href="../undefined_values_in_array/README.html">
<i class="fa fa-check"></i>
<b>0.28.</b>
Undefined Values in Arrays
</a>
</li>
<li class="chapter " data-level="0.29" data-path="array_map_parseint/README.html">
<a href="../array_map_parseint/README.html">
<i class="fa fa-check"></i>
<b>0.29.</b>
Array Map and ParseInt
</a>
</li>
<li class="chapter " data-level="0.30" data-path="variable_scope/README.html">
<a href="../variable_scope/README.html">
<i class="fa fa-check"></i>
<b>0.30.</b>
Variable Scope
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
</li>
</ul>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header">
<!-- Actions Left -->
<a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
<a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
<div id="font-settings-wrapper" class="dropdown pull-left">
<a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
</a>
<div class="dropdown-menu font-settings">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="buttons">
<button type="button" id="reduce-font-size" class="button size-2">A</button>
<button type="button" id="enlarge-font-size" class="button size-2">A</button>
</div>
<div class="buttons font-family-list">
<button type="button" data-font="0" class="button">Serif</button>
<button type="button" data-font="1" class="button">Sans</button>
</div>
<div class="buttons color-theme-list">
<button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
<button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
<button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
</div>
</div>
</div>
<!-- Actions Right -->
<div class="dropdown pull-right">
<a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
</a>
<div class="dropdown-menu font-settings dropdown-left">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="buttons">
<button type="button" data-sharing="twitter" class="button">Twitter</button>
<button type="button" data-sharing="google-plus" class="button">Google</button>
<button type="button" data-sharing="facebook" class="button">Facebook</button>
<button type="button" data-sharing="weibo" class="button">Weibo</button>
<button type="button" data-sharing="instapaper" class="button">Instapaper</button>
</div>
</div>
</div>
<a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
<a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="../" >Javascript Challenges</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1">
<div class="page-inner">
<section class="normal" id="section-gitbook_108">
<h1 id="closures-and-objects">Closures and Objects</h1>
<p>As you know Javascript has two different ways to treat the data it receives as arguments of a function:</p>
<ul>
<li>Primitives are passed by copy.</li>
<li>Objects are passed by reference.</li>
</ul>
<p>See the following code:</p>
<pre><code>var oPerson = { name: 'john' };
(function(oTeacher) {
window.getTeacher= function() {
console.log(oTeacher);
};
}(oPerson));
window.getTeacher();
oPerson.surname = 'doe';
window.getTeacher();
oPerson = { name: 'mary', surname: 'sullivan' };
window.getTeacher();
</code></pre><p>The first execution of window.getTeacher returns:</p>
<pre><code>Object { name: "john" }
</code></pre><p>The second execution of window.getTeacher returns:</p>
<pre><code>Object { name: "john", surname: "doe" }
</code></pre><p>The third execution of window.getTeacher returns:</p>
<pre><code>Object { name: "john", surname: "doe" }
</code></pre>
</section>
<section class="exercise" id="section-gitbook_109">
<div class="header">
<h2>Exercise</h2>
</div>
<div class="alert alert-success">
<b>Correct!</b>
</div>
<div class="alert alert-danger error-message">
<b>False!</b>
</div>
<div class="message">
<p>Explain why this is happening:</p>
</div>
<div class="editor" style="height: 20px">
</div>
<pre class="hidden code-solution">This is happening because when the closure has been executed it has saved the reference in memory for oPerson as oTeacher and even when oPerson has changed the assigned value to a different object it continues being referenced inside the closure. It is important to check this problems because if you make the same with DOM elements and the element is removed from the DOM tree you will get memory leaks issues</pre>
<pre class="hidden code-validation">__match_answer_and_solution__</pre>
<div class="buttons">
<a href="#" class="button size-2 action-submit">Submit</a>
<a href="#" class="button size-2 action-solution">Solution</a>
</div>
</section>
<section class="exercise" id="section-gitbook_111">
<div class="header">
<h2>Exercise</h2>
</div>
<div class="alert alert-success">
<b>Correct!</b>
</div>
<div class="alert alert-danger error-message">
<b>False!</b>
</div>
<div class="message">
<p>Fix the code to make the third execution return <code>Object { name: "mary", surname: "sullivan" }</code></p>
</div>
<div class="editor" style="height: 300px">var oPerson = { name: 'john'};
(function(oTeacher) {
window.getTeacher= function() {
console.log(oTeacher);
};
}(oPerson));
window.getTeacher();
oPerson.surname = 'doe';
window.getTeacher();
oPerson = { name: 'mary', surname: 'sullivan' };
window.getTeacher();</div>
<pre class="hidden code-solution">var oPerson = { name: 'john'};
window.getTeacher= function() {
console.log(oPerson);
};
window.getTeacher();
oPerson.surname = 'doe';
window.getTeacher();
oPerson = { name: 'mary', surname: 'sullivan' };
window.getTeacher();</pre>
<pre class="hidden code-validation">assert(items.length == 3 && items[2].name == 'mary' && items[2].surname == 'sullivan');</pre>
<pre class="hidden code-context">var items = [];
var backConsole = console;
var console = {
log: function (str) {
items.push(str);
if(items.length === 3)
{
console = backConsole;
}else{
backConsole.log(str);
}
}
};</pre>
<div class="buttons">
<a href="#" class="button size-2 action-submit">Submit</a>
<a href="#" class="button size-2 action-solution">Solution</a>
</div>
</section>
</div>
</div>
</div>
<a href="../objects1/README.html" class="navigation navigation-prev " aria-label="Previous page: Checking Properties"><i class="fa fa-angle-left"></i></a>
<a href="../conditionals_functions/README.html" class="navigation navigation-next " aria-label="Next page: Conditionals and Functions"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<script src="../gitbook/app.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/ace/ace.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/ace/theme-tomorrow.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/ace/mode-javascript.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/exercises.js"></script>
<script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="../gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
<script>
require(["gitbook"], function(gitbook) {
var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
gitbook.start(config);
});
</script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/jsrepl/jsrepl.js" id="jsrepl-script"></script>
</body>
</html>