{"id":484,"date":"2018-07-08T03:21:25","date_gmt":"2018-07-08T03:21:25","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=484"},"modified":"2018-06-23T03:38:13","modified_gmt":"2018-06-23T03:38:13","slug":"javascript-fundamentals","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2018\/07\/08\/javascript-fundamentals\/","title":{"rendered":"Javascript Fundamentals"},"content":{"rendered":"

Javascript (JS) is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code.<\/p>\n

JavaScript renders web pages in an interactive and dynamic fashion. This allowing the pages to react to events, exhibit special effects, accept variable text, validate data, create cookies, detect a user\u2019s browser, etc.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Hey guys let\u2019s dive into some core javascript functionality.In this article I will be covering CRUD basics and destructuring.<\/p>\n

CRUD Operations<\/h3>\n

Let\u2019s discuss the CRUD functionality that is how we create,read,update and delete in arrays and objects.<\/p>\n

1.ARRAYS-<\/strong><\/h3>\n

These are 2 syntaxes for creating an empty array.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

In the above statement we have both declared and assigned values in a single statement.<\/p>\n

ADDING DATA USING PUSH<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

This is the syntax for pushing data into an array- arrayname.push(item).<\/p>\n

When we add data using push then it is added at the\u00a0end<\/strong>.<\/p>\n

ADDING DATA USING UNSHIFT<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

This is the syntax for shifting data into an array- arrayname.unshift(item).<\/p>\n

When we add data using unshift then it is added at the beginning since in unshift the all the elements of the array are shifted 1 position towards the right and the first place is assigned to the item.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

In the above example mutiple elements are added into the array using push and unshift following the syntax- arrayname.push(item1,item2,item3..) or arrayname.unshift(item1,item2,item3\u2026.).<\/p>\n

DELETING ELEMENTS USING POP<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

This is the syntax for popping element from the array- arrayname.pop().<\/p>\n

When we delete element using pop\u00a0,the element is deleted from the end.<\/p>\n

DELETING ELEMENT USING SHIFT<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

This is the syntax for shifting element from the array- arrayname.shift().<\/p>\n

When we delete element using shift,the element is deleted from the beginning.<\/p>\n

ADDING,UPDATING,DELETING ELEMENTS USING SPLICE<\/strong><\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here index denotes the position,removes the number of elements specified in deletecount and then inserts the elements present from elem1 to elemN.<\/p>\n

EXAMPLE 1- DELETION<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here from index 1\u00a0, 1 element is to be deleted.<\/p>\n

EXAMPLE 2-DELETION AND INSERTION<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here from index 0, 3 elements are to be deleted and 2 items lets and dance have to be added.So the final array looks like that.If we try to return the splice it returns the array of removed elements.<\/p>\n

EXAMPLE 3\u2013INSERTION<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here the deletecount is mentioned as 0 and from index 2 two items complex and language are added.<\/p>\n

MAKING SUBARRAYS USING SLICE<\/strong><\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here start denotes the position where you want to start and end denotes the index where you want the end.So accordint to the start and end indexes specified the slice function reutrn a copy of the array from start to end but not including end.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

JOIN ARRAYS WITH ITEMS OR ARRAYS USING CONCAT<\/strong><\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Concat returns new array merging arrays with the arguments which maybe items or other arrays.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

SEARCHING<\/strong><\/p>\n

The methods are similar to the ones used for strings but work on items instead of characters.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

These methods use === for comparison.<\/p>\n

If we just want to know if the array contains the item then we use includes.Also includes can handle NaN correctly unlike indexOf and lastIndexOf.<\/p>\n

FIND AND FIND INDEX<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

The syntax is mentioned above and returns the item if it finds it or if nothing is found then undefined is returned.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here above we have used the arrow function syntax where item is the argument and we return the item where item.id==1.<\/p>\n

findIndex achieves the same thing but returns the index of the found element instead of the actual item.<\/p>\n

FILTER<\/p>\n

The filter function works similar to find but instead of returning just the first item it returns all the matching elements.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Below the example returns all the items where item.id < 3 and follows the arrow function convention.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

TRANSFORMING AN ARRAY<\/strong><\/p>\n

Below there are functions that transform or reorder the array without changing the original array.It is considered to be one of the most important applications so take your time to understand this one.<\/p>\n

MAP<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here the result variable returns whatever function is operated on the array without mutating the array.For example below the we have a new array where every entry of the array is converted into its length.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here we are again following the arrow function convention where item is the argument and each item is transformed into its length.<\/p>\n

REDUCE<\/p>\n

For iterating over an array we may use loops.For transforming the value of each entry we can use maps.But if we want to return a single value based on the the entire array then we use reduce.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here previousValue means the value it returned in the previous call.Index specifies from where we start applying the function and initial at the end denotes the initial value of previousValue.Let\u2019s see an example to understand this better.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here we are using arrow function convention where sum is the previousValue and is assigned initial value of 0.The function returns sum+current in every call and since the index is not specified it covers the entire array.So finally it returns the sum of all the elements in the array.<\/p>\n

2.OBJECTS<\/strong><\/h3>\n

This is the syntax to create new objects.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here, we have created new object with these properties.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here,we have added a boolean property.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here, we delete this property from the user object.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here let\u2019s see how we assign the property values to an object using a function.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here is the shorthand for the same.Since we are assigning property name to argument name and likewise we can avoid extra syntax and can execute this.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Let\u2019s see how we can access all the key value pairs of the object using for loop.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

OBJECT METHODS<\/strong><\/p>\n

If we have the below mentioned object\u00a0,then let\u2019s see how we can apply object methods to access the keys,values and both(entries).<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

3.DESTRUCTURING<\/strong><\/h3>\n

Destructuring assignment<\/em>\u00a0is a special syntax that allows us to \u201cunpack\u201d arrays or objects into a bunch of variables, as sometimes they are more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and soon we\u2019ll see how these are handled too.<\/p>\n

Here the array is not modified.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here firstname is assigned arr[0] and surname is assigned arr[1].<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

In the above example the first and second elements are skipped by just having commas.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

The above example shows destructuring is not only limited to arrays but works for all iterables such as strings,sets etc.<\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

In the above example we are assigning object properties by destructuring.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

The above example is a good one where we are able to access the key-value pairs from the object using destructuring in a for loop.<\/p>\n

REST VARIABLES<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

In the above example we are accessing the rest variables which implies all the arguments after name2 is pushed into the array rest.<\/p>\n

DEFAULT VALUES<\/strong><\/p>\n

\n
\n
<\/div>\n

<\/p>\n<\/div>\n<\/figure>\n

Here the variables are already assigned default values.This is helpful because on the right side we have only one variable so the second argument would have been assigned undefined but since it has a default value \u201cAnonymous\u201d, we are able to solve this problem.<\/p>\n

OBJECT DESTRUCTURING<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here title,width,height is respectively assigned the values of options.title,options.width,options.height.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here options.width value is saved in variable w,options.height is saved in variable h. The colon shows \u201cwhat\u00a0: goes where\u201d. In the example above the property\u00a0width<\/code>\u00a0goes to\u00a0w<\/code>, property\u00a0height<\/code>\u00a0goes to\u00a0h<\/code>, and\u00a0title<\/code>\u00a0is assigned to the same name.<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here in the above example we have assigned default values.<\/p>\n

NESTED DESTRUCTURING<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

In the above example,The options object has size object inside it and items array.The extra variable is not destructured since in the left assignment it is not present.Also since the title is not present in the object it takes the default value.<\/p>\n

FUNCTION PARAMETERS AND DESTRUCTURING<\/strong><\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n

Here the parameters in curly braces {} are destructured with object options as shown in the last line.So title takes value from options.title and similarly width,height take default values and items array takes elements from options.items array.<\/p>\n

So what\u2019s the actual use of all this? Well when you are actually building a webapps, these concepts are detrimental for monitoring data present in arrays and objects, mutating them sometimes without having any change in the array and sometimes by some change in the original array.<\/p>\n

Pheww,that was a lot to learn.I hope this was something interesting for you guys.Let\u2019s meet another time with some more interesting fundamentals!<\/em><\/p>\n

About me<\/p>\n

Hey I am Sneha,a foodie\u00a0,music-lover,future entrepreneur,gamer,a sophomore at Indian Institute of Information Technology, Allahabad (A Centre of Excellence in Information Technology established by Ministry of HRD, Govt. of India) and member of\u00a0<\/em>Geekhaven<\/em><\/a>.<\/em><\/p>\n

I am a great fan of promoting women in tech and work with organizations like\u00a0<\/em>Girlscript<\/em><\/a>,Djangogirls,Pyladies and\u00a0<\/em>Kranti<\/em><\/a>.If you find this interesting feel free to ping me!<\/em><\/p>\n

If you guys liked the article,please show some \u2764.Stay tuned for more.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Javascript (JS) is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is […]<\/p>\n","protected":false},"author":2,"featured_media":86,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,44,47,29],"tags":[],"class_list":["post-484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-back-end","category-javascript","category-medium","category-programacion"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":2,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":504,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/484\/revisions\/504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/86"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}