Pulling data from array into new independent variables JavaScript?

Javascript Web Development Front End Technology

In JavaScript, there is a array method that allows you to easily extract data from an array and assign it to new independent variables. This can be useful when working with large datasets or when needing to access specific values within an array quickly. In this article, we will explore how to use the dot(.) notation, for pulling data from an array into new independent variables in JavaScript.

Let us know, what is an Independent variable! An independent variable is a variable that stands alone and isn't influenced by any other variables. It can be manipulated or changed, and it influences the dependent variables in an experiment.

In this article, you can see that the dot(.) notation is used for ‘pulling data from array into new independent variable’.

Using dot (.) notation in JavaScript

Dot notation is a syntax used in JavaScript to access properties of objects. This can be used to get, set, or call methods of an object. It involves using the dot operator (.) followed by the property name you want to access. It is used to separate a property from its object so that the value of that property can be accessed.

Hence, we can use this property for our advantage to answer the above question.

Example

In the following example, we are running the script using the dot notation to pull array into new independent variables.

<!DOCTYPE html>
<html>
<body>
   <script>
      const employeeDetails = [
         {
            employeeName: "Chris",
            employeeAge: 25,
            employeeTechnology: "Java"
         },
         {
            employeeName: "David",
            employeeAge: 27,
            employeeTechnology: "Javascript"
         },
         {
            employeeName: "Bob",
            employeeAge: 24,
            employeeTechnology: "Python"
         }
      ]
      var firstName = employeeDetails[1].employeeName;
      var age = employeeDetails[1].employeeAge;
      var technology = employeeDetails[1].employeeTechnology;
      document.write(firstName +"<br>");
      document.write(age +"<br>");
      document.write(technology +"<br>");
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of variables that were printed and were taken from the array by an event that gets triggered on executing the script.

Example

Considering the following example, where we are running the script to pull data from array into independent variables.

<!DOCTYPE html>
<html>
<body>
   <script>
      let array = [222,333];
      [a,b] = array;
      document.write(a +"<br>");
      document.write(b +"<br>");
      let obj = {car:"Bmw",bike:"Rx100"};
      let {car,bike} = obj;
      document.write(car +"<br>");
      document.write(bike +"<br>");
   </script>
</body>
</html>

On running the script, the web-browser displays, the variables independently taken from the array on the browser, that were activated by the event that got triggered on running the script.

Example

Consider the following example, in which we use an array with two variables inside it and run script to print one of those variables as an independent variable.

<!DOCTYPE html>
<html>
<body>
   <script>
      arr = ['one', 'two'];
      [a,b]=arr
      var length = arr.length;
      for (var i = 0; i < length; i++) {
         var val = arr[i];
         eval('var '+arr[i]+'= arr[i];');
      }
      document.write(b);
   </script>
</body>
</html>

When the script gets executed, the event gets triggered, pulling the data from the array and printing an independent variable on the webpage, based on the condition provided in the above script.