Interview
Олег ЛитвинJavaScript
1. What are the different types in JavaScript?
There are 6 types in JavaScript, 5 primitive types and a complex one:
- Primitive: number, string, boolean, undefined and null;
- Complex: object.
In JavaScript everything, except simple types, are objects: arrays, functions, classes...
2. Hosting in JavaScript.
Hosting is a mechanism, when declared variables and functions move up their code before code execution. So it doesn't matter whether they are local or global, they move up their scope and can be used before initialization. By default hosted variables are undefined.
Remark: variables and functions, declared by "let" and "const" keyword are hosted to the top of the block, but not initialized.
3. Difference between var and let keyword in JavaScript.
There are 2 kinds of scope in JavaScript: local and global. Local also divides into function scope and block scope. The first difference is that variable, declared by "var" has function scope, while variable, declared by "let" has block scope.
Second difference, is that "var" variable can be used before its initialization in code, while "let" variable are not.
4. Explain passed by value and passed by reference.
In JavaScript primitive variables store their values by themself, so they are passed by value, while object variables don't store their values by themself, they store reference on their value, so they are passed by reference
5. What functional programing is?
Functional programming is an programming aproach, when software architecture are developing by using functions. In this approach we can use functions as a parameters and return them as values.
- Callback function is a function, that is passed as a parameter to other function;
- Higher order function is a function, that accept or return other functions.
6. Explain “this” keyword.
"This" keyword indicates current function or class scope.
7. Explain call(), apply() and bind() methods.
- call() is used, when we need to call a function with specific context, so the method binds function to an object: func.call(contextObj, arg1, ..., argN);
- apply() as the call method is used, when we need to bind function to an object, but instead of args list it takes an args array: func.apply(contextObj, [arg1, ..., argN ]);
- bind() returns a function with an applied context, while call() and apply() returns function results: const bindFunc = function.bind(contextObj, arg1, ..., argN).
8. Explain Closures in JavaScript.
If we declare some function in other function and use some variable from that external function, at the time of calling internal function, this inner function will remember external value and won't change it, even if it is changed in outer function.
9. What is the use of a constructor function in JavaScript?
Constructor function is used when a new instance of object is created by a "new" keyword. In constructor function we usually initialize object initial parameters.
10. What are classes in javascript?
Class is a special type of a function that is a specific template of an object. To create class in JavaScript we need to use a "class" keyword and a "new" keyword to create its instance.
Class can store some variables and methods that are linked to its instance. If we want to use them inside class, we should use "this" keyword, that indicates its scope.
Also classes can be extendable from other classes by using "extend" keyword.
11. Event loop
JavaScript is a single-thread language, so all commands are executed in the order of the code, but if we need to make some actions in parallel way, for example get some data from server or to make some timer actions, for those purpose event loop was created.
Event loop is a manager of asynchronous calls, it regulates the execution sequence of asynchronous tasks. It is created when some parallel task is called in a CallStack, after that that parallel task is added to MacroTask or MicroTask Queue, that depends on which type of async task this task is. Timers, intervals go to MacroTask Queue, while Promises, async functions go to MicroTask Queue.
The difference between Macro and MicroTasks is in the execution priority, where MicroTasks have a higher execution priority. The second differance is that MicroTasks a called in the order of the then()/catch() methods, until the calls end, while MacroTasks are called separately, so the CallStack can call another tasks.
12. What is the REST parameter and SPREAD operator?
REST operator is used for merging input arguments in functions or for decomposing arrays and objects:
- function(...args) {...};
- const [id, name, ...data] = [1, "Oleg", 23, "Belarus", ...];
SPREAD operator is used to concatenate or transfer some parts of data from iterated objects:
- const spread = [...[1, 2, 3], ...[4, 5, 6]];
13. What is Object Destructuring?
Destructuring is a syntax, that allows to decompose some parts of arrays and objects in new variables: const {id, name, age} = {id: 1, name: "Oleg", age: 23}
TypeScript
1. What are the primitive types in TypeScript?
Primitive types are types, that contains its values. There are 10 primitive types in TypeScript: number, bigInt, symbol, string, boolean, any, void, undefined, null, never;
2. What are union types in TypeScript?
Union types are types, that consist of two or more other types. To declare union type, we need to list types through the vertical line symbol: number | string | null.
3. What are type aliases? How do you create one?
Type aliases is a way to declare custom types, that makes code cleaner and easy readable. To declare type aliases we can use:
- Plain type: const MyNumber = number;
- Union type: const MyStrNumType = string | number;
- Type and Interfaces.
4. Explain the tuple types in TypeScript.
Tuple is an array, where we can set type to each element: [1, "Oleg", true]: [number, string, boolean].
5. What are abstract classes? When should you use one?
Abstract class is a raw template for implementing normal class. It can have a constructor, variables, methods and also implement some of them. To declare abstract class we should use "abstract" keyword, this keyword also is used for declaration abstract methods, that don't have an implementation.
abstract class Template {
a: string;
abstract someMethod(): void
}
Abstract class is used as a general model for other classes, that can have some common methods and don't need its instances.
6. What are interfaces? When should you use one?
Interface is a raw model for class or alias type implementation. It can contain variables and methods without its declaration and implementation.
7. What is function overloads.
Function overloads is a way to implement function different ways, using different input parameters and different logics, without changing its name.
8. Could you name some Utility types?
Utility types is a set of build-in types, that can be used to manipulate some data types in code:
- Awaited<T> - describe type operations, represented by await in async functions;
- Readonly<T> - describe type, where all the properties only are readable;
- ...
React
1. What is JSX?
JSX is a syntax extension to JavaScript, that allows to XML-like code. Any code, written in JSX, then transforms into plain JavaScript code. It is used for representing components in React.
2. What is state?
React are based on components, that are different UI blocks. Every component can have its own state to manipulate components behavior.
- To declare component's state we should use "state" class value in class components or useState hook in functional components.
- To change state we should use special setState methods.
! Each state change calls render component function.
3. What is props?
Props is an object, that stores component's input parameters.
! Each props change calls render component function.
4. What is Virtual DOM?
DOM is a document object model, that is a representation of an user interface. Each time UI changes, the DOM is also updated to display it changes. But frequent DOM changes can affect on performance in negative way, because DOM is a tree-like structure and after it changes, the updated element and all its children need to be rendered again to update the UI.
In React for each DOM element VDOM copy is created. So VDOM is a virtual copy of DOM, that is stored in a memory and synchronises with the real DOM by such libraries as ReactDOM. This process is named - Reconcilation.
The main advantage of VDOM is that its manipulations are much quicker.
5. How React works?
React is a JavaScript libriary for developing single-page and mobile apps.
It uses components to represent usable parts of UI.
React uses JSX for building components. JSX is a syntax extention to JavaScript, that allows to write XML-like code. Any code, written on JSX transforms into plain JavaScript code for representing components in React.
In React, for each DOM element VDOM copy is created. VDOM is a virtual copy of DOM, that is stored in a memory and synchronises with the real DOM. React compare an old tree and a new tree and update every node, where it is needed. If there are several amount elements with the same type, in that case we should use "key" attribute to differ them. This process calls - Reconcilation.
Every React component has its 3 lifecycle stages:
- Mounting: component is created and it does first rendering;
- Updating: component gets new props or updates it state and a new rendering is needed. Also it can be called by forceUpdate methods, that are usually in test mode;
- Unmounting: component is deleted.
6. Life cycle stages?
There are 3 lifecycle stages in React:
Mounting: works, when component is created and it does its first render:
- getDefaultProps;
- getInitialState;
- componentWillMount;
- render;
- componentDidMount;
Updating: works, when component changed its state or get new props and new rendering is needed:
- Getting/changing props/state;
- shouldComponenetUpdate (true/false);
- componentWillUpdate;
- render;
- componentDidUpdate;
Unmounting: works, when there is no need for a component, so it will be deleted:
- componentWillUnmount;
7. Lifecycle Methods?
- componentDidMount(): usually used for initialize some initial parameters;
- componentDidUpdate(): works, when a new render is needed;
- componentWillUnmount(): works, when there is no need for a component. Usually is used to clear timers and intervals to avoid memory leaks;
- componentDidCatch(): works, if some error occure during the rendering phase of any lifecycle methods or any children components. There is no hook analog of this method.
8. Difference between Class components and Functional?
Class component is a componet, that extends React.Components class so it can have some variables, state, its own and overrideble methods, while functional component is a plain JavaScript function, that can get values as a props and returns rendered element.
Functional component can get all the necessary functionality by using hooks.
9. React Hooks?
Hook is a JavaScript function, that helps to work with component's state, lifecycle methods and so on, inside functional component. This are 8 main React Hooks:
- useState: is used for creating component's state. Every state change calls component's rendering;
- useRef: it stores some component's data during component life, and if it changes it won't call component's rendering;
- useEffect: is used to work with component's lifecycle stages;
- useLayoutEffect: as an useEffect hook, it works with component's lifecycle stages, but it is synchronous and is called before all the changes in DOM, so it affects on performance;
- useMemo: cashes the result of an expensive functions calls, when the same input occur again;
- useCallback: as an useMemo hook it cashes some data, but instead some values, it cashes functions, so we will always have the same reference of the same function;
- useContext: is used to work with Context API. It returns some context object;
- useReducer: usually is used to work with Context API. As an useState hook it stores some data, but stores it in a logic like redux stores and works its store/state.
10. What is Props Drilling and how can we avoid it?
Props Drilling is a situation, when we pass data through several nested children components to a component, that need that data, but at the same time this data is unnecessary for those components through which we pass it, they are simply transporting this data to a direct component. It may cause some problems with app architecture and performance.
For solving this problem we can use:
- Global store (Context API, Redux, Mobx, etc.);
- App composition (MVC, divide compnents on containers and presenters).
React Native
1. Explain React Native?
React native is a JavaScript framework, that are used for developing mobile, Windows and MacOS native apps. Mainly it consist of two libriaries: React, that are used for making all the UI logic and ReactNative lib, that are used like a ReactDOM library in a web, so from the hood it works with native elements instead of html elements.
2. What are the advantages of React Native?
There are 5 main advantages of React Native:
1. Cross-platform: The main advantage is that React Native is a cross-platform JavaScript framework, so we can develop native apps on IOS, Android, Windows and MacOS in one place;
2. Faster Development: Due to React Native is a cross-platform framework, then we can develop native apps in one place, so development becomes much quicker;
3. High Performance: React Native compiles its code on a Native code, so it affects on app performance, because native apps are quicker;
4. Hot Reloading: All the code changes are immediately visible during developing.
5. Big Community: React Native is developed by Facebook and it is used by a huge amount of programers, so it provides a large number of libraries that are supported by its community and it is easy find answers on occurred questions;
3. What are the disadvantages of React Native?
1. Raw Framework: React Native is a raw framework, its last version is 0.71, so we can meet some troubles, when we work with native components like a map, pushes and so on, that take a lot of time to solve;
2. Initialization Speed: In comparision with native apps on Java, Swift or Kotlin, React Native has a lower speed initialization, because it needs a time to compile JS code into native code and it is simply bigger in memory.
4. List the essential components of React Native.
JSX essential componenets are: View, ScrollView, Text, Pressable, FlatList.
Component's essential elements: state, props, style.
5. How many threads run in React Native? And how they works?
There are 3 threads in React Native:
1. Native/UI thread: Is the main thread, in which Android or IOS apps work. It renders all the UI logic and report to JavaScript thread about user events and so on.
2. JavaScript thread: Is the thread, that implement JavaScript code. Its main purpose is an app buisness logic, that through the Bridge says to Native thread how and in which way to render app;
3. Background thread: Thread, that are used by React Native for layout calculations, created by React library.
6. What is a bridge and why is it used in ReactNative?
React Native application consists of two parts: JavaScript and Native code. These two parts are complitely different and cannot to communicate with each other on their own. They can only do it through the React Native Bridge, that seats between JavaScript and Native code and sends serialized/transformed JSON object from JavaScript thread to Native thread and in reverse.
In simple terms React Native Bridge is a layer between JavaScript and Native threads, that helps them to communicate each other in asynchronous way.
7. Describing Networking in React Native and how to make AJAX network calls in React Native?
There are several ways to make an AJAX network calls:
1. Fetch API: Where we can set our URL, method and other parameters and then gets a response. Fetch call works asynchronously, so it returns a Promise with response, that we can process;
2. XMLHttpRequest API;
3. Axios library: It uses XMLHttpRequest. Axios as Fetch API returns a Promise.
8. What is Flexbox?
Flexbox is a stylesheet model, where we use flex blocks to locate elements on the screen. React Native uses Flexbox by default for location its elements and uses flex-direction "column", instead of "row" like in web.
9. Explain FlatList components, what are its key features along with a code sample?
FlatList is a components, that helps to display list data in a scrolled view. Its key feature is in that it visualizes only those elements, that are displaying on display in the current moment, not all elements.
10. What are the Different Ways to style ReactNative Application?
1. Style, Stylesheet.create(): First of all, if we want to add some styles to a component, we should add it to a "style" attribute, that applies an object with stylesheet properties. So we can write this object with its properties directly in "style" attribute or use stylesheet container object, that is created by Stylesheet.create() method, where styles for different components are described;
2. Theme Provider: Is used for stylization the same element by multiple ways.
11. Explain AsyncStorage in ReactNative and also define when to use it and when to not?
AsyncStorage is a simple, uncrypted storage of keys and values like LocalStorage in web. That is good, when we need store some non-confedential app data on device, so that is bad for example auth token storing. For those purposes SecureStorage is better.
12. What is the real cause of performance issues in React Native?
Although JavaScript and Native Threads are fast, the weak point of its performance is in unnecessary Bridge transfers, so we should minimize the number of passes trough it to avoid performance troubles.
13. List some steps to optimize the application.
1. Code architecture: We should write code in such way, when we avoid unnecessary renderings and Bridge passes, use memoizaton, where it is needed, divide components on containers and presenters and so on;
2. Memory leaks: Also we should clean all intervals, timeouts, when component is unmounted;
3. Remove all unnecessaries: Remove all unnecessary libraries, clean up code.
Other
1. What is HTTP, its response codes?
HTTP (HyperText Transfer Protocol) is a data exchange protocol in the Interned, that is based on client-server model. So protocol assumes the existence of:
- Clients, which initiate the connection and send requests;
- Server, which are waiting for a connection to receive a request, execute some necessary actions and then return a message as a result in a response.
There are 4 main request methods:
- GET: getting resource;
- POST: creating resource;
- PUT: updating resource;
- DELETE: deleting resource.
The method implementation depend on server.
There are 11 response codes:
- 200: Ok;
- 201: Created;
- 204: No content;
- 301: Moved permanently;
- 302: Moved temporarily;
- 400: Bad request;
- 401: Unauthorized;
- 402: Payment Required;
- 403: Forbidden;
- 404: Not found;
- 500: Internal server error.
2. What is Rest API? Requirements to Rest API architecture.
Rest (Representational State Transfer) is an architecture style of app componenets interaction in network. This is a set of rules, that describes how programer should orginize the writing of server code for better data exchange and application scalability.
The main Rest purpose is to give the designed system such properties as:
1. Performance/Efficiency;
2. Scalability;
3. Flexibility to changes;
4. Fault-tolerance;
5. Ease of support...
This are not all the needed properties, but it are main.
To achieve its properties, Rest provides next 6 principles:
1. Client-server architecture: Conception that divides client and server zone;
2. Stateless: Server doesn't have to store clients session data, it only have to get all the information for its prosessing and then sending response to a client;
3. Cashing: Every server response has to be cashed for the same request;
4. Interface uniformity: Client and server part needs to hava an uniform communication interface;
5. Layered system: All the app architecture can consists of several amount of related layers, for example we can have client part, server part and database part. Layered architecture gives more scalability and flexibility;
6. Code on demand (optional):
3. OOP (object-oriental programming).
OOP is a programing metodology, that are based on using combination related objects, which are instances of certain classes and this classes recreate the hierarchical structure.
There are 4 main OOP principles:
1. Abstraction: Every object has to have its template, which with sufficient accuracy displays its behavior;
2. Encapsulation: Every object has to hide its values, so that access to them is possible through its methods;
3. Inheritance: Every abstraction/class has to be an extendable from other abstractions/classes if its needed;
4. Polymorphism: Is an ability to implement an extendable function by different ways.
4. SOLID.
SOLID is 5 main princeples for object-orinetal programming approach. This is a set of rules for class structure creation.
1. Single Responsibility Principle: Class is intended only for one role and its change can be caused only by reason. For example, changing the database entity structure;
2. Open-closed principle: Class can be open for extention, but closed for modification;
3. Liskov substitution principle: Objects, can be replaced by their heirs(наследниками) without changing its properties and behavior.
4. Interface segregation principle: It is much better to have a big number of interfaces, than one for all purposes;
5. Dependency invertion principle: This is dependecy on abstraction principle, so classes should depend on interfaces and abstract classes, not on specific classes or functions;
5. Firebase for React Native.
Firebase is an instrument that provides a lot of services for app developing, like authentification, database service, hosting and so on. And it is free up to a certain limit level.