개념 하이라이트:

1. for...of 및 for...in 루프 사용
2. Set()와 배열, Map(), 객체, Set() 및 지도()

1. for...of 및 for...in 루프 사용

루핑은 프로그래밍의 기본 개념으로, 코드 블록을 여러 번 실행할 수 있게 해줍니다. JavaScript에서 for...of 및 for...in은 일반적으로 사용되는 두 가지 루프이지만 서로 다른 용도로 사용됩니다. 차이점을 이해하면 보다 효율적이고 효과적인 코드를 작성하는 데 도움이 됩니다.

1.1 for...of 루프

for...of 루프는 배열, 문자열, 지도 및 집합과 같은 반복 가능한 객체를 반복하는 데 사용됩니다. 인덱스에 대해 걱정할 필요 없이 시퀀스의 각 값에 액세스할 수 있는 간단한 방법을 제공합니다.

예)

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

for (let team of teams) {
   console.log(team);
}

// Output: 
// Read Sox
// Dodgers
// Padres

이 예에서 for...of는 팀 배열의 각 요소(팀)에 직접 액세스하고 이를 콘솔에 기록합니다. 이 루프는 인덱스가 아닌 값만 필요할 때 이상적입니다.

1-2. for...in 루프

반면에 for...in 루프는 객체의 속성(키)을 반복하는 데 사용됩니다. 객체와 함께 사용되는 경우가 많지만 배열과 함께 사용하여 인덱스에 액세스할 수도 있습니다.

예)

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

이 예에서 for...in은 Mariners 객체의 키를 반복하여 키와 해당 값에 모두 액세스할 수 있도록 합니다. for...in은 숫자 인덱스뿐만 아니라 열거 가능한 모든 속성을 반복하므로 배열과 함께 조심스럽게 사용해야 한다는 점에 유의하는 것이 중요합니다.

1-3. 주요 차이점

• 목적:
  • for...of: 반복 가능한 객체(배열, 문자열, 세트, ​​맵)의 값을 반복합니다.
  • for...in: 객체의 열거 가능한 속성(키)을 반복합니다.
• 사용 사례:
  • 값에 직접 액세스해야 하는 경우 for...of를 사용합니다.
  • for...in 키나 속성 이름에 액세스해야 할 때 사용하세요.

2. Set()과 배열, Map()과 객체, Set()과 `Map()의 차이점

JavaScript는 각각의 장점과 단점을 지닌 다양한 데이터 구조를 제공합니다. 가장 일반적으로 사용되는 몇 가지 항목의 차이점을 살펴보았습니다.

2-1. Set() 대 배열

• 고유성:
  • Set()은 고유한 값을 저장하므로 중복이 허용되지 않습니다.
  • 배열은 중복된 값을 허용합니다.
• 주문하다:
  • Set()은 삽입 순서를 반복합니다.
  • 배열은 삽입 순서도 유지하지만 중복으로 인해 상호 작용하는 방식이 변경될 수 있습니다.

예)

`

let mySet = new Set([1, 2, 3, 3, 4]);
myArray = [1, 2, 3, 3, 4]를 두십시오.

console.log(mySet) // 출력: Set { 1, 2, 3, 4 }
console.log(myArray) // 출력: [1, 2, 3, 3, 4]

`

이 예에서 Set()은 중복 항목 3을 자동으로 제거하는 반면 배열은 이를 유지합니다. Set()은 고유한 항목 컬렉션이 필요할 때 유용합니다.

2-2. Map() 대 객체

• 키 유형:

  • Map(): 키는 객체, 함수, 기본 유형을 포함한 모든 유형이 될 수 있습니다.
  • 객체: 키는 일반적으로 문자열 또는 기호입니다.

• 주문하다:

  • Map()는 삽입 순서를 유지합니다.
  • 객체는 키 순서를 보장하지 않습니다.

• 사이즈:

  • Map()에는 키-값 쌍의 수를 제공하는 size 속성이 있습니다.
  • 객체는 키를 반복하여 크기를 수동으로 결정해야 합니다.

예)

`
myMap = new Map();
myMap.set('이름', '존');
myMap.set(42, '답변');
myMap.set({}, '빈 객체');

myObject = {
이름: 'John',
42: '답변',
{}: '빈 객체'
};

console.log(myMap.size); // 출력: 3
console.log(Object.keys(myObject).length); // 출력: 2 (키 문자열 변환으로 인해)
`
이 예에서 Map()을 사용하면 다양한 키 유형을 사용할 수 있으며 객체 키는 문자열로 변환됩니다. 또한 Map()은 지도의 크기를 쉽게 제공하는 반면, 객체의 경우 키를 수동으로 계산해야 합니다.

2-3. Set() 대 Map()

• 목적:
  • Set()는 고유한 값의 모음입니다.
  • Map()는 키-값 쌍의 모음입니다.
• 사용 사례:
  • 고유한 항목 목록을 저장해야 할 경우 Set()을 사용하세요.
  • 값을 키와 연결해야 할 경우 Map()을 사용하세요.

예)

`
let mySet = new Set([1, 2 ,3]);
let myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mySet.has(2)); // 출력: true
console.log(myMap.get('key1')); // 출력: '값'1
`
이 예에서 Set()은 값의 존재를 확인하는 데 사용되는 반면 Map()은 키와 연결된 값을 검색하는 데 사용됩니다.