Note 5: Arrays.

-

  • Sometimes we have to deal with a list of objects. for example a list of products in shopping carts or selected color from the list.
  • In this kind of situation, we use arrays to store that list.

  • so here is our array of 3 elements if we expend them we will also have an index of each element. and that index determines the position of that element. so, the index of the first element will be 0. next of that will be 1, and so on...
  • and also if we want to access the element of the array we can use index.

  • here in the example, we have selected the first index element which is "Red".
  • As we know JavaScript is a dynamic language so if we change the value of the array the element with different dataType it will change accordingly. and the same rules also apply to the array.

  • also, the objects in the array are dynamic. in other programming languages, we can store the element in the array of the same type but in JavaScript, we can store any type of object in the array.

  • so now we have three strings and a number so we can say the objects in the array and the size of the array are dynamic. so technically array is an object so as normal objects we have array also have a bunch of key-value pairs or properties that we can access using the dot notations.
  • we can see an array is an object in the javascript.

 what next .?


  • so let's declare an array that has default 2 elements. we will create them as const so we can't assign back to any else again. if we do it will return an error.

  • but it is perfectly fine to modify the content of the array. we can add new elements or remove the existing one. so constants do not stop us to modify the content of an array. 
  • as we know arrays are objects in JavaScript. so we will have all the properties and the methods which are already defined in the array.


 Adding a new element in Array:
  • we can add elements in three positions in the array. we can add at the beginning, we can add in the middle or we can add at the end of an array.



Finding new Element of an Array :

VALUE TYPE :
  • finding an element from an array is dependent on the type of an array rather than reference type or value type.
  • the first thing we will see how to find elements from value types. here we have a method name as indexOf. we will pass a number. if that element is available it will return the index of that element in an array. if the number is not available in an array it will return -1.


  • here in the last expression as per the rule !== -1 means number is available if it returns true which means the element is available in the array and false means it is not available in the array.
  • but this looks quite ugly. here we have another method includes in the JavaScript to achieve the same thing. 

  • here in all methods have a second optional parameter name as fromIndex. which means the element starts from which index.


REFERENCE TYPE :

  • here we have to find a method. 

  • here in the parameter, we pass a function which is also known as predicates. in the function parameter we will pass an element and in the body of the function we will return a boolean.
  • so when it will have the criteria the execution of the program will stop. and if no element fulfills the criteria it will return undefined.

  • if I change the criteria that element is not available in the course array it will return undefined... let see that.

  • as same we have the findIndex method which will return the index of the available object of an array if have otherwise it will return -1.
 ARROW FUNCTION:
  • in ES-6 there is a shorter way to achieving the same thing by using the arrow function.


  • above we have removed elements from beginning, last, and middle.
  •  In the Middle, the syntax says that from 2 positions 1 element remove. so splice(2,1)
  • now let's see how to merge or combine two arrays. the simplest way to achieve this thing is to use the spread operator.

  • we use 3 dots to have spread. like in the combined array we have used ...array1, ...array2. it gives us flexibility. here we have all the elements of the first array followed by all the elements of the second array. here if it is flexible because we can add new elements anywhere. 


  • if we use the slice method without argument it will return the copy of the actual elements.
  • now let's see how to iterate an array. 

  • another useful method is to join in array.
  • when we are using join the special character with whom we are want to join the array is not part of an array it became part of the string. now the whole array became string with the special character. above is an example of it.
t

  • this method and technique are very useful in URL.



  • here compare the title of the question and URL. we can see the white space with each word but we don't have white space in the URL. all the white space converted with a hyphen.
NOW SEE HOW TO SORT AN ARRAY:
  • VALUE TYPE.


  • REFERENCE TYPE:

  • another very useful method is every and some in ES-6.

  • let's filter an array.

  • this is an example of a simple value type array in the future it is possible that we have to take care of an object. we have to deal with the objects.


  • in the above example left side we have a list of cities whatever we click in the center we have the list of shops of that particular city. so this kind of filter can be possible also.
  • another useful method is the map method. it is useful because we can add something special with our array element.

  • it is used to map each element with something else.here we have map our element with the string also we can map them in an object.


  • here if we want are dealing with a single object as in ES6 we can reduce our code like this. here {} in the arrow function it will understand this as code block so if we directly write the object it will return undefined. so we have to add them with round brackets. for separation. 
  • and also we are using filter records and then map function so we can chain the code in a single line.


  • make an array of from starting point to end.


  • make your own function who works like an include method.

  • create a function to exclude an element from an array.

  • get max number from an array.




Comments

Post a Comment

Popular posts from this blog

NOTE 1: JavaScript introduction

-
Image
 what is JAVA Script.?     It is the most powerful and widely use language right now. we can create websites, mobile apps, and games with javascript. where does Java script code run.? Java script was originally designed to run only in the browser, each browser has its own Javascript engine that runs the JS. In 2009 a very claver engineer known as Rayan dawn took the open-source JS engine from chrome known as V8 and embedded inside c++ program. and that program is known as a NODE. so, Node is a C++ program that includes google's v8  JS engine. so, now with help with it, we can run JavaScript code outside of the browser. so we can pass our JavaScript code with Node for the execution, so it means we can treat JS like treating in backend service as well as mobile application services. So, a nutshell Javascript code runs inside to the browser or node. browser and node provides runtime environment for our Javascript code. what is the difference between Javascript and ECMAS...
Read more

Note 6 : Functions

-
Image
It is a fundamental building block of JavaScript. it is basically a set of statements to perform some tasks and calculate the value. while declaring any function we don't need to add semicolumn at the end like we have declared any variables before. but the functions are more than rather only declaring and calling we can make this more interesting by passing arguments and call that function. Here one thing we have to notice that when we pass in anything in the function call is known as an argument. like here in the above example printMessage('This is the message') the sting here in 'This is the message' is an argument. and a message is written in the function printMessage(message) is a parameter here in printMessage function. the main fundamental things here to work like this is we can reuse the printMessage function. a function may have multiple parameters. the default value of the parameter is undefined. Types of function : or we can write this like this. the funct...
Read more