React Native Interview Handbook: Master JavaScript with Output-Based Practice

Understanding JavaScript Scope and Hoisting: Predicting Outputs

JavaScript's scope and hoisting mechanisms are frequent sources of confusion and, consequently, common interview questions. Scope determines the accessibility (visibility) of variables. In JavaScript, we have global scope, function scope, and block scope (introduced with let and const). Hoisting is JavaScript's behavior of moving declarations to the top of their containing scope before code execution. For var declarations, the variable is initialized with undefined. For let and const, the variable is hoisted but not initialized, leading to a Temporal Dead Zone (TDZ) until the declaration is encountered. Let's look at an example. Consider this code: console.log(a); var a = 10; Many might expect an error, but due to hoisting, var a is moved to the top and initialized with undefined. Thus, the output will be 'undefined'. Now, contrast this with let: console.log(b); let b = 20; Here, b is in its TDZ when console.log(b) is called, resulting in a ReferenceError. Understanding these nuances is critical. Interviewers often present snippets involving nested functions and var to test your understanding of function scope versus global scope. For instance: function outer() { var x = 1; function inner() { var y = 2; console.log(x); } inner(); } outer(); Here, inner has access to x from outer's scope due to closure and lexical scoping. The output would be 1. If console.log(y) were inside outer after calling inner, it would throw an error because y is locally scoped to inner. Practicing these variations, including scenarios with loops and var vs. let, is essential. Many mock tests on platforms like Prepgenix AI include such questions to prepare you for real interview scenarios. Mastering scope and hoisting ensures you can accurately predict code execution, a key skill for any React Native developer.

Closures in Action: Tracing Variable Persistence

Closures are one of the most powerful and often misunderstood features of JavaScript. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In simpler terms, a closure gives you access to an outer function's scope from an inner function, even after the outer function has finished executing. This persistence of variables is a common area for output-based questions. Consider this classic example: function createCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = createCounter(); console.log(counter()); console.log(counter()); Here, the inner anonymous function forms a closure over the count variable. Even though createCounter has finished executing, the counter function retains access to its own count. Each call to counter() increments and returns the persistent count. The output will be 1, followed by 2. Interviewers might present variations involving loops and closures, which can be tricky. For instance: for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } The expected output is often mistakenly thought to be 0, 1, 2. However, due to var's function scope and the asynchronous nature of setTimeout, all the functions passed to setTimeout will execute after the loop finishes. By that time, i will be 3. So, the output will be 3, 3, 3. To achieve 0, 1, 2, you would use let inside the loop, which creates a new binding for i in each iteration, or use an IIFE (Immediately Invoked Function Expression) to capture the value of i in each iteration. Understanding how closures maintain state across function calls is vital for building complex applications and acing these interview questions. Prepgenix AI's practice modules extensively cover these closure-based scenarios.

Asynchronous JavaScript: Promises and Async/Await Outputs

Modern web applications, including those built with React Native, heavily rely on asynchronous operations – fetching data, handling user input, timers, etc. Understanding how JavaScript handles these operations is paramount. Promises and async/await are the primary tools. Output-based questions often test your understanding of the event loop, callback queue, microtask queue, and how these resolve asynchronous tasks. Consider a simple Promise example: console.log('Start'); const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('Data fetched'); }, 1000); }); promise.then((result) => { console.log(result); }); console.log('End'); The output isn't 'Start', 'Data fetched', 'End'. The console.log('Start') executes first. Then, the Promise is created, and setTimeout is initiated, placing the callback in the timer queue. The console.log('End') executes next. Only after the timer expires (1 second) does the setTimeout callback execute, resolving the promise. The .then() callback is then placed in the microtask queue and executes after the current synchronous code block finishes. Therefore, the output is: 'Start', 'End', 'Data fetched'. Now, let's look at async/await: async function fetchData() { console.log('Fetching...'); try { const response = await fetch('https://api.example.com/data'); // Assume this takes time const data = await response.json(); // Assume this also takes time console.log('Data received:', data); return data; } catch (error) { console.error('Error:', error); } } console.log('Initiating fetch'); fetchData(); console.log('Fetch initiated'); When fetchData() is called, 'Fetching...' is logged. The await fetch(...) pauses the execution within fetchData but allows the rest of the script to continue. So, 'Initiating fetch' and 'Fetch initiated' are logged. The fetch and response.json() operations happen in the background. Once they complete, the execution resumes within fetchData, logging 'Data received:' or the error. The key is that async functions always return a Promise, and await only pauses execution inside the async function. Understanding the order of execution in asynchronous JavaScript is crucial for debugging and building responsive applications. Platforms like Infosys mock tests often include questions testing these concepts.

Array Methods: Map, Filter, Reduce Deep Dive

Array manipulation methods like map, filter, and reduce are workhorses in JavaScript and essential for React Native development. Interviewers frequently use these in output-based questions to test your functional programming skills and attention to detail. map transforms each element in an array and returns a new array of the same length. filter creates a new array with elements that pass a test implemented by the provided function. reduce executes a reducer function on each element of the array, resulting in a single output value. Consider this: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // Output: [2, 4, 6, 8, 10] const evens = numbers.filter(num => num % 2 === 0); console.log(evens); // Output: [2, 4] const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15 These are straightforward. The complexity arises when chaining these methods or using them with more complex objects. For example: const users = [ { name: 'Alice', age: 25, active: true }, { name: 'Bob', age: 30, active: false }, { name: 'Charlie', age: 35, active: true } ]; const activeUserNames = users .filter(user => user.active) .map(user => user.name); console.log(activeUserNames); // Output: ['Alice', 'Charlie'] Now, a reduce example that might appear in a TCS NQT style question: const data = [ { category: 'Fruit', name: 'Apple' }, { category: 'Vegetable', name: 'Carrot' }, { category: 'Fruit', name: 'Banana' } ]; const groupedByCategory = data.reduce((acc, item) => { const key = item.category; if (!acc[key]) { acc[key] = []; } acc[key].push(item.name); return acc; }, {}); console.log(groupedByCategory); // Output: { // Fruit: ['Apple', 'Banana'], // Vegetable: ['Carrot'] // } Understanding the accumulator and currentValue in reduce, and how map and filter create new arrays without modifying the original (immutability), is key. These methods are fundamental to writing clean, efficient React Native code and are frequently tested.

Object and Array Destructuring: Predicting Values

Destructuring assignment in JavaScript provides a concise way to extract values from arrays or properties from objects into distinct variables. It's a syntactic sugar that makes code cleaner and more readable, but it can also lead to subtle errors if not understood properly, making it a prime candidate for output-based interview questions. Let's start with object destructuring: const person = { firstName: 'Rahul', lastName: 'Sharma', age: 28 }; const { firstName, age } = person; console.log(firstName); // Output: Rahul console.log(age); // Output: 28 What if you want to rename the variable? const { lastName: surname } = person; console.log(surname); // Output: Sharma console.log(lastName); // ReferenceError: lastName is not defined This highlights that destructuring extracts values, and if you rename, the original property name is no longer directly available unless also destructured separately. Default values are also important: const { city = 'Mumbai' } = person; console.log(city); // Output: Mumbai Now, array destructuring: const colors = ['Red', 'Green', 'Blue']; const [firstColor, secondColor] = colors; console.log(firstColor); // Output: Red console.log(secondColor); // Output: Green Skipping elements is also possible: const [, , thirdColor] = colors; console.log(thirdColor); // Output: Blue Combining with the rest operator: const [primaryColor, ...otherColors] = colors; console.log(primaryColor); // Output: Red console.log(otherColors); // Output: ['Green', 'Blue'] Interviewers often combine destructuring with function parameters or asynchronous operations. For example, a function might expect an object with specific properties: function greet({ name, greeting = 'Hello' }) { console.log(${greeting}, ${name}!); } greet({ name: 'Priya' }); // Output: Hello, Priya! greet({ name: 'Amit', greeting: 'Namaste' }); // Output: Namaste, Amit! Understanding how destructuring assigns values and handles missing properties or default values is crucial for predicting code output accurately. Prepgenix AI includes exercises that simulate these scenarios found in aptitude tests like the AMCAT.

The Spread Operator: Merging and Copying Outputs

The spread operator (...) is a versatile tool in JavaScript, allowing an iterable (like an array or string) or an object to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) or key-value pairs (for object literals) are expected. It's particularly useful for creating shallow copies of arrays and objects, and for merging them. Output-based questions often test the difference between spread and other methods, or how it behaves with nested structures. Consider array spread: const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArray = [...arr1, 0, ...arr2]; console.log(mergedArray); // Output: [1, 2, 3, 0, 4, 5, 6] Creating a shallow copy: const originalArray = [10, 20, 30]; const copiedArray = [...originalArray]; copiedArray.push(40); console.log(originalArray); // Output: [10, 20, 30] console.log(copiedArray); // Output: [10, 20, 30, 40] This works because ...originalArray creates a new array with the elements of originalArray. However, remember it's a shallow copy. If the array contains objects, only the references to those objects are copied: const obj1 = { id: 1 }; const arrWithObj = [obj1, 2]; const copiedArrWithObj = [...arrWithObj]; copiedArrWithObj[0].id = 99; // Modifying the object within the copied array console.log(arrWithObj[0].id); // Output: 99 (The original array's object is affected) Now, object spread: const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const mergedObject = { ...obj1, ...obj2 }; console.log(mergedObject); // Output: { a: 1, b: 3, c: 4 } Notice how the value of b from obj2 overwrites the value from obj1 because obj2 is spread later. Similar to arrays, this creates a shallow copy. Properties that are objects or arrays themselves are copied by reference. const defaultConfig = { theme: 'light', settings: { fontSize: 12 } }; const userConfig = { username: 'user1', settings: { theme: 'dark' } }; const finalConfig = { ...defaultConfig, ...userConfig }; console.log(finalConfig); // Output: { // theme: 'dark', // Overwritten by userConfig // settings: { fontSize: 12, theme: 'dark' }, // This is NOT merged correctly! // username: 'user1' // } The settings object is replaced entirely, not merged. To merge nested objects, a deep copy or a more specific merge function is needed. Understanding these nuances of spread and merge operations is vital for preventing bugs and answering interview questions correctly.

Type Coercion and Truthiness/Falsiness: Predicting Results

JavaScript's dynamic typing can lead to automatic type coercion, where values are converted from one type to another. This, along with the concepts of truthy and falsy values, often trips up developers and is a common source of tricky output-based questions. Understanding these rules is essential for predicting how JavaScript will behave. Type coercion happens in various scenarios, most notably with the equality operators (== vs ===) and arithmetic operations. The loose equality operator (==) performs type coercion before comparison, while the strict equality operator (===) checks both value and type without coercion. Consider these: console.log(5 == '5'); // Output: true (string '5' is coerced to number 5) console.log(5 === '5'); // Output: false (types are different: number vs string) console.log(0 == false); // Output: true (boolean false is coerced to number 0) console.log(null == undefined); // Output: true (special case) console.log(null === undefined); // Output: false (types are different) Arithmetic operations also trigger coercion: console.log('5' + 1); // Output: '51' (string concatenation) console.log('5' - 1); // Output: 4 (string '5' coerced to number 5 for subtraction) console.log('5' * 2); // Output: 10 (string '5' coerced to number 5 for multiplication) console.log('abc' - 1); // Output: NaN (Not a Number - 'abc' cannot be coerced to a number) Truthiness and Falsiness: In JavaScript, values are evaluated as either true or false in boolean contexts (like if statements, logical operators). The following are considered falsy: - false - 0 (the number zero) - '' (empty string) - null - undefined - NaN Everything else is truthy. This applies to objects and arrays too (even empty ones are truthy): console.log(Boolean([])); // Output: true console.log(Boolean({})); // Output: true Interview questions might involve implicit type coercion in unexpected places: let x = 10; let y = '0'; console.log(x + y); // Output: '100' (string concatenation) console.log(x - y); // Output: 10 (type coercion for subtraction) Or complex conditional logic: if ([] == ![]) { console.log('Truthy!'); } else { console.log('Falsy!'); } // Explanation: ![] is false. [] == false. [] is truthy, false is falsy. Coercion happens. // The comparison becomes Boolean([]) == Boolean(false) => true == false => false. // Wait, [] == ![] is actually true. Let's re-evaluate. // ![] evaluates to false. // So the condition is [] == false. // JavaScript tries to convert both sides to numbers if one is not a boolean. // Number([]) is 0. Number(false) is 0. // So, 0 == 0, which is true. // Output: Truthy! Mastering these subtle rules prevents unexpected behavior and helps you confidently predict the output of such JavaScript snippets during your React Native interviews.

Frequently Asked Questions