for...in문과 for...of 문으로 반복문을 정리하라
우선 맵을 복습해보자
const firms = new Map()
.set(10, 'Ivie Group')
.set(23, 'Soundscaping Source')
.set(31, 'Big 6');
맵을 사용하면 정보를 계속 추가하고 삭제하는 작업이 수월하다.
또한 DB에서 세부 사항을 선택가능하며 이용할 수 있는지 확인하거나 비교차트를 만들 수 있다.
function checkConflicts(firms, isAvailable) {
// START:loop
const entries = [...firms];
for (let i = 0; i < entries.length; i++) {
const [id, name] = entries[i];
if (!isAvailable(id)) {
return `${name}는 사용할 수 없습니다`;
}
}
return '모든 회사를 사용할 수 있습니다';
// END:loop
}
export { checkConflicts };컬렉션이 배열은 아니여서 for문을 사용할 수 없다. 반복을 시작하기 전 펼침연산자를 사용하여 맵을 배열로 변환해야 한다.
function checkConflicts(firms, isAvailable) {
// START:reduce
const message = [...firms].reduce((availability, firm) => {
const [id, name] = firm;
if (!isAvailable(id)) {
return `${name}는 사용할 수 없습니다`;
}
return availability;
}, '모든 회사를 사용할 수 있습니다');
return message;
// END:reduce
}적합한 배열 메서드가 없을 때 reduce() 메서드에서 기본값으로 성공메세지를 보낼 수 있다.
function findConflicts(firms, isAvailable) {
// START:find
const unavailable = [...firms].find(firm => {
const [id] = firm;
return !isAvailable(id);
});
if (unavailable) {
return `${unavailable[1]}는 사용할 수 없습니다`;
}
return '모든 회사를 사용할 수 있습니다';
// END:find
}
find() 메서드를 사용하여 서비스를 제공 받지 못하는 회사가 있는지 확인가능하다.
그러나 두 메서드는 문제점이있다.
- find() 메서드를 사용하면 이용할 수 없는 회사가 있는지 확인 후 메세지 반환(두단계 거침)
- find() 메서드는 이용이 불가능한 회사 중 첫 번째 회사만 찾을 수 있음.
- reduce()메서드는 마지막 회사만 찾을 수 있음.
맵에는 펼침연산자를 사용 할 수 있게 해주는 MapIterator(맵이터레이터) 라는 속성이 있다.
맵이터레이터는 좀 더 일반화 된 이터레이터의 특정한 인스턴스이다.
이터레이터는 항목을 한 번에 하나씩 접근할 수 있는 특정한 형식의 객체이다.
function checkConflicts(firms, isAvailable) {
// START:for
for (const firm of firms) {
const [id, name] = firm;
if (!isAvailable(id)) {
return `${name}는 사용할 수 없습니다`;
}
}
return '모든 회사를 사용할 수 있습니다';
// END:for
}
export { firms, checkConflicts };for...of 문 특징에 대해 살펴보겠다.
- for...of문으로 이터레이터를 사용할 수 있다.
- for...of문은 인덱스를 반복하지 않는 점을 제외하면 for문과 유사하다.
- for...of문을 사용하면 특수한 객체를 배열로 변환하는 대신 for문과 동일한 개념을 사용하여 인덱스 참조를 제거 가능하다.
- for...of는 반드시 필요한 경우에만 사용하는 것을 권장하고,키-값 객체에서만 작동한다.
for...in 문의 특징에 대해 살펴보겠다.
- for...in문은 for...of 와 비슷하지만 객체의 속성을 순회한다는 점이 다르다. 객체는 프로토타입 체인에 있는 다른 객체에서 속성을 상속받고, 열거할 수 없는 속성이 있어 순회에서 제외되기도한다.
- for...in문을 사용할 때는 각 항목을 한번에 하나씩 받는다 .값은 받지않고 매번 키를 사용해서 전체 컬렉션을 참조해야한다.
function checkConflicts(firms, isAvailable) {
// START:for
for (const id in firms) {
if (!isAvailable(parseInt(id, 10))) {
return `${firms[id]}는 사용할 수 없습니다`;
}
}
return '모든 회사를 사용할 수 있습니다';
// END:for
}
export { firms, checkConflicts };두 개 모두 무조건적으로 사용하기 보다는 사용이 적절한 경우에만 선택해야한다.
주의해야할 점은 객체를 조작하는 것이다. 이는 매우 위험하고 특히 반복중인속성 외의 다른 속성을 추가,수정 하는 경우에는 버그가 빨리 퍼질 수 있다.
이 게시물은 자바스크립트 코딩의 기술 책을 요약한 내용입니다.
HELLO