#3 | Frontend — Three ways to access values on an object in JS

source image : https://www.pexels.com/@dmitry-demidov-515774/

In building an application on the frontend side, we should bind the data to display in the user interface, how to get the data object in JavaScript. In this article, we can learn to access values on an object in JavaScript.

1. Dot notation

const object = {
  "num": 1,
  "str": "Hello World",
  "obj": {
    "x": 5
  }
};

const value = object.obj.x;
console.log(value); // result : 5

2. Bracket notation

const object = {
  "num": 1,
  "str": "Hello World",
  "obj": {
    "x": 5
  }
};

const value = object["obj"]["x"];
console.log(value); // result : 5

3. Destructuring syntax

const object = {
  "num": 1,
  "str": "Hello World",
  "obj": {
    "x": 5
  }
};

const { num, str} = object;
console.log(num, str); // result : 1 "Hello World"

Thank you for reading the article. hopefully, this can help.
you can learn more about technic get data objects using JavaScript on this link URL (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)