Know how you can use a Javascript object and its props.
Javascript objects have properties or props. As you would have seen in the post about objects and primitives, object operations are quite easy. Though objects can mean more than a few things in Javascript, we will limit discussion of an object to the ** real real ** object.
..i.e.,
1
letobj={i:1};
You should know a few things about this object to make your life much easier.
Get object props
Here’s a simple object from the previous post.
1
letapple={color:"red"};
Access the prop of the object -
1
console.log("color of the apple is: ",apple["color"]);
Or, you can use dot notation.
1
console.log("color of the apple is: ",apple.color);
Both of the above notations have the same end result, but for one major behaviour when props do not exist.
1
2
3
4
5
6
// shape is not defined yet
console.log("apple shape: ",apple["shape"]);// undefined
//do not use if you are not sure whether prop exists
// results in error (depends on environment)
console.log("apple shape: ",apple.shape);
If you have a space or special character in the prop (i.e., does not follow Javascript variable naming / identifier rules), you must use the bracket notation.
1
2
3
4
5
6
7
8
letapple={"1800number":"1-800-APPLE",size:"large"};console.log("apple sweetness: ",apple["sweetness index"]);// undefined
// throws error, invalid identifier. program breaks
console.log("apple number",apple.1800number);// undefined. program continues to run
console.log("apple number",apple['1800number']);
The default way of the coder(tm) is to use the bracket option when prop name/existence is not in one’s control, and use dot notation for its beauty.
When is the prop not in your control? Well, it turns out in many real-world cases. For example, if you are receiving parameters from other programs or from external systems.
The typical way of managing such unknown prop is to check for prop and assign default value.
1
2
3
4
5
6
7
letapple={"1800number":"1-800-APPLE",size:"large"};console.log("apple size: ",apple["size"]?apple["size"]:"medium");// OR
console.log("apple size: ",apple["size"]||"medium");
The variable checks go deeper in the rabbit hole as you will have props, props of props (= child objects), and so on.
1
2
3
4
letapple={color:"red",size:"large",price:{USD:1,EUR:2}};console.log("apple price",apple["price"]["USD"]);// 1
console.log("apple price",apple.price["USD"]);// also 1
As you can see from the above example, it is perfectly valid to use dot, brackets, or both.
Set object props
Similar to getting values of objects, you will use bracket notation when setting value if you are not sure whether the prop exists (which is the typical case).
You can also use variables instead of hardcoded props, in which case bracket notation is the only choice. Dot notation will check for a prop named ‘currency’ instead of treat it as a variable.
Due to the way Javascript handles variables and memory allocated to variables, copying an object just creates another variable pointing to the same memory location as the original variable.