Day - 4 JavaScript Foundations Professional Certification by Mozilla

Concept Highlights:

1. Using for...of and for...in Loops


2. Differences Between Set() and Array, Map() and Objects, and Set() and Map()
   

1. Using for...of and for...in Loops

Looping is a fundamental concept in programming, allowing to execute a block of code multiple times. In JavaScript, for...of and for...in are two commonly used loops, but they serve different purposes. Understanding the differences can help you write more efficient and effective code.

1.1 for...of Loop

The for...of loop is used to iterate over iterable objects, such as arrays, strings, maps, and sets. It provides a straightforward way to access each value in the sequence without needing to worry about the index.

e.g.)

let teams = ['Red Sox', 'Dodgers', 'Padres']; 



for (let team of teams) {

   console.log(team);

}



// Output: 

// Read Sox

// Dodgers

// Padres

In this example, for...of directly accesses each element (team) in the teams array and logs it to the console. This loops is ideal when you only need the values and not the indices.

1-2. for...in Loop

The for...in loop, on the other hand, is used to iterate over the properties (keys) of an object. It's often used with objects, but it can also used with arrays to access indices.

e.g.)

let Mariners = {place: 'Seattle', league: 'American', color: 'navy blue'}; 



for (let key in Mariners) {

   console.log(`${key}: ${Mariners[key]}`); 

}



// Output: 

// place: Seattle

// league: American

// color: navy blue

In this example, for...in iterates over the keys of the Mariners object, allowing to access both the key and the corresponding value. It's important to note that for...in should be used cautiously with arrays, as it iterates over all enumerable properties, not just numeric indices.

1-3. Key Differences

• Purpose:
  
  
  
  
  • 
    for...of: Iterates over the values of an iterable object (arrays, strings, sets, maps).
  
  
  • 
    for...in: Iterates over the enumerable properties (keys) of an object.
  
  
  
  
  
  



• Use Case:
  
  
  
  
  • Use for...of when you need to access values directly.
  
  
  • Use for...in when you need to access keys or property names.
  
  
  
  
  
  

2. Differences Between Set() and Array, Map() and Objects, and Set() and `Map()

JavaScript provides a variety of data structures, each with its strength and weaknesses. I explored the differences between some of the most commonly used ones:

2-1. Set() vs. Array

• Uniqueness:
  
  
  
  
  • 
    Set() stores unique values, meaning no duplicates are allowed.
  
  
  • Array allows duplicate values.
  
  
  
  
  
  



• Order:
  
  
  
  
  • 
    Set() iterates the order of insertion.
  
  
  • Array also maintains the order of insertion, but duplicates can alter how you interact with it.
  
  
  
  
  
  

e.g.)

`

let mySet = new Set([1, 2, 3, 3, 4]);

let myArray = [1, 2, 3, 3, 4];

console.log(mySet) // Output: Set { 1, 2, 3, 4 }

console.log(myArray) // Output: [1, 2, 3, 3, 4]

`

In this example, the Set() automatically removes the duplicates 3, while the Array retains it. Set() is useful when you need a collection of unique items.

2-2. Map() vs. Object

• 
  

  Key Types:

  
  
  
  
  
  • 
    Map(): Keys can be of any type, including objects, functions, and primitive types.
  
  
  • 
    Object: Keys are usually strings or symbols.
  
  
  
  
  
  



• 
  
  

  Order:

  
  
  
  
  
  • 
    Map() maintains the order of insertion.
  
  
  • 
    Object does not guarantee the order of keys.
  
  
  
  
  
  



• 
  
  

  Size:

  
  
  
  
  
  • 
    Map() has a size property that gives the number of key-value pairs.
  
  
  • 
    Object requires to manually determine the size by iterating through the keys.
  
  
  
  
  
  

e.g.)

`

let myMap = new Map();

myMap.set('name', 'John');

myMap.set(42, 'The answer');

myMap.set({}, 'Empty object');

let myObject = {

name: 'John',

42: 'The answer',

{}: 'Empty object'

};

console.log(myMap.size); // Output: 3

console.log(Object.keys(myObject).length); // Output: 2 (due to key string conversion)

`

In this example, Map() allows the use of a variety of key types, while object keys are converted to strings. Additionally, Map() easily provides the size of the map, whereas for objects, you need to manually count the keys.

2-3. Set() vs. Map()

• Purpose:
  
  
  
  
  • 
    Set() is a collection of unique values.
  
  
  • 
    Map() is a collection of key-value pairs.
  
  
  
  
  
  



• Use Case:
  
  
  
  
  • Use Set() when you need to store a list of unique items.
  
  
  • Use Map() when you need to associate values with keys.
  
  
  
  
  
  

e.g.)

`

let mySet = new Set([1, 2 ,3]);

let myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mySet.has(2)); // Output: true

console.log(myMap.get('key1')); // Output: 'value'1

`

In this example, Set() is used to check for the existence of value, while Map() is used to retrieve a value associated with a key.