tw-06.

md 2025-03-22

TW-06 GROUP VERSION

Meeting Agenda
▶ Icebreaking

▶ Workshop Activities - Tuesday

▶ Teamwork Activities - Friday

▶ Questions

▶ Interview Questions

▶ Video of the week

▶ Retro meeting

▶ Case study / project

1/9
tw-06.md 2025-03-22

Teamwork Schedule

Ice-breaking 90m

Personal Questions (Study Environment, Kids etc.)

Any challenges (Classes, Coding, studying, etc.)
Ask how they’re studying, give personal advice.
Remind that practice makes perfect.

Workshop Activities (Tuesday)

Ask Questions 20m

1. What is an object in JavaScript?

A. A function
B. A data tool
C. A data structure
D. An array

2. How do you access a property of an object in JavaScript?

A. By using curly braces {}
B. By using the dot notation
C. By using parentheses ()
D. By using commas

3. How do you check if a property exists in an object in JavaScript?

A. By using the exist keyword
B. By using the contains keyword
C. By using the hasOwnProperty method
D. By using the isProperty method

4. How do you delete a property from an object in JavaScript

A. By using the delete keyword

B. By using the remove keyword
C. By setting the property value to null
D. By assigning an empty string to the property

2/9
tw-06.md 2025-03-22

5. How do you add a new property to an existing object in JavaScript

A. By using the add keyword

B. By using the insert keyword
C. By using the update keyword
D. By assigning a value to a new key

6. How can you create an empty object in JavaScript?

A. emptyObject = {};
B. emptyObject = new Empty();
C. emptyObject = Object.empty();
D. emptyObject = new Object();

7. How do you clone an object in JavaScript?

A. Use the Object.clone() method

B. Use the Object.assign() method or the spread operator (...)
C. Use the Object.copy() method
D. Use the Object.duplicate() method

8. What is object destructuring in JavaScript?

A. A way to create objects from strings

B. A way to concatenate objects
C. A way to merge objects
D. A way to extract properties from an object and assign them to variables

9. How do you swap the values of two variables without using a temporary variable using array
destructuring?

A. const a = b; const b = a
B. const [a, b] = [a, b];
C. const [a, b] = [b, a];
D. const [b, a] = [a, b];

10. What happens if you try to destructure an array with more variables than there are elements in the
array?

A. Extra variables are assigned undefined

B. An error is thrown
C. The array is automatically resized
D. Only the first few variables are assigned values

3/9
tw-06.md 2025-03-22

11. What does the rest element (...) do in array destructuring?

A. It spreads elements into multiple arrays

B. It gathers remaining elements into an array
C. It removes elements from the array
D. It reverses the order of elements in the array

12. What is JSON (JavaScript Object Notation)?

A. A lightweight data interchange format

B. A JavaScript method for creating objects
C. A way to define variables in JavaScript
D. A JavaScript library for animations

Coding Challenge 40m

High Priced Product Categories

You are given an array of objects representing a collection of products, each with a name, price, and
category. Your task is to use map, filter, and reduce to calculate the average price of products in each
category, and then return an array of objects containing only the categories that have an average price
above 50.

Sample input :

const products = [
{ name: "Product 1", price: 20, category: "Electronics" },
{ name: "Product 2", price: 30, category: "Clothes" },
{ name: "Product 3", price: 40, category: "Electronics" },
{ name: "Product 4", price: 50, category: "Clothes" },
{ name: "Product 5", price: 60, category: "Clothes" },
{ name: "Product 6", price: 70, category: "Electronics" },
{ name: "Product 7", price: 80, category: "Clothes" },
{ name: "Product 8", price: 90, category: "Electronics" },
];

Expected outcome :

[
{ category: 'Clothes', average: 55 },
{ category: 'Electronics', average: 55 }
]

4/9
tw-06.md 2025-03-22

Solution :

const products = [
{ name: "Product 1", price: 20, category: "Electronics" },
{ name: "Product 2", price: 30, category: "Clothes" },
{ name: "Product 3", price: 40, category: "Electronics" },
{ name: "Product 4", price: 50, category: "Clothes" },
{ name: "Product 5", price: 60, category: "Clothes" },
{ name: "Product 6", price: 70, category: "Electronics" },
{ name: "Product 7", price: 80, category: "Clothes" },
{ name: "Product 8", price: 90, category: "Electronics" },
];

/* Use map to create an object with category as the key

and an array of products as the value */
const productsByCategory = products.reduce((acc, product) => {
const category = product.category;
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(product);
return acc;
}, {});

// Use map to calculate the average price for each category

const avgPriceByCategory = Object.keys(productsByCategory).map(category => {
const sum = productsByCategory[category].reduce((acc, product) => acc +
product.price, 0);
return { category: category, average: sum / productsByCategory[category].length
};
});

// Use filter to only select categories with an average above a certain threshold
const highPricedCategories = avgPriceByCategory.filter(category => category.average
> 50);
console.log(highPricedCategories)

Teamwork Activities (Thursday) 10m

Ask Questions 20m

1. Sass is a _____.

A. Scripting language
B. Markup language
C. CSS pre-processor
D. Programming Language

5/9
tw-06.md 2025-03-22

2. Sass stands for ______.

A. Semantically Awesome Stylesheet

B. Syntactically Awesome Stylesheet
C. Simple Awesome Stylesheet
D. Syntax-based Awesome Stylesheet

3. What are the benefits of using SASS?

A. It is a pre-processing language which provides its own syntax for CSS

B. It is a superset of CSS which contains all the features of CSS and is an open source pre-processor, coded in
Ruby
C. It is more stable and powerful CSS extension and style documents more clearly and structurally
D. All of the above

4. In which year was SASS introduced?

A. 2005
B. 2006
C. 2008
D. 2009

5. Which of the following directive displays the SassScript expression value as fatal error?

A. @error
B. @warn
C. @at-root
D. None of the above

6. SASS was created by...

A. Linus Torvalds
B. Brendan Eich
C. Hampton Catlin
D. Guido van Rossum

7. In Sass, which of the following is the correct way to define a variable?

A. #primary-color: #888;
B. @primary-color: #888;
C. %primary-color: #888;
D. $primary-color: #888;

6/9
tw-06.md 2025-03-22

8. Which is the correct syntax to declare a variable "myfonts" assigning the two font names?

A. $myfonts: Helvetica, and sans-serif;

B. $myfonts: Helvetica, sans-serif;
C. $myfonts: "Helvetica, sans-serif";
D. $myfonts: "Helvetica+sans-serif";

9. Which directive is used to create CSS code that is to be reused throughout the website?

A. @import
B. @define
C. @mixin
D. All of the above

10. Which directive is used to share a set of CSS properties from one selector to another?

A. @share
B. @import
C. @transfer
D. @extend

Interview Questions 20m

1. What is an object in JavaScript?

2. Explain the difference between dot notation and bracket notation when accessing object properties.

3. What is the difference between Object.keys(), Object.values(), and Object.entries()?

4.Explain what is a @extend function used for in Sass?

5. Explain how to define a variable in Sass?

6. Explain what is the difference between Sass and SCSS?

7/9
tw-06.md 2025-03-22

Video of the Week 15m

Object Destructuring in Javascript

Coffee Break 10m

Coding Challenge 40m

HR VS IT Department
Task : You are given an array of objects representing a collection of employees, each with a name, salary,
and department. Your task is to use map, filter, and reduce to calculate the average salary for each
department and then return an array of objects containing only the departments that have an average
salary above 65000.

Sample input :

const employees = [
{ name: "John", salary: 50000, department: "IT" },
{ name: "Jane", salary: 60000, department: "HR" },
{ name: "Bob", salary: 55000, department: "IT" },
{ name: "Sophie", salary: 75000, department: "HR" },
{ name: "Mike", salary: 65000, department: "IT" },
{ name: "Emily", salary: 80000, department: "HR" },
{ name: "David", salary: 70000, department: "IT" },
];

Expected outcome :

[
{ department: 'HR', average: 71666 }
]

8/9
tw-06.md 2025-03-22

Retro Meeting on a personal and team level 10m

Ask the questions below:

What went well?

What could be improved?
What will we commit to do better in the next week?

Closing 5m

Next week’s plan

QA Session

9/9