Arrays and Objects
Welcome to our lesson on Arrays and Objects in JavaScript! As a Java developer, you’re already familiar with these concepts, but JavaScript handles them in unique ways that we’ll explore together.
Arrays in JavaScript
In JavaScript, arrays are similar to Java’s ArrayList, but with more flexibility. They can hold elements of different types and can be dynamically resized.
Creating Arrays
// JavaScript
let fruits = ['apple', 'banana', 'orange'];
let mixed = [1, 'two', { name: 'three' }, [4, 5]];
Unlike Java, JavaScript arrays can contain elements of different types in the same array.
Array Methods
JavaScript provides many built-in methods for array manipulation:
// JavaScript
let numbers = [1, 2, 3, 4, 5];
// Adding elements
numbers.push(6); // Adds to the end
numbers.unshift(0); // Adds to the beginning
// Removing elements
let last = numbers.pop(); // Removes from the end
let first = numbers.shift(); // Removes from the beginning
// Slicing
let sliced = numbers.slice(1, 4); // Returns [2, 3, 4]
// Splicing (modifies the original array)
numbers.splice(2, 1, 'three'); // Replaces 1 element at index 2 with 'three'
Functional Array Methods
JavaScript introduces powerful functional programming methods for arrays:
// JavaScript
let numbers = [1, 2, 3, 4, 5];
// map: transform each element
let doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]
// filter: select elements based on a condition
let evens = numbers.filter(num => num % 2 === 0); // [2, 4]
// reduce: accumulate values
let sum = numbers.reduce((acc, num) => acc + num, 0); // 15
These methods are similar to Java’s Stream API but are available directly on arrays.
Objects in JavaScript
Objects in JavaScript are similar to Java’s HashMap, but they’re more flexible and central to the language.
Creating Objects
// JavaScript
let person = {
name: 'John',
age: 30,
greet: function() {
console.log('Hello, ' + this.name);
}
};
Accessing Object Properties
// JavaScript
console.log(person.name); // Dot notation
console.log(person['age']); // Bracket notation
person.greet(); // Method invocation
The ‘this’ Keyword
The this
keyword in JavaScript can be tricky for Java developers. Its value depends on how a function is called:
// JavaScript
let person = {
name: 'John',
greet: function() {
console.log('Hello, ' + this.name);
}
};
person.greet(); // 'Hello, John'
let greetFunc = person.greet;
greetFunc(); // 'Hello, undefined' (in non-strict mode)
To maintain the correct this
context you can use the bind
method:
let personWithBind = {
name: 'Alice',
greet: function() {
console.log('Hello, ' + this.name);
}
};
let greetFuncBound = personWithBind.greet.bind(personWithBind);
greetFuncBound(); // 'Hello, Alice'
The bind()
method creates a new function where this
is explicitly set, allowing you to control the context in any situation.
Objects as Associative Arrays
Unlike Java, JavaScript objects can be used as associative arrays:
// JavaScript
let scores = {};
scores['Alice'] = 95;
scores['Bob'] = 80;
console.log(scores['Alice']); // 95
This flexibility allows for dynamic property names, which isn’t possible with Java objects.
Conclusion
In this lesson, we’ve explored how JavaScript handles arrays and objects. We’ve seen that JavaScript arrays are more flexible than Java arrays, with powerful functional methods. We’ve also learned about JavaScript objects, which serve as the foundation for much of the language’s functionality.
In our next lesson, we’ll dive into string manipulation and regular expressions in JavaScript, exploring how these compare to similar operations in Java.