3_array_and_json.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2>Array</h2>\n",
    "<p>Variabel dengan tipe array digunakan untuk menyimpan banyak data dalam satu variabel</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[ 5, 4, 3, 7, 2 ]\n"
     ]
    }
   ],
   "source": [
    "var myNums = [5, 4, 3, 7, 2];\n",
    "console.log(myNums);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Akses suatu elemen pada array melalui indeksnya. Indeks suatu array dimulai dari 0</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "4\n"
     ]
    }
   ],
   "source": [
    "console.log(myNums[1]); // mengakses elemen kedua pada array"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Menampilkan elemen array satu per satu menggunakan perulangan</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Array size:  4\n",
      "3\n",
      "1\n",
      "3\n",
      "4\n"
     ]
    }
   ],
   "source": [
    "var arr = [3, 1, 3, 4];\n",
    "var arrSize = arr.length; // mendapatkan jumlah elemen pada array\n",
    "console.log(\"Array size: \", arrSize);\n",
    "\n",
    "for (var i = 0; i < arrSize; i++)\n",
    "{\n",
    "    console.log(arr[i]);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Array dapat dibuat di dalam suatu array, sehingga membentuk array 2 dimensi</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[ [ 5, 2, 2 ], [ 6, 2, 7 ] ]\n",
      "[ 5, 2, 2 ]\n",
      "6\n",
      "Array size:  2\n",
      "Size of the first element:  3\n"
     ]
    }
   ],
   "source": [
    "var arr2d = [[5, 2, 2], [6, 2, 7]];\n",
    "console.log(arr2d); // menampilkan array\n",
    "console.log(arr2d[0]); // menampilkan elemen pertama pada array\n",
    "console.log(arr2d[1][0]); // menampilkan elemen pertama pada elemen kedua pada array\n",
    "\n",
    "console.log(\"Array size: \", arr2d.length);\n",
    "console.log(\"Size of the first element: \", arr2d[0].length);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Tipe data elemen pada array dapat seragam maupun berbeda-beda</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[ 'palembang', 'digital' ]\n",
      "object\n",
      "object\n"
     ]
    }
   ],
   "source": [
    "var strArr = [\"palembang\", \"digital\"]; // array yang berisi string\n",
    "var mixedArr = [1, \"azhary\", undefined]; // array yang berisi int, string, dan undefined\n",
    "\n",
    "console.log(strArr);\n",
    "console.log(typeof(strArr));\n",
    "console.log(typeof(mixedArr));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Melakukan push & pop pada array"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Before:  [ 1, 2, 3, 4 ]\n",
      "After:  [ 1, 2, 3, 4, 7 ]\n",
      "Last element:  7\n",
      "After pop:  [ 1, 2, 3, 4 ]\n"
     ]
    }
   ],
   "source": [
    "var x = [1, 2, 3, 4];\n",
    "console.log(\"Before: \", x);\n",
    "\n",
    "x.push(7); // menambah elemen 7 di akhir array\n",
    "console.log(\"After: \", x);\n",
    "\n",
    "var lastElement = x.pop(); // mengambil dan menghapus elemen terakhir pada array\n",
    "console.log(\"Last element: \", lastElement); \n",
    "console.log(\"After pop: \", x);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Menghapus elemen pada array"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Before:  [ 1, 2, 3, 4 ]\n",
      "After delete:  [ 1, 2, <1 empty item>, 4 ]\n",
      "undefined\n",
      "After splice:  [ 1, <1 empty item>, 4 ]\n"
     ]
    }
   ],
   "source": [
    "var x = [1, 2, 3, 4];\n",
    "console.log(\"Before: \", x);\n",
    "\n",
    "delete x[2]; // keyword delete hanya menjadikan suatu elemen pada array menjadi empty item / undefined\n",
    "console.log(\"After delete: \", x);\n",
    "\n",
    "console.log(x[2]);\n",
    "\n",
    "x.splice(1, 1); // dimulai dari indeks 1, hapus 1 elemen\n",
    "console.log(\"After splice: \", x);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Mengurutkan elemen-elemen pada array"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Before sort:  [ 4, 2, 3, 1 ]\n",
      "After sort:  [ 1, 2, 3, 4 ]\n",
      "Reverse order:  [ 4, 3, 2, 1 ]\n"
     ]
    }
   ],
   "source": [
    "var x = [4, 2, 3, 1];\n",
    "console.log(\"Before sort: \", x);\n",
    "\n",
    "x.sort(); // mengurutkan elemen-elemen pada array x\n",
    "console.log(\"After sort: \", x);\n",
    "\n",
    "x.reverse(); // membalikkan urutan elemen-elemen pada array x\n",
    "console.log(\"Reverse order: \", x);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Kamu dapat melihat daftar lengkap fungsi-fungsi pada array di <a href=\"https://www.w3schools.com/jsref/jsref_obj_array.asp\">https://www.w3schools.com/jsref/jsref_obj_array.asp</a></p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2>JSON</h2>\n",
    "<p>JSON merupakan singkatan dari <i>JavaScript Object Notation</i>.</p>\n",
    "<p>Tipe data yang paling banyak digunakan sebagai format pertukaran dan penyimpanan data.</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{ first_name: 'Palembang', last_name: 'Digital' }\n",
      "Digital\n",
      "Palembang\n",
      "object\n"
     ]
    }
   ],
   "source": [
    "var myJson = {\n",
    "    first_name: \"Palembang\", \n",
    "    last_name: \"Digital\"\n",
    "};\n",
    "\n",
    "console.log(myJson); // menampilkan isi dari json\n",
    "console.log(myJson.last_name); // mengakses nilai json dengan property/key last_name\n",
    "console.log(myJson[\"first_name\"]); // mengakses nilai json dengan key first_name menggunakan square brackets\n",
    "console.log(typeof(myJson));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>JSON dapat digunakan untuk menyimpan nilai dengan berbagai tipe data, bahkan dapat digunakan untuk menyimpan <code>function</code></p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{ name: 'Azhary Arliansyah',\n",
      "  age: 22,\n",
      "  do_work: [Function: do_work] }\n",
      "My name is Azhary Arliansyah and i am 22 years old\n",
      "I love to code\n"
     ]
    }
   ],
   "source": [
    "var person = {\n",
    "    name: \"Azhary Arliansyah\",\n",
    "    age: 22,\n",
    "    do_work: function(work) {\n",
    "        console.log(\"I love to \" + work);\n",
    "    }\n",
    "};\n",
    "\n",
    "console.log(person); // menampilkan isi json person\n",
    "console.log(\"My name is \" + person.name + \" and i am \" + person.age + \" years old\"); // menampilkan nilai name dan age pada json person\n",
    "person.do_work(\"code\"); // memanggil fungsi do_work() pada json person"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Gunakan array jika ingin menyimpan banyak nilai dengan tipe JSON</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[ { job: 'JavaScript Developer',\n",
      "    details: 'Experienced in Vanilla JS and React JS' },\n",
      "  { job: 'Machine Learning Engineer',\n",
      "    details: 'Experienced in Python or R language' } ]\n",
      "Your future job will be Machine Learning Engineer\n"
     ]
    }
   ],
   "source": [
    "var jsonArr = [\n",
    "    {\n",
    "        job: \"JavaScript Developer\",\n",
    "        details: \"Experienced in Vanilla JS and React JS\"\n",
    "    },\n",
    "    {\n",
    "        job: \"Machine Learning Engineer\",\n",
    "        details: \"Experienced in Python or R language\"\n",
    "    }\n",
    "];\n",
    "\n",
    "console.log(jsonArr);\n",
    "console.log(\"Your future job will be \" + jsonArr[1].job); // mengakses nilai dengan key job pada json di index ke 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p>Konversi string ke JSON, dan sebaliknya. String yang akan dikonversi ke JSON harus sesuai dengan sintaks penulisan JSON.</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{\"first_name\": \"Palembang\", \"last_name\": \"Digital\"}\n",
      "string\n",
      "object\n",
      "Palembang\n",
      "string\n"
     ]
    }
   ],
   "source": [
    "var jsonString = '{\"first_name\": \"Palembang\", \"last_name\": \"Digital\"}';\n",
    "console.log(jsonString);\n",
    "console.log(typeof(jsonString));\n",
    "\n",
    "var json = JSON.parse(jsonString); // konversi string ke json\n",
    "console.log(typeof(json));\n",
    "console.log(json.first_name);\n",
    "\n",
    "var jsonStringAgain = JSON.stringify(json); // konversi json ke string\n",
    "console.log(typeof(jsonStringAgain));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Javascript (Node.js)",
   "language": "javascript",
   "name": "javascript"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "application/javascript",
   "name": "javascript",
   "version": "10.16.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}