[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){}); 형식으로 돌려보니
중간에 멈추질 않는다
찾아보니 안멈춘다고 한다
[Javascript] es6 함수들 도중 break?
Javascript와 es6 최근 node.js와 Vuex기반 프로젝트 기능을 개발하고 테스트 하던 중, 생각하지도 못한 버그가 발생하였다. es6의 Array.map, Array.filter, Array.reduce 등의 함수들은 많은 개발자들의 수..
daniel-park.tistory.com
이곳과
이 블로그의 글을 참고하여
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
이것이다.