What are objects?
Objects are used to store keyed collections of various data and more complex entities. Objects are variables, but they can contain many values. An object can be created with brackets that can be empty or filled with key/value pairs. The key is a string, also called a property name, and value can be anything relating to the key. the key/value pairs are unordered. Objects can store other objects, functions, primitive data types, and arrays.
Object literal is an empty object.
var user = {};
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
Dot Notation and Bracket Notation
You can access the value property by its key. You can modify the value of the existing property of the key. You can add a new property to an object.
Dot Notation on objects
Dot Notation on objects will give you access to keys and methods of object. Dot notation is written with the object's name dot(.) the key/property.
object.key
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
console.log(user.name); //output "Carol"
To modify objects using object.key
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
user.name = 'Bonnie'
console.log(user); //
//output
name: '"Bonnie",
age: 30,
occupation: "Teacher"
To add to objects using object.key
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
user.favColor = 'Red'
console.log(user);
//output
age: 30,
name: "Carol",
occupation: "Teacher",
favColor: "Red"
Bracket Notation on objects
This expression allows you to access the object properties using a string(wrapped in quotes) or variable that holds the property name. This is useful when dot notation can not be used. Bracket notation allows you to use variables as property names, unlike dot notation
object['expression'];
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
console.log(user['name']);//output "Carol"
To modify an object
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
user['name'] = 'Bonnie'
console.log(user);
//output
name: 'Bonnie',
age: 30,
occupation: 'Teacher'
};
To add to an object
var user = {
name: 'Carol',
age: 30,
occupation: 'Teacher'
};
user['favColor'] = 'Red'
console.log(user);
//output
name: 'Carol'
age: 30
occupation: 'Teacher'
user['favColor'] = 'Red'
};
What Are Arrays?
An array can hold different values including number, string, Boolean, and null. Each value in an array is called element, and each element is accessed by its index that starts at 0. Index will give the position of an element. The elements are enclosed within in square brackets([]) and separated by commas.
Empty array literal
var user =[]
index: 0 1 2
var user = [1, 'Carol', true, ];
1 is a number and is located at the zero index.
'Carol' is string and is located at the first index.
True is a Boolean value and it's located at the third index.
Array Methods are built in JavaScript methods where you add, remove, and modify elements.
.push() allows you to add an element to the end of an array.
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables.push('cauliflower')
console.log(vegetables)
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale', 'cauliflower'];
.pop() allows you remove a value to the end of an array.
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale', 'cauliflower'];
vegetables.pop()
console.log(vegetables);
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
.unshift() allows you add a value to the front of an array.
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables.unshift('Brussel sprouts');
console.log(vegetables);
//output
var vegetables = ['Brussel sprouts', 'spinach', 'broccoli', 'green beans', 'kale'];
.shift() allows you to remove a value to the front of an array.
var vegetables = ['Brussel sprouts', 'spinach', 'broccoli', 'green beans', 'kale'];
vegetables.shift();
console.log(vegetables);
//output
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
.length() property allows to get the number of items in an array.
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
console.log(vegetables.length);
//output 4
Bracket Notation on arrays
You can use bracket notation and index to get the value of an element in an array.
The index starts at 0 which will give the first element and the index 1 will give you the second element, and then the next.
var vegetables = ['spinach', 'broccoli', 'green beans', 'kale'];
vegetables[0] = 'spinach';
vegetables[1] = 'broccoli';
vegetables[2] = 'green beans'
vegetables[3] = 'kale'
console.log(vegetables[0]);
//output 'spinach'
Conclusion
Arrays and objects are both collections in JavaScript where values can be manipulated. Arrays are ordered collections of primitive data types where you can access each element with a zero based index. Array methods are used to add, remove, or modify arrays with dot notation. Bracket notation along with the zero based index to access each element. Objects are a collection of unordered complex data types use keys to access values. Dot notation is used for simple keys and bracket notation is used for more complex keys.
References:
1.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
2.https://www.w3schools.com/js/js_arrays.asp
3.https://javascript.info/array
Top comments (1)
Hello! It's great to see developers sharing their knowledge and journey!
I recommend reading the article on Formatting Code for Dev. It can make the code examples a lot easier to read.
There are a couple issues in your article that I noticed.
.length() property...there should be no parentheses following.length.