[es6] es6 map 중간에 안멈추는 현상

 

얼마전 react로 영웅뽑기 시뮬레이터를 만들고나서

어느 회사로 면접을 보러 갔었다.

 

면접중에 react에 jquery를 사용했을때의 이슈에 관해 이야기를 했었다.

 

예~~~~ 전에 뭔가 이슈가 있다는걸 어디선가 봤던 기억은 있었으나

정확히 무슨 이슈인지 무슨 문제인지 몰랐기에 시간 났을때 검색을 해 보았다.

 

아직 다 찾은건 아니지만 일단 jquery로 dom제어를 했을때 문제가 생길수 있다는 내용을 찾았다

정확히는 가상dom이 렌더링을 끝마치지 못했을때 jquery로 dom제어를 하면 해당 노드가 없으니

문제가 생긴다는 것이었다.

 

혹시나 다른 이슈를 아시는 분이 이 포스팅을 본다면 댓글 남겨주시길 바랍니다.

 

 

각설하고 영웅뽑기 시뮬레이터에서 사용된 jquery요소들을 없애고 es6에 맞춰서 만들어 보려고 했다.

영뽑시뮬에서 제이쿼리로 사용한것은 $.each 뿐이다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
// id 를 index값으로 부여
$.each(this.state.heroList, function(index, item){
      item.id = index;
    });
    
 
//위의 코드를 아래와 같이 바꾸어주었다
 
this.state.heroList.map((item,index)=>{
                            item.id = index;
                            });
 
 
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
// 영웅 확률 일괄 변경
 $.each(this.state.heroList, function(index, item){
       
       if(targetId==0&&item.grade==4){
         item.per = 0.0471428571428571;
       }else{
         if(item.grade==4){
            item.per = 0.02;
          }
        if(item.id==targetId){
          item.per = 0.4;
          }
       }
       
      
    });
 
 
 
//->
 
 this.state.heroList.map((item,index)=>{
       if(targetId==0&&item.grade==4){
         item.per = 0.0471428571428571;
       }else{
         if(item.grade==4){
            item.per = 0.02;
          }
        if(item.id==targetId){
          item.per = 0.4;
          }
       }
 });
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
// 뽑기
 
 $.each(this.state.heroList, function(index, item){ 
       sum=+ (sum + item.per).toFixed(12);
       //console.log("sum값"+sum)
    
       if(sum >= val){
         heroCard = item;
         //console.log(item);
         return false;
        }
    
      });
 
 
//-> map으로 돌려봄
 
 
this.state.heroList.map((item,index)=>{
       sum=+ (sum + item.per).toFixed(12);
       console.log("sum값"+sum);
       console.log("val값"+val);
    
       if(sum >= val){
          console.log("결과 sum값"+sum+"val값"+val);
         heroCard = item;
         //console.log(item);
         return false;
        }
     });
 
 
//-> 중간에 안멈추고 끝까지 돌게됨
 
/*
참고 블로그 : https://daniel-park.tistory.com/9 
원인 -> 주어진 길이만큼 iterator을 돌리면서 그때마다 콜백을 돌림
    콜백을 호출하는 순간 Loop의 임무는 끝
 
참고 블로그에서 얻은 해결 방법 -> for loop로 코드를 다시 작성
*/
 
 
//-> 다시 작성한 코드
 
 for(let cnt=0; cnt < this.state.heroList.length; cnt++){
       sum=+ (sum + this.state.heroList[cnt].per).toFixed(12);
       if(sum >= val){
         heroCard = this.state.heroList[cnt];
         return heroCard;
        }
    }
 
 
//근데 이거도 좀 이상함 포문 다음에 console.log 출력이 안된느 현상 발견
 
//->for of를 이용해 해결
 
for(let hero of this.state.heroList){
       sum=+ (sum + hero.per).toFixed(12);
       if(sum >= val){
         heroCard = hero;
         break;
        }
    }
cs

 

 

단순히 map((item,index){}); 형식으로 돌려보니

중간에 멈추질 않는다

찾아보니 안멈춘다고 한다 

daniel-park.tistory.com/9

 

[Javascript] es6 함수들 도중 break?

Javascript와 es6  최근 node.js와 Vuex기반 프로젝트 기능을 개발하고 테스트 하던 중, 생각하지도 못한 버그가 발생하였다. es6의 Array.map, Array.filter, Array.reduce 등의 함수들은 많은 개발자들의 수..

daniel-park.tistory.com

이곳과

niceman.tistory.com/111

 

이 블로그의 글을 참고하여 

 

for of로 바꾸었더니 정상작동하는 것을 확인 할 수 있었다.

 

for in과 for of 의 차이는

for of : 반복가능한 객체를 반복하는 기능을 수행한다. 다시말해 객체의 요소들을 순회하긴 위한 구문

for in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행, 즉 객체의 속성을 순회하기 위한 구문

편하게 설명하면

객체 내부까지 써먹으려면 of를 쓰고 인덱스만 뽑으려면 in을 쓰라는 말이다.

 

위 블로그에서 찾은 또 하나의 내용으론

 

for in은 인덱스가 문자로 변환, 프로토타입까지 순회, 루프 순회 순서가 무작위 라는 것이고

for of는 for in의 단점을 보완했고 foreach에서 지원하지 않는 break, continue, return이 사용 가능하다는것 그리고

배열순회를 지원하는 문법중에서 가장 간결하고 직접적으로 접근 가능하다는 것이다.

 

아무튼 영뽑시뮬 기본기능에서 제이쿼리는 걷어 내어 보았다

 

걷어내기 이전 코드는

jsbin.com/goxetubuyo/edit?html,js,output

 

JS Bin

Sample of the bin:

jsbin.com

 

이거고

 

걷어낸 후의 코드는

jsbin.com/cesigagoku/edit?html,js,output

 

JS Bin

Sample of the bin:

jsbin.com

이것이다.

제이쿼리에서 foreach문 사용하는 방법


1. 배열 사용


$.each() 함수를 사용하여 배열을 반복문 형태로 사용할 수가 있다.


ex)1


1
2
3
4
5
6
7
8
9
10
11
// 예제1
$.each([0,8,4,10], function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
 
//예제2
var arr = [0,8,4,10];
 
$.each(arr, function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
cs



예제 1번과 2번을 실행하면


콘솔창엔 다음과 같은 결과가 동일하게  나온다


1
2
3
4
0:값 = 0
1:값 = 8
2:값 = 4
3:값 = 10
cs





2. 맵 사용


맵형식을 가지고 있는 데이터를 사용할땐 key와 value의 쌍으로 사용한다.


ex)2


1
2
3
4
5
6
7
8
9
10
11
var map = { 
  'name''yamea'
  'age''99' 
}; 
$.each(map, function(key, value) { 
  console.log(key + ': ' + value); 
});
 
// 결과
name: yamea
age: 99
cs




3. json 형식 데이터 사용


조금 더 나아가서 우리가 흔하게 사용하는 여러개의 오브젝트들이 담긴 배열을 사용할땐 조금만 응용을 하면 된다.


ex)3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var map1 = { 
          'name''yamea'
          'age''10' 
        };
var map2 = { 
          'name''yamea2'
          'age''20' 
        };
var map3 = { 
          'name''yamea3'
          'age''30' 
        };
var arr = [map1, map2, map3];
 
        $.each(map, function(key, value) { 
          console.log("이름 = "+ value.name); 
        });
        
        // 결과값
        
        이름 = yamea
        이름 = yamea2
        이름 = yamea3
cs


위와 같은 방식으로 사용을 할 수 있다.


아주 간단한 방법으로 긴 for문을 사용하지 않고도 간단하게 사용할 수 있는 방법이다.

+ Recent posts