DEV Community

Risyandi
Risyandi

Posted on • Originally published at risyandi.Medium on

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

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

puzzle by https://www.pexels.com/@dmitry-demidov-515774/
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

Enter fullscreen mode Exit fullscreen mode

2. Bracket notation

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

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

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"
Enter fullscreen mode Exit fullscreen mode

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)

Top comments (0)