As a developer working on React Native projects, I quickly realized that a deep understanding of JavaScript is essential — not just the syntax, but how everything actually works under the hood. This blog post shares my ongoing journey of mastering JavaScript, especially focusing on areas that have improved the quality and reliability of my code.
Practicing Array Methods — The Foundation of Data Manipulation
Arrays are everywhere in JavaScript — from managing state to handling API data. I spent time mastering essential methods like map(), filter(), reduce(), and forEach(). These helped me write functional-style code without mutating data.
Example: Using map()
// Transforming data with map()
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]Example: Using filter()
// Filtering items that match a condition
const scores = [85, 42, 93, 67, 50];
const passed = scores.filter(score => score >= 60);
console.log(passed); // [85, 93, 67]Diving Into Promises and Fetch API
Understanding Promises helped me manage asynchronous data fetching smoothly. The fetch() API returns a Promise, which can be chained using .then() and .catch().
// Using fetch() with Promises
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
console.log('Posts:', data);
})
.catch(error => {
console.error('Error fetching data:', error);
});Async and Await — Cleaner Asynchronous Code
Then came async and await — a cleaner way to handle asynchronous code that reads like synchronous logic.
// Example: Using async/await
async function getUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
console.log('Users:', users);
} catch (error) {
console.error('Error:', error);
}
}
getUsers();Using It All in React Native
// Example: Fetching data in a React Native component
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
export default function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
setUsers(data);
} catch (error) {
console.error('Error fetching users:', error);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
if (loading) return <ActivityIndicator size="large" color="#0077ff" />;
return (
<View style={{ padding: 16 }}>
<FlatList
data={users}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text>{item.name} - {item.email}</Text>
)}
/>
</View>
);
}