기존의 Object에서는 forEach문 대신 for in문을 통해 value값을 순회했었지만 ( for in 글 참조 )
map에서는 for of문과 배열에서 주로 사용하던 forEach문을 활용하여 for문을 돌릴 수 있다.
오늘은 2가지 방법으로 map으로 for문을 돌려보자.
우선 테스트용 map을 생성해보자. ( map 글 참조 )
let newMap = new Map();
newMap.set('name', 'bome');
newMap.set('age', 29);
newMap.set('cat', 'mochi');1. forEach 메서드
============================================================================
위에서 생성한 map과 forEach문을 사용하여 for문을 돌려보자. 기존에 배열에서 forEach문을 많이 써본 사람이라면
어렵지 않게 사용할 수 있을 것이지만.. 기존 배열의 forEach문과는 조금 다르니 주의 하도록하자.
차이점은 아래와 같으니, 주의만 하면 큰 문제는 없겠다. 어차피 이상한 값 넣으면 에러 뜨니 기억안해도
아.. 내가 잘못했구나 하고 수정하겠지
배열(Array.prototype.forEach) : 콜백함수의 인수는 순서대로 값, 인덱스, 배열 순
맵(Map.prototype.forEach) : 콜백함수의 인수는 순서대로 값, 키, 오브젝트 순
샘플코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let newMap = new Map();
newMap.set('name', 'bome');
newMap.set('age', 29);
newMap.set('cat', 'mochi');
newMap.forEach((val, key, obj) => {
console.log('key값: ' + key + 'value값: ' + val);
});
</script>
</body>
</html>
제대로 for문이 돌아서 콘솔에 찍어주는 것을 확인 할 수 있다..
2. for.. of 문법
==========================================================================
for.. of 문법은 ES6에서 새로 나온 문법으로, for문을 도는 사이에 continue, break, return과 같은 루프 기능을
활용 할 수 있다. ( 이건 나중에 따로 정리를 .. ) 오늘은 반복에 대해서만 집중적으로 보도록 하자.
샘플코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let newMap = new Map();
newMap.set('name', 'bome');
newMap.set('age', 29);
newMap.set('cat', 'mochi');
for(let item of newMap){
console.log('key값 : ' + item[0] + ' value값 : ' + item[1]);
}
</script>
</body>
</html>
똑같은 결과가 나왔다.. 보면 item[0]과, item[1]이 보일텐데, 앞에서 설명했듯이
map은 키값, 벨류값, 오브젝트 순으로 가져오기 때문에 키와 벨류를 꺼내기 위해 각각 0과 1을 넣어준 것이다.
딱히 어려운 건 없으니, javascript를 조금 써본 사람이라면 아 map은 이렇게 꺼내야 하는구나 라고
인지만 하고 있다면 큰 어려움은 없을 것이다.
