{"id":67602,"date":"2019-08-10T18:27:39","date_gmt":"2019-08-10T12:57:39","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=67602"},"modified":"2019-08-13T09:31:53","modified_gmt":"2019-08-13T04:01:53","slug":"javascript-dataview","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/","title":{"rendered":"JavaScript DataView &#8211; Learn the concepts like a pro!"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1452,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Argument_of_a_function&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250818232746\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Argument_of_a_function&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:24:53&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-13 18:52:19&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-20 16:53:33&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-03 17:24:46&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-12 17:46:21&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-08 12:49:00&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-03 23:11:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-17 09:24:29&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-09 18:42:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-14 13:18:55&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-04-17 14:02:22&quot;,&quot;http_code&quot;:503},{&quot;date&quot;:&quot;2026-05-07 09:20:47&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-07 09:20:47&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>In this tutorial, we will discuss about JavaScript Dataview, which is an important concept while working with data. We will work on understanding how JavaScript deals with all the data. We will learn about buffers and ArrayBuffer, then implement them in DataView function in JavaScript.<\/p>\n<h3>Data Buffers<\/h3>\n<p>In programming, a data buffer (or simply buffer) is a storage area in physical memory that stores temporary data for the time it moves from one place to another. You may wonder sometimes how the interpreter receives the JavaScript file, processes it, and returns the output. Well, the interpreter reads the lines with the help of a memory buffer that stores a string of binary data. A running file is present in the primary memory. If the interpreter had to go back to the file to read each bit, the execution process will consume a lot of time. To prevent this, JavaScript uses the data buffer, which stores some of the bits together and then sends them all together to the interpreter. This way, the JavaScript interpreter doesn\u2019t need to worry about retrieving the files from the file data. This method saves execution time and speeds up the application. The diagram below makes the concept transparent.<\/p>\n<p style=\"text-align: left\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Data-Buffer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67669 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Data-Buffer.png\" alt=\"Data Buffer - JavaScript DataView\" width=\"738\" height=\"471\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Data-Buffer.png 738w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Data-Buffer-150x96.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Data-Buffer-300x191.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Data-Buffer-520x332.png 520w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/a><\/p>\n<p>Various buffer classes perform efficient binary operations on the data, including <em>File, Blob, ArrayBuffer, and Array<\/em>. The method selected decides the internal structure of the buffer in memory.<\/p>\n<h3>What is JavaScript ArrayBuffer?<\/h3>\n<p>These are a fixed-length reference of bytes to a contiguous memory area. These are similar to the Array objects since their size cannot be changed. It takes the same memory area as its size, whether the buffer is empty or not. Also, to access individual bytes, we use <strong>TypedArray<\/strong> or <strong>DataView<\/strong>, rather than directly accessing it with the help of the index. These objects represent the buffer in a specific format and help to read and write the contents of the buffer. The syntax to create an ArrayBuffer is as follows:<\/p>\n<p style=\"text-align: center\"><strong><em>new ArrayBuffer(length)<\/em><\/strong><\/p>\n<p>The length parameter specifies the size of the array buffer. The statement returns an ArrayBuffer object of the specified size, with the contents initialized by 0. If the value of the length is more than Number.MAX_SAFE_INTEGER (&gt;= 2 ** 53) or negative, it throws a <em>RangeError<\/em>.<\/p>\n<p>ArrayBuffer has no idea what the data stored inside it means. For the buffer, it\u2019s just a sequence of bytes. A view object gives the interpretation of bytes stored in a buffer. The following are some instances of how it all works:<\/p>\n<ul>\n<li><strong>Uint8Array<\/strong> treats each byte as a separate value, containing values between 0 and 255. These values are called \u201c8-bit unsigned integer\u201d.<\/li>\n<li><strong>Uint16Array<\/strong> treats every two bytes as an integer, with values between 0 and 65535, called a \u201c16-bit unsigned integer\u201d.<\/li>\n<li><strong>Uint32Array<\/strong> treats every four bytes as an integer value, with values between 0 and 4294967295, called a \u201c32-bit unsigned integer\u201d.<\/li>\n<li><strong>Float64Array<\/strong> treats every eight bytes as an integer value, with values between 5.0&#215;10-324 and 1.8&#215;10308.<\/li>\n<\/ul>\n<p><em><strong>Wait! Have you checked &#8211; <a href=\"https:\/\/data-flair.training\/blogs\/javascript-array\/\">JavaScript Array Tutorial<\/a><\/strong><\/em><\/p>\n<p>This tells us that an ArrayBuffer of 16 bytes may be interpreted as 16 smaller numbers, 8 small numbers (2 bytes each), 4 bigger numbers (4 bytes each), or 2 floating-point values with high precision (8 bytes each). I hope the last statements in the code below make the definitions crystal clear.<\/p>\n<p style=\"text-align: left\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67681 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart.png\" alt=\"New array buffer chart - JavaScript DataView\" width=\"800\" height=\"400\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart.png 800w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart-150x75.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart-300x150.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart-768x384.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/New-array-buffer-chart-520x260.png 520w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Let\u2019s create an ArrayBuffer object and determine the size of the defined buffer with the help of a few statements in the console.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var buffer = new ArrayBuffer(64) \/\/ creating an ArrayBuffer of size 5 bytes\r\nbuffer.byteLength \/\/ get size of buffer\r\n\/\/ 64\r\nnew Uint8Array(buffer).length\r\n\/\/ 64\r\nnew Uint16Array(buffer).length\r\n\/\/ 32\r\nnew Uint32Array(buffer).length\r\n\/\/ 16\r\nnew Float64Array(buffer).length\r\n\/\/ 8<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-67687 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer.jpg\" alt=\"array buffer - JavaScript DataView\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/array-buffer-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h3>TypedArray<\/h3>\n<p>The above views are commonly termed as a TypedArray, which share the same set of methods and properties. A TypedArray constructor varies its behavior based on the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Argument_of_a_function\">argument<\/a> type. There are 5 different ways to create the constructor.<\/p>\n<p>For an<strong> ArrayBuffer argument<\/strong> (we used this syntax in the above example to create a view.)<\/p>\n<p style=\"text-align: center\"><em><strong>new TypedArray(buffer [, byteOffset [, length]])<\/strong><\/em><\/p>\n<p>For an <strong>Array or an array-like object<\/strong>, it creates a typed array with the same length and then copies its content.<\/p>\n<p style=\"text-align: center\"><em><strong>new TypedArray(object)<\/strong><\/em><\/p>\n<p>For a <strong>TypedArray<\/strong>, it creates a typed array and copies its content. If needed, it converts the values to the new type.<\/p>\n<p style=\"text-align: center\"><em><strong>new TypedArray(TypedArray)<\/strong><\/em><\/p>\n<p>For a <strong>numeric argument<\/strong>, it creates the typed array to contain that many elements.<\/p>\n<p style=\"text-align: center\"><em><strong>new TypedArray(length)<\/strong><\/em><\/p>\n<p>For <strong>zero arguments<\/strong>, it creates a typed array of zero length.<\/p>\n<p style=\"text-align: center\"><em><strong>new TypedArray()<\/strong><\/em><\/p>\n<p>Since a view can never exist without an elemental ArrayBuffer, it is created automatically in all the cases above.<\/p>\n<h2>What is JavaScript DataView?<\/h2>\n<p>This view provides a low-level interface to read and write multiple number types in ArrayBuffer. We don\u2019t have to worry about how computers organize the bytes that make the number. This byte order is known as \u201cendianness\u201d. This means that we can read and store data at any offset without alignment constraints. The syntax to create DataView looks as follows:<\/p>\n<p style=\"text-align: center\"><em><strong>new DataView(buffer [, byteOffset [, byteLength]])<\/strong><\/em><\/p>\n<p>DataView accessors provide explicit control of how we access the data, regardless of executing computer&#8217;s endianness.<\/p>\n<h3>DataView\u00a0Properties<\/h3>\n<p>These values, fixed at construction time, may not be changed during the program execution.<\/p>\n<ul>\n<li><strong>buffer:<\/strong>\u00a0We reference the ArrayBuffer with this view.<\/li>\n<li><strong>byteLength:<\/strong>\u00a0From the start of its ArrayBuffer, the length of this view.<\/li>\n<li><strong>byteOffset:<\/strong>\u00a0The offset of the view from the start of its ArrayBuffer.<\/li>\n<\/ul>\n<h3>Methods of DataView\u00a0in JavaScript<\/h3>\n<p>The methods available in a DataView to <strong>read values<\/strong> are as follows:<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: center\"><b>Method<\/b><\/p>\n<\/td>\n<td style=\"text-align: center\"><b>Description<\/b><\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getInt8()<\/span><\/em><\/td>\n<td style=\"text-align: left\"><span style=\"font-weight: 400\">It gets an 8-bit signed integer (byte) at the specified offset from the start of the view.<\/span><\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getUint8()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets an 8-bit unsigned integer (unsigned byte) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getInt16()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 16-bit signed integer (short) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getUint16()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 16-bit unsigned integer (unsigned short) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getInt32()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 32-bit signed integer (long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getUint32()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 32-bit unsigned integer (unsigned long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getFloat32()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 32-bit signed float (float) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getFloat64()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 64-bit signed float (double) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">getBigInt64()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 64-bit signed integer (long long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\"><em><span style=\"font-weight: 400\">getBigUint64()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It gets a 64-bit unsigned integer (unsigned long long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The methods available in a DataView for<strong> writing values<\/strong> are as follows:<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: center\"><b>Method<\/b><\/p>\n<\/td>\n<td>\n<p style=\"text-align: center\"><b>Description<\/b><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setInt8()<\/span><\/em><\/td>\n<td style=\"text-align: left\"><span style=\"font-weight: 400\">It sets an 8-bit signed integer (byte) at the specified offset from the start of the view.<\/span><\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setUint8()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets an 8-bit unsigned integer (unsigned byte) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setInt16()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 16-bit signed integer (short) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setUint16()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 16-bit unsigned integer (unsigned short) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setInt32()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 32-bit signed integer (long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setUint32()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 32-bit unsigned integer (unsigned long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setFloat32()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 32-bit signed float (float) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setFloat64()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 64-bit signed float (double) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setBigInt64()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 64-bit signed integer (long long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em><span style=\"font-weight: 400\">setBigUint64()<\/span><\/em><\/td>\n<td>\n<p style=\"text-align: left\"><span style=\"font-weight: 400\">It sets a 64-bit unsigned integer (unsigned long long) at the specified offset from the start of the view.<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: left\">A JavaScript program creating a DataView is as follows:<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n  &lt;body&gt;\r\n\r\n    &lt;script&gt;\r\n      \/\/create an ArrayBuffer\r\n      var buffer = new ArrayBuffer(32);\r\n      \/\/create a view\r\n      var dataview = new DataView(buffer, 0);\r\n      \/\/using methods\r\n      dataview.setInt16(1, 56);\r\n      dataview.getInt16(1); \/\/ 42\r\n    &lt;\/script&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67685\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods.jpg\" alt=\"dataview methods - JavaScript DataView\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-67686 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output.jpg\" alt=\"dataview methods output - JavaScript DataView\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/dataview-methods-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>In this tutorial, we learned all the core aspects of JavaScript DataView. We learned what data buffers are and their working. We also touched base with ArrayBuffer and TypedArrays and discussed various properties and methods of DataView.<\/p>\n<p><em><strong>Time to check out the next tutorial &#8211; JavaScript Styles<\/strong><\/em><\/p>\n<p>Are you clear with the concept of JavaScript DataView? Any queries, share them in the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will discuss about JavaScript Dataview, which is an important concept while working with data. We will work on understanding how JavaScript deals with all the data. We will learn about&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":67675,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20842,20843,20840,20841,20844],"class_list":["post-67602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-data-buffers","tag-javascript-arraybuffer","tag-javascript-dataview","tag-javascript-dataview-methods","tag-typedarray"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript DataView - Learn the concepts like a pro! - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn everything about JavaScript DataView including its properties &amp; read &amp; write methods. Also, understand concept of Data Buffers, ArrayBuffer &amp; TypedArray.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-dataview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript DataView - Learn the concepts like a pro! - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn everything about JavaScript DataView including its properties &amp; read &amp; write methods. Also, understand concept of Data Buffers, ArrayBuffer &amp; TypedArray.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-dataview\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-10T12:57:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-13T04:01:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-DataView-Tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript DataView - Learn the concepts like a pro! - DataFlair","description":"Learn everything about JavaScript DataView including its properties & read & write methods. Also, understand concept of Data Buffers, ArrayBuffer & TypedArray.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript DataView - Learn the concepts like a pro! - DataFlair","og_description":"Learn everything about JavaScript DataView including its properties & read & write methods. Also, understand concept of Data Buffers, ArrayBuffer & TypedArray.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-10T12:57:39+00:00","article_modified_time":"2019-08-13T04:01:53+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-DataView-Tutorial.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript DataView &#8211; Learn the concepts like a pro!","datePublished":"2019-08-10T12:57:39+00:00","dateModified":"2019-08-13T04:01:53+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/"},"wordCount":1353,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-DataView-Tutorial.jpg","keywords":["Data Buffers","JavaScript ArrayBuffer","JavaScript Dataview","JavaScript DataView Methods","TypedArray"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-dataview\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/","url":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/","name":"JavaScript DataView - Learn the concepts like a pro! - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-DataView-Tutorial.jpg","datePublished":"2019-08-10T12:57:39+00:00","dateModified":"2019-08-13T04:01:53+00:00","description":"Learn everything about JavaScript DataView including its properties & read & write methods. Also, understand concept of Data Buffers, ArrayBuffer & TypedArray.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-dataview\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-DataView-Tutorial.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-DataView-Tutorial.jpg","width":802,"height":420,"caption":"JavaScript DataView Tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-dataview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript DataView &#8211; Learn the concepts like a pro!"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=67602"}],"version-history":[{"count":7,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67602\/revisions"}],"predecessor-version":[{"id":67696,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67602\/revisions\/67696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/67675"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=67602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=67602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=67602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}