Basic JavaScript

Question 1

What is JavaScript and what programming paradigms does it support?

Answer 1

JavaScript is a versatile programming language initially designed for web browsers but now used in various environments. It supports object-oriented, imperative, and functional programming styles.

Question 2

How has ECMAScript influenced the development of JavaScript?

Answer 2

ECMAScript, as the standard governing JavaScript, has progressively introduced more formal language features like classes and arrow functions (=>), which have enhanced the structure and capabilities of JavaScript, moving it from relying on programming conventions to having built-in language features.

Question 3

What is Functional Programming and what are its key features?

Answer 3

Functional Programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. Its key features include the use of functions as first-class citizens, avoidance of side effects, support for higher-order functions, function composition, and recursion.

Question 4

How does Functional Programming differ from other programming paradigms in terms of handling data and functions?

Answer 4

Functional Programming differs from other paradigms by treating functions as first-class citizens, meaning functions can be passed as arguments, returned from other functions, and assigned to variables. It avoids mutable data and changing state, focusing on immutable data and pure functions that do not cause side effects, contrasting with paradigms like imperative programming that rely on changing state.

Question 5

Define Object-Oriented Programming and its core concepts.

Answer 5

Object-Oriented Programming is a paradigm based on the concept of “objects” containing data and methods. Its core concepts include encapsulation (bundling data and methods that operate on the data within objects), inheritance (deriving new classes from existing ones), and polymorphism (the ability of objects of different classes to respond to method calls of the same name).

Question 6

Compare and contrast Object-Oriented Programming with Imperative Programming.

Answer 6

Object-Oriented Programming focuses on objects and their interactions, using classes to define data structures and behaviors, promoting data encapsulation and reusability. Imperative Programming, on the other hand, focuses on explicitly detailing the steps a computer must take to reach a desired state, often using a sequence of commands, loops, and conditional statements. OOP is more about modeling and organizing complex systems, while Imperative Programming is about defining precise operations.

Question 7

What is Imperative Programming and how does it operate?

Answer 7

Imperative Programming is a programming paradigm that uses statements to change a program’s state. It involves writing a sequence of commands for the computer to perform, focusing on describing how a program operates. This style of programming often employs loops, conditional statements, and variables to detail the steps required to achieve a desired outcome.

Question 8

Give an example of a programming language that is primarily imperative and explain its characteristics.

Answer 8

C is a prime example of an imperative programming language. It focuses on how to perform tasks with commands, loops, and conditionals. C requires the programmer to specify exact steps to achieve a result, often involving detailed management of computer resources, like memory allocation, which exemplifies the hands-on approach of imperative programming.

Question 9

Given the JavaScript code snippet where a method “increment” is added to an object “obj”, explain how method invocation works and what “this.count += amount;” does within the method.

Answer 9

In the given JavaScript code, the method “increment” is added to the object “obj”. When “obj.increment(1)” is called, the method invocation binds “this” to the object “obj”, allowing the method to access “obj’s” properties. The line “this.count += amount;” increments the “count” property of “obj” by the given “amount”. The first call “obj.increment(1)” adds 1 to “count”, returning 1. The second call “obj.increment(3)” adds 3, returning 4, as “count” is now 4.

Question 10

Explain how the “this” keyword works inside methods and non-method functions in JavaScript. Provide examples for both cases.

Answer 10

In JavaScript, within a method, “this” refers to the object the method is part of. For example, in “o.aMethod()”, “this” refers to “o”, allowing access to its properties, such as adding “newProp”. In non-method functions, “this” refers to the global object in a non-strict mode (like the window object in browsers) but becomes undefined in strict mode. This distinction prevents “this” in non-method functions from inadvertently accessing or modifying the global scope.

Question 11

Explain how functions in JavaScript can act as objects and discuss the example of the “plus1” function having a property “invocations”.

Answer 11

In JavaScript, functions can be treated as objects, allowing them to have properties. In the “plus1” function example, the property “invocations” is used to count how many times the function has been called. Each time “plus1” is called, the “invocations” property is incremented. This ability to store and update properties within the function itself is similar to static or class properties in object-oriented languages, where the property is shared and accessible across different instances of the class.

Question 12

Describe the functionality of the methods toString(), call(), apply(), and bind() in JavaScript functions. Provide examples demonstrating their use.

Answer 12

In JavaScript, the toString() method of a function returns the function’s source code as a string. For example, “func.toString()” returns the function definition. The call() method calls a function with a specified “this” value and individual arguments, e.g., “func.call({t: 1}, 2)”. The apply() method is similar but takes arguments as an array, e.g., “func.apply({t: 2}, [2])”. The bind() method creates a new function with a pre-specified “this” value and arguments, e.g., “let newFunc = func.bind({z: 2}, 3); newFunc()” prints “{ z: 2 } 3”.

Question 13

Explain how functions can act as classes and constructors in JavaScript, using the “Rectangle” function as an example. Discuss why defining methods within the constructor is not the most efficient way.

Answer 13

In JavaScript, functions can be used to define classes, acting as constructors to create instances. For example, the “Rectangle” function acts as a constructor for rectangles. When used with “new”, it creates a Rectangle object with specific “width” and “height”. However, defining a method like “area” within the constructor means every instance has its own copy of the method, which is less efficient than defining it on the prototype, where all instances can share a single copy of the method.

Question 14

Explain prototype-based inheritance in JavaScript and how property access and updates work in this context.

Answer 14

In JavaScript, prototype-based inheritance allows objects to inherit properties from their prototype objects. When a property is accessed, JavaScript searches up the prototype chain until the property is found. For property updates, if the property is not on the object, it is created on the object itself. This design allows objects to inherit shared properties from their prototypes while still being able to have unique properties of their own.

Question 15

Explain the use of prototypes in JavaScript, using the Rectangle function and its area method as an example.

Answer 15

In JavaScript, prototypes allow methods and properties to be shared across all instances of a function. The “Rectangle” function uses its prototype to share the “area” method with all its instances. This is memory-efficient as the method is stored only once on the prototype. However, changes to the prototype dynamically affect all instances, which highlights the need for cautious modifications.

Question 16

Explain the difference between defining a method on an object instance versus on the prototype, using the Rectangle example.

Answer 16

In the Rectangle example, r.newMethod is specific to the instance “r” and only accessible by it. In contrast, Rectangle.prototype.newMethod is accessible to all instances of Rectangle, as it is defined on the prototype. This demonstrates the difference between instance-specific behaviors and shared functionality across instances.

Question 17

Explain prototype-based inheritance in JavaScript, particularly how setting Rectangle.prototype to a new instance of Shape affects inheritance.

Answer 17

In prototype-based inheritance in JavaScript, setting “Rectangle.prototype” to a new instance of “Shape” enables Rectangle to inherit properties and methods from Shape. If a property or method is not found on Rectangle, the search moves up the prototype chain to Shape.prototype, allowing Rectangle to use properties and methods of Shape. This supports single inheritance and allows for dynamic modifications in the prototype chain.

Question 18

Explain how prototype-based inheritance works in JavaScript, using the example of setting Rectangle.prototype to a new instance of Shape.

Answer 18

In JavaScript, prototype-based inheritance is used to enable inheritance of properties and methods. For instance, when Rectangle.prototype is set to a new instance of Shape, Rectangle inherits from Shape. If a property is not found in Rectangle, JavaScript looks up the chain to Shape.prototype, and so on. This approach supports single inheritance and allows for dynamic creation and modification of the prototype chain.

Question 19

Explain the ES6 class syntax for defining classes and inheritance in JavaScript, using the Rectangle and Shape example.

Answer 19

In ES6, classes in JavaScript are defined using the ‘class’ keyword. In the example, ‘Rectangle’ is a class extending ‘Shape’, demonstrating inheritance. The ‘constructor’ method initializes the instance, and ‘super’ is used to call the parent class constructor. Methods like ‘area’ are defined within the class. ES6 also allows for static methods, like ‘countRects’, which are defined with the ‘static’ keyword and callable on the class itself.

Question 20

How are asynchronous operations typically handled in JavaScript, especially in the context of browser APIs and Node.js?

Answer 20

Asynchronous operations in JavaScript are typically handled using callback functions. In the browser, APIs like ‘setTimeout’ use callbacks to execute code after a delay. In Node.js, operations like ‘fs.readFile’ use callbacks to handle the result of asynchronous I/O operations. This pattern allows JavaScript to perform non-blocking operations and is fundamental to its efficient use in various environments.

Question 21

How does React’s JSX syntax promote a functional programming style?

Answer 21

React’s JSX syntax promotes a functional programming style by encouraging the use of methods like ‘map()’ and ‘filter()’ for rendering and the ternary operator for conditional rendering. This approach, aligned with React’s declarative nature, facilitates the creation of readable and maintainable component structures, making it beneficial to understand functional programming concepts for effective React development.

Question 22

What happens when ‘myFunc’, a closure created by ‘localFunc(10)’, is called in JavaScript, and why?

Answer 22

When ‘myFunc’, a closure created by ‘localFunc(10)’, is called, it retains access to the variables ‘argVar’, ‘localVar’, and ‘globalVar’ from its creation context. On each call, it increments ‘localVar’ and adds it to ‘argVar’ and ‘globalVar’. This demonstrates closures’ ability to remember and access their lexical scope, even after the outer function has returned.

Question 23

Compare the two given JavaScript code snippets in terms of scopes and closures, and their effect on module creation.

Answer 23

The first code snippet with a global variable ‘i’ modified within ‘f’ affects the global state. The second snippet uses an IIFE to encapsulate ‘i’ in a local scope, creating a closure. This isolates ‘i’ from the global scope, allowing ‘f’ to modify it without affecting the global state. This example illustrates how early JavaScript used scopes and closures to create modular, isolated code structures.

Question 24

What does ‘myObj.compute()’ return in the given JavaScript code, and why?

Answer 24

myObj.compute()’ returns the concatenation of ‘privateProp1’ and ‘privateProp2’, which are ‘1’ and ‘test’, respectively. The result is the string ‘1test’. This outcome illustrates how closures enable private properties within an object, with these properties being accessible only within the object’s methods.

Question 25

Explain why ‘this.fileName’ in the nested function within ‘fs.readFile’ generates an error in the first example but works correctly in the second example.

Answer 25

In the first example, ‘this.fileName’ inside the nested function becomes ‘undefined’ because, in ‘strict’ mode, ‘this’ doesn’t automatically refer to the object from which the method was called. In the second example, the arrow function used within ‘fs.readFile’ doesn’t have its own ‘this’ context and inherits it from the enclosing scope, correctly referring to ‘obj.fileName’. This demonstrates how arrow functions preserve the ‘this’ context in nested functions.