JavaScript
Array
Contents
1. Description of Array
2. How to use Array
2
1. Description of Array
• Array is JavaScript is an
object which enables
storing a collection of
multiple items under a
single variable name.
• In JavaScript arrays are
resizable and can contain a
mix of different data types.
• Array starts from index of
zero (0)
3
2. How to use Array
Create an array
Syntax:
Create an empty array
let arr = new Array() // using constructor
let arr = [] // using array literal notation
Create an array by supplying initial elements
let arr = new Array(item_1, item_2, …, item_n) // using constructor
let arr = [item_1, item_2, …, item_n] // using array literal notation
4
2. How to use Array (cont.)
Example of creating arrays
let myArr = new Array()
let myArr2 = []
let teachers = new Array('Reksmey', 'Chhaya', 'Dara')
let students = ['Chiva', 'Tola', 'Makara']
console.log(myArr) // []
console.log(myArr2) // []
console.log(teachers) // [ 'Reksmey', 'Chhaya', 'Dara' ]
console.log(students) // [ 'Chiva', 'Tola', 'Makara' ]
5
2. How to use Array (cont.)
Accessing array element by its index
let arr = new Array('Reksmey', 'Chhaya', 'Dara')
console.log(arr[2]) // Dara
console.log(arr[arr.length-1])
*** You can get the size of array of using property length.
6
2. How to use Array (cont.)
Assign and Remove array element
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// At position 2, add 2 elements, remove 1:
fruits.splice(2, 1, "Lemon", "Kiwi");
Output:
Banana,Orange,Lemon,Kiwi,Mango
7
2. How to use Array (cont.)
More methods for manipulate array
Method Description Syntax
unshift() Add a new first element const newLength = arr.unshift(newElement)
push() Add a new last element const newLength = arr.push(newElement)
pop() Remove the last element const rmArr = arr.pop()
splice() Remove multiple elements const rmArr = arr.splice(start, [deleteCount])
shift() Remove the first element const rmArr = arr.shift()
concat() Merge multiple arrays const mergedArr = arr1.concat(arr2, …, arr_n)
More…
8
2. How to use Array (cont.)
Copy Array
const fruits = ['Apple', 'Banana', 'Grape']
// create a copy using spread syntax
const fruitsCopy = [...fruits]
// create a copy using the from() method
const fruitsCopy2 = Array.from(fruits)
// create a copy using the slice() method
const fruitsCopy3 = fruits.slice()
console.log(fruitsCopy) // [ 'Apple', 'Banana', 'Grape' ]
console.log(fruitsCopy2) // [ 'Apple', 'Banana', 'Grape' ]
console.log(fruitsCopy3) // [ 'Apple', 'Banana', 'Grape' ]
9
2. How to use Array (cont.)
Objects in Array
let personObj = {
"id": 100,
"name": "Chan Dara",
"nationality": "Khmer"
}
let personObj2 = {
"id": 101,
"name": "Jack Square",
"nationality": "English"
}
const persons = [personObj, personObj2]
console.log(persons)
10
2. How to use Array (cont.)
Mixed Types in Array
const persons = [personObj, "ISTAD", true, 2022]
11
JSON
JavaScript Object Notation
1. Overview
• JSON (JavaScript Object Notation) is a lightweight data-interchange format.
It is easy for humans to read and write. It is easy for machines to parse and
generate.
• It is based on a subset of the JavaScript Programming Language Standard
ECMA-262 3rd Edition - December 1999.
• JSON is a text format that is completely language independent but uses
conventions that are familiar to programmers of the C-family of languages,
including C, C++, C#, Java, JavaScript, Perl, Python, and many others.
• It is commonly used for transmitting data in web applications (e.g.,
sending some data from the server to the client, so it can be
displayed on a web page, or vice versa).
13
1. Overview
JSON is built on two structures:
• A collection of name/value pairs. In various languages, this is realized as
an object, record, struct, dictionary, hash table, keyed list, or associative
array.
• An ordered list of values. In most languages, this is realized as an array,
vector, list, or sequence.
These are universal data structures. Virtually all modern programming
languages support them in one form or another. It makes sense that a data
format that is interchangeable with programming languages also be based on
these structures.
14
1. Overview
A JSON string can be stored in its own file, which is basically just a text file
with an extension of .json, and a MIME type of application/json.
JSON Structure
• As described above, JSON is a string whose format very much resembles
JavaScript object literal format.
• You can include the same basic data types inside JSON as you can in a
standard JavaScript object — strings, numbers, arrays, booleans, and
other object literals. This allows you to construct a data hierarchy, like so:
15
1. Overview {
"fullname": "Reksmey",
Syntax "age": 25,
"major": "IT",
{ "position": "Manager",
"key" : value "specialized": [
}
"Web Design",
"iOS App Development",
"React Native",
"Spring Framework",
"DevOps",
"Managment & Leadership",
"Project Mentor"
],
"remark": "R & D Department",
"status": true
}
16
1. Overview
Other notes
• JSON is purely a string with a specified data format — it contains only
properties, no methods.
• JSON requires double quotes to be used around strings and property names.
Single quotes are not valid other than surrounding the entire JSON string.
• Even a single misplaced comma or colon can cause a JSON file to go wrong,
and not work.
• JSON can actually take the form of any data type that is valid for inclusion
inside JSON, not just arrays or objects. So for example, a single string or
number would be valid JSON.
• Unlike in JavaScript code in which object properties may be unquoted, in
JSON only quoted strings may be used as properties.
17
2. Exchange Data
We converted the network response directly into a JavaScript object
using response.json().
But sometimes we aren't so lucky — sometimes we receive a raw JSON string,
and we need to convert it to an object ourselves:
• parse(): Accepts a JSON string as a parameter, and returns the
corresponding JavaScript object.
• stringify(): Accepts an object as a parameter, and returns the equivalent
JSON string.
18
2. Exchange Data
• We retrieve the response as text rather than JSON, by calling the text() not
json() method of the response.
• We then use parse() to convert the text to a JavaScript object.
const superHeroesText = await response.text();
const superHeroes = JSON.parse(superHeroesText);
19
Thank you
Perfect Practice, Does Perfect Thing
20
