Forem: Quizzesforyou

How to add Ads.txt in the NextJS project to fix the AdSense alert?

Quizzesforyou — Sat, 29 Jul 2023 20:58:17 +0000

In a new website, once Google AdSense approves the website for Ads, getting the below warning message to add “Ads.txt” is very common. In this article let's see how “Ads.txt” can be added to a NextJS project.

What is Ads.txt?

Below is the definition from the AdSense link

Authorised Digital Sellers or ads.txt is an IAB Tech Lab initiative that helps ensure that your digital ad inventory is only sold through sellers (such as AdSense) who you’ve identified as authorized.

How to fix Ads.txt issue?

create ads.txt in the root path of the NextJS project.

touch ads.txt // note the case of ads.txt file
1. Sign in to your AdSense account.
2. Click “Sites” on the sidebar

Select the site with the ‘Not found’ ads.txt status.
Here you can get the contents required for the “Ads.txt” file, copy and paste them into the file.

In the “ads.txt” file, we can add not only the Google AdSense details but also other Ad networks can also be added.
Upload your ads.txt file to the root directory of your site.
To verify that you published your file correctly, check that you successfully see your file’s content when you access the ads.txt URL (https://example.com/ads.txt) in your web browser. If you can see the file in your web browser, it’s likely that AdSense will successfully find it.
If you are already using Google Search Console, submit the path of “ads.txt” in the “URL Inspector” to expedite the crawling.
It would take at least 7 days for AdSense to crawl and verify the “ads.txt” file. In a few days, the site status would be updated like below

You are all set! Happy Earning 💰💲

Visit https://quizessforyou.com for programming quizzes.

How to set up ESLint and Prettier in React TypeScript 5 project? 2023

Quizzesforyou — Sat, 29 Jul 2023 18:44:51 +0000

In this article, let's do step by step set up of ESLint and Prettier in React Typescript 5 project. By the end of this guide, you’ll have a clean and productive development environment that will boost your productivity and code quality.

Create React Project with Typescript Template:

Create React project with TypeScript Template



npx create-react-app react-typescript-setup --template typescript

//"react-typescript-setup" is the project name. You can user yours.
// --template typescript - installs the Typescript

ESLint setup:

What is ESLint? ESLint is an open-source JavaScript linting utility

check more details https://eslint.org/

2.Install ESLint as a dev dependency



npm install eslint --save-dev

3.After installing ESLint, we need to create a configuration file with a below command



npx eslint --init

A series of questions will be asked. Answer them according to your project requirement. I am selecting the following options

The above steps create a .eslintrc.json in the root path of the project

Contents of the .eslintrc.json would be like below



{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react"],
  "rules": {}
}

To let ESLint correctly resolve TS imports/exports from Typescript and .tsx files, we would need to add the additional dependencies like eslint-plugin-import and eslint-import-resolver-typescript

4.Install eslint-import-resolver-typescript and eslint-plugin-import as development dependency.



npm i eslint-import-resolver-typescript eslint-plugin-import --save-dev

5.To make the resolver packages work properly add the below in the .eslintrc.json like below



"settings": {
    "import/resolver": {
      "typescript": {}
    }
}

6.If you haven’t already installed ESLint extension, add that to the VSCode

Prettier Setup:

What is Prettier? Prettier is an opinionated code formatter

check more details here: https://prettier.io/

7.To install Prettier and make it work with ESLint, the following packages need to be installed as dev dependencies. Installing the eslint-config-prettier and eslint-plugin-prettier packages will resolve any conflicts between Eslint and Prettier.



npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

8.At the root of the project, create a prettier config file using the below command, this will create a . prettierrc file in the root path



touch .prettierrc

9.Add the required configurations in the config file like below

Check more configurations https://prettier.io/docs/en/options.html



{
  "printWidth": 80,   
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all"
}

10.Add “prettier” to the .eslintrc.json under the plugins and extends, the final JSON file would like below



{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier" // prettier
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react", "prettier"], // prettier
  "rules": {},
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

11.Install the Prettier VSCode extension if you haven’t installed it already

The Above steps will configure the Prettier and ESLint tools in React Typescript project. Happy Coding!

Swift Quiz #06 - Swift Sets and Dictionaries

Quizzesforyou — Sat, 29 Jul 2023 17:58:29 +0000

Topics: Swift Sets and Swift Dictionaries

Check out the interactive quiz https://quizzesforyou.com/quiz/swiftsetsdicts

Swift Sets:

Set is a collection that stores distinct values of the same type with no defined ordering.
Set is a collection that stores distinct values of the same type with no defined ordering. It is useful when the order of items doesn’t matter, and each item should appear only once.
Sets require elements to be hashable, which means they must provide a way to compute a hash value.

Creating a Set:

An empty set can be created using the initializer syntax
Alternatively, an empty set can be created with an empty array literal if the context provides type information.
A set can also be initialized with values using a set literal

    var letters = Set<Character>() // Initializer
    letters = []  // empty literal but still Set<Character>
    var favoriteGenres: Set<String> = ["Rock", "Classical", "Hip hop"] // Set Literal

Accessing and Modifying a Set:

The number of items in a set can be checked using the count property.
To add an item to a set, the insert(_:) method can be used
To remove an item, the remove(_:) method can be used.
To check if a set contains a particular item, the contains(_:) method can be used.

    print("The count is \(favoriteGenres.count).")  // Count

    favoriteGenres.insert("Jazz") // Insert

    if let removedGenre = favoriteGenres.remove("Rock") {
        print("\(removedGenre)? No longer a favorite.")   // Remove
    }

    if favoriteGenres.contains("Funk") {          // Contains 
        print("I enjoy funk music.")
    } else {
        print("Not a fan of funk.")
    }

Iterating Over a Set:

Values in a set can be iterated using a for-in loop
To iterate in a specific order, the sorted() method can be used:

    // for..in
    for genre in favoriteGenres {
        print("\(genre)")
    }

    // sorted
    for genre in favoriteGenres.sorted() {
        print("\(genre)")
    }

Set Operations:

Various set operations can be performed, such as union, intersection, subtraction, and symmetric difference

    let oddDigits: Set = [1, 3, 5, 7, 9]
    let evenDigits: Set = [0, 2, 4, 6, 8]
    let singleDigitPrimeNumbers: Set = [2, 3, 5, 7]

    oddDigits.union(evenDigits).sorted()  // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    oddDigits.intersection(evenDigits).sorted() // // []
    oddDigits.subtracting(singleDigitPrimeNumbers).sorted()  // [1, 9]
    oddDigits.symmetricDifference(singleDigitPrimeNumbers).sorted() // [1, 2, 9]

Set Membership and Equality:

A set can be checked if it is a subset, superset, or disjoint with another set, or if two sets are equal.

    let houseAnimals: Set = ["🐶", "🐱"]
    let farmAnimals: Set = ["🐮", "🐔", "🐑", "🐶", "🐱"]
    let cityAnimals: Set = ["🐦", "🐭"]

    houseAnimals.isSubset(of: farmAnimals) // true
    farmAnimals.isSuperset(of: houseAnimals) // true
    farmAnimals.isDisjoint(with: cityAnimals) // true

Swift Dictionaries:

Dictionary stores associations between keys and values of the same type. Each value is associated with a unique key.
Keys must be hashable, and Swift provides shorthand syntax for creating dictionaries.

Creating a Dictionary:

An empty dictionary can be created using initializer syntax.
Alternatively, an empty dictionary can be created with an empty dictionary literal if the context provides type information
A dictionary can also be initialized with values using a dictionary literal:

    var namesOfIntegers: [Int: String] = [:]  

    var namesOfIntegers = [:]   // dictionary literals

    var airports: [String: String] = ["YYZ": "Toronto Pearson", "DUB": "Dublin"]

Accessing and Modifying a Dictionary:

To access the value associated with a key, subscript syntax can be used
The subscript syntax can be used to add or update
removeValue(forKey:) can be used to remove the values

    if let airportName = airports["YYZ"] {
        print("The airport is named \(airportName).")    // read       
    }

    airports["LHR"] = "London Heathrow" 

    if let removedValue = airports.removeValue(forKey: "DUB") {
        print("The removed airport is named \(removedValue).")
    }   // remove

Iterating Over a Dictionary:

To iterate over the key-value pairs in a dictionary, a for-in loop can be used
To iterate over keys or values only, the keys or values property can be used.

    for (airportCode, airportName) in airports {
        print("\(airportCode): \(airportName)")
    }

    for airportCode in airports.keys {
        print("Airport code: \(airportCode)").  // keys
    }
    for airportName in airports.values {
        print("Airport name: \(airportName)")   // values
    }

Check out the interactive quiz https://quizzesforyou.com/quiz/swiftsetsdicts

1. Which code snippet correctly declares an empty set of integers in Swift?

a) var set: Set<Int> = {}

b) var set: Set<Int> = []

c) var set = Set<Int>()

Answer: c) var set = Set<Int>()

a) declares an empty dictionary instead of a set. Option b) initializes an empty array instead of a set. Option c) correctly initializes an empty set of integers.

2. What does the following code snippet do?

var dict = ["apple": 3, "banana": 5, "orange": 2]
dict["banana"] = nil

a) Adds a new key-value pair to the dictionary.

b) Removes the key-value pair “banana” from the dictionary.

c) Updates the value associated with the key “banana”

Answer: b) Removes the key-value pair “banana” from the dictionary.

Assigning nil to a dictionary's key using subscript notation removes the key-value pair from the dictionary. In the given code, the key-value pair with the key "banana" is removed from the dictionary.

3. What will be the output of the following code snippet?

let set1: Set<Int> = [1, 2, 3, 4, 5]
let set2: Set<Int> = [1, 2]
let isSuperset = set1.isSuperset(of: set2)
print(isSuperset)

a) true

b) false

c) Compilation error

Answer: a) true

The isSuperset(of:) method is used to check if a set is a superset of another set, meaning it contains all the elements of the other set. In the given code, isSuperset will be true because set1 contains all the elements of set2.

4. What will be the output of the following code snippet?

let set1: Set<String> = ["Apple", "Banana", "Orange"]
let set2: Set<String> = ["Banana", "Orange", "Apple"]
let areEqual = set1 == set2
print(areEqual)

a) true

b) false

Answer: a) true

Sets in Swift are unordered collections, so the order of elements doesn’t matter. In the given code, areEqual will be true because set1 and set2 contain the same elements.

5. What is the output?

let set1: Set<String> = ["Apple", "Banana", "Orange"]
let set2: Set<String> = ["Banana", "Orange", "Apple"]
let isStrictSubset = set1.isStrictSubset(of: set2)
print(isStrictSubset)

a) true

b) false

Answer b)false

isStrictSubset(of:) method determines whether a set is a subset but not equal to, a specified set.

6. What is the output?

var dictionary: [String: [Int]] = ["Fruits": [1, 2, 3], "Vegetables": [4, 5, 6]]
let values = Array(dictionary.values.joined())
print(values.count)

a) 3

b) 6

c) 9

d) 12

Answer: b) 6

By using the joined() method on the values collection, we create a single array containing all the elements from the arrays. The count of the resulting array is 6.

7. What is the output?

let set1: Set<Int> = [1, 2, 3, 4]
let set2: Set<Int> = [3, 4, 5, 6]
let symmetricDifference = set1.symmetricDifference(set2)
print(symmetricDifference.count)

a) 0

b) 1

c) 2

d) 4

Answer: d) 4

The symmetric difference method returns a new set with elements that are either in set1 or set2, but not in both. In this case, the elements in the symmetric difference set are 1, 2, 5, and 6, resulting in a count of 4.

8. What is the output?

let set1: Set<Int> = [1, 2, 3 ]
let set2: Set<Int> = [1, 2, 3, 4, 5]
let isStrictSubset = set1.isStrictSubset(of: set2)
print(isStrictSubset)

a) true

b) false

Answer: a) true

The isStrictSubset(of:) method is used to determine whether a set is a subset, and all elements are present. Here it is true.

9. What is the difference between superset and strictSuperset?

a) superset checks if a set contains all the elements of another set, while strictSuperset checks if a set is a proper superset of another set.

b) superset checks if a set contains all the elements of another set, while strictSuperset checks it is not equal to, a specified set.

c) superset checks if a set is a proper superset of another set, while strictSuperset checks if a set contains all the elements that are not of another set.

Answer: b) superset checks if a set contains all the elements of another set, while strictSuperset checks it is not equal to, a specified set.

Visit https://quizzesforyou.com for more such quizzes

References: https://docs.swift.org/swift-book/documentation/the-swift-programming-language/collectiontypes

React Quiz #03 — React State Interview Questions

Quizzesforyou — Thu, 27 Jul 2023 23:30:25 +0000

Check out the interactive quiz https://quizzesforyou.com/quiz/reactstate

Quick Refresher:

State management is crucial in React for building interactive user interfaces.
Functional components and hooks have made state management more intuitive and efficient.
The useState hook is commonly used to manage state in functional components.
useState returns the current state value and a function to update that value.
Components re-render when their state changes, ensuring the UI stays in sync with the application state.
State can be managed at both the local and global levels in React.
Local state is specific to a component and can be created using useState.
useState updates are asynchronous.
Global state is accessible by multiple components and can be managed using libraries like Redux or the context API.
The useReducer hook is used for more complex state logic and follows the Redux pattern.
useReducer takes a reducer function and an initial state, returning the current state value and a dispatch function.
The reducer function specifies how state updates should be performed based on dispatched actions.
Understanding useState, useReducer, and managing local and global states is crucial for effective state management in React applications.

1. What is the correct way to update an object in the state?

A) state = { …state, key: value }

B) state.key = value

C) setState({ key: value })

Answer: A) state = { …state, key: value }

In React, State is immutable. To update an object in the state, the correct approach is to use the spread operator to create a new object while preserving the existing state and updating the desired key-value pair.

2. What is the expected output when the ‘Increment Twice’ button is clicked?

const SampleComponent = () => {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
};

A) The count increases by 2 each time the button is clicked.

B) The count increases by 1 each time the button is clicked.

C) The count remains unchanged.

Answer: B) The count increases by 1 each time the button is clicked.

When the ‘Increment Twice’ button is clicked, the count increases by 1. However, calling setCount multiple times in a synchronous manner does not result in multiple increments. Each call to setCount updates the count based on the previous value of count.

3. What is the purpose of the useEffect hook in relation to state in React?

A) To initialize state variables

B) To perform side effects when state changes

C) To update state automatically on every render

Answer: B) To perform side effects when state changes

The useEffect hook in React allows us to perform side effects, such as API calls or DOM manipulations, when the state or other dependencies change. It runs after every render.

4. What is the recommended approach to handle asynchronous operations that modify the state in React?

A) Using async/await within a useEffect hook

B) Modifying the state directly within the asynchronous function

C) Using the useState hook combined with a callback function

Answer: C) Using the useState hook combined with a callback function

To handle asynchronous operations that modify the state in React, it is recommended to use the useState hook combined with a callback function. This ensures that the correct and up-to-date state is accessed and modified.

5. Which hook is used to share state between multiple components in React?

A) useState

B) useContext

C) useReducer

Answer: B) useContext

The useContext API in React is used to share state between multiple components. It allows components to access the state value provided by a context provider without passing the value through intermediate components.

6. What is the initial value of state when using the useState hook?

A) null

B) undefined

C) It depends on the provided initial value

Answer: C) It depends on the provided initial value

When using the useState hook, the initial value of state depends on the provided initial value. It can be a specific value, null, or undefined.

7. What is the expected behavior when the ‘Increment by 2’ button is clicked?

const SampleComponent = () => {
  const [count, setCount] = useState(0);

  const incrementByTwo = () => {
    setCount((prevCount) => prevCount + 2);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementByTwo}>Increment by 2</button>
    </div>
  );
};

A) The count increases by 2 each time the button is clicked.

B) The count increases by 1 each time the button is clicked.

C) The count remains unchanged.

Answer: A) The count increases by 2 each time the button is clicked.

When the ‘Increment by 2’ button is clicked, the setCount function is called with a callback that receives the previous state value (prevCount). By using the functional form of setCount, we ensure that the update is based on the previous state, allowing the count to increase by 2 with each click.

8. How can you optimize the rendering performance when using the useState hook in React?

A) Use memoization techniques like useMemo or useCallback

B) Use a class component instead of a functional component

C) Split the state into multiple smaller states

Answer: A) Use memoization techniques like useMemo or useCallback

To optimize the rendering performance when using the useState hook in React, you can utilize memoization techniques like useMemo or useCallback to prevent unnecessary re-rendering of components that depend on the state.

9. What is the expected behavior when the ‘Increment Async’ button is clicked?

const QuizComponent = () => {
  const [count, setCount] = useState(0);

  const incrementAsync = () => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementAsync}>Increment Async</button>
    </div>
  );
};

A) The count increases immediately after the button is clicked.

B) The count increases after a delay of 1 second.

C) The count does not change.

Answer: C) The count does not change.

When the ‘Increment Async’ button is clicked, the count does not change immediately because the setTimeout callback is executed asynchronously after a delay of 1 second. The setCount function captures the initial value of count and does not update it correctly.

10. Which hook is used for managing complex state transitions and actions in React like redux?

A) useState

B) useReducer

C) useContext

Answer: B) useReducer

The useReducer hook in React is used for managing complex state transitions and actions. It follows the Redux pattern and is suitable for handling more advanced state management scenarios.

Visit https://quizzesforyou.com for more such quizzes

JavaScript Quiz #07 - Understanding Control Flow in JavaScript

Quizzesforyou — Sat, 15 Jul 2023 18:38:41 +0000

Checkout the interactive quiz of this article https://quizzesforyou.com/quiz/jscontrolflow

Control flow in JavaScript determines the order in which statements are executed. In this article, we will explore the concept of control flow, including conditional statements, loops, branching techniques, and additional control flow features.

1. Conditional Statements:

Conditional statements allow making decisions based on conditions.
Common conditional statements: “if,” “else if,” and “else.”

if (condition1) {
 // code executed if condition1 is true
} else if (condition2) {
 // code executed if condition1 is false and condition2 is true
} else {
 // code executed if both condition1 and condition2 are false
}

2. Switch Statements:

Switch statements offer an alternative to multiple if-else statements.
They evaluate an expression and execute code based on its value.
Useful for testing specific values or performing different actions.

switch (expression) {
 case value1:
 // code executed if expression matches value1
 break;
 case value2:
 // code executed if expression matches value2
 break;
 default:
 // code executed if expression doesn't match any case
 break;
}

3. Loops:

Loops allow repetitive execution of code.
Types of loops: “for,” “while,” and “do-while.”

for (let i =0; i< 10; i++) {
 // code executed repeatedly until condition becomes false
}

while (condition) {
 // code executed repeatedly while condition is true
}

do {
 // code executed at least once and repeatedly while condition is true
} while (condition);

4. Branching Techniques:

Ternary Operator:

A concise way to express conditional statements in a single line.
Evaluates a condition and returns one of two values.

const result = (condition) ? value1 : value2;

Short-Circuit Evaluation:

Uses logical operators “&&” and “||” to conditionally execute code.
Relies on truthy or falsy values to determine evaluation.

const value = someVariable || defaultValue;

5. Additional Control Flow Features:

Continue Statement:

Used within loops to skip the current iteration and move to the next one.

for (let i = 0; i < 5; i++) {
 if (i === 2) {
 continue; // Skips iteration when i equals 2
 }
 console.log(i);
 }
 // Output: 0, 1, 3, 4

“fallthrough” in Switch Statements:

In JavaScript, switch statements have implicit “fallthrough” behavior by default.
If a matching case block doesn’t have a “break” statement, execution continues to the next case block.
To prevent a “fallthrough,” the “break” statement is used to exit the switch statement.

switch (expression) {
 case value1:
 // code executed if expression matches value1
 break;
 case value2:
 // code executed if expression matches value2
 // fallthrough to the next case intentionally
 case value3:
 // code executed if expression matches value2 or value3
 break;
 default:
 // code executed if expression doesn't match any case
 break;
 }

Control flow is essential in JavaScript for making decisions, repeating tasks, and navigating code execution paths.

Checkout the interactive quiz of this article https://quizzesforyou.com/quiz/jscontrolflow

1. What is the output?

for (let i = 0; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

A) 0 1 2 3 4 5

B) 0 1 2 4 5

C) 0 1 2 4

D) 0 1 2 3 4

Answer: B) 0 1 2 4 5

During each iteration, the code checks if i is equal to 3. If it is, then continue the statement is executed, skipping the current iteration

2. What is the output?

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

A) 0 1 2

B) 0 1

C) 0 1 2 3

D) 1 2

Answer: A) 0 1 2

3. What is the output?

const value = null || "Default";
console.log(value);

A) null

B) “Default”

C) true

D) false

Answer: B) “Default”

null is considered falsy in JavaScript. Since the left operand is falsy, the expression moves to evaluate the right operand, which is the string "Default". The string is a truthy value, so it is returned as the final value of the expression.

4. What is the output?

let num = 5;
const result = num && "Value exists";
console.log(result);

A) 5

B) “Value exists”

C) true

D) false

Answer: B) “Value exists”

In this case, the left operand num has a truthy value (since it is a non-zero number). Therefore, the expression moves to evaluate the right operand, which is the string "Value exists". The string is also a truthy value.As a result, the expression num && "Value exists" returns the right operand, which is the string "Value exists"

5. What is the output?

let num = 3;
while (num > 0) {
  console.log(num);
  num -= 2;
}

A) 3 1

B) 3

C) 3 0

D) 3 2 1

Answer: D) 3 1

6. What is the output?

const value = "" || 0 || false || "Fallback";
console.log(value);

A) “ ”

B) 0

C) false

D) “Fallback”

Answer: D) “Fallback”

The logical OR operator (||) performs short-circuit evaluation. It returns the first truthy operand encountered or the last falsy operand if all operands are falsy. In this case, the first three operands ("", 0, and false) are falsy, and the last operand, "Fallback", is the first truthy operand. Therefore, the value assigned to value will be "Fallback".

7. What is the output?

const a = 5;

function foo() {
  if (a === 5) {
    let a = 10;
  }
  console.log(a);
}

foo();

foo();

A) 5

B) 10

C) undefined

Answer: A) 5

The variable a inside the if block is block-scoped using the let keyword, so it does not affect the value of the outer a variable. Therefore, when console.log(a) is executed, it refers to the outer a, which is assigned the value of 5.

8. What is the output?

let x = 0;
while (x < 10) {
  if (x === 5) {
    break;
  }
  x++;
}
console.log(x);

A) 5

B) 6

C) 9

D) 10

Ans: A) 5

The code initializes x with 0 and enters a while loop that continues as long as x is less than 10. Inside the loop, it checks if x is equal to 5. If so, the break statement is executed, terminating the loop. Therefore, the final value of x is 5.

9. What is the output?

let x = 2;
let result = '';
switch (x) {
  case 1:
    result += 'A';
  case 2:
    result += 'B';
  case 3:
    result += 'C';
  default:
    result += 'D';
}
console.log(result);

A) AB

B) ABC

C) BCD

D) BD

Answer: C) BCD

In this switch statement, since the value of x is 2, it matches the case 2 label. When a matching case label is found, the code block for that case is executed, as well as the code blocks for any subsequent cases without a break statement so the flow continues till default printing BCD.

Check out more quizzes@ https://quizzesforyou.com/

React Quiz #02 — Class Components vs Functional Components in React

Quizzesforyou — Fri, 14 Jul 2023 14:31:41 +0000

Check out the interactive React Class vs Functional component quiz *https://quizzesforyou.com/quiz/react*classvsfunctional

React, a popular JavaScript library for building user interfaces provides developers with two fundamental approaches for creating reusable and modular components class components and functional components. Let's explore them in this article,

Class Components:

Class components were the primary way of creating components in React before the introduction of React Hooks in version 16.8.
They encapsulate the component’s logic, state, and lifecycle methods.
Class components are suitable for complex and stateful components.

State and Lifecycle:

Class components can manage the state using the internal state object.
State updates trigger the re-rendering of the component.
Lifecycle methods (e.g., componentDidMount(), componentDidUpdate(), componentWillUnmount()) allow performing actions at specific stages of a component’s lifecycle.

Example of a Class Component:

class Counter extends React.Component {
    constructor(props) {
         super(props);
         this.state = {
             count: 0
         };
     }

    componentDidMount() {
         console.log('Component mounted');
     }
    componentDidUpdate() {
         console.log('Component updated');
     }
    componentWillUnmount() {
         console.log('Component will unmount');
     }
    // … Remaining code …
}

Functional Components:

Functional components are defined as plain JavaScript functions that return JSX elements.
They are suitable for simpler components that don’t require state management or lifecycle methods.
Functional components are easier to understand, test, and maintain.

No State or Lifecycle:

Functional components do not have an internal state or lifecycle methods.
They receive data as props and render JSX based on that data.

Example of a Functional Component:

import React from 'react'; 
const Greeting = ({ name }) => 
     return <h1>Hello, {name}!</h1>;
};

React Hooks:

Hooks were added to React in version 16.8
React hooks, such as useState and useEffect, allow functional components to manage state and perform side effects.
Hooks enhance functional components and make them more versatile for managing state and lifecycle behavior.

Lifecycle Methods and Equivalent Hooks:

React hooks provide equivalents to the lifecycle methods found in class components.

The table above shows the class component lifecycle methods on the left column and their equivalent React Hooks on the right column.

Since version 16.8, React Recommends Functional components as they offer several benefits over class components.

In summary, Functional components in React enhances code readability, simplify testing, improve performance, and facilitate easier debugging.

Check out the interactive React Class vs Functional component quiz https://quizzesforyou.com/quiz/reactclassvsfunctional

1. Which component type is recommended for leveraging React’s error boundary concept?

a) Functional component

b) Class component

c) Both types can be used with error boundaries

Answer: b) Class component

Still[current version 18.2] Class components are recommended for utilizing React’s error boundary concept. Error boundaries are created by extending the React.Component class and implementing the componentDidCatch and static getDerivedStateFromError lifecycle methods, which are only available in class components. Error Boundaries can be also implemented in the Functional component.

2. Which hook can be used to replicate the behavior of "componentDidUpdate" with specific state or prop values to watch for changes?

a) useEffect(() => {...}, [])

b) useEffect(() => {...}, [state/prop])

c) useEffect(() => { return () => {...} }, [])

Answer: b) useEffect(() => {...}, [state/prop])

The useEffect hook with a dependency array containing the state or prop values to watch for changes replicates the behavior of componentDidUpdate and is triggered when those values change.

3. Which component type allows better optimization for code-splitting and lazy loading?

a) Functional components

b) Class components

c) Both component types offer the same level of optimization for code-splitting

Answer: a) Functional components

Functional components, especially when used with React’s lazy loading and Suspense features, provide better optimization for code-splitting. They enable more granular control over loading components on-demand, improving performance and reducing bundle size.

4. Which lifecycle method is used to perform state updates after a class component has been re-rendered?

a) componentDidUpdate

b) shouldComponentUpdate

c) componentWillReceiveProps

Answer: a) componentDidUpdate

The componentDidUpdate lifecycle method is invoked after a component has been re-rendered, allowing for state updates or additional side effects based on the new props or state values.

5. Which hook provides similar functionality to componentWillUnmount in class components?

a) useEffect(() => { return () => {...} }, [])

b) useMemo

c) React.memo

Answer: a) useEffect(() => { return () => {...} }, [])

The useEffect hook with a cleanup function returned replicates the behavior of componentWillUnmount and is triggered when the component is unmounted.

6. React Class components are simpler to test and lead to better performance when compared to Functional components.

a) True

b) False

Ans: False

7. What is the equivalent hook for the shouldComponentUpdate lifecycle method in class components?

a) useState

b) useMemo

c) useEffect

Answer: b ) useMemo

8. Which lifecycle method should be used in a class component to prevent unnecessary re-renders?

a) shouldComponentUpdate

b) componentDidUpdate

c) componentWillReceiveProps

Answer: a) shouldComponentUpdate

The shouldComponentUpdate lifecycle method allows developers to control whether a component should re-render or not, preventing unnecessary re-renders and optimizing performance.

9. What is the equivalent hook for getSnapshotBeforeUpdate in class components?

a) useEffect(() => {...}, [])

b) useMemo

c) There is no direct hook equivalent

Answer: c) There is no direct hook equivalent

While React Hooks provide alternatives for most lifecycle methods, there is currently no direct hook equivalent for getSnapshotBeforeUpdate. However, its functionality can be achieved using refs or other approaches specific to the use case.

10. Which hook can be used to achieve the behavior of getDerivedStateFromProps in class components?

a) useMemo

b) useEffect

c) Both useMemo and useEffect

Answer: c) Both useMemo and useEffect

Both useMemo and useEffect can be used to achieve the behavior of getDerivedStateFromProps, depending on the specific use case and requirements of the component.

Visit https://quizzesforyou.com for more such quizzes

Swift Quiz #07 - Swift Control flow

Quizzesforyou — Sat, 08 Jul 2023 20:18:40 +0000

In Swift, control flow refers to the flow of execution through a program based on conditions, loops, and other control structures. Here’s a summary of the control flow constructs in Swift

1. Conditional Statements:

if statement: Executes a block of code only if a condition is true.
if-else statement: Executes one block of code if a condition is true and another block if it’s false.
if-else statement: Allows multiple conditions to be checked sequentially, executing the block associated with the first true condition.

2. Switch Statement:

switch statement: Evaluates an expression against different cases and executes the block associated with the matched case. It supports a variety of patterns and can include default cases and fallthrough behavior.

3. Loops:

for-in loop: Iterates over a sequence, such as an array or a range, executing a block of code for each element.
while loop: Executes a block of code repeatedly as long as a condition is true.
repeat-while loop: Similar to the while loop, but it guarantees the block of code is executed at least once, even if the condition is initially false.

4. Control Transfer:

break statement: Terminates the execution of a loop or switch statement and transfers control to the next line of code.
continue statement: Skips the remaining code in a loop iteration and moves to the next iteration.
fallthrough statement: Used in a switch statement to execute the code in the next case block, even if it doesn’t match the condition.

5. Early Exit:

guard statement: Provides an early exit from a block of code if a condition is not met. It is often used to validate input or perform optional binding.

6. Defer Statement:

defer statement: Executes a block of code just before the current scope is exited, regardless of how the scope is exited. It is commonly used for cleanup tasks and ensures that necessary actions are performed before leaving a scope.

7. Checking API Availability:

if #available statement: Allows conditional execution of code based on the availability of specific APIs on different versions of the operating system or frameworks. It ensures that code is only executed when the required APIs are available.

1. What value does the function calculate() return?

    func calculate() -> Int {
        var result = 0
        for i in 1...5 {
            if i % 2 == 0 {
                result += i
            } else {
                result -= i
            }
        }
        return result
    }

a) 3

b) -3

c) 0

d) 6

Ans: b) -3

The for loop iterates over the range 1…5. When i is even, it adds to the result; when i is odd, it subtracts from the result. The final value of result is -3.

2. Which of the following control flow statements in Swift can be used to exit the current iteration of a loop?

a) break

b) continue

c) return

d) All of the above

Ans: d) All of the above.

3. What is the output?

    func printNames() {
        let names = ["John", "Amy", "Emily", "Michael"]
        for name in names {
            if name == "Amy" {
                continue
            }
            print(name)
            if name == "Emily" {
                break
            }
        }
    }

a) John

b) John Emily

c) John Amy Emily

d) John Amy Emily Michael

Ans: b) John Emily

The for-in loop iterates over the names array. When name is “Amy”, the continue statement skips the remaining code and moves to the next iteration. So, “Amy” is not printed. When name is “Emily”, the break statement terminates the loop. Therefore, only “John” and “Emily” are printed.

4. What is the primary difference between the if and guard statements in Swift?

a) if for early exit, while the guard is for condition checking.

b) if for multiple conditions checking, while the guard for optional unwrapping.

c) if must have an else, while guard need not.

d) if can be used in any scope, while the guard can only be used in functions or methods.

Ans: a) if for early exit, while the guard is for condition checking.

5. What is the output?

    func calc() {
        defer {
            print("Step 3")
        }
        print("Step 1")
        defer {
            print("Step 4")
        }
        print("Step 2")
    }

a) Step 1 Step 2 Step 3 Step 4

b) Step 1 Step 2 Step 4 Step 3

c) Step 2 Step 1 Step 3 Step 4

d) Step 2 Step 1 Step 4 Step 3

Ans: b) Step 1 Step 2 Step 4 Step 3

The defer statements are executed in the reverse order they are written, but after the current scope is exited. The defer block acts like a stack.

6. What is the output?

    func calc() -> Int {
        var x = 10
        repeat {
            x += 5
        } while x < 30
        return x
    }

a) 10

b) 15

c) 25

d) 30

Ans: d) 30

The repeat-while loop increments x by 5 in each iteration. It continues until x becomes 30 or more.

7. What is the output when executed on iOS 16?

    func checkOS() {
        let condition = false
        if #available(iOS 14, *) {
            print("Running on iOS 14 or later")
        } else {
            print("Running on earlier iOS version")
        }
    }

a) Running on iOS 14 or later

b) Running on earlier iOS version

Ans: a) Running on iOS 14 or later

8. What is the output?

    func printChars() -> String {
        var result = ""
        for i in 1...3 {
            switch i {
            case 1, 3:
                result += "A"
            case 2:
                result += "B"
            default:
                result += "C"
            }
        }
        return result
    }

a) ABC

b) AB

c) ABA

Ans: c) ABA

9. What is the output?

    func example() {
        var x = 10
        defer {
            x += 5
        }
        if x > 5 {
            print(x)
            return
        }
        print(x - 5)
    }

a) 10

b) 15

c) 5

Ans: a) 10

Here the function returns before any mutation to value X hence the print inside if statement prints 10

Visit https://quizzesforyou.com for more such quizzes

References: https://docs.swift.org/swift-book/documentation/the-swift-programming-language/controlflow

React Quiz on JSX #01: React JSX complete guide

Quizzesforyou — Fri, 07 Jul 2023 20:25:40 +0000

Check out the interactive React JSX quiz @ https://quizzesforyou.com/quiz/reactjsx

JSX Quick Refresher:

JSX Syntax: JSX — JavaScript XML is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It provides a concise and familiar syntax for creating React elements. Here’s an example:

    const element = <h1>Hello, JSX!</h1>;

2. Rendering JSX Elements: JSX elements can be rendered by using them within the ReactDOM.render() method. Here's an example:

    const element = <h1>Hello, JSX!</h1>;
    ReactDOM.render(element, document.getElementById('root'));

3. Embedding Expressions: JSX allows you to embed JavaScript expressions within curly braces {}. This allows you to dynamically generate content. Here's an example:

    const name = 'John Doe';
    const element = <h1>Hello, {name}</h1>;

4. Using CSS Classes: To add CSS classes to JSX elements, the className attribute can be used which is equivalent to the class attribute in HTML. Here's an example:

    const element = <div className="container">Hello, JSX!</div>;

5. Conditional Rendering: JSX elements can be conditionally rendered using JavaScript expressions. Here’s an example using the ternary operator:

const isLoggedIn = true; 
const element = isLoggedIn ? Welcome, user! : Please log in.

6. Mapping over Arrays: map() function can be used to dynamically render JSX elements based on the contents of an array. Here's an example:

const numbers = [1, 2, 3];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);
const element = <ul>{listItems}</ul>;

7. Handling Events: JSX allows to define event handlers using the onEventName attribute. Here's an example of handling a button-click event:

function handleClick() { console.log('Button clicked!'); }

8. Fragment: Multiple elements can be rendered without a parent wrapper using a React Fragment. It helps avoid unnecessary div nesting. Here’s an example:

const element = (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);

Check out the interactive quiz @ https://quizzesforyou.com/quiz/reactjsx

1. Which is the correct way to add comments in JSX?

a) { This is a comment /}

b) // This is a comment

c) / This is a comment */

Answer: a) {/* This is a comment */}

In JSX, comments are written inside curly braces {} and wrapped with opening and closing curly braces.

2. What will be the output of this JSX code?

const name = "Alice";
const element = <h1>Hello, {name}</h1>;

a) Hello, {name}

b) Hello, Alice

c) <h1>Hello, {name}</h1>

d) Error

Answer: b) Hello, Alice The JSX code uses curly braces {} to embed the value of the name variable within the JSX element.

3. What will be the output of this JSX?

const element = (
 <>
   <h1>{1 + 1}</h1>
   <p>{true ? "Yes" : "No"}</p>
   <p>{null}</p>
   <p>{undefined}</p>
 </>
);

a) A fragment with an h1 element containing “2”, a p element with “Yes” and two empty strings, respectively.

b) An error due to JSX rendering null and undefined.

c) A fragment with an h1 element containing “2” and three p elements with “Yes”, “null”, and “undefined”, respectively.

d) An error due to using the conditional operator in JSX.

Answer: a) A fragment with an h1 element containing “2”, a p element with “Yes” and two empty strings, respectively.

The JSX code evaluates expressions within curly braces {}. The arithmetic expression is evaluated to “2”, the ternary operator evaluates to “Yes” since it’s true, and null and undefined are rendered as empty strings.

4. What is the purpose of the “dangerouslySetInnerHTML” prop in React JSX?

a) It is used to sanitize HTML input and prevent XSS attacks.

b) It is used to set the inner HTML of an element.

c) It is used to bypass React’s XSS protection.

Answer: b) It is used to set the inner HTML of an element.

The “dangerouslySetInnerHTML” prop is used when you want to set the inner HTML of an element directly. It should be used with caution, as it can potentially expose your application to cross-site scripting (XSS) attacks.

5. What will be the output of this JSX?

const element = <input value="React" onChange={() => {}} />;

a) The input field will display “React” and the onChange event will trigger an empty function.

b) The input field will display “React” but the onChange event will not be triggered.

c) The input field will be empty and the onChange event will trigger an empty function.

d) The input field will be empty and the onChange event will not be triggered.

Answer: a) The input field will display “React” and the onChange event will trigger an empty function.

The JSX code sets the value prop of the input element to “React” and attaches an empty onChange event handler.

6. What is the correct way to conditionally render elements in JSX?

a) {condition ? <Component /> : null}

b) {condition && <Component />}

c) Both options are correct.

Answer: c) Both options are correct.

Both options are valid ways to conditionally render elements in JSX. Option a) uses the ternary operator, and option b) uses the logical AND operator.

7. What will be the output of this JSX?

const numbers = [1, 2, 3];
const element = (
 <ul>
 {numbers.map((number) => (
 <li>{number}</li>
 ))}
 </ul>
);

a) An unordered list with three list items: 1, 2, and 3.

b) An unordered list with a single list item: [object Object].

c) An error due to the missing key prop in the list items.

Answer: a) An unordered list with three list items: 1, 2, and 3.

The JSX code maps over the numbers array and creates a list item for each element, without using a key prop and a related warning would appear on the console.

8. How do you access the value of an input field in React JSX?

a) event.value

b) event.target.value

c) input.value

Answer: b) event.target.value

In React JSX, you can access the value of an input field through the “event” object using “event.target.value”.

9. What will be the JSX bases on the “condition”?

const condition = false;
const element = (
 <div>
 {condition ? <p>Condition is true</p> : <p>Condition is false</p>}
 </div>
);

a) <div><p>Condition is true</p></div>

b) <div><p>Condition is false</p></div>

c) <div>Condition is true</div>

d) <div>Condition is false</div>

Answer:

b) <div><p>Condition is false</p></div>

10. What is the purpose of the “className” prop in React JSX?

a) It is used to define the class name for a component.

b) It is used to add CSS styles to a component.

c) It is used to set the CSS class for an element.

Answer: c) It is used to set the CSS class for an element.

Visit https://quizzesforyou.com for more such quizzes

JavaScript Quiz #06 — Truthy and Falsy Values

Quizzesforyou — Sun, 02 Jul 2023 18:24:41 +0000

Checkout the interactive quiz https://quizzesforyou.com/quiz/jstruthyfalsy

In JavaScript, values can be classified as either truthy or falsy. Knowing which values are considered truthy or falsy allows you to write more concise and effective code. Let’s explore truthy and falsy values in JavaScript with code examples.

Truthy Values:

Truthy value is any value that is considered true when evaluated in a Boolean context. The following values are considered truthy:

Non-empty strings: Any string that contains at least one character is considered truthy.

var name = "John";  
if (name) {  
console.log("Hello, " + name);  
}

Output: "Hello, John"

2. Numbers: Any nonzero number (positive or negative) is considered truthy.

var count = 42;  
if (count) {  
console.log("Count is: " + count);  
}

Output: "Count is: 42"

3. Objects: Any JavaScript object, including arrays and functions, is considered truthy.

var person = {  
name: "Alice",  
age: 25  
};  
if (person) {  
console.log("Person's name is: " + person.name);  
}

Output: "Person's name is: Alice"

4. Arrays: Even an empty array is considered truthy.

var myArray = \[\];  
if (myArray) {  
console.log("Array is not empty");  
}

Output: "Array is not empty"

Falsy Values:

A falsy value is any value that is considered false when evaluated in a Boolean context. The following values are considered falsy:

Empty strings: An empty string, represented by “ ”, is considered falsy.

var username = "";  
if (!username) {  
console.log("Please provide a username");  
}
Output: "Please provide a username"

2. Zero: The number zero (0) is considered falsy.

var quantity = 0;  
if (!quantity) {  
console.log("No items in the cart");  
}
Output: "No items in the cart"

3. NaN: The special value NaN (Not a Number) is considered falsy.

var result = parseInt("abc");  
if (!result) {  
console.log("Invalid number");  
}

Output: "Invalid number"

4. null and undefined: Both null and undefined are considered falsy.

var data = null;  
if (!data) {  
console.log("No data available");  
}
Output: "No data available"

Checkout the interactive quiz https://quizzesforyou.com/quiz/jstruthyfalsy

What is the output?

console.log(!!"0");

a) true

b) false

c) 0

Answer: a) true

The code snippet uses the double negation (!!) operator, which coerces the value to its corresponding boolean representation. In JavaScript, any non-empty string is considered truthy. Therefore, “0” is coerced to true, and the result is true.

2. What is the output?

var x = " ";  
console.log(Boolean(x));

a) true

b) false

c) “ “

Answer: a) true

The Boolean() function is used to explicitly convert a value to its boolean representation. In JavaScript, an empty string is considered falsy, but a string with a single space character (“ “) is considered truthy. Therefore, Boolean(x) evaluates to true, and the result is true.

3. What is the output?

console.log(Boolean(Symbol()));

a) true

b) false

c) Symbol

Answer: a) true

A JavaScript Symbol is considered a truthy value. Therefore, Boolean(Symbol()) evaluates to true, and the result is true.

4. Which of the following values is considered falsy in JavaScript?

a) “0”

b) {}

c) []

d) -1

Answer: a) “0”

“0” is considered falsy, while objects (including empty objects {}) and arrays (including empty arrays []) are considered truthy. The number -1 is also truthy.

5. What is the output?

console.log(0 || "Hello" && (null ?? true));

a) 0

b) “Hello”

c) null

d) true

Answer: d) true

0 || "Hello" evaluates to "Hello" because 0 is falsy and the OR operator returns the first truthy value encountered."Hello" && null evaluates to null because the AND operator returns the last falsy value encountered.null ?? true evaluates to true because null is considered falsy, and the nullish coalescing operator provides the default value true.

Therefore, the result is true.

6. What is the output?

console.log("" === false);

a) true

b) false

Answer: b) false

The strict equality operator (===) compares the value and the type of the operands. In this case, an empty string ("") is a falsy value, while false is a boolean value. Since they have different types, the comparison evaluates to false.

7. What is the output?

console.log(Boolean(-42));

a) true?

b) false

c) 0

Answer: a) true

any nonzero number is considered truthy, including the negative number -42. Therefore, Boolean(-42) evaluates to true, and the result is true

8. What is the output?

let obj = {  
   prop1: {  
       prop2: null  
    }  
};

console.log(obj.prop1?.prop2 ?? "Default value");

a) null

b) “Default value”

c) false

Answer: b) “Default value”

The code snippet uses optional chaining (?.) to check if obj.prop1.prop2 is defined. If it is not defined or evaluates to null or undefined, the nullish coalescing operator (??) provides a default value of "Default value". In this case, obj.prop1.prop2 is null, so the result is "Default value".

9. What is the output?

console.log(Boolean(-0))

a) true

b) false

c) 0

Ans: false

Both positive zero (+0) and negative zero(-0) are considered falsy.

Check more quizzes@ https://quizzesforyou.com/

References: https://developer.mozilla.org/en-US/docs/Glossary/Truthy

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

JavaScript Quiz #05 — Type Conversion and Coercion

Quizzesforyou — Sun, 02 Jul 2023 17:57:41 +0000

Topics: Type conversion and Type coercion

Checkout the interactive quiz https://quizzesforyou.com/quiz/jstypeconversion

Type conversion and Coercion are important concepts in JavaScript that deal with converting values from one type to another.

What is Type Coercion?

Coercion refers specifically to implicit type conversion, where JavaScript automatically converts the type of a value to match the type expected by an operation.

What is Explicit Type Conversion?

Explicit type conversion, also known as type casting, involves manually converting a value from one type to another.

A quick refresher on the concepts:

Implicit Type Conversion (Coercion):

Coercion occurs when you perform operations between values of different types.
JavaScript tries to automatically convert the type of one value to match the other value so that the operation can proceed.
Coercion is commonly observed when using operators like ‘+’, \*\, or when using the loose equality operator (==\).

Points to remember:

Concatenating a number and a string: When you add a number and a string using the +\ operator, JavaScript converts the number to a string and performs concatenation.
Multiplying a number with a string: When you multiply a number and a string using the \*\ operator, JavaScript converts the string to a number before performing the multiplication.
Coercion can also occur with other operators and data types.

// Implicit Type Conversion (Coercion) Example  
const result = 42 + " is the answer.";  
console.log(result); // "42 is the answer."  
console.log(typeof result); // "string"

2. Loose Equality Operator (==):

The loose equality operator checks if the values are equal, disregarding their types.
If the values have different types, coercion occurs before the comparison.

// Loose Equality Operator Example  
const x = true;  
const y = "1";  
console.log(x == y); // true

x is a boolean value (true) and y is a string value ("1"), coercion occurs. The boolean value true is coerced to a numeric value, which becomes 1. Then the comparison takes place between 1 and "1".

During the comparison, JavaScript converts the string "1" to a numeric value, which is also 1. Now both values are of the same type (number), and their values are equal (1).

3. Strict Equality Operator (===):

The strict equality operator checks if the values are equal and also compares their types.
It does not perform any type coercion.

const x = true;  
const y = "1";  
console.log(x === y); // false

When using the strict equality operator (===), both the values and types of the operands are compared without any coercion. In this case, x is a boolean and y is a string.

Since true and "1" have different types (boolean and string respectively), the strict equality comparison evaluates to false, indicating that the values and types are not equal without type conversion.

4. Explicit Type Conversion (Type Casting):

Explicit type conversion involves manually converting a value from one type to another using type constructors or functions.
Type casting allows you to control the conversion process and ensure that the values have the desired types.

Common type constructors/functions used for type casting include String()\, Number()\, Boolean()\, etc.

Use Cases for Explicit Type Conversion:

When you need to convert a value to a specific type for a particular operation or comparison.
For example, when working with data from an API, you might need to convert string values to numbers explicitly before performing numeric operations.

// Explicit Type Conversion (Type Casting) Example  
const number = 3.14;  
const integerNumber = parseInt(number);  
console.log(integerNumber); // 3  
console.log(typeof integerNumber); // "number"

It’s generally recommended to use the strict equality operator (===\) for comparing values to avoid unexpected results caused by coercion. However, understanding coercion and being aware of its implications can be useful when working with JavaScript.

Remember to consider the context and requirements of your code to determine when and how to use type conversion or handle coercion effectively.

Checkout the interactive quiz https://quizzesforyou.com/quiz/jstypeconversion

What is the output?

const a = 3;  
const b = "5";  
console.log(a + b);

a) 8

b) “8”

c) 35

Answer: c) 35

In this case, the + operator performs string concatenation instead of numerical addition because one of the operands is a string. The resulting value is the concatenation of the string representation of a with b.

2. What is the output?

const x = "10" - 2;  
console.log(x);

a) “10”-2

b) “8”

c) 8

Answer: c) 8

The - operator performs numerical subtraction. Since "10" can be converted to a number, the subtraction operation takes place, resulting in the numerical value of 8.

3. What is the output?

const a = true;  
const b = 2;  
console.log(a + b);

a) 3

b) NaN

c) true2

Answer: a) 3

true is coerced to 1 and the + operator performs numerical addition. Therefore, a + b results in 3.

4. What is the output?

const x = "20" \* 4;  
console.log(x);

a) 24

b) 80

c) NaN

Answer: b) 80

The * operator performs numerical multiplication. The string "20" is converted to a number and the multiplication operation takes place, resulting in the numerical value of 80.

5. What is the output?

const a = null;  
const b = 5;  
console.log(a + b);

a) 5

b) null5

c) NaN

Answer: a) 5

when performing an arithmetic operation involving null and a numeric value, the null value is coerced to 0. Therefore, the expression a + b becomes 0 + 5, resulting in 5.

6. What is the output?

const a = "Hello";  
const b = " World";  
console.log(a - b);

a) NaN

b) “Hello World”

c) Undefined

Answer: a) NaN

The - operator is not defined for strings, so the subtraction operation between strings results in NaN (Not-a-Number).

7.What is the output?

const a = 0;  
const b = false;  
console.log(a == b);

a) true

b) false

c) Type Error

Answer: a) true

The loose equality operator (==) performs type coercion. In this case, false is converted to the number 0, and then the comparison takes place, resulting in true.

8. What is the output?

const x = null == undefined;  
console.log(x);

a) true

b) false

c) Reference Error

Answer: a) true

The loose equality operator (==) considers null and undefined as equal values, resulting in true.

9. What is the output?

const x = \[\] == "";  
console.log(x);

a) true

b) false

c) Error

Answer: a) true

The loose equality operator (==) performs type coercion. In this case, the empty string "" is converted to an empty array [], and then the comparison takes place, resulting in true.

10. What is the output?

const x = "0" === 0;  
console.log(x);

a) true

b) false

c) NaN

Answer: b) false

The strict equality operator (===) does not perform type coercion. In this case, "0" is a string and 0 is a number, so they are not considered equal.

Check more quizzes@ https://quizzesforyou.com/

References: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion

Swift Quiz #04: Swift Strings and Characters

Quizzesforyou — Sun, 02 Jul 2023 16:19:41 +0000

Checkout the interactive quiz of this story here https://quizzesforyou.com/quiz/swiftstringscharacters

Quick Refresher:

String literals: String can be created by enclosing a sequence of characters within double quotation marks. For example:

let greeting = "Hello, world!"

2. Multiline string literals: Multiline strings can be created by enclosing the characters within three double quotation marks. Line breaks and indentation are preserved in multiline strings. For example:

let multilineString = """  
This is a  
multiline  
string.  
"""

3. Special characters: String literals can include special characters such as newline (\n), tab (\t), and Unicode scalar values (\u{n}). For example:

let specialString = "Special characters: \\n\\t\\u{2665}"

4. String interpolation: You can include variables, constants, expressions, and literals within a string using string interpolation. It’s denoted by the backslash followed by parentheses within a string literal. For example:

let name = "Alice"  
let age = 30  
let message = "My name is \\(name) and I'm \\(age) years old."

5. String concatenation: You can concatenate two strings using the + operator or the += operator to append a string to an existing one. For example:

let str1 = "Hello"  
let str2 = "World"  
let combinedString = str1 + ", " + str2

6. String mutability: String can be either mutable or immutable. You can use the var\ keyword to create a mutable string and the let\ keyword to create an immutable string. For example:

var mutableString = "Mutable"  
mutableString += " String" // Modifying the string  
let immutableString = "Immutable"  
immutableString += " String" // Error: Cannot modify an immutable string

7. String indexing: Individual characters in a string can be accessed by iterating over it or using subscript syntax. Strings in Swift are represented as a collection of Character\ values. For example:

let str = "Hello"  
for char in str {  
print(char)  
}

//prints  
H  
e  
l  
l  
o

let firstChar = str\[str.startIndex\] // Accessing the first character  
let lastChar = str\[str.index(before: str.endIndex)\] // Accessing the last character

8. Strings can be iterated using the indices\ property.

let greeting = "Hello"  
for index in greeting.indices {  
print("\\(greeting\[index\]) ")  
}  
// Output: H e l l o

9. String manipulation methods like insertion and removal allow you to modify strings.

var welcome = "hello"  
welcome.insert("!", at: welcome.endIndex) // Inserting a character at the end  
welcome.insert(contentsOf: " there", at: welcome.index(before: welcome.endIndex)) // Inserting a string before the last character  
welcome.remove(at: welcome.index(before: welcome.endIndex)) // Removing the last character

10. Substrings are temporary views into a string and can be converted to strings when needed.

let greeting = "Hello, world!"  
let substring = greeting\[..&lt;greeting.firstIndex(of: ",")!\] // Getting a substring from the start until the comma  
let newString = String(substring) // Converting the substring to a string

11. String and character equality can be checked using the ==\ and !=\ operators. Prefix and suffix equality can be checked using the hasPrefix(\_:)\ and hasSuffix(\_:)\ methods.

let str1 = "apple"  
let str2 = "apple"  
if str1 == str2 {  
print("Strings are equal")  
}  
let word = "Swift programming"  
if word.hasPrefix("Swift") {  
print("String starts with 'Swift'")  
}  
if word.hasSuffix("programming") {  
print("String ends with 'programming'")  
}

Quizzes:

Checkout the interactive quiz of this story here https://quizzesforyou.com/quiz/swiftstringscharacters

What is the Output?

let str = "Hello, World!"  
let substring = str.prefix(5)
print(substring)

a) Hello

b) World

c) Hello,

Answer: a) Hello

The code uses the prefix(_:) method to create a substring from the beginning of the string with a length of 5 characters. In this case, the substring is "Hello".

2. What is the output?

let str = #"This is a "quoted" string."#  
print(str)

a) Syntax Error

b) This is a “quoted” string.

c) #”This is a “quoted” string.”#

Answer: b) This is a “quoted” string.

The code uses a raw string literal with the # prefix to create a string. The double quotes within the string are escaped with a backslash, so they are included in the resulting string.

3. What is the output?

let str = "Hello, World!"  
let count = str.components(separatedBy: "o").count - 1  
print(count)

a) 0

b) 1

c) 2

Answer: c) 2

This code uses the components(separatedBy:) method to split the string into an array of components using the separator "o". The count of the resulting array minus 1 gives the number of occurrences of "o" in the string. In this case, "o" appears twice, so the result is 2.

4. What will be the value of the **str** variable after executing the following code?

var str = "Hello, World!"  
str.remove(at: str.index(str.startIndex, offsetBy: 7))

print(str)

A) Hello, orld!

B) Hello, Wrld!

C) Hello, World

D) Hello, Word!

Answer: B) Hello, Wrld!

The code removes the character at index 7 from the string str. In Swift, string indices are used to access individual characters within a string. In this case, the index str.index(str.startIndex, offsetBy: 7) is used to get the index of the character at position 7, which is the letter 'W'. The remove(at:) method is then called on the string, passing in the obtained index, to remove the character at that position.

After executing the code, the resulting value of str will be "Hello, Wrld!" because the character 'W' at index 7 has been removed from the original string.

5. What is the output?

let str = "Hello, World!"  
let range = str.index(str.startIndex, offsetBy: 7)..&lt;str.endIndex  
let substring = str\[range\]
print(substring)

a) World!

b) Hello, World

c) Hello,

Answer: a) World!

Code uses a range of indices to create a substring from the original string. It specifies the range from index 7 (inclusive) to the end of the string. In this case, the resulting substring is “World!”.

6. What is the output?

let str = "Hello, World!"  
let index = str.firstIndex(of: ",") ?? str.endIndex  
let substring = str\[..&lt;index\]
print(substring)

a) Hello

b) Hello,

c) Hell

Answer: a) Hello

The code finds the first index of the character ‘,’ in the string str using the firstIndex(of:) method. If the comma is found, it assigns the index to the constant index; otherwise, it assigns str.endIndex, which represents the position just after the last character in the string.

Then, a substring of str is created using a partial range up to, but not including, the index obtained earlier. This means the resulting substring includes all the characters from the start of the string up to the comma, excluding the comma itself.

Finally, the value of the substring is printed, which will be "Hello" since it represents the portion of the original string up to the comma character.

What is the output?

let str = "Apple, Banana, Cherry"  
let components = str.split(separator: ",")  
let count = components.count  
print(count)

a) 2

b) 4

c) 3

Answer: c) 3

The code splits the string into an array of substrings using the split(separator:) function, with the comma (",") as the separator. Since there are three comma-separated values in the original string, the resulting array will have three elements. Therefore, the count of the array is 3.

8. Which String function can be used to remove the white spaces?

let str = " Hello, World! "

a) split

b) remove

c ) trimmingCharacters

Answer: c ) trimmingCharacters

Trimming Characters can be used

let trimmedStr = str.trimmingCharacters(in: .whitespaces) // "Hello, World!"

9. What is the output?

let number = 42  
let str = String(number)  
let result = str.count  
print(result)

a) 2

b) 4

c) 42

Answer: a) 2

The code initializes an integer number with the value 42. It then converts the integer to a string using String(number). The resulting string will be "42", and its count will be 2, indicating the number of characters in the string.

10. What is the output?

var str1 = ""  
var str2 = String()

if (str1 == str2) {  
print("Equal")  
} else {  
print("Not Equal")  
}

A) Equal

B) Not Equal

C) Nil Exception

Answer: A) Equal

The code initializes two strings, str1 and str2, with empty values. Both str1 and str2 are empty strings. The condition str1 == str2 checks if the two strings are equal. Since both strings are empty, the condition evaluates to true. Therefore, the code will print "Equal".

Visit https://quizzesforyou.com for more such quizzes

References: https://docs.swift.org/swift-book/documentation/the-swift-programming-language/stringsandcharacters#Extended-String-Delimiters

Swift Quiz #05: Swift Arrays

Quizzesforyou — Sun, 02 Jul 2023 15:45:01 +0000

Topic: Swift Arrays

Check out the interactive quiz https://quizzesforyou.com/quiz/swiftarrays

In Swift, an array is a collection type that allows you to store multiple values of the same type in an ordered list. Arrays are used to group related values together and access them using an index.

Key Concepts:

Mutability: Swift arrays can be mutable or immutable depending on whether you declare them as variables (var) or constants (let). Immutable arrays cannot be modified once defined, while mutable arrays can have elements added, removed, or modified.
Type Safety: Swift arrays are strongly typed, meaning they can only store values of the same type. Once you define the type of an array, you cannot store values of a different type in it.
Dynamic Size: Swift arrays have a dynamic size, which means they can grow or shrink in length as needed. You can append elements to the end of an array using the append() method, insert elements at specific positions using the insert(_:at:) method, and remove elements using the remove(at:) method.
Array Literal: Array can be initialized using an array literal, which is a shorthand way of defining an array. Array literals are created by enclosing a comma-separated list of values inside square brackets []
Value Semantics: Arrays in Swift have value semantics. When you assign an array to a new variable or pass it as a parameter to a function, a new copy of the array is created. This ensures that modifications to one array do not affect other copies.

Quick Refresher:

1. Creating and Initializing Arrays in Swift:

Empty Arrays: To create an empty array, developers can utilize the initializer syntax or the array literal
Initializing with Default Values: Arrays can be initialized with a specific size and default values using the Array(repeating:count:) initializer
Initializing with Values: Values can be directly assigned to an array using an array literal

//Empty Arrays:  

var someInts: \[Int\] \= \[\]  
var anotherInts \= \[Int\]()  

//Initializing with Default Values:  

var threeDoubles \= Array(repeating: 0.0, count: 3)  

// Initializing with Values  
var shoppingList: \[String\] \= \["Eggs", "Milk", "Flour"\]

2. Accessing and Modifying Arrays

Count and Empty Check: number of items in an array can be determined using the count property
To check if an array is empty, use the isEmpty property

// count  
print("The shopping list contains \\(shoppingList.count) items.")  

// Empty check   

if shoppingList.isEmpty {  
    print("The shopping list is empty.")  
} else {  
    print("The shopping list isn't empty.")  
}

Appending and Modifying: Elements can be added to an array using the append(_:) method or the += operator. To modify an existing element, subscript syntax can be used.

// Appending  

shoppingList.append("Bread")  
shoppingList += \["Butter", "Sugar"\]  

//Subscript  

shoppingList\[0\] \= "Bananas"

Inserting and Removing Elements: Items can be inserted at a specific index using the insert(_:at:) method:
To remove an element at a given index, use the remove(at:) method

// Insert  
shoppingList.insert("Apples", at: 1)  

//Remove   
let removedItem \= shoppingList.remove(at: 2)

3. Combining and Transforming Arrays

Combining Arrays: Two arrays with compatible types can be combined using the + operator:
Transforming Arrays: Swift provides powerful higher-order functions to transform arrays. For example, the map(_:), filter, reduce, flatmap functions can be used to apply a transformation to each element:


// combining Arrays  

var fruits \= \["Bananas", "Apples"\]  
var vegetables \= \["Carrots", "Broccoli"\]  
var groceries \= fruits + vegetables  

// Transforming  

let numbers \= \[1, 2, 3, 4, 5\]  
let squaredNumbers \= numbers.map { $0 \* $0 }  

// Sorting an array  
let sortedNumbers \= numbers.sorted()  

// Filtering an array  
let evenNumbers \= numbers.filter { $0 % 2 \== 0 }

4. Iterating over Arrays

For-In Loop: Arrays can be iterated using a for-in loop
Enumerating Arrays To access both the index and value of each item in an array, utilize the enumerated() method


for (index, item) in shoppingList.enumerated() {  
    print("Item \\(index + 1): \\(item)")  
}  

// Enumerating  
for (index, item) in shoppingList.enumerated() {  
    print("Item \\(index + 1): \\(item)")  
}

5. Common Array Operations:

Swift arrays provide several useful operations, such as sorting, filtering, and searching.

6. Storing Callbacks in Arrays:

Arrays in Swift can store values of any type, including functions or closures. This feature enables the storage of callbacks or event handlers in an array, facilitating dynamic behavior in code.

typealias Callback \= () -> Void  

var callbacks: \[Callback\] \= \[\]  

func performTask(withCallback callback: @escaping Callback) {  
    callbacks.append(callback)  
}  

func executeCallbacks() {  
    for callback in callbacks {  
        callback()  
    }  
}

Check out the interactive quiz https://quizzesforyou.com/quiz/swiftarrays

What is the output?

var numbers \= \[1, 2, 3, 4, 5\]  
let transformedNumbers \= numbers.map { $0 \* 2 }  
print(transformedNumbers)

A) [2, 4, 6, 8, 10]

B) [1, 2, 3, 4, 5]

C) [1, 4, 9, 16, 25]

Answer: A

The map(_:) function transforms each element in the numbers array by multiplying it by 2, resulting in the array [2, 4, 6, 8, 10].

2. Which method is used to find the first index of a specific element in an array?

A) index(of:)

B) findIndex(of:)

C) firstIndex(of:)

Answer: C

The firstIndex(of:) method is used to find the first index of a specific element in an array.

3. What is the output?

let names = \["Alice", "Bob", "Charlie"\]  
let result = names.allSatisfy { $0.count >= 3 }  
print(result)

a) true

b) [“Alice”, “Charlie”]

c) [true, true, true]

Answer: a) true

The allSatisfy function is used to check if all elements in the array satisfy a given condition. In this case, the closure { $0.count >= 3 } checks if the length of each name in the names array is greater than or equal to 3. Since all the names in the array ("Alice", "Bob", "Charlie") have lengths of 3 or more characters, the condition is satisfied for all elements, and the output will be true.

4. What is the output?

let numbers \= \[1, 2, 3, 4, 5\]  
let result \= numbers.reduce(3) { $0 + $1 }  
print(result)

a) 15

b) 18

c) 5

Answer: b) 18

The reduce function is used to combine all elements of the numbers array into a single value (result). The initial value is set to 3 (reduce(3)), and the closure $0 + $1 is used to add each element of the array to the accumulated value. So, the output will be the sum of all numbers in the array, which is 18.

5. Which method can be used to check if an array contains a specific element?

A) contains(_:)

B) includes(_:)

C) has(_:)

Answer: A

The contains(_:) method is used to check if an array contains a specific element.

6. What is the output?

let numbers \= \[1, 2, 3, 4, 5\]  
let result \= numbers.filter { $0 % 2 \== 0 }  
              .flatMap { Array(repeating: $0, count: $0) }  
print(result)

a) [2, 2, 4, 4, 4, 4]

b) [0, 0, 0, 0, 0, 0]

c) [[0,0],[0,0,0,0]]

Answer: a) [2, 2, 4, 4, 4, 4]

the filter function is first used to create a new array that contains only the even numbers from the numbers array. Then, the flatMap function is applied to transform each even number into an array of repeating numbers. The resulting array is flattened, resulting in [2, 2, 4, 4, 4], which contains the repeating numbers for each even number in the original array.

7. What is the output?

let names = \["Alice", "Bob", "Charlie"\]  
let result = names.allSatisfy { $0.count >= 3 }  
print(result)

a) true

b) [“Alice”, “Charlie”]

c) [true, true, true]

Answer: a) true

8. What is the output?

let names \= \["Alice", "Bob", "Charlie", "David"\]  
let result \= names.compactMap { $0.count \> 4 ? $0 : nil }  
print(result)

a) [“Alice”, “Bob”, “Charlie”, “David”]

b) [“Alice”, “Charlie”, “David”]

c) [“Bob”, “David”]

Answer: b) [“Alice”, “Charlie”, “David”]

The compactMap function is used to transform each element in the array and remove any resulting nil values. In this case, the closure { $0.count > 4 ? $0 : nil } checks if the length of each name is greater than 4. If it is, the name is returned; otherwise, nil is returned and filtered out. So, the output will be an array containing only the names with lengths greater than 4: [“Alice”, “Charlie”, “David”].

9. What is the difference between map and flatMap when dealing with optionals?

A) map unwraps optionals, while flatMap keeps the optionals intact.

B) map transforms optionals, while flatMap unwraps optionals.

C) There is no difference between map and flatMap when dealing with optionals.

Answer: B

When applied to optionals, map transforms the underlying value if it exists, while flatMap unwraps the optional and applies a transformation that may also return an optional value.

10. What is the output?

let words = \["Hello", "World", "Swift"\]  
let result = words.joined(separator: " ")  
print(result)

a) “HelloWorldSwift”

b) “Hello World Swift”

c) “Hello, World, Swift”

Answer: b) “Hello World Swift”

The joined(separator:) function is used to concatenate the elements of an array into a single string, separated by a specified separator. In this case, the elements of the words array are joined into a single string with a space separator. So, the output will be "Hello World Swift" with spaces between the words.

Visit https://quizzesforyou.com for more such quizzes

References: https://docs.swift.org/swift-book/documentation/the-swift-programming-language/collectiontypes