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> 가 하나 존재해야 됩니다.

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

Tags: , , , ,

카테고리: , ,

Ω
  • 겨울나무

    저는 그냥 별생각 없이 구구단 이야기 하고, 재미로 arrow랑 foreach를 이용해서 만들어 본 것인데 이렇게 관련 내용으로 2개의 게시글이 쓰여지게 되었네요 ㅋㅋㅋㅋ;;

    괜한 이야기를 한 것 일까요? ㅋㅋㅋㅋㅋ

    저번 댓글에서 제가 간략하게 적어놔서 다시 한번 적어보면 저는 ES5, Python, AngularJS, JAVA, Flask, mysql을 1년동안 배운 것입니다. ES6는 그냥 취미 삼아서 배운것이고, arrow function는 간결해서 콜백함수에 this 바인딩 없는 경우에 자주 씁니다. 물론 개인 프로젝트에서요. 그렇기에 아직 각 언어에 대한 깊이가 많이 부족합니다. ^^ 지금은 회사 업무때문에 Spring을 배워서 수정하고 있네요 ㅋㅋㅋㅋ

    어쨋든, 덕분에 별생각 없이 썼던 arrow 함수에 대해서 주의사항을 좀더 잘 알수 있게 되어서 좋은거 같습니다. 사실 this 바인딩이 어디에서 쓰이냐에 따라서 자기 마음대로 튀기 때문에 그것을 컨트롤하기 위해서 쓴다고 알고 있기는 했지만 관련 링크 타고 들어가보니 좀더 깊은 내용이 있더군요. 좀더 배워야할 신입이라 이런 허접한 실력이 이럴 때 적나라게 드러나는거 같습니다 ㅠㅠ

    게시하시는 글들은 잘 보고 있고 앞으로도 많이 배우겠습니다 ^^

    • http://hackya.com Matthew

      잘 아시겠지만 “this 바인딩이 어디에서 쓰이냐에 따라서 자기 마음대로 튀기 때문에” – 이 부분에 대한 논란도 많이 있습니다. “코딩을 제대로 배웠으면 왜 이런 문제가 발생하냐? 늬가 코딩을 잘못하는거다.” 라고 말하는 꼰대들도 많습니다. ㅋㅋㅋㅋ

      arrow function 은 잘못 판단한거다, 만들지 말았어야 한다 라는 주장도 현재 꽤 무게가 있지만, 사실 싫으면 안쓰면 그만이고 지금처럼 논란까지 생길 문제는 아니라고 생각합니다.

      “There are more than one way to skin a cat.” 진짜 명언이죠. arrow 같은 세부적인 코딩 부분은 각자 자신에게 편한 코딩을 하면 그만이고, 아니면 여럿이 참여하는 플젝이면 플젝리더가 이런 부분에 대한 지침을 내리면 그만일뿐이니까요.

      arrow function 은 가독성이 나쁘다 라는 글도 예전에 읽은적이 있는데, 그 블로그에 “아니 슈발, 그거야 너가 arrow function 을 사용 안하니까 가독성이 나쁜거지.” 라는 라는 댓글을 달지는 않았습니다. ㅋㅋㅋㅋ

  • 겨울나무

    아 참고로 저는 브라우저 개발자 도구에서 콘솔로 찍는 것하고 브레이크 포인트 잡는 걸로 디버깅을 주로 하다보니까 별생각 없이 콘솔에서 찍히는 코드로 작성했었네요 ^^a

    실력이 허접한 신입을 너그럽게 봐주시길 바랍니다. ㅎㅎ

    • http://hackya.com Matthew

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

      이 얘기는, codei 님, (제가 코데이 라고 부르니까 그게 싫어서; 아마도 본인은 코드 아이 라는 의도로 불려지길 원했을텐데 ㅋㅋㅋ) 지금은 자신의 닉 을 bastcode (분명 베스트 코더, 아니면 bad ass 코더, 이런 의미일텐데, 무슨 이집트 신이름에서 따온거라고 빡빡 주장하는) 로 하시는 분에게 한 소리 였습니다.

      그것도 농담으로 한 얘기 였구요.

      저는 DOM manipulation 이나 죽어라고 하는 front-end 코더라서 자스 잘 모릅니다. 로직이라고는 pagination, 슬라이더 같은 UI 짜는데 필요해서 익혀야 하는 iteration 정도나 사용할 뿐 입니다.

      Ajax 도 promise based 가 어렵게 느껴져서 이런거 쓴다는. ㅋㅋㅋㅋ

      https://github.com/mzabriskie/axios

      그리고 ES6 공부도 게을리해와서 아직도 대부분 ES5 base 자스 코딩을 하고있고…

      앙2 (Angular2) 도 앙1에서 적응하기 힘들어서 포기하고 vue.js 나 쓰고 있고… ㅋㅋㅋ

      그런데 ES6 공부 게을리 한거는저도 나름 항변하고 싶은 부분이 있는게, querySelector() 도 크로스 브라우징 때문에 작년초 정도가 되서야 겨우 쓰기 시작했다는. (미국기준으로)

      한국은 아직도 getElementById() 해야하는 플젝이 있을걸요?