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