Arrow function 을 개무시 해야하는 이유

[ 이글은 2017년 05월 08일에 최종 수정되었습니다. ]
§

제 홈피/블로그 댓글에 올라온 코드에 대한 설명까지 하게 되서 이거 참… ㅋㅋㅋㅋ

얼마전 댓글에

[...Array(8)].forEach((_, i) => [...Array(9)].forEach((_, j) => console.log(` ${i+2} X ${j+1} = ${(i+2)*(j+1)}`)));

이런 형태의 구구단 뽑는 스크립트를 겨울나무님 이란 분이 쓰셨는데,

아, 일단 이 코드가 작동이 되지 않는 이유는, 이게 ES6 라서 그렇습니다. IE 같은 브라우져에서는
. . . 같은 spread syntax=> 이 화살표 (arrow) function 이 먹지 않습니다. babel 로 compile 해서 ES5 로 변환해야 작동하는 코드 입니다. (크롬에서는 작동할걸요? 크롬에서도 작동안되면 알려주세요.)

그리고 이 화살표 => 는 원래 {} 쓰시는게 익숙하시면 개무시 하면 됩니다. 아니, 거의 모든 경우 개무시 해야 합니다.

개무시 해야 하는 이유

출처: https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/fig1.png

그냥 쓰지말라고 하면되지 뭐 이런 차트까지. ㅋㅋㅋㅋ

https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/fig1.png

위 차트에서 보시다시피 ES6 에서 이 => 는 실제 플젝에서 사용될수 있는 경우가 매우 제약적/제한적 입니다.

답변을 이메일로 드릴려다, 혹시 나중에라도 다른분들이 질문하실지 몰라 여기에서 답변합니다. 켁.


console 을 여셔야 보이는거구요.. 끙…

하… 이렇게 다시 작성 하시면 브라우져창 (크롬) 에서 보이실거에요.

[...Array(8)].forEach( (_, i) => [...Array(9)].forEach( (_, j)=> document.querySelector('#result').innerHTML +=`<span style="display:block;"> ${i+2} X ${j+1} = ${(i+2)*(j+1)}</span>`) ); 

html 에 <div id="result"></div> 가 하나 존재해야 됩니다.

도대체 이 구구단 얘기 꺼낸 인간 누구야!!!! ㅋㅋㅋㅋ

Ω