순회 패턴
for...of로 Map과 Set을 순회하고, entries·keys·values를 사용하며, 배열로 변환하고 작은 카운터와 고유 목록을 만듭니다.
순회 패턴은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
순회 개요
목표: 간단하고 명확한 순회 방법을 익힙니다.
- Map: entries, keys, values
- Set: values
- 배열로 변환
- 빈도 카운터와 고유 목록
Map: entries/keys/values
Map에서 for...of를 사용하면 [key, value]를 얻을 수 있으며, keys()와 values()도 사용할 수 있습니다.
// Map iterates as [key, value] pairs
const prices = new Map();
prices.set("apple", 3);
prices.set("banana", 2);
for (const [item, cost] of prices) {
console.log(item, cost);
}
// You can also use keys() or values()
for (const k of prices.keys()) {
console.log("key:", k);
}
for (const v of prices.values()) {
console.log("value:", v);
}
Set: 간단한 반복문
Set은 삽입 순서대로 고유한 값을 제공합니다. 중복 값은 무시됩니다.
// Set iterates values in insertion order
const colors = new Set(["red", "green", "red", "blue"]);
for (const c of colors) {
console.log("color:", c);
}
console.log("size:", colors.size);
Array.from을 사용한 변환
Array.from을 사용해 Map/Set을 배열로 변환하고(또는 pairs를 Map으로 변환하고) 있습니다.
// Convert Map to array of pairs, and back
const map1 = new Map([["a", 1], ["b", 2]]);
const pairs = Array.from(map1); // [["a",1],["b",2]]
console.log("pairs:", pairs);
const map2 = new Map(pairs);
console.log("map2 has a?", map2.has("a"));
// Set to array of values
const set1 = new Set([1, 1, 2, 3]);
const arr = Array.from(set1); // [1,2,3]
console.log("arr:", arr);
빈도 카운터
Map 카운터는 목록에서 각 값이 나타난 횟수를 세는 명확한 방법입니다.
// Count items in an array using Map
function countItems(list) {
const counts = new Map();
for (const x of list) {
const n = counts.get(x) || 0;
counts.set(x, n + 1);
}
return counts;
}
const fruits = ["apple", "banana", "apple", "apple", "banana"];
const counts = countItems(fruits);
// Print counts as "item: n"
for (const [name, n] of counts) {
console.log(name + ":", n);
}
고유 값과 포함 여부
Set을 사용해 고유한 목록을 만들고 has로 빠르게 포함 여부를 확인합니다.
// Unique values with Set, quick membership test
const numbers = [2, 3, 2, 4, 3, 5];
const unique = Array.from(new Set(numbers));
console.log("unique:", unique);
// Quick membership with Set.has
const allowed = new Set([2, 5]);
console.log("allowed has 2?", allowed.has(2));
console.log("allowed has 4?", allowed.has(4));
Map 순회 퀴즈
빠른 확인: 키와 값을 함께 얻는 가장 좋은 Map 반복문입니다.
복습
복습: for...of로 Map을 순회해 [key, value]를 얻고, Set의 값은 직접 반복하며, Array.from으로 변환합니다. 카운터에는 Map을, 고유 목록에는 Set을 사용합니다.
자주 묻는 질문
“순회 패턴” 강의는 무료인가요?
네 — “순회 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“순회 패턴”에서 뭘 배우나요?
for...of로 Map과 Set을 순회하고, entries·keys·values를 사용하며, 배열로 변환하고 작은 카운터와 고유 목록을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.
“순회 패턴” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.