<h2 id="setfloatingpointprecisioninjavascript">Set Floating-Point Precision in JavaScript</h2>
Floating-points in JavaScript have an extremely high precision, and you don't always need this precision. Additionally - your user is even less likely to want it. More often than not - we'll want to &quot;trim&quot; floating-point numbers by setting a specific precision (such as, say, two decimal points) for an end-user.
The <code>Number</code> object has several methods that allow us to change the precision of a floating-point number in JavaScript!
<h3 id="tofixed">toFixed()</h3>
<code>toFixed()</code> is a <code>Number</code> method that is used to convert a number to fixed-point notation (rounding the result where necessary) and returns the value as a string:
<pre><code class="hljs">number.toFixed([decimalPlaces]);
</code></pre>
<code>decimalPlaces</code> is optional, and defines the number of digits that should be present after the decimal place and defaults to <code>0</code>:
<pre><code class="hljs">let number = 12345.6789
 
console.log(number.toFixed()) // Returns &#x27;12346&#x27;: note rounding, no fractional part
console.log(number.toFixed(1)) // Returns &#x27;12345.7&#x27;: note rounding
console.log(number.toFixed(6)) // Returns &#x27;12345.678900&#x27;: note added zeros
console.log((1.23e+20).toFixed(3)) // Returns &#x27;123000000000000000000.000&#x27;
</code></pre>
If the floating-point number didn't offer precision up to the fixed point you're formatting to - 0s are added as padding to the end.
<h3 id="toprecision">toPrecision()</h3>
<code>toPrecision()</code> is a <code>Number</code> method that formats a number to a precision string - keeping track of how many total digits (including digits to the left and right of the decimal) to display of a number:
<pre><code class="hljs">number.toPrecision([significantDigits]);
</code></pre>
<code>significantDigits</code> is optional, denoting the number of significant digits to display in the result. If omitted, the method just converts the number to a string.
<pre><code class="hljs">let number = 5.123456
 
console.log(number.toPrecision()) // logs &#x27;5.123456&#x27;
console.log(number.toPrecision(5)) // logs &#x27;5.1235&#x27;
 
number = 0.000123
 
console.log(number.toPrecision()) // logs &#x27;0.000123&#x27;
console.log(number.toPrecision(5)) // logs &#x27;0.00012300&#x27;
</code></pre>
The returned values are of <code>string</code> type:
<pre><code class="hljs">console.log(typeof number.toPrecision()) // string
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>toPrecision()</code> method will pad the resulting value with 0's if there are not enough significant digits, and it does not change the value of the original number - it returns a new result.

 </div>
 </div>
 </div>
 <h3 id="toexponential">toExponential()</h3>
The <code>toExponential()</code> function in JavaScript is used to show a number in exponential notation (sometimes known as scientific notation), even if the number is inside the range where JavaScript ordinarily uses standard notation:
<pre><code class="hljs">number.toExponential([fractionalDigits]);
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: It's worth noting that with sufficiently small and sufficiently large numbers - JavaScript automatically displays them in their exponential notation.

 </div>
 </div>
 </div>
 <code>fractionalDigits</code> as an argument is optional, and specifies how many fractional digits are to be displayed in the result. If this argument is missing, the output may contain up to 16 fractional digits, depending on your browser:
<pre><code class="hljs">let number = 95.3434;
 
console.log(number.toExponential()); // 9.53434e+1
console.log(number.toExponential(4)); // 9.5343e+1
console.log(number.toExponential(2)); // 9.53e+1
console.log(95.3434.toExponential()); // 9.53434e+1
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>toExponential()</code> method does not change the value of the original number - it returns a new value to be stored.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this short tutorial, we've covered the process of setting a precision for floating-point numbers in JavaScript, using the <code>toExponential()</code>, <code>toFixed()</code> and <code>toPrecision()</code> methods of the <code>Number</code> object.

David Landup

Joel Olawanle

In this short tutorial, we'll take a look at how to set floating-point precision to a certain decimal place and how to convert to exponential (scientific) notation in JavaScript with toFixed(), toPrecision() and toExponential().

How to Set Floating-Point Precision in JavaScript

<h2 id="introduction">Introduction</h2>
Floats and doubles represent floating-point numbers - numbers with decimal points. While this type is very useful for a wide variety of environments, depending on what they're used for, we sometimes want to round them to a whole number - closest whole integer, up or down.
<blockquote>
In this article, we will explore how to round double/float numbers (including strings) in JavaScript using built-in methods of the <code>Math</code> object.
</blockquote>
<h3 id="themathobject">The Math Object</h3>
The <code>Math</code> object is used to conduct commonplace mathematical operations. Because the <code>Math</code> object is a static built-in object, you can't and won't need to initialize it - it can be invoked at any point as a static object with helper methods. It has a plethora of constants and techniques for doing mathematical operations, all of which may be accessed directly.
Let's look at some of the <code>Math</code> object's handy methods for rounding doubles/floats in JavaScript!
<h4 id="mathround">Math.round()</h4>
<code>Math.round()</code> is a function used to return the value of a floating-point number rounded to the nearest whole integer. Depending on the supplied float/double, <code>Math.round()</code> either rounds up or down.
If the floating-point number is above or equal to <code>x.5</code> - it's rounded up to the nearest integer. If the floating-point number is below <code>x.5</code>, it's rounded down to the nearest integer:
<pre><code class="hljs">Math.round(24.49); // 24
Math.round(&#x27;29.5&#x27;); // 30
Math.round(72); // 72
Math.round(-40.51); // -41
</code></pre>
<h4 id="mathfloor">Math.floor()</h4>
The <code>Math.floor()</code> method is used to return the nearest whole integer that is less than or equal to a specified value. In layman's terms, the <code>floor()</code> method rounds a number down and returns an integer result:
<pre><code class="hljs">Math.floor(75.95); // 75
Math.floor(75.05); // 75
Math.floor(4); // 4
Math.floor(&#x27;-65.05&#x27;); // -66
Math.floor(-65.95); // -66
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>Math.floor(null)</code> returns 0, not a <code>NaN</code> error.

 </div>
 </div>
 </div>
 <h4 id="mathceil">Math.ceil()</h4>
The <code>Math.ceil()</code> method rounds a number up to the nearest greatest integer. Simply said, it is used to round up a number and return an integer value:
<pre><code class="hljs">Math.ceil(0.95); // 1
Math.ceil(7); // 7
Math.ceil(&#x27;9.008&#x27;); // 10
Math.ceil(-0.95); // -0
Math.ceil(-7); // -7
Math.ceil(-9.008); // -10
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>Math.ceil(null)</code> returns integer 0 and does not give a <code>NaN</code> error.

 </div>
 </div>
 </div>
 <h4 id="mathtrunc">Math.trunc()</h4>
While truncating isn't rounding - it's worth mentioning the <code>Math.trunc()</code> method. It returns the whole integer of the number, by truncating (cutting off) the floating-point precision, regardless of whether the argument is positive or negative:
<pre><code class="hljs">Math.trunc(38.37); // 38
Math.trunc(72.84); // 72
Math.trunc(0.123); // 0
Math.trunc(-0.13323); // -0
Math.trunc(&#x27;-1.18923&#x27;); // -1
Math.trunc(NaN); // NaN
Math.trunc(&#x27;john&#x27;); // NaN
Math.trunc(); // NaN
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short article, we've taken a look at how to round doubles/floats in JavaScript, with the help of <code>Math.round()</code>, <code>Math.floor()</code>, <code>Math.ceil()</code> and <code>Math.trunc()</code>.

In this tutorial - learn how to round decimal numbers (floats/doubles) in JavaScript to whole integers - up, down or nearest.

How to Round Doubles/Floats in JavaScript

<h2 id="introduction">Introduction</h2>
As you aim to become a better JavaScript developer, it is expedient you understand some tricks and methods in JavaScript to save you from unnecessary hard-to-decode bugs in the future. Whenever users input string values through form fields, it is a good practice for you to remove the white spaces from the start and end of the strings and all unnecessary characters. Input is rarely clean, and unclean input can, in some cases, break an application.
<blockquote>
In this guide, we will explore different methods on how to trim characters from strings in JavaScript, as well as when to use which.
</blockquote>
<h2 id="removingwhitespacesfromstrings">Removing White Spaces From Strings</h2>
Whitespace is defined as an empty space, i.e. a space with no visual representation, but a space that does exist to separate two characters. These whitespace characters are created by using the computer keyboard's Space Bar and Tabs, as well as line break characters or line terminators such as <code>\n</code>, <code>\t</code>, <code>\r</code>.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Trimming a string usually refers to trimming the left, right, or more commonly both sides of a string. Most commonly, we trim the potential whitespace around the string, but we could also trim other characters.

 </div>
 </div>
 </div>
 JavaScript provides three functions to assist us in trimming strings entering into our database or application from input fields.
<h3 id="trimstringwhitespaceinjavascriptwithtrim">Trim String Whitespace in JavaScript with trim()</h3>
<code>trim()</code> is a built-in string method which is used to, well, trim a string. The method removes whitespace from both ends of a string and returns it:
<pre><code class="hljs">string.trim();
</code></pre>
Let's create a <code>username</code> - with a double whitespace in the beginning and a single whitespace at the end:
<pre><code class="hljs">let username = &#x27; John Doe &#x27;;
let trimmed = username.trim();

console.log(trimmed);
</code></pre>
This results in:
<pre><code class="hljs">John Doe
</code></pre>
<code>trim()</code> doesn't work in-place, as strings are immutable. It returns a trimmed string back - so we've captured the returned value and printed it.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: If whitespace is found between two characters, then, the whitespace is preserved. They're only trimmed from the start and end of a string.

 </div>
 </div>
 </div>
 The method is also used to remove line terminators such as <code>\n</code>, <code>\t</code>, <code>\r</code>, etc. For instance, say there's a nasty tab right before a serial number and a newline break after it:
<pre><code class="hljs">let serialNumber = &#x27;\t 011-34201 \n&#x27;;
console.log(&#x27;Untrimmed: &#x27;, serialNumber)
console.log(&#x27;Trimmed: &#x27;, serialNumber.trim());
</code></pre>
This results in:
<pre><code class="hljs">Untrimmed:	 011-34201 
Trimmed: 011-34201
</code></pre>
Again, <code>trim()</code> works by removing the whitespace from both sides. However, sometimes, you may want to only trim one of the sides instead. This is where you'll opt to use the <code>trimStart()</code> and <code>trimEnd()</code> methods instead.
<h3 id="trimstartofstringwithtrimstart">Trim Start of String with trimStart()</h3>
Similar to the <code>trim()</code> method and just like the name implies, <code>trimStart()</code> is used to trim out whitespace and line terminators only from the beginning of a string. For instance:
<pre><code class="hljs">let company = &#x27; Stack Abuse &#x27;;
company.trimStart(); // &#x27;Stack Abuse &#x27;
 
let serialNumber = &#x27;\t 011-34201 \n&#x27;;
serialNumber.trimStart(); // &#x27;011-34201 \n&#x27;
</code></pre>
In the example above, you will notice that the space at the beginning of the company name was removed. The same logic applies to the still-present newline in the <code>serialNumber</code>.
<h3 id="trimendofstringwithtrimend">Trim End of String with trimEnd()</h3>
<code>trimEnd()</code> is a polar opposite of the <code>trimStart()</code> method and, just as the name implies, is used to trim out whitespace and line terminators only from the end of a string. For instance:
<pre><code class="hljs">let company = &#x27; Stack Abuse &#x27;;
company.trimEnd(); // &#x27; Stack Abuse&#x27;
 
let serialNumber = &#x27;\t 011-34201 \n&#x27;;
serialNumber.trimEnd(); // &#x27;\t 011-34201&#x27;
</code></pre>
In the example above, you will notice that instead of affecting the beginning like that of <code>trimStart()</code>, the end was affected by removing space and also the line terminator.
<h3 id="trimallwhitespacefromstrings">Trim All Whitespace From Strings</h3>
Moving on, let's now see how to trim all whitespace using Regular Expressions. So far we have only seen how to remove whitespace from the start or end of our strings - let's now see how to remove all whitespace.
This is possible using the JavaScript's <code>string.replace()</code> method, which supports Regular Expressions (RegEx) and helps find matches within a particular string. <code>replace()</code> takes two arguments, the first being the Regular Expression matching what we want to remove, and the second being the pattern we'd like to insert instead of the first.
<blockquote>
If you'd like to read more about Regular Expressions - read our <a target="_blank" href="https://stackabuse.com/guide-to-regular-expressions-and-matching-strings-in-javascript/">Guide to Regular Expressions and Matching Strings in JavaScript</a>!
</blockquote>
Let’s now compose a Regular Expression to handle the removal of all whitespace from strings:
<ul>
<li><code>\s</code>: Matches any whitespace symbol such as spaces, tabs, and line breaks.</li>
<li><code>+</code>: Matches one or more of the preceding tokens (referencing <code>\s</code>).</li>
<li><code>g</code>: Placed at the end to indicate iterative searching throughout the full string.</li>
</ul>
Let's now combine this RegEx and make use of it to remove whitespace within, before and after strings:
<pre><code class="hljs">let sentence = &#x27; I and the man decided to move ouT &#x27;;
let trimmed = sentence.replace(/\s+/g, &#x27;&#x27;); // &#x27;IandthemandecidedtomoveouT&#x27;
 
console.log(&#x27;Untrimmed: &#x27;, sentence)
console.log(&#x27;Trimmed: &#x27;, trimmed);
</code></pre>
This results in:
<pre><code class="hljs">Untrimmed: I and the man decided to move ouT 
Trimmed: IandthemandecidedtomoveouT
</code></pre>
In the example above, we took out whitespace characters and replaced them with an empty string.
<h2 id="trimarbitrarycharacterswithjavascript">Trim Arbitrary Characters with JavaScript</h2>
When using Regular Expressions, and the <code>string.replace()</code> method - you're not limited to trimming whitespace. You can really trim any pattern, and Regular Expression patterns are quite flexible.
We just need to derive a particular RegEx expression depending on the arbitrary characters you wish to trim. Suppose we want to remove a particular character from the start and a different one from the end of a string:
<pre><code class="hljs">let example = &quot;cccccccccccccccccccccI know the manaaaaaaaaaaaaaaaaaaaa&quot;;
let show = example.replace(/c+/, &quot;&quot;).replace(/a+$/, &quot;&quot;);
console.log(show); // &quot;I know the man&quot;
</code></pre>
Or we could also work any arbitrary pattern, such as any number between <code>0</code> and <code>9</code>:
<pre><code class="hljs">let example = &quot;1234567890I know the man1234567890&quot;;
let show = example.replace(/^[0-9]+/, &#x27;&#x27;).replace(/[0-9]+$/, &#x27;&#x27;);
console.log(show); // &quot;I know the man&quot;
</code></pre>
<h2 id="trimmingcharacterfromaparticularindexwithjavascript">Trimming Character From a Particular Index With JavaScript</h2>
Finally, another built-in string method can be used to trim strings, given a particular index. The <code>substr()</code> method substrings a string, and returns the subset as a new string. It is used to extract the parts of the string between the given starting and ending index.
To remove the first character from a string - we cut it off at index <code>1</code>, and set the second parameter as the <code>length</code> of the string:
<pre><code class="hljs">let username = &#x27;John Doe&#x27;;
console.log(&#x27;Original Name: &#x27;, username);
 
let newName = username.substr(1, username.length);
console.log(&#x27;After removing the first character: &#x27;, newName);
</code></pre>
This results in:
<pre><code class="hljs">Original Name: John Doe
After removing the first character: ohn Doe
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this guide, we've taken a look at how to trim whitespace from strings - be it from starts, ends or both ends of the string, in JavaScript.
We've explored the <code>trim()</code>, <code>trimStart()</code> and <code>trimEnd()</code> methods, which automatically trim whitespace. We've then explored the use of Regular Expressions to replace patterns of whitespace, with empty strings. Additionally, we've then explored the replacement of any arbitrary pattern in strings with any other pattern instead.
Finally, we've taken a look at the <code>substr()</code> method, to substring and trim characters with a given <code>start</code> and <code>end</code> index.

In this guide, learn how to trim the whitespaces at the start and end of a string in JavaScript with built-in methods and Regular Expressions. We'll use the `trim()`, `trimStart()`, `trimEnd()`, `substr()` and `replace()` methods.

How to Trim Whitespaces/Characters from a String in JavaScript

<h2 id="introduction">Introduction</h2>
Programming has always included the definition of data, manipulation of data, and finally displaying data. Data can be represented as bits of information that we can alter in computer programs. Since memory locations aren't very human-readable, and change through time - we've started annotating variable data, with human-readable signifiers, which we can call on, to indirectly point to data in-memory.
<blockquote>
These signifiers are commonly called variables or reference variables.
</blockquote>
Variables are, essentially, pointers or references to some data in a machine's memory, and the pointer can dynamically be changed to reflect the true state of the data we've &quot;labeled&quot;.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Commonly and colloquially, it's said that &quot;variables store data&quot; and that they're &quot;containers for data&quot;. This is technically incorrect, and stems from a blurred semantic boundary - it's unclear whether people refer to reference variables or objects in-memory. (Reference) Variables are pointers, and they point to objects in the machine's memory - where the data is stored. The colloquial terms are commonplace enough that you'll find them present in documentation, but it's worth keeping object-memory-allocation at least in the back of your head.

 </div>
 </div>
 </div>
 Prior to the release of ES2015 (ES6), JavaScript variables were only declared using the <code>var</code> keyword; however, with the introduction of ES6, new ways to declare variables, <code>let</code> and <code>const</code>, were introduced. This oftentimes brings up questions - mainly as to which keyword should be used, and when:
<pre><code class="hljs">var english = &quot;Hello there!&quot;;
let french = &quot;Bonjour!&quot;;
const german = &quot;Hallo!&quot;;
</code></pre>
<blockquote>
In this guide, we will explore the difference between the three various ways to declare variables in JavaScript - <code>var</code>, <code>let</code> and <code>const</code>, their scopes and when to choose which.
</blockquote>
<h3 id="whatisscopeinjavascript">What is Scope in JavaScript?</h3>
Scope is an important concept to grasp in order to write code in most programming languages, and plays an important part in choosing which variable keyword you'll want to use. Scope defines variable availability. In JavaScript, we have two scopes: global and local.
<ul>
<li>Global Scope: Variables declared outside any code block or function are known as global variables because they have a global scope, and can be referenced from any function or block.</li>
</ul>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: In a JavaScript document, only one global scope exists.

 </div>
 </div>
 </div>
 Suppose you have a script file. Again, any variable declared outside any function or block is globally scoped:
<pre><code class="hljs">// Initialized outside of function or block
var name = &quot;John Doe&quot;;
function logName() {
 console.log(name);
};
 
logName();
</code></pre>
In the example above, <code>name</code> is accessible within the <code>logName()</code> function, as it has a global scope. It exists in the context of the application, and the <code>logName()</code> function can call on that context!
<ul>
<li>Local Scope: Variables declared within any code block or function are known as local variables, because they have a local scope. They can be referenced only within the code blocks or functions in which they're defined.</li>
</ul>
<pre><code class="hljs">function logName() {
 // Initialized within a function or block
 var name = &quot;John Doe&quot;;
 var id = 1;
 console.log(name);
};
 
function logId() {
 console.log(id);
}
 
logId();
</code></pre>
This results in:
<pre><code class="hljs">error: Uncaught ReferenceError: id is not defined
</code></pre>
How come? <code>id</code> is defined - but it isn't defined in the scope of the <code>logId()</code> function. As far as the function is concerned - no <code>id</code> exists. It starts by checking whether there's a locally scoped variable. Since there's none, it checks whether there's a globally scoped variable. If not - <code>id</code> is not defined from the context of <code>logId()</code>!
With the primer/reminder out of the way - let's take a look at how <code>var</code>, <code>let</code> and <code>const</code> depend on the scope, and when each should be used!
<h2 id="thevarkeywordinjavascript">The var Keyword in JavaScript</h2>
In JavaScript, <code>var</code> is a reserved keyword which is followed by a reference variable name. The name defined after the keyword can then be used as a pointer to the data in-memory.
Using <code>var</code> is the oldest method of variable declaration in JavaScript. Let's declare a variable and initialize it by assigning a value to it using the assignment operator (<code>=</code>):
<pre><code class="hljs">// Declaration and initialization
var name = &quot;John Doe&quot;;
</code></pre>
Alternatively, you can break this down into two steps - variable declaration (what it is), and variable initialization (assigning a value to it):
<pre><code class="hljs">// Declaration
var name;
// Initialization
name = &quot;John Doe&quot;;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: In strongly-typed languages, such as Java, for a long time, you'd define the type of the variable during declaration, and during initialization, you could only assign a value fitting that type. Since Java 10 - a <code>var</code> keyword has been added, which is type-agnostic and infers the type during runtime.

 </div>
 </div>
 </div>
 <h3 id="scopeofvar">Scope of var</h3>
When defined within a function - any <code>var</code> is restricted to that function. When defined outside of a function, a <code>var</code> is global:
<pre><code class="hljs"> var firstName = &quot;John&quot;;
 
 function checkLastName() {
 var lastName = &quot;Doe&quot;;
 }
</code></pre>
We have two declarations in the preceding example: <code>firstName</code> is globally scoped because it's defined outside a function, and <code>lastName</code> is locally/function scoped because it's defined within a function:
<pre><code class="hljs">var firstName = &quot;John&quot;;
 
function checkLastName() {
 var lastName = &quot;Doe&quot;;
 console.log(lastName); // &quot;Doe&quot;
 console.log(firstName); // &quot;John&quot;
}
 
checkLastName();
console.log(lastName); // Uncaught ReferenceError: lastName is not defined
</code></pre>
So far so good. However - <code>var</code> has an issue.
<h3 id="theissuewithvar">The Issue with var</h3>
<code>var</code> is not block-scoped. When you declare a variable within a code block, using curly braces (<code>{}</code>), its scope &quot;flows out&quot; of the block! For instance:
<pre><code class="hljs">var name = &quot;John Doe&quot;;
 
var someBool = true;
if (someBool) {
 var name = &quot;Daniel Joan&quot;;
}
 
console.log(name);
</code></pre>
The <code>name</code> that points to &quot;John Doe&quot; is global, and the <code>name</code> that points to &quot;Daniel Joan&quot; is defined within a block. However, when we try printing the <code>name</code> that's within scope, we run into:
<pre><code class="hljs">Daniel Joan
</code></pre>
<blockquote>
<code>var</code> is not block-scoped. We may think that we've defined a local <code>var name</code> to point to &quot;Daniel Joan&quot;, but what we've done in reality is overwrite the <code>var name</code> that points to &quot;John Doe&quot;.
</blockquote>
Declaring variables using the <code>var</code> declarations everywhere in your code can lead to confusion, overwriting of existing global variables and by extension - bugs, just as we saw in the code snippet.
This is where <code>let</code> and <code>const</code> kick in!
<h2 id="theletkeywordinjavascript">The let Keyword in JavaScript</h2>
The <code>let</code> declaration was introduced with ES6 and has since become the preferred method for variable declaration. It is regarded as an improvement over <code>var</code> declarations and is block-scoped (variables that can be accessed only in the immediate block), circumventing the main issue that can arise with using <code>var</code>.
<h3 id="scopeoflet">Scope of let</h3>
A variable defined with the <code>let</code> keyword has a scope limited to the block or function in which it is defined:
<pre><code class="hljs">let firstName = &quot;John&quot;;
let lastName = &quot;Doe&quot;;

let someBool = true;
if(someBool){
 let firstName = &quot;Jane&quot;;
 console.log(firstName);
}
 
console.log(firstName);
</code></pre>
This time around - the <code>firstName</code> referring to &quot;Jane&quot; and the <code>firstName</code> referring to &quot;John&quot; don't overlap! The code results in:
<pre><code class="hljs">Jane
John
</code></pre>
The <code>firstName</code> declared within the block is limited to the block in scope and the one declared outside the block is available globally. Both instances of <code>firstName</code> are treated as different variable references, since they have different scopes.
<h2 id="theconstkeywordinjavascript">The const Keyword in JavaScript</h2>
The <code>const</code> declaration was introduced with ES6, alongside <code>let</code>, and it is very similar to <code>let</code>. <code>const</code> points to data in memory that holds constant values, as the name implies. <code>const</code> reference variables cannot be reassigned to a different object in memory:
<pre><code class="hljs">const name = &quot;John&quot;;
const name = &quot;Jane&quot;;
</code></pre>
This results in:
<pre><code class="hljs">Uncaught SyntaxError: Identifier &#x27;name&#x27; has already been declared
</code></pre>
<h3 id="scopeofconst">Scope of const</h3>
The scope of a variable defined with the <code>const</code> keyword, like the scope of <code>let</code> declarations, is limited to the block defined by curly braces (a function or a block). The main distinction is that they cannot be updated or re-declared, implying that the value remains constant within the scope:
<pre><code class="hljs">const name = &quot;John&quot;;
name = &quot;Doe&quot;;
 
// Uncaught TypeError: Assignment to constant variable. 
</code></pre>
<h2 id="goodcodingconventions">Good Coding Conventions</h2>
So, what does this all mean, and which should you choose, other than the obvious requirements to avoid bugs? This can actually be boiled down to a couple of good practices:
<ul>
<li><code>const</code> is preferred to <code>let</code>, which is preferred to <code>var</code>. Avoid using <code>var</code>.</li>
<li><code>let</code> is preferred to <code>const</code> when it's known that the value it points to will change over time.</li>
<li><code>const</code> is great for global, constant values.</li>
<li>Libraries are typically imported as <code>const</code>.</li>
</ul>
When importing a library and instantiating it - you don't want to be able to reassign the instance to something else, since you'd enter a slippery slope of &quot;using the library&quot;, whereas, something else is &quot;slipping code in&quot; under the hood.
For instance, if you were to <code>require()</code> a library such as Axios, you're conceivably wanting to use its API. However, there's nothing preventing you (or someone else) to switch out the <code>axios</code> instance with something else if you haven't used <code>const</code> to declare it:
<pre><code class="hljs">let axios = require(&#x27;axios&#x27;);
axios.get(&#x27;some_url&#x27;).then(someFunction());

axios = &quot;Totally not a string!&quot;
axios.get(&#x27;some_url&#x27;).then(someFunction()); // String has no method `get()`
</code></pre>
By having <code>axios</code> be <code>const</code> - this issue is avoided. Additionally, you can define global constants, which can be used as configuration constants:
<pre><code class="hljs">const WIDTH = 1920;
const HEIGHT = 1080;
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this guide, we've explored the progression of variable declaration in JavaScript, from the original <code>var</code> to the newer <code>let</code> and <code>const</code>.
We've explored Scopes in JavaScript and how the different declaration signifiers affect the scope of a variable in code, noting a glaring issue with using <code>var</code>. Finally, we've explored some good practices, noting when to use which keyword.

In this guide, learn what the difference is between the var, let and const variable declarations in JavaScript, including best practices, with examples.

The Difference Between var, let and const in JavaScript and Best Practices

<h2 id="introduction">Introduction</h2>
Converting an object into a savable state (such as a byte stream, textual representation, etc) is called serialization, whereas deserialization converts data from the aforementioned format back to an object. A serialized format retains all the information required to reconstruct an object in memory, in the same state as it was when serialized.
<blockquote>
In this guide, you will learn how to serialize and deserialize data in Python with the Pickle module. We'll additionally be working with data that's been serialized/deserialized, with Pandas.
</blockquote>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Some knowledge of file handling operations is recommended if you are a complete beginner to the Python programming language. If so - read our <a href="/saving-text-json-and-csv-to-a-file-in-python/">Guide to Saving Text, JSON and CSV to a File in Python</a>.

 </div>
 </div>
 </div>
 <h2 id="whatispicklingandunpicklinginpython">What is Pickling And Unpickling in Python?</h2>
Python comes with a built-in package, known as <code>pickle</code>, that can be used to perform “pickling” and “unpickling” operations.
Pickling and unpickling in Python is the process that is used to describe the conversion of objects into byte streams and vice versa - serialization and deserialization, using Python's <code>pickle</code> module. Let's take a look at a few examples!

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>pickle</code> module is available in the standard library from Python 3.x onward.

 </div>
 </div>
 </div>
 Consider the following code that prints the contents of a dictionary:
<pre><code class="hljs">import pickle

athletes = {
 &quot;Name&quot;: [&quot;Cristiano Ronaldo&quot;, &quot;Lionel Messi&quot;, &quot;Eden Hazard&quot;, &quot;Luis Suarez&quot;, &quot;Neymar&quot;],
 &quot;Club&quot;: [&quot;Manchester United&quot;, &quot;PSG&quot;, &quot;Real Madrid&quot;, &quot;Atletico Madrid&quot;, &quot;PSG&quot;]
 }

print(athletes)
</code></pre>
This would result in:
<pre><code class="hljs">{
&#x27;Name&#x27;: [&#x27;Cristiano Ronaldo&#x27;, &#x27;Lionel Messi&#x27;, &#x27;Eden Hazard&#x27;, &#x27;Luis Suarez&#x27;, &#x27;Neymar&#x27;],
&#x27;Club&#x27;: [&#x27;Manchester United&#x27;, &#x27;PSG&#x27;, &#x27;Real Madrid&#x27;, &#x27;Atletico Madrid&#x27;, &#x27;PSG&#x27;]
}
</code></pre>
Let's try to &quot;pickle&quot; the <code>athletes</code> object to a binary file. We can do this with the <code>dump()</code> function. It takes two parameters - the object being “pickled” and a <code>File</code> object to write the data to. The following code “pickles” the data to a new file <code>athletes.txt</code> that will be created in the same directory the script is running in:
<pre><code class="hljs">athletes_file = open(&#x27;athletes.txt&#x27;, &#x27;wb&#x27;)
pickle.dump(athletes, athletes_file)
athletes_file.close()
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The mode that we have used in the file handling is <code>&quot;wb&quot;</code> which is used to write binary files. Since we are converting the object to byte stream we will use the <code>&quot;b&quot;</code> with each mode while handling files.

 </div>
 </div>
 </div>
 The created file's contents can't be viewed by a regular text editor because it's binary data and isn't meant to be stored in a human-readable format. To read this information, we'll have to “unpickle” or deserialize this data. We can do this with the <code>load()</code> function!
The <code>load()</code> function reads the contents of a “pickled” file and returns the object constructed by reading the data. The type of object as well as its state depend on the contents of the file. Since we've saved a dictionary with athlete names - this object with the same entries is reconstructed. Let's read the “pickled” file you just created back to a Python object and print its contents:
<pre><code class="hljs">import pickle

athletes_file = open(&quot;athletes.txt&quot;, &quot;rb&quot;)
athletes = pickle.load(athletes_file)
athletes_file.close()
print(athletes)
</code></pre>
This results in:
<pre><code class="hljs">{&#x27;Name&#x27;: [&#x27;Cristiano Ronaldo&#x27;, &#x27;Lionel Messi&#x27;, &#x27;Eden Hazard&#x27;, &#x27;Luis Suarez&#x27;, &#x27;Neymar&#x27;], &#x27;Club&#x27;: [&#x27;Manchester United&#x27;, &#x27;PSG&#x27;, &#x27;Real Madrid&#x27;, &#x27;Atletico Madrid&#x27;, &#x27;PSG&#x27;]}
</code></pre>
As you see, we get back all the data that was “pickled”.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Just like how we used <code>&quot;wb&quot;</code> to write binary data, we used the <code>&quot;rb&quot;</code> mode during file handling to read binary data.

 </div>
 </div>
 </div>
 Now that we've covered the process of “pickling” and “unpickling” in Python, let's read “pickled” files so that we can put their contents in a Pandas <code>DataFrame</code>!
<h2 id="howtoreadapicklefileinapandasdataframe">How to Read a Pickle File in a Pandas DataFrame?</h2>
We'll be using the same data as we did in the earlier examples. First, ensure that you have the Pandas library installed:
<pre><code class="hljs">$ pip install pandas
</code></pre>
Now let's start by converting the objects into a Python DataFrame:
<pre><code class="hljs">import pickle
import pandas as pd

athletes = {
 &quot;Name&quot;: [&quot;Cristiano Ronaldo&quot;, &quot;Lionel Messi&quot;, &quot;Eden Hazard&quot;, &quot;Luis Suarez&quot;, &quot;Neymar&quot;], 
 &quot;Club&quot;: [&quot;Manchester United&quot;, &quot;PSG&quot;, &quot;Real Madrid&quot;, &quot;Atletico Madrid&quot;, &quot;PSG&quot;]
}

df = pd.DataFrame(athletes)
print(df)
</code></pre>
This results in:
<pre><code class="hljs"> Name Club
0 Cristiano Ronaldo Manchester United
1 Lionel Messi PSG
2 Eden Hazard Real Madrid
3 Luis Suarez Atletico Madrid
4 Neymar PSG
</code></pre>
As you can see in the output, we will get a Pandas DataFrame object with 3 columns and 6 rows including the indices. After this, the process is similar to how we handled the normal, non-DataFrame objects. We will use file handling along with the <code>dump()</code> and <code>load()</code> methods to first create a “pickle” file from a Pandas <code>DataFrame</code>, and then read the byte stream to get the Pandas <code>DataFrame</code>:
<pre><code class="hljs"># ...
df = pd.DataFrame(athletes)

athelets_df_file = open(&quot;athletes_df.txt&quot;, &quot;wb&quot;)
pickle.dump(df, athelets_df_file)
athelets_df_file.close()
</code></pre>
The above code will create a “pickle” file that will store the Pandas DataFrame as a byte stream in our current directory as <code>athletes_df.txt</code>.
When we want to use this DataFrame again, we can just “unpickle” this file to get it back:
<pre><code class="hljs">import pickle

athletes_df_file = open(&quot;athletes_df.txt&quot;, &quot;rb&quot;)
athletes = pickle.load(athletes_df_file)
athletes_df_file.close()
print(athletes)
</code></pre>
This results in:
<pre><code class="hljs"> Name Club
0 Cristiano Ronaldo Manchester United
1 Lionel Messi PSG
2 Eden Hazard Real Madrid
3 Luis Suarez Atletico Madrid
4 Neymar PSG
</code></pre>
That's the awesome thing about “pickled” files! We don't just get the contents stored in the <code>DataFrame</code> object when we load it, we get the <code>DataFrame</code> object itself. Without these capabilities, it's common for programmers to save the data in an accessible format like JSON, and then load the JSON data into a new object to use it.
<blockquote>
Pickling and unpickling save us from using intermediate data formats and creating methods to load our data.
</blockquote>
<h2 id="picklingintostringsandunpicklingfromstrings">Pickling into Strings and Unpickling from Strings</h2>
It's good to know that the <code>pickle</code> module also provides us with <code>dumps()</code> and <code>loads()</code> methods as well. These methods will “pickle” and “unpickle” Python objects, but instead of using a binary file to store data they return and accept string data.
Let's take a look at a simple example to understand how the <code>dumps()</code> and <code>loads()</code> methods work in Python:
<pre><code class="hljs">import pickle

simple_obj = {1: [&#x27;o&#x27;, &#x27;n&#x27;, &#x27;e&#x27;], &quot;two&quot;: (1, 2), 3: &quot;Three&quot;}
pickled_obj = pickle.dumps(simple_obj)
print(pickled_obj)
</code></pre>
This results in:
<pre><code class="hljs">b&#x27;\x80\x04\x95-\x00\x00\x00\x00\x00\x00\x00}\x94(K\x01]\x94(\x8c\x01o\x94\x8c\x01n\x94\x8c\x01e\x94e\x8c\x03two\x94K\x01K\x02\x86\x94K\x03\x8c\x05Three\x94u.&#x27;
</code></pre>
As you can see in the output, the binary string is returned instead of a “pickled” file that was created with the <code>dump()</code> method. We can take this string and load the object in a new variable:
<pre><code class="hljs">out = pickle.loads(obj)
print(out)
</code></pre>
This results in:
<pre><code class="hljs">{1: [&#x27;o&#x27;, &#x27;n&#x27;, &#x27;e&#x27;], &#x27;two&#x27;: (1, 2), 3: &#x27;Three&#x27;}
</code></pre>
These two methods facilitate easier transfer between Python-based applications, and you could very well send “pickled” data through APIs. More commonly, though, for Python-based web applications, you'll be using JSON-serialized objects instead.
<h2 id="conclusion">Conclusion</h2>
In this article, we learned about the “pickling” and “unpickling” operations in Python that are useful to store your objects for later use. Methods like <code>load()</code>, <code>loads()</code>, <code>dump()</code>, <code>dumps()</code> are provided by the built-in <code>pickle</code> module to convert Python objects to and from byte streams.
Creating and loading the data to and from a Pandas <code>DataFrame</code> object can be done easily using the <code>pickle</code> module in Python.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note that “pickling” and “unpickling” are not recommended if you are planning to use the objects in other programming languages as the module does not guarantee cross-programming compatibility.

 </div>
 </div>
 </div>

Marcus Sanatan

Mohammad Waseem

In this article, you will learn how to serialize and deserialize data in Python with the Pickle module. Furthermore, you'll use data that's been serialized/deserialized with Pandas.

How to Pickle and Unpickle Objects in Python

<h2 id="introduction">Introduction</h2>
When writing JavaScript code, you may need to loop through JavaScript objects and enumerate their fields/values. Unfortunately, JavaScript objects are not iterable like arrays or strings, so we can't just loop an object using <code>map()</code>, <code>forEach()</code> or a <code>for…of</code> loop.
Suppose we have an object which contains a user details:
<pre><code class="hljs">let user = { firstName: &quot;Jacob&quot;, lastName: &quot;Black&quot;, age: 15, hobby: &quot;Singing&quot; };
</code></pre>
If we attempt to loop through, just as we do for other iterable like arrays, colorful bug messages await:
<pre><code class="hljs">user.map(detail =&gt; {
 console.log(detail);
}) // TypeError: user.map is not a function 
 
// Or
user.forEach(detail =&gt; {
 console.log(detail);
}) // TypeError: user.forEach is not a function
 
// Or
for (let detail of user) {
 console.log(detail);
} // TypeError: user is not iterable 
</code></pre>
<blockquote>
In this guide, we will take a look at how to loop and enumerate objects in JavaScript - from the simpler approaches, such as using a <code>for...in</code> loop to the new object static methods that were introduced in ES6 and ES8.
</blockquote>
<h2 id="loopandenumerateobjectwithforinloop">Loop and Enumerate Object with for...in Loop</h2>
Prior to the introduction of ES6, the only way to loop through objects in JavaScript was to obtain key-value through the use of a <code>for...in</code> loop. This method is supported by all modern and old browsers, and works reasonably well.
Suppose we have a <code>user</code> object:
<pre><code class="hljs">const user = {
 firstName: &quot;John&quot;,
 lastName: &quot;Doe&quot;,
 email: &quot;johndoe@stackabuse.com&quot;,
 age: 37,
 hobby: &quot;Singing&quot;
};
</code></pre>
To iterate and enumerate the values, we can loop through each <code>key</code> in the user, keeping track of an index:
<pre><code class="hljs">var index = 0;
for (const key in user) {
 if (user.hasOwnProperty(key)) {
 console.log(`Index: ${index}, ${key}: ${user[key]}`);
 index++;
 }
}
</code></pre>
This results in:
<pre><code class="hljs">Index: 0, firstName: John
Index: 1, lastName: Doe
Index: 2, email: johndoe@stackabuse.com
Index: 3, age: 37
Index: 4, hobby: Singing
</code></pre>
The <code>for...in</code> loop works great, but it has a flaw in that it iterates through properties in the Prototype chain, which has many other properties besides the <code>user</code>'s. When looping through objects with the <code>for...in</code> loop, you must check if the property belongs to the object using <code>hasOwnProperty()</code>, as shown in the example above. This is both inefficient, as more looping is done than needs to be, and makes the code less readable.
Secondly, sometimes you may need a little more flexibility, which arrays provide. Let’s now consider a better way with a far better syntax which works with fewer technicalities.
<h2 id="objectstaticmethodstoloopandenumeratejavascriptobjects">Object Static Methods to Loop and Enumerate JavaScript Objects</h2>
In this section, we will cover three object static methods for converting object properties to arrays. Once converted to an array - we have much more flexibility, as well as efficiency in looping through arrays and enumerating them!
<ul>
<li><code>Object.keys()</code></li>
<li><code>Object.values()</code></li>
<li><code>Object.entries()</code></li>
</ul>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: An object has properties, which are key-value pairs. Each property in an object has a name (also known as a key) and a corresponding value (also known as a value). You can extract <code>keys()</code> and <code>values()</code> individually, or <code>entries()</code>, which are key-value pairs, depending on which properties you'd like to enumerate.

 </div>
 </div>
 </div>
 <h3 id="loopandenumerateobjectkeyswithobjectkeys">Loop and Enumerate Object Keys with Object.keys()</h3>
The <code>Object.keys()</code> method was added in ES6 to make looping over objects easier. It generates an array whose elements are strings containing the names (keys) of an object's properties. The object is passed as an argument to <code>Object.keys()</code>. After that, you can iterate through the array and retrieve the value of each property using any of the array looping methods, such as <code>forEach()</code>, <code>map()</code>, etc.
<pre><code class="hljs">Object.keys(objectName);
</code></pre>
For example, suppose we have an object of user scores in various subjects:
<pre><code class="hljs">const userScores = {
 chemistry: 60,
 mathematics: 70,
 physics: 80,
 english: 98
};
</code></pre>
We can loop through the object and fetch the keys, which for this example would be the subjects:
<pre><code class="hljs">const names = Object.keys(userScores);
console.log(names); // [&quot;chemistry&quot;,&quot;mathematics&quot;,&quot;physics&quot;,&quot;english&quot;]
</code></pre>
You will notice that this returned an array, which we can now make use of any array method to retrieve the data:
<pre><code class="hljs">names.forEach((key, index) =&gt; {
 console.log(`${index}: ${key}`);
});
</code></pre>
This results in:
<pre><code class="hljs">0: chemistry
1: mathematics
2: physics
3: english
</code></pre>
It's worth noting that you can also get the value using this notation - by supplying the <code>key</code> to the object:
<pre><code class="hljs">names.forEach((key, index) =&gt; {
 console.log(`${index} - Key: ${key}, Value: ${userScores[key]}`);
});
</code></pre>
<pre><code class="hljs">0 - Key: chemistry, Value: 60
1 - Key: mathematics, Value: 70
2 - Key: physics, Value: 80
3 - Key: english, Value: 98
</code></pre>
<h3 id="loopandenumerateobjectvalueswithobjectvalues">Loop and Enumerate Object Values with Object.values()</h3>
The <code>Object.values()</code> method is similar to <code>Object.keys()</code> in that it extracts the values of the object's properties, and was introduced in ES8. The returned array can then be looped through using any of the array looping methods, naturally.
<pre><code class="hljs">Object.values(objectName);
</code></pre>
Using the same object:
<pre><code class="hljs">const userScores = {
 chemistry: 60,
 mathematics: 70,
 physics: 80,
 english: 98
};
</code></pre>
The values are easily obtained through:
<pre><code class="hljs">const values = Object.values(userScores);
console.log(values); // [60,70,80,98]
</code></pre>
Again, we could easily loop through this array, assigning an index to each value:
<pre><code class="hljs">values.forEach((value, index) =&gt; {
 console.log(`Index: ${index}, Value: ${value}`);
});
</code></pre>
This results in:
<pre><code class="hljs">Index: 0, Value: 60
Index: 1, Value: 70
Index: 2, Value: 80
Index: 3, Value: 98
</code></pre>
<h3 id="loopandenumerateobjectpropertieswithobjectentries">Loop and Enumerate Object Properties with Object.entries()</h3>
The <code>Object.entries()</code> method is a hybrid of the <code>Object.key()</code> and <code>Object.values()</code> methods, producing an array of arrays with two elements in each inner array - the first element being the property, and the second element being the value. It is another ES8 method:
<pre><code class="hljs">Object.entries(objectName);
</code></pre>
Now, let's re-use the same object as before:
<pre><code class="hljs">const userScores = {
 chemistry: 60,
 mathematics: 70,
 physics: 80,
 english: 98
};
</code></pre>
We can loop through the object and fetch both the keys and the values
<pre><code class="hljs">const data = Object.entries(userScores);
console.log(data); 
 
// Output:
// [
// [ &quot;chemistry&quot;, 60 ]
// [ &quot;mathematics&quot;, 70 ]
// [ &quot;physics&quot;, 80 ]
// [ &quot;english&quot;, 98 ]
// ]
</code></pre>
The return type can be packed into a <code>[key, value]</code> result each, and we can still keep track of the indexing easily:
<pre><code class="hljs">data.forEach(([key, value], index) =&gt; {
 console.log(`Index: ${index} | I scored ${value} in my ${key} subject!`)
})
</code></pre>
This results in:
<pre><code class="hljs">Index: 0 | I scored 60 in my chemistry subject!
Index: 1 | I scored 70 in my mathematics subject!
Index: 2 | I scored 80 in my physics subject!
Index: 3 | I scored 98 in my english subject!
</code></pre>
This approach can accommodate more manipulations and computation, as we have access to both the keys and the values.
<h2 id="conclusion">Conclusion</h2>
In this guide, we've taken a look at how to loop through objects and enumerate their properties. We've started out with the simple <code>for...in</code> loop, noting its limitations. Then, we've jumped into looping and enumeration of values, keys and the pairs of values and keys using static <code>Object</code> methods, added in ES6 and ES8.

In this tutorial - learn how to loop and enumerate (index) properties/fields (keys and values) of JavaScript objects, with practical code examples!

How to Loop and Enumerate JavaScript Object Properties

<h2 id="introduction">Introduction</h2>
Textual data is typically stored through sequences of characters - strings. These sequences, are ultimately, arrays, and converting between the two structures typically is both simple and intuitive. Whether you're breaking a word down into its characters, or a sentence into words - splitting a string into an array isn't an uncommon operation, and most languages have built-in methods for this task.
<blockquote>
In this guide, learn how to convert a String to an Array in JavaScript, with the <code>split()</code>, <code>Object.assign()</code>, <code>Array.from()</code> methods and <code>spread[...]</code> operator, as well as when to use which.
</blockquote>
<h2 id="splitstringintoarraywithsplit">Split String into Array with split()</h2>
The <code>split()</code> method is used to divide a string into an ordered list of two or more substrings, depending on the pattern/divider/delimiter provided, and returns it. The pattern/divider/delimiter is the first parameter in the method's call and can be a regular expression, a single character, or another string.
<blockquote>
If you'd like to learn more about Regular Expressions - read our <a target="_blank" href="https://stackabuse.com/guide-to-regular-expressions-and-matching-strings-in-javascript/">Guide to Regular Expressions and Matching Strings in JavaScript</a>!
</blockquote>
For example, suppose we have a string:
<pre><code class="hljs">let quote = &#x27;I am unstoppable!&#x27;;
</code></pre>
We could split it on each whitespace (breaking it down into words), or on every character, or any other arbitrary delimiter, such as <code>'p'</code>:
<pre><code class="hljs">// Split string using a whitespace
let array1 = quote.split(&#x27; &#x27;);
console.log(array1); // [&quot;I&quot;, &quot;am&quot;, &quot;unstoppable!&quot;]
 
// Splitstring using an empty string (on each character)
let array2 = quote.split(&#x27;&#x27;);
console.log(array2); // [&quot;I&quot;, &quot; &quot;, &quot;a&quot;, &quot;m&quot;, &quot; &quot;, &quot;u&quot;, &quot;n&quot;, &quot;s&quot;, &quot;t&quot;, &quot;o&quot;, &quot;p&quot;, &quot;p&quot;, &quot;a&quot;, &quot;b&quot;, &quot;l&quot;, &quot;e&quot;, &quot;!&quot;]

// Split string using a specific character
let array3 = quote.split(&#x27;p&#x27;);
console.log(array3); // [&quot;I am unsto&quot;, &quot;&quot;, &quot;able!&quot; ]
</code></pre>
One of the major downsides of using single characters or even entire strings is that the approach is fairly rigid. You can't match by multiple delimiters, unless you use a Regular Expression. For instance, say you'd like to break a string into sentences. A sentence can end with a period (<code>.</code>), exclamation mark (<code>!</code>), a question mark (<code>?</code>) or three dots (<code>...</code>). Each of these are valid sentences, but we'd have to perform multiple splits to match all of them, if we were to use single characters or strings.
Pattern matching is where Regular Expressions excel! Let's split a string on each sentence, with any of these ending delimiters:
<pre><code class="hljs">let text = &quot;What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence.&quot;
let sentences = text.split(/[.,!,?,;,...]/);
 
console.log(sentences); // [&quot;What a big family it was&quot;, &quot; That would be a big help&quot;, &quot; The big question was how to end it&quot;, &quot; Was he there&quot;, &quot; Terrible occurrence&quot;, &quot;&quot;]
</code></pre>
However, the delimiters are lost! We split on them and in the process, remove them from the output. Additionally, we have multiple whitespaces in the beginnings of the sentences, and there's an empty string in the end! This isn't to say that <code>split()</code> doesn't work well with Regular Expressions - but it is to say that splitting sentences out of text isn't solved well by <code>split()</code>. This is where we can use the <code>match()</code> method instead - which returns the matching patterns and their delimiters:
<pre><code class="hljs">let text = &quot;What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence.&quot;
let sentences = text.match(/[^.!?]+[.!?]+/g);
 
console.log(sentences); // [&quot;What a big family it was!&quot;, &quot; That would be a big help.&quot;, &quot; The big question was how to end it; Was he there?&quot;, &quot; Terrible occurrence.&quot; ]
</code></pre>
<blockquote>
Again, if you're interested in learning more about Regular Expressions - read our <a target="_blank" href="https://stackabuse.com/guide-to-regular-expressions-and-matching-strings-in-javascript/">Guide to Regular Expressions and Matching Strings in JavaScript</a>!
</blockquote>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>split()</code> method takes in a second parameter, which specifies the limit of splitting that can occur. It doesn't alter the number of splits and elements to fit the passed argument, but rather, performs the split <code>n</code> times, from the start, and stops splitting after that.

 </div>
 </div>
 </div>
 To limit the number of splits we perform, we can easily supply the second argument of the <code>split()</code> method:
<pre><code class="hljs">let sentence = &quot;The big question was how to end it&quot;;
let array = sentence.split(&quot; &quot;, 3); 

console.log(array); // [&quot;The&quot;,&quot;big&quot;,&quot;question&quot;]
</code></pre>
A common use case for the <code>split()</code> method is when someone supplies their full name as a single string:
<pre><code class="hljs">let name = &quot;John Doe&quot;
</code></pre>
Here, we can split the name and save it as different fields of an object to the database, for instance:
<pre><code class="hljs">// Split using a space character
let names = name.split(&quot; &quot;);
console.log(names); // [&quot;John&quot;,&quot;Doe&quot;]
 
// call names by array index
let firstName = names[0];
let lastName = names[1];
 
console.log(firstName); // &quot;John&quot;
console.log(lastName); // &quot;Doe&quot;
</code></pre>
Instead of having to call get both elements using an array index, we can use array destructuring to make the assignment cleaner:
<pre><code class="hljs">let [firstName, lastName] = name.split(&#x27; &#x27;);
console.log(firstName, lastName); //&quot;John&quot; &quot;Doe&quot;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>split()</code> method doesn't support certain UTF-8 characters, such as emojis (i.e. 😄, 😍, ⁣💗), and will replace them with a pair of <code>��</code>.

 </div>
 </div>
 </div>
 <h2 id="splitstringintoarraywitharrayfrom">Split String into Array with Array.from()</h2>
The <code>from()</code> method from the <code>Array</code> class is the leading contender to the <code>split()</code> method. It's used to create an array, given a source of data - and naturally, it can be used to create an array from an iterable string:
<pre><code class="hljs">let name = &quot;John Doe&quot;;
// String to array of chracters
let nameChars = Array.from(name);
console.log(nameChar); //[&quot;J&quot;,&quot;o&quot;,&quot;h&quot;,&quot;n&quot;,&quot; &quot;,&quot;D&quot;,&quot;o&quot;,&quot;e&quot;]
 
// Manipulating array
let nameCharsReversed = nameChars.reverse().join(&#x27;&#x27;);
console.log(nameCharsReversed); //&quot;eoD nhoJ&quot;
</code></pre>
The major benefit of using <code>Array.from()</code> instead of <code>split()</code> is that you don't have to bother with setting a delimiter - the constituent elements are just re-exposed and added to an array, rather than being converted explicitly. Additionally, the <code>Array.from()</code> method supports emoji characters:
<pre><code class="hljs">let word = &quot;It is sweet 😋&quot;;
let wordChars = Array.from(word)
console.log(wordChars); // [&quot;I&quot;,&quot;t&quot;,&quot; &quot;,&quot;i&quot;,&quot;s&quot;,&quot; &quot;,&quot;s&quot;,&quot;w&quot;,&quot;e&quot;,&quot;e&quot;,&quot;t&quot;,&quot; &quot;,&quot;😋&quot;]
</code></pre>
<h2 id="splitstringintoarraywiththespreadoperator">Split String into Array with the Spread Operator</h2>
The Spread Operator has several uses and is a widely-applicable operator in JavaScript. In our context - we'd be most interested in expanding arrays (strings are arrays of characters).
<blockquote>
If you'd like to learn more about the Spread Operator - read our <a target="_blank" href="https://stackabuse.com/spread-operator-in-javascript/">Spread Operator in JavaScript</a>!
</blockquote>
The operator's syntax is simple and clean - and we can spread out the string into an array:
<pre><code class="hljs">let name = &quot;John Doe&quot;;
// Spread out string into an array
let nameChar = [...name];
console.log(nameChar); //[&quot;J&quot;,&quot;o&quot;,&quot;h&quot;,&quot;n&quot;,&quot; &quot;,&quot;D&quot;,&quot;o&quot;,&quot;e&quot;]
 
// Manipulating array
let nameCharReverse = nameChar.reverse().join(&#x27;&#x27;);
console.log(nameCharReverse); //&quot;eoD nhoJ&quot;
</code></pre>
The operator also works with UTF-8 emojis:
<pre><code class="hljs">let word = &quot;It is sweet 😋&quot;;
let wordChar = [...word]
console.log(wordChar); // [&quot;I&quot;,&quot;t&quot;,&quot; &quot;,&quot;i&quot;,&quot;s&quot;,&quot; &quot;,&quot;s&quot;,&quot;w&quot;,&quot;e&quot;,&quot;e&quot;,&quot;t&quot;,&quot; &quot;,&quot;😋&quot;]
</code></pre>
<h2 id="splitstringwithobjectassign">Split String with Object.assign()</h2>
The <code>Object.assign()</code> method copies all values and properties of one object - and maps them to the properties of another. In a sense - it's used for cloning objects and merging those with the same properties:
<pre><code class="hljs">Object.assign(target, ...sources)
</code></pre>
In our case - we'd be copying and mapping the values within a string onto an array:
<pre><code class="hljs">Object.assign([], string)
</code></pre>
This approach is a bit more verbose, and less aesthetically pleasing than the previous two:
<pre><code class="hljs">let name = &quot;John Doe&quot;;
// Assigning string values to an array
let nameChar = Object.assign([], name);
console.log(nameChar); //[&quot;J&quot;,&quot;o&quot;,&quot;h&quot;,&quot;n&quot;,&quot; &quot;,&quot;D&quot;,&quot;o&quot;,&quot;e&quot;]
 
// Manipulating array
let nameCharReverse = nameChar.reverse().join(&#x27;&#x27;);
console.log(nameCharReverse); //&quot;eoD nhoJ&quot;
</code></pre>
It's worth noting that <code>Object.assign()</code> doesn't support special UTF-8 characters such as emojis:
<pre><code class="hljs">let word = &quot;It is sweet 😋&quot;;
let wordChars = Object.assign([], word);
 
console.log(wordChars); // [&quot;I&quot;,&quot;t&quot;,&quot; &quot;,&quot;i&quot;,&quot;s&quot;,&quot; &quot;,&quot;s&quot;,&quot;w&quot;,&quot;e&quot;,&quot;e&quot;,&quot;t&quot;,&quot; &quot;,&quot;�&quot;,&quot;�&quot;]
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short guide, we've taken a look at how to convert a string into an array in JavaScript. We've explored the <code>split()</code> method, which has the highest level of customizability - including splitting on Regular Expressions! Then, we've explored the creation of arrays <code>from()</code> sources such as strings. The Spread Operator works very well in expanding strings back to arrays, and we've finally covered the <code>Object.assign()</code> method to assign the values of a string to an array.

In this tutorial - learn how to convert a string into an array with split(), Regular Expressions (RegEx), the Spread Operator, Array.from() and Object.assign() in JavaScript!

How to Convert a String to an Array in JavaScript

Tensors are multi-dimensional objects, and the essential data representation block of Deep Learning frameworks such as TensorFlow and PyTorch.
A scalar has zero dimensions, a vector has one dimension, a matrix has two dimensions and tensors have three or more. In practice, we oftentimes refer to scalars and vectors and matrices as tensors as well for convenience.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: A tensor can also be any n-dimensional array, just like a Numpy array can. Many frameworks have support for working with Numpy arrays, and many of them are built on top of Numpy so the integration is both natural and efficient.

 </div>
 </div>
 </div>
 However, a <code>torch.Tensor</code> has more built-in capabilities than Numpy arrays do, and these capabilities are geared towards Deep Learning applications (such as GPU acceleration), so it makes sense to prefer <code>torch.Tensor</code> instances over regular Numpy arrays when working with PyTorch. Additionally, <code>torch.Tensor</code>s have a very NumPy-like API, making it intuitive for most with prior experience!
<blockquote>
In this guide, learn how to convert between a Numpy Array and PyTorch Tensors.
</blockquote>
<h2 id="convertnumpyarraytopytorchtensor">Convert Numpy Array to PyTorch Tensor</h2>
To convert a Numpy array to a PyTorch tensor - we have two distinct approaches we could take: using the <code>from_numpy()</code> function, or by simply supplying the Numpy array to the <code>torch.Tensor()</code> constructor or by using the <code>tensor()</code> function:
<pre><code class="hljs">import torch
import numpy as np

np_array = np.array([5, 7, 1, 2, 4, 4])

# Convert Numpy array to torch.Tensor
tensor_a = torch.from_numpy(np_array)
tensor_b = torch.Tensor(np_array)
tensor_c = torch.tensor(np_array)
</code></pre>
So, what's the difference? The <code>from_numpy()</code> and <code>tensor()</code> functions are <code>dtype</code>-aware! Since we've created a Numpy array of integers, the <code>dtype</code> of the underlying elements will naturally be <code>int32</code>:
<pre><code class="hljs">print(np_array.dtype)
# dtype(&#x27;int32&#x27;)
</code></pre>
If we were to print out our two tensors:
<pre><code class="hljs">print(f&#x27;tensor_a: {tensor_a}\ntensor_b: {tensor_b}\ntensor_c: {tensor_c}&#x27;)
</code></pre>
<code>tensor_a</code> and <code>tensor_c</code> retain the data type used within the <code>np_array</code>, cast into PyTorch's variant (<code>torch.int32</code>), while <code>tensor_b</code> automatically assigns the values to floats:
<pre><code class="hljs">tensor_a: tensor([5, 7, 1, 2, 4, 4], dtype=torch.int32)
tensor_b: tensor([5., 7., 1., 2., 4., 4.])
tensor_c: tensor([5, 7, 1, 2, 4, 4], dtype=torch.int32)
</code></pre>
This can also be observed through checking their <code>dtype</code> fields:
<pre><code class="hljs">print(tensor_a.dtype) # torch.int32
print(tensor_b.dtype) # torch.float32
print(tensor_c.dtype) # torch.int32
</code></pre>
<h3 id="numpyarraytopytorchtensorwithdtype">Numpy Array to PyTorch Tensor with dtype</h3>
These approaches also differ in whether you can explicitly set the desired <code>dtype</code> when creating the tensor. <code>from_numpy()</code> and <code>Tensor()</code> don't accept a <code>dtype</code> argument, while <code>tensor()</code> does:
<pre><code class="hljs"># Retains Numpy dtype
tensor_a = torch.from_numpy(np_array)
# Creates tensor with float32 dtype
tensor_b = torch.Tensor(np_array)
# Retains Numpy dtype OR creates tensor with specified dtype
tensor_c = torch.tensor(np_array, dtype=torch.int32)

print(tensor_a.dtype) # torch.int32
print(tensor_b.dtype) # torch.float32
print(tensor_c.dtype) # torch.int32
</code></pre>
Naturally, you can cast any of them very easily, using the exact same syntax, allowing you to set the <code>dtype</code> after the creation as well, so the acceptance of a <code>dtype</code> argument isn't a limitation, but more of a convenience:
<pre><code class="hljs">tensor_a = tensor_a.float()
tensor_b = tensor_b.float()
tensor_c = tensor_c.float()

print(tensor_a.dtype) # torch.float32
print(tensor_b.dtype) # torch.float32
print(tensor_c.dtype) # torch.float32
</code></pre>
<h2 id="convertpytorchtensortonumpyarray">Convert PyTorch Tensor to Numpy Array</h2>
Converting a PyTorch Tensor to a Numpy array is straightforward, since tensors are ultimately built on top of Numpy arrays, and all we have to do is &quot;expose&quot; the underlying data structure.
Since PyTorch can optimize the calculations performed on data based on your hardware, there are a couple of caveats though:
<pre><code class="hljs">tensor = torch.tensor([1, 2, 3, 4, 5])

np_a = tensor.numpy()
np_b = tensor.detach().numpy()
np_c = tensor.detach().cpu().numpy()
</code></pre>
<blockquote>
So, why use <code>detach()</code> and <code>cpu()</code> before exposing the underlying data structure with <code>numpy()</code>, and when should you detach and transfer to a CPU?
</blockquote>
<h3 id="cpupytorchtensorcpunumpyarray">CPU PyTorch Tensor -&gt; CPU Numpy Array</h3>
If your tensor is on the CPU, where the new Numpy array will also be - it's fine to just expose the data structure:
<pre><code class="hljs">np_a = tensor.numpy()
# array([1, 2, 3, 4, 5], dtype=int64)
</code></pre>
This works very well, and you've got yourself a clean Numpy array.
<h3 id="cpupytorchtensorwithgradientscpunumpyarray">CPU PyTorch Tensor with Gradients -&gt; CPU Numpy Array</h3>
However, if your tensor requires you to calculate gradients for it as well (i.e. the <code>requires_grad</code> argument is set to <code>True</code>), this approach won't work anymore. You'll have to detach the underlying array from the tensor, and through detaching, you'll be pruning away the gradients:
<pre><code class="hljs">tensor = torch.tensor([1, 2, 3, 4, 5], dtype=torch.float32, requires_grad=True)

np_a = tensor.numpy()
# RuntimeError: Can&#x27;t call numpy() on Tensor that requires grad. Use tensor.detach().numpy() instead.
np_b = tensor.detach().numpy()
# array([1., 2., 3., 4., 5.], dtype=float32)
</code></pre>
<h3 id="gpupytorchtensorcpunumpyarray">GPU PyTorch Tensor -&gt; CPU Numpy Array</h3>
Finally - if you've created your tensor on the GPU, it's worth remembering that regular Numpy arrays don't support GPU acceleration. They reside on the CPU! You'll have to transfer the tensor to a CPU, and then detach/expose the data structure.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This can either be done via the <code>to('cpu')</code> or <code>cpu()</code> functions - they're functionally equivalent.

 </div>
 </div>
 </div>
 This has to be done explicitly, because if it were done automatically - the conversion between CPU and CUDA tensors to arrays would be different under the hood, which could lead to unexpected bugs down the line.
PyTorch is fairly explicit, so this sort of automatic conversion was purposefully avoided:
<pre><code class="hljs"># Create tensor on the GPU
tensor = torch.tensor([1, 2, 3, 4, 5], dtype=torch.float32, requires_grad=True).cuda()

np_b = tensor.detach().numpy()
# TypeError: can&#x27;t convert cuda:0 device type tensor to numpy. Use Tensor.cpu() to copy the tensor to host memory first.
np_c = tensor.detach().cpu().numpy()
# array([1., 2., 3., 4., 5.], dtype=float32)
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: It's highly advised to call <code>detach()</code> before <code>cpu()</code>, to prune away the gradients before transferring them to the CPU. The gradients won't matter anyway after the <code>detach()</code> call - so copying them at any point is totally redundant and inefficient. It's better to &quot;cut the dead weight&quot; as soon as possible.

 </div>
 </div>
 </div>
 Generally speaking - this approach is the safest, as no matter which sort of tensor you're working - it won't fail. If you've got a CPU tensor, and you try sending it to the CPU - nothing happens. If you've got a tensor without gradients, and try detaching it - nothing happens. On the other end of the stick - exceptions are thrown.
<h2 id="conclusion">Conclusion</h2>
In this guide - we've taken a look at what PyTorch tensors are, before diving into how to convert a Numpy array into a PyTorch tensor. Finally, we've explored how PyTorch tensors can expose the underlying Numpy array, and in which cases you'd have to perform additional transfers and pruning.

In this short guide, learn how to convert a Numpy array to a PyTorch tensor, and how to convert a PyTorch tensor to a Numpy array. Deal with both CPU and GPU tensors and avoid conversion exceptions!

Convert Numpy Array to Tensor and Tensor to Numpy Array with PyTorch

In this guide, learn how to sort a list of strings, integers and tuples in Python with sort() and sorted(), the difference between the methods and how they hold up in a performance benchmark!