Javascript Arrays and Objects
JavaScript Arrays:
1. Syntax:
In JavaScript, an array is a data structure that stores a collection of values. Arrays can hold values of different data types, and they are defined using square brackets []. Elements within an array are separated by commas.
Example of array creation:
let fruits = ['apple', 'banana', 'cherry'];
2. Methods and Examples:
JavaScript provides a variety of methods to work with arrays. Here are some common array methods along with
examples:
Method | Purpose | Example Usage |
---|---|---|
push(element1, ...) | Adds one or more elements to the end of the array. | fruits.push('orange', 'grape') adds elements to fruits . |
pop() | Removes and returns the last element of the array. | let lastFruit = fruits.pop() removes and returns the last element. |
unshift(element1, ...) | Adds one or more elements to the beginning of the array. | fruits.unshift('strawberry', 'kiwi') adds elements to the start. |
shift() | Removes and returns the first element of the array. | let firstFruit = fruits.shift() removes and returns the first element. |
concat(array2, ...) | Combines the array with other arrays and returns a new array. | let combined = fruits.concat(vegetables) combines arrays. |
splice(start, deleteCount, item1, ...) | Changes array by removing, replacing, or adding elements. | fruits.splice(2, 2, 'pear', 'peach') removes and adds elements. |
slice(start, end) | Returns a shallow copy of a portion of the array. | let subset = fruits.slice(1, 4) creates a subset of the array. |
join(separator) | Joins all elements into a string with a specified separator. | let fruitString = fruits.join(', ') joins with a comma and space. |
indexOf(searchElement, fromIndex) | Returns the first index at which a given element is found. | let index = fruits.indexOf('banana') finds the index of ‘banana’. |
lastIndexOf(searchElement, fromIndex) | Returns the last index at which a given element is found. | let lastIndex = fruits.lastIndexOf('banana') finds the last index. |
includes(searchElement, fromIndex) | Checks if an array contains a specific element. | let includesBanana = fruits.includes('banana') checks for ‘banana’. |
find(callback) | Returns the first element in the array that satisfies a provided callback function. | let foundFruit = fruits.find(fruit => fruit.length > 5) finds a fruit. |
findIndex(callback) | Returns the index of the first element in the array that satisfies a provided callback function. | let foundIndex = fruits.findIndex(fruit => fruit.length > 5) finds the index. |
filter(callback) | Creates a new array with all elements that pass a provided callback function’s test. | let filteredFruits = fruits.filter(fruit => fruit.startsWith('a')) filters fruits. |
map(callback) | Creates a new array with the results of calling a provided callback function on every element. | let uppercasedFruits = fruits.map(fruit => fruit.toUpperCase()) maps fruits. |
forEach(callback) | Executes a provided callback function once for each array element. | fruits.forEach(fruit => console.log(fruit)) iterates over fruits. |
every(callback) | Tests if all elements in the array pass a provided callback function’s test. | let allAreStrings = fruits.every(fruit => typeof fruit === 'string') checks elements. |
some(callback) | Tests if at least one element in the array passes a provided callback function’s test. | let someAreLong = fruits.some(fruit => fruit.length > 8) checks elements. |
reduce(callback, initialValue) | Applies a callback function against an accumulator and each element, reducing the array to a single value. | let totalLength = fruits.reduce((total, fruit) => total + fruit.length, 0) reduces. |
reduceRight(callback, initialValue) | Applies a callback function against an accumulator and each element in reverse order. | let reversedString = fruits.reduceRight((str, fruit) => str + ' ' + fruit, '') reduces right-to-left. |
sort(compareFunction) | Sorts the elements of an array in place and returns the sorted array. | fruits.sort() sorts alphabetically. |
reverse() | Reverses the order of elements in the array in place. | fruits.reverse() reverses the order. |
isArray(array) | Checks if a variable is an array. | Array.isArray(fruits) checks if fruits is an array. |
3. Destructuring Arrays:
Array destructuring allows you to extract values from an array and assign them to variables in a concise way.
Example:
let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor] = colors;
console.log(firstColor); // 'red'
console.log(secondColor); // 'green'
4. Spread/Rest Operator with Arrays:
The spread (…) and rest (…) operators provide flexibility when working with arrays.
Spread Operator (…): Allows you to create a shallow copy of an array or merge arrays.
Example:
let fruits = ['apple', 'banana'];
let moreFruits = ['cherry', 'kiwi'];
let allFruits = [...fruits, ...moreFruits]; // allFruits: ['apple', 'banana', 'cherry', 'kiwi']
Rest Operator (…): Collects remaining elements into an array. Example:
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
JavaScript arrays are versatile and widely used for storing and manipulating collections of data. Understanding array methods, destructuring, and the spread/rest operators is essential for effective JavaScript programming.
JavaScript Objects:
1. What Are They?
In JavaScript, an object is a data structure that allows you to store and organize data as key-value pairs. Objects are used to represent real-world entities or abstract concepts. Each key (property) in an object is associated with a value, and these properties can be of different data types, including other objects and functions.
2. Syntax:
JavaScript objects are defined using curly braces {}
and consist of a collection of key-value pairs separated by colons (:
). Keys are strings (or symbols in ES6), and values can be of any data type.
Example of object creation:
let person = {
firstName: "John",
lastName: "Doe",
age: 30
};
3. Dot Notation vs. Square Bracket Notation:
You can access and modify object properties using either dot notation or square bracket notation.
Dot Notation: Uses a period followed by the property name.
Example:
let firstName = person.firstName; // "John"
person.age = 31; // Modifying the age property
Square Bracket Notation: Uses square brackets with the property name as a string.
Example:
let lastName = person['lastName']; // "Doe"
person['age'] = 32; // Modifying the age property
Square bracket notation is useful when property names contain special characters or spaces, or when the property name is dynamic.
4. Defining Methods in Objects:
You can define methods (functions) as object properties. These methods can perform actions or calculations related to the object’s data.
Example:
let calculator = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};
let sum = calculator.add(5, 3); // 8
let difference = calculator.subtract(10, 4); // 6
In modern JavaScript (ES6+), you can use concise method notation:
let calculator = {
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
5. Destructuring Objects:
Object destructuring allows you to extract values from an object and assign them to variables in a concise way.
Example:
let person = {
firstName: "Alice",
lastName: "Smith",
age: 25
};
let { firstName, age } = person;
console.log(firstName); // "Alice"
console.log(age); // 25
6. Spread/Rest Operator with Objects:
The spread (…) and rest (…) operators can be used with objects for various purposes.
Spread Operator (…): Allows you to create a shallow copy of an object or merge objects.
Example:
let defaults = { theme: "light", fontSize: 12 };
let userSettings = { fontSize: 16 };
let mergedSettings = { ...defaults, ...userSettings }; // Merging objects
Rest Operator (…): Collects remaining properties into a new object.
Example:
let { firstName, ...rest } = person;
console.log(firstName); // "Alice"
console.log(rest); // { lastName: "Smith", age: 25 }
The rest operator can be used to collect remaining properties when destructuring objects or to gather arguments into an object in function parameters.
JavaScript objects are fundamental to structuring and organizing data in your code. Understanding how to work with objects, define methods, destructure them, and use spread/rest operators provides you with powerful tools for building complex applications.
Object Constructor
Purpose
The Object constructor in JavaScript is a fundamental part of the language and serves as the basis for creating objects. It provides a way to create and manipulate objects, whether for defining custom data structures, representing real-world entities, or organizing data.
Constructor Syntax
The Object constructor can be used in two ways:
Empty Object Creation:
const emptyObject = new Object();
This creates an empty object with no properties or methods.
Literal Object Creation:
const person = {
name: 'John',
age: 30,
};
This creates an object using object literal notation, a more concise way of defining objects.
Helper Methods
The Object constructor also provides various helper methods for working with objects:
Object.assign(target, ...sources)
: Copies the values of all enumerable properties from one or more source objects to a target object. It is commonly used for object merging.
const target = { a: 1 };
const source = { b: 2 };
const result = Object.assign(target, source);
Object.create(proto, propertiesObject)
: Creates a new object with the specified prototype object and optional properties.
const personProto = {
greet() {
console.log('Hello!');
},
};
const person = Object.create(personProto);
Object.defineProperty(obj, prop, descriptor)
: Adds a new property to an object or modifies an existing one with a given descriptor, allowing fine-grained control over property behavior.
const obj = {};
Object.defineProperty(obj, 'property', {
value: 42,
writable: true,
enumerable: true,
configurable: true,
});
Object.defineProperties(obj, props)
: Adds new properties to an object or modifies existing ones with the specified descriptors.
const obj = {};
Object.defineProperties(obj, {
prop1: { value: 'value1', writable: true },
prop2: { value: 'value2', writable: true },
});
Object.entries(obj)
: Returns an array of key-value pairs from an object’s enumerable string-keyed properties.
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
Object.keys(obj)
: Returns an array of an object’s own enumerable property names.
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
Object.values(obj)
: Returns an array of an object’s own enumerable property values.
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
Object.freeze(obj)
: Freezes an object, preventing new properties from being added and existing ones from being removed or modified.
const obj = { a: 1, b: 2 };
Object.freeze(obj);
Object.seal(obj)
: Seals an object, preventing new properties from being added and making existing ones non-configurable.
const obj = { a: 1, b: 2 };
Object.seal(obj);
Object.is(obj1, obj2)
: Determines whether two values are the same value, providing a more accurate comparison than ===.
const a = [1, 2, 3];
const b = [1, 2, 3];
const areEqual = Object.is(a, b);
Array Constructor
Purpose
The Array constructor in JavaScript is used to create and manipulate arrays. Arrays are ordered collections of elements and are widely used to store and manage data.
Constructor Syntax
You can create an array using the Array constructor with or without initial elements:
Empty Array Creation:
const emptyArray = new Array();
This creates an empty array with no elements.
Array Creation with Initial Elements:
```js
const numbers = new Array(1, 2, 3);
This creates an array with initial elements.
Literal Array Creation:
const fruits = ['apple', 'banana', 'orange'];
This is the more common and concise way of creating arrays using array literal notation.
Helper Methods
The Array constructor provides numerous helper methods for working with arrays:
Array.from(iterable, mapFn, thisArg)
: Creates a new array from an iterable object.
const iterable = '12345';
const newArray = Array.from(iterable, Number);
Array.of(...elements)
: Creates a new array with the specified elements.
const numbers = Array.of(1, 2, 3, 4, 5);