DailyDevDiet

logo - dailydevdiet

Learn. Build. Innovate. Elevate your coding skills with dailydevdiet!

Menu
Twitter Linkedin Instagram Facebook-f

Chapter 3: JavaScript Fundamentals for React Native

By /
JavaScript Fundamentals for React Native

To become proficient in React Native development, you need a solid understanding of JavaScript fundamentals for React Native. This chapter covers essential JavaScript concepts and features that are particularly important for React Native development. Even if you have experience with JavaScript, this chapter will help you ensure you have the necessary knowledge to proceed confidently.

Why JavaScript Matters for React Native

React Native uses JavaScript as its primary programming language. Unlike traditional mobile development, where you might use Swift/Objective-C for iOS or Java/Kotlin for Android, React Native allows you to write your application logic in JavaScript while still generating truly native UI components.

The JavaScript you write in React Native:

  • Controls the application logic
  • Manages component state and lifecycle
  • Handles user interactions
  • Communicates with APIs and services
  • Determines what UI components to render

Let’s explore the key JavaScript concepts you need to master for effective React Native development.

ES6+ Features Essential for React Native

Modern JavaScript, particularly ECMAScript 2015 (ES6) and newer versions, introduced many features that have become fundamental to React Native development.

1. let and const Declarations

// Old way (still valid but less preferred)
var name = "John";

// Modern way
let age = 30;      // Can be reassigned
const PI = 3.14;   // Cannot be reassigned

In React Native, use:

  • const for imports, component definitions, and values that shouldn’t change
  • let for variables that need reassignment
  • Avoid var due to its function-scoping behavior, which can lead to unexpected bugs

2. Arrow Functions

Arrow functions provide a concise syntax for writing functions and maintain the context of this from their defining scope.

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Arrow function with body
const greet = (name) => {
  const greeting = `Hello, ${name}!`;
  return greeting;
};
// With single parameter, parentheses are optional
const double = n => n * 2;

In React Native, arrow functions are commonly used for:

  • Component methods
  • Callback functions
  • Event handlers
  • Functional components
// Example in React Native context
const MyComponent = () => {
  const handlePress = () => {
    console.log("Button pressed");
  };
 
  return (
    <Button title="Press me" onPress={handlePress} />
  );
};

3. Template Literals

Template literals make string interpolation and multiline strings much cleaner.

const name = "Sarah";
const age = 28;

// Old way
const message = "Hello, " + name + "! You are " + age + " years old.";

// Modern way with template literals
const betterMessage = `Hello, ${name}! You are ${age} years old.`;

// Multiline strings
const multiline = `
  This is a
  multiline string
  that preserves formatting.
`;

This is particularly useful in React Native for:

  • Constructing dynamic text content
  • Building complex styles with dynamic values
  • Creating formatted messages

4. Destructuring Assignment

Destructuring allows you to extract values from objects and arrays into distinct variables.

// Object destructuring
const person = { name: "Alex", age: 25, location: "New York" };
const { name, age } = person;
console.log(name); // "Alex"
console.log(age);  // 25

// Array destructuring
const coordinates = [10, 20, 30];
const [x, y, z] = coordinates;
console.log(x); // 10

// With default values
const { country = "USA" } = person;
console.log(country); // "USA" (uses default since it's not in the object)

// Nested destructuring
const data = { user: { profile: { firstName: "Jane" } } };
const { user: { profile: { firstName } } } = data;
console.log(firstName); // "Jane"

In React Native, destructuring is commonly used for:

  • Extracting props in functional components
  • Accessing state values
  • Managing hook returns like useState
  • Working with API responses
// Common React Native usage
const ProfileScreen = ({ route, navigation }) => {
  const { userId, userName } = route.params;
  const [isLoading, setIsLoading] = useState(true);
 
  // ...component code
};

5. Spread and Rest Operators

The spread (…) operator allows an iterable (like an array or object) to be expanded in places where multiple elements/properties are expected.

// Array spread
const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5]; // [1, 2, 3, 4, 5]

// Object spread
const defaults = { theme: "light", fontSize: 12 };
const userSettings = { fontSize: 16, showNotifications: true };
const mergedSettings = { ...defaults, ...userSettings };
// Result: { theme: "light", fontSize: 16, showNotifications: true }

The rest parameter syntax allows representing an indefinite number of arguments as an array.
// Rest parameters
const sum = (...numbers) => numbers.reduce((total, num) => total + num, 0);
console.log(sum(1, 2, 3, 4)); // 10

// Rest with destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [3, 4, 5]

In React Native, these operators are used for:

  • Combining styles
  • Creating new state objects without mutating the original
  • Forwarding props
  • Collecting multiple props into a single object
// React Native examples
const combinedStyles = { ...styles.container, ...customStyles };

// Updating state immutably
setUser(prevUser => ({ ...prevUser, name: "New Name" }));

// Forwarding props
const EnhancedButton = ({ special, ...restProps }) => (
  <Button {...restProps} style={special ? styles.special : {}} />
);

6. Default Parameters

Default parameters allow function parameters to have default values if no value or undefined is passed.

// Without default parameters
function greet(name) {
  name = name || "Guest";
  return `Hello, ${name}!`;
}

// With default parameters
function betterGreet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(betterGreet());      // "Hello, Guest!"
console.log(betterGreet("Sam")); // "Hello, Sam!"

In React Native, this is useful for:

  • Setting default values for component props
  • Providing fallbacks in utility functions
  • Handling optional parameters in callbacks
// In a React Native component
const Card = ({ title = "Untitled", description = "No description", onPress = () => {} }) => (
  <TouchableOpacity onPress={onPress}>
    <Text style={styles.title}>{title}</Text>
    <Text style={styles.description}>{description}</Text>
  </TouchableOpacity>
);

7. Object Property Shorthand

This syntax allows you to define object properties more concisely when the property name matches the variable name.

// Old way
const name = "Alex";
const age = 30;
const person = { name: name, age: age };

// Modern way with shorthand
const betterPerson = { name, age };

In React Native, this is commonly used when:

  • Creating state objects
  • Returning values from functions
  • Passing props to components
// React Native example
const handleSubmit = () => {
  const name = nameInput.current.value;
  const email = emailInput.current.value;
 
  // Using shorthand property names
  submitForm({ name, email });
};

8. Optional Chaining

Optional chaining (?.) allows reading the value of a property deep within a chain of connected objects without having to check that each reference in the chain is valid.

// Without optional chaining
const userName = user && user.profile && user.profile.name;

// With optional chaining
const betterUserName = user?.profile?.name;

This is extremely useful in React Native when:

  • Working with API responses
  • Accessing nested props
  • Dealing with potentially undefined values
// React Native example
const displayName = userData?.user?.personalInfo?.displayName || "Guest";

9. Nullish Coalescing

The nullish coalescing operator (??) provides a way to select the first “defined” value (not null or undefined) from a list.

// Traditional approach
const value = someValue !== null && someValue !== undefined ? someValue : defaultValue;

// With nullish coalescing
const betterValue = someValue ?? defaultValue;

Unlike the logical OR operator (||), which returns the right-side value if the left side is any falsy value (0, “”, false, etc.), the nullish coalescing operator only returns the right-side value when the left side is null or undefined.

// Different behavior between || and ??
0 || 42;     // 42 (0 is falsy)
0 ?? 42;     // 0 (0 is not null or undefined)

"" || "text"; // "text" (empty string is falsy)
"" ?? "text"; // "" (empty string is not null or undefined)

In React Native, this is particularly useful for:

  • Setting default values while preserving intentional empty strings or zeros
  • Working with form inputs and user preferences
  • Processing API data
// React Native example
const fontSize = settings.fontSize ?? 16; // Uses default only if fontSize is null/undefined

Advanced JavaScript Concepts for React Native

1. Promises and Async/Await

Asynchronous operations are common in mobile apps for tasks like API calls, file access, and animations. Promises provide a cleaner way to handle asynchronous code, and async/await makes it even more readable.

// Using Promises
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// Using async/await
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
};

React Native uses fetch for network requests, which returns Promises. Using async/await makes your code more readable and easier to maintain, especially when dealing with sequential asynchronous operations.

2. Array Methods

Modern JavaScript array methods are incredibly useful for data manipulation in React Native applications.

// map - transform array elements
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

// filter - select array elements that match a condition
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// find - get the first element that matches a condition
const firstEven = numbers.find(num => num % 2 === 0); // 2

// reduce - accumulate values
const sum = numbers.reduce((total, num) => total + num, 0); // 10

// some - test if at least one element passes a test
const hasEven = numbers.some(num => num % 2 === 0); // true

// every - test if all elements pass a test
const allEven = numbers.every(num => num % 2 === 0); // false

In React Native, these methods are commonly used for:

  • Rendering lists of components
  • Filtering and transforming data before display
  • Finding specific items in collections
  • Calculating aggregate values
// React Native example for rendering a list
const UserList = ({ users }) => (
  <FlatList
    data={users}
    keyExtractor={user => user.id.toString()}
    renderItem={({ item }) => <UserCard user={item} />}
  />
);

3. Closures

A closure is a function that has access to its own scope, the scope of the outer function, and the global scope, even after the outer function has returned.

const createCounter = () => {
  let count = 0;
 
  return {
    increment: () => {
      count += 1;
      return count;
    },
    getCount: () => count
  };
};

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2

In React Native, closures are particularly useful for:

  • Creating hooks
  • Managing private state
  • Creating event handlers that need access to component state
  • Memoizing expensive calculations

4. Modules and Import/Export

Modern JavaScript uses a module system to organize code into reusable pieces.

// utils.js
export const formatDate = (date) => {
  // Implementation
};

export const calculateTotal = (items) => {
  // Implementation
};

export default class APIClient {
  // Implementation
}

// In another file
import APIClient, { formatDate, calculateTotal } from './utils';

const client = new APIClient();
const formattedDate = formatDate(new Date());

In React Native:

  • Each component is typically in its own file and exported
  • Utility functions are organized in separate modules
  • Configuration and constants are exported from dedicated files
  • Third-party libraries are imported using the same syntax
// ProfileScreen.js
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { fetchUserProfile } from '../api/userApi';
import { formatUserData } from '../utils/formatters';
import ProfileHeader from '../components/ProfileHeader';

export default function ProfileScreen() {
  // Implementation
}

5. Object and Array Manipulation (Immutability)

In React and React Native, it’s essential to maintain immutability when working with state. This means creating new objects or arrays rather than modifying existing ones.

// Incorrect (mutating the original object)
const updateUser = (user, name) => {
  user.name = name;  // Mutates the original object
  return user;
};

// Correct (creating a new object)
const betterUpdateUser = (user, name) => {
  return { ...user, name };  // Returns a new object
};

// Working with arrays
const tasks = ['Task 1', 'Task 2', 'Task 3'];

// Incorrect (mutation)
const addTask = (task) => {
  tasks.push(task);  // Mutates the original array
  return tasks;
};

// Correct (immutability)
const betterAddTask = (tasks, task) => {
  return [...tasks, task];  // Returns a new array
};

// Removing an item immutably
const removeTask = (tasks, index) => {
  return [...tasks.slice(0, index), ...tasks.slice(index + 1)];
};

// Updating an item immutably
const updateTask = (tasks, index, newTask) => {
  return [...tasks.slice(0, index), newTask, ...tasks.slice(index + 1)];
};

In React Native, maintaining immutability is crucial for:

  • Proper component re-rendering
  • Performance optimization
  • Preventing unexpected side effects
  • Enabling time-travel debugging
// React Native state update example
const [todos, setTodos] = useState([]);

// Adding a new todo immutably
const addTodo = (text) => {
  setTodos([...todos, { id: Date.now(), text, completed: false }]);
};

// Toggling a todo's completion status immutably
const toggleTodo = (id) => {
  setTodos(
    todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  );
};

JavaScript Patterns Commonly Used in React Native

1. Component Patterns

// Functional component with hooks
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    // Side effect when component mounts or count changes
    console.log(`Count changed to: ${count}`);
   
    // Cleanup function (optional)
    return () => {
      console.log('Component will unmount or count will change');
    };
  }, [count]);
 
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

2. Prop Spreading and Collection

// Spreading props
const EnhancedButton = ({ color, ...rest }) => (
  <TouchableOpacity
    {...rest}
    style={[styles.button, { backgroundColor: color }]}
  >
    {rest.children}
  </TouchableOpacity>
);

// Usage
<EnhancedButton color="blue" onPress={handlePress}>
  <Text>Press Me</Text>
</EnhancedButton>

3. Conditional Rendering

const UserProfile = ({ user, isLoading }) => {
  // Early return pattern
  if (isLoading) {
    return <LoadingIndicator />;
  }
 
  // Ternary operator for conditional rendering
  return (
    <View style={styles.container}>
      <Text style={styles.name}>{user?.name || 'Guest'}</Text>
     
      {user.isAdmin && <AdminBadge />}
     
      {user.bio ? (
        <Text style={styles.bio}>{user.bio}</Text>
      ) : (
        <Text style={styles.noBio}>No bio provided</Text>
      )}
     
      {/* Logical AND for conditional rendering */}
      {user.friends.length > 0 && (
        <FriendsList friends={user.friends} />
      )}
    </View>
  );
};

4. Custom Hooks

// Custom hook for form handling
const useForm = (initialValues = {}) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
 
  const handleChange = (name, value) => {
    setValues(prevValues => ({
      ...prevValues,
      [name]: value
    }));
  };
 
  const reset = () => {
    setValues(initialValues);
    setErrors({});
  };
 
  return { values, errors, handleChange, reset };
};

// Usage in a component
const LoginForm = () => {
  const { values, handleChange, reset } = useForm({
    email: '',
    password: ''
  });
 
  const handleSubmit = () => {
    // Submit logic
    console.log(values);
    reset();
  };
 
  return (
    <View>
      <TextInput
        value={values.email}
        onChangeText={(text) => handleChange('email', text)}
        placeholder="Email"
      />
      <TextInput
        value={values.password}
        onChangeText={(text) => handleChange('password', text)}
        placeholder="Password"
        secureTextEntry
      />
      <Button title="Login" onPress={handleSubmit} />
    </View>
  );
};

TypeScript Basics for React Native

While not required, TypeScript is increasingly used in React Native projects for its type safety benefits. Here’s a brief introduction:

// Basic type annotations
let name: string = "Alex";
let age: number = 30;
let isActive: boolean = true;
let hobbies: string[] = ["reading", "coding"];
let tuple: [string, number] = ["position", 1];

// Type interfaces for objects
interface User {
  id: number;
  name: string;
  email: string;
  isAdmin?: boolean; // Optional property
}

// Using the interface
const user: User = {
  id: 1,
  name: "Jane Doe",
  email: "jane@example.com"
};

// Function with type annotations
function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

// In React Native with TypeScript
interface ProfileProps {
  userId: number;
  onUpdate: (user: User) => void;
}

const ProfileScreen: React.FC<ProfileProps> = ({ userId, onUpdate }) => {
  // Component implementation
};

JavaScript Best Practices for React Native

  1. Avoid inline functions in render methods to prevent unnecessary re-renders:
// Bad practice
<Button onPress={() => handlePress(id)} />

// Better practice
const handlePressItem = useCallback(() => {
  handlePress(id);
}, [id, handlePress]);

<Button onPress={handlePressItem} />
  1. Use meaningful variable and function names:
// Less clear
const h = () => { /* ... */ };

// More clear
const handleUserAuthentication = () => { /* ... */ };
  1. Organize imports:
// React imports first
import React, { useState, useEffect } from 'react';

// Library imports
import { useNavigation } from '@react-navigation/native';

// React Native components
import { View, Text, StyleSheet } from 'react-native';

// Custom components
import Header from '../components/Header';

// Utilities and services
import { fetchData } from '../api/dataService';
  1. Separate business logic from UI components:
// Keep components focused on rendering
const ProductScreen = () => {
  const { products, loading, error, fetchProducts } = useProductsData();
 
  // UI rendering logic only
  if (loading) return <LoadingIndicator />;
  if (error) return <ErrorDisplay message={error} />;
 
  return <ProductList products={products} />;
};

// Business logic in a custom hook
const useProductsData = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  const fetchProducts = async () => {
    try {
      setLoading(true);
      const data = await api.getProducts();
      setProducts(data);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    fetchProducts();
  }, []);
 
  return { products, loading, error, fetchProducts };
};
  1. Use constants for string literals:
// Define constants
const NAVIGATION_ROUTES = {
  HOME: 'Home',
  PROFILE: 'Profile',
  SETTINGS: 'Settings',
};

// Use constants
navigation.navigate(NAVIGATION_ROUTES.PROFILE);

Summary

JavaScript is the foundation of React Native development. By mastering these modern JavaScript concepts and patterns, you’ll be better equipped to write clean, maintainable, and efficient React Native applications. The features we covered—from ES6+ syntax to advanced patterns like closures and custom hooks—all contribute to your ability to solve complex problems in your mobile applications.

In the next chapter, we’ll explore JSX, the syntax extension used in React Native to describe what the UI should look like, and learn how it combines the power of JavaScript with the structure of XML.

Chapter 3 Exercises

Convert the following function to use arrow syntax and ES6 features:

function getUserInfo(user) {
  var name = user.name || 'Anonymous';
  var age = user.age || 'Unknown';
  var roles = user.roles || [];
  var isAdmin = false;
 
  for (var i = 0; i < roles.length; i++) {
    if (roles[i] === 'admin') {
      isAdmin = true;
      break;
    }
  }
 
  return {
    name: name,
    age: age,
    isAdmin: isAdmin
  };
}
  1. Write a function that immutably updates an item in an array of objects using the spread operator.
  2. Create a custom hook called useToggle that manages a boolean state and provides functions to toggle, turn on, and turn off the state.
  3. Write an async function that fetches data from an API, handles errors properly, and processes the response using array methods.
  4. Implement a simple closure that creates a counter with increment, decrement, and reset functions.

Further Reading

Related Articles:

Related Posts

Scroll to Top