(public).sospep.systems ~ view step ~ question-general

<h2>question</h2>
<ol>
<li>]&nbsp;How <span style="text-decoration: line-through;">will</span> would you explain closures in JavaScript? When are they used?</li>
</ol>
<h2>question-category</h2>
<ol>
<li>] GENERAL</li>
</ol>
<h2>answer(source)</h2>
<p><strong>[UPDATE]</strong><br /><span style="background-color: #c0c0c0;">[] when a function returns another function, ex, outerF = Car setModelName, getModelName, <br /></span><br /><span style="background-color: #c0c0c0;">] the returning function would hold its environment <br /></span><br /><span style="background-color: #c0c0c0;">[] --outer-- continues to hold value of -inner-- event after function has returned --variable--scope--chain</span></p>
<p><strong>[EXAMPLE - code] &nbsp;</strong></p>
<p>function Car () {<br />&nbsp; this.modelName = "Default Model Name"; <br />&nbsp; <br />&nbsp; this.getModelName = function(){<br />&nbsp;&nbsp;&nbsp; // console.log(this.modelName);<br />&nbsp;&nbsp;&nbsp; return this.modelName;<br />&nbsp; }<br />&nbsp; <br />&nbsp; this.setModelName = function(modelName){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.modelName = modelName;<br />&nbsp; }<br />}</p>
<p>// create a new instance of a Car object<br />var myCar = new Car();</p>
<p>// get the current model name of the&nbsp;</p>
<p>console.log(myCar.getModelName()); // "Default Model Name"&nbsp;</p>
<p>// use setModelName method to change the default model name<br />myCar.setModelName("Porsche 911");<br />console.log(myCar.getModelName());</p>
<h2>answer(me)</h2>
<ol>
<li>[] a closure is a function that has an inner function ( aka a function inside of a function)</li>
<li>[] typically closures are used to provide data protection or encapsulation,</li>
<li><span style="text-align: left; color: #000000; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-variant: normal; word-spacing: 0px; display: inline !important; white-space: normal; orphans: 2; float: none; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[] this is required/desired to prevent other functions from inadvertently modfiying the values within the closure</span><strong></strong><em></em><br /></span></li>
<li><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[] creating a variable scope chain</span>&nbsp;</li>
<li>[] the inner function of a closure has access to the variables and methods of the outer function that it is contained in</li>
<li>[]&nbsp;</li>
</ol>
<h2>source</h2>
<ol>
<li><strong>[2015-06-30] <a href="/view/task?id=5211" target="_blank">RESEARCH google qry</a>= "javascript interview questions"</strong></li>
<ol>
<li>r# 5] <a href="http://career.guru99.com/top-85-javascript-interview-questions/" target="_blank">top 85 javascript interview questions</a> - @career.guru99.com - question 35</li>
</ol></ol>
<h2>reference</h2>
<ol>
<li><strong>[2015-05-30] NEW article IN tech-dev-www/language-js/index</strong></li>
<ol>
<li>x] # <a href="/view/article?id=4560" target="_blank">4560 - javascript interview - questions and answers</a> - A listing of 85 javascript interview questions by careerguru.com, with answers by Don Sagrott</li>
</ol>
<li><strong>[2015-08-10] NEW article</strong></li>
<ol>
<li>x] # <a href="/view/article?id=4616" target="_blank">4616 - LIST-javascript-interview-questions categories</a>&nbsp;-&nbsp;A listing of all of the different javascript interview question categories,</li>
</ol>
<li><strong>[00:00] PREV article, description IN ch-002-learning-javascript</strong></li>
<ol>
<li>[x] # 1769 - <a href="/view/article?id=1769" target="_blank">closures</a> - <span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">] by Don Sagrott -&nbsp; A 'closure' is an inner function(a function defined inside of another function), this inner function has access to the outer (enclosing) function&rsquo;s variables&mdash; this 'fundamental practice' enables you to create a 'variable scope chain' and also provides a mechanism for data encapsulation (keeping a functions variables 'private' )<span style="background-color: transparent;">&nbsp;</span></span><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><br /></span></li>
</ol>
<li><strong>[2019-mm-dd] NEW video&nbsp;</strong></li>
<ol>
<li>[12:00] <a href="https://www.youtube.com/watch?v=71AtaJpJHw0" target="_blank">VIDEO&nbsp;Javascript Closure tutorial ( Closures Explained )</a> - What are closures in javaScript and how and where to use them.</li>
</ol>
<li><strong>[2019-mm-dd] NEW article</strong></li>
<ol>
<li>[] article https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8</li>
</ol>
<li><strong>[2019-mm-dd] NEW live code example</strong></li>
<ol>
<li>[]&nbsp;<a href="https://jsbin.com/warivigeho/" target="_blank">https://jsbin.com/warivigeho/</a> &nbsp;&nbsp;</li>
</ol></ol>
<div><hr /></div>
<div>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><span style="background-color: #ffffff;"><strong>prev [EXAMPLE - pseudo]<br /></strong></span></p>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">let Car = function(){</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp; let _modelName ="";</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">return {</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp; setModelName(modelName){</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp; &nbsp;&nbsp; _modelname = modelName</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp;&nbsp; }</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp; getModelName(){</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp;&nbsp;&nbsp; return _modelName;</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp; }</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp;}</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">}</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">var myCar = new Car()</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">myCar.setModelName("Mustang GT")</div>
<div style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">console.log(myCar.getModelName()); // Mustang GT</div>
<strong></strong><em></em></div>

~ view step ~ Procedure] interview-questions-javascript FROM [ App] language-javascript IN [ servers] technology-developer-www