Code Spitz 첫번째 (1/2)

ECMA 2015+

시작하기에 앞서 ES6를 조금씩 공부중이었다고 생각해서 조금은 알고 있다에 손을 들었지만.. 이야기를 들어보니 전혀 아닌것 같아서 글을 두 개로 나누어서 쓰기로 했습니다. 부족하지만 여러 책들을 급하게 보고 나름대로 정리하려 하였으니 틀린점이 있다면 지적해 주시면 수정하도록 하겠으며 어디까지나 못하는 사람의 발버둥으로 생각하시고 귀엽게 봐주셨으면 좋겠습니다.

그날 이야기를 듣고.. 어? 하려다가 다른 모던 브라우저들이 빠르게 지원한다는 사실을 알고 급 쭈글해져 있었습니다. 서론은 이만하고 하나씩 시작하겠습니다.

목요일 이후 저의 머리속에 그려지는 하나의 단어..ECMA2015+…

0. let,const… 그리고 var function

브라우저 엔진에서는 var를 쓰는 동시에 이것은 ES6, 또는 ECMA2015+ 가 아니라고 인식해 버리기 때문에 가능하면 const… 또는 let를 써야 합니다. 마찬가지로 화살표 함수가 아닌 function을 사용하면 브라우저가 호환모드로 작동한다고 하니 앞으로 습관을 바꾸는게 좋을것 같습니다.(힘들겠지만.. 해보겠습니다.)

  1. arrow function

화살표 함수는 중요한 방식으로 기존의 JS의 함수와는 다르게 작동합니다. 여러가지 특징이 있지만 지면상 MDN의 힘을 빌리고… 개인적으로 놀라웠던 점을 하나만 꼽으면 new와 함께 사용하면 오류가 발생한다 라는 점이었습니다. [[Construct]] 메소드가 없으므로 생성자로 사용할 수 없기 때문인 것 같습니다.

2.Symbol

그동안 JS 5가지 기본 자료형(String,Number,boolean,null,undefined)에서 한가지가 추가된것이 바로 Symbol입니다. 일단 우선으로 알아야 할것은 심볼이 들어가면 아.. 심볼을 참조하지 않고는 엑세스 할 수 없는 셀 수 없는 속성을 만들겠구나 라고 생각을 일단 하고 주로 일정 수준의 보호가 필요한 기능에 사용하겠구나 라는 생각을 하게 될 것 같습니다.

3. async/await

이 부분이 제일 설명하기 난감한 부분이고 이야기를 들었을때 제일 곤란했었습니다. 고백하건데 이 부분은 공부를 안 했습니다. 왜냐하면 어느 책에서 이 부분은 ECMA 2017(ES8)에서 완성될 것으로 예상된다고 했거든요.. 역시 사람은 정신줄 놓고 있다가 크게 한방 먹는다더니.. 제가 늘 그래요..(죄송합니다.) 정신차리고 사실 이건 시중에 판매하는 책들도 잘 나와있지 않아서 돌아다니는 코드를 참고하였습니다.

앞의 function 는 함수가 비동기 방식으로 실행해야 함을 나타냅니다. await키워드는 readFile에 대한 함수 호출이 프라미스를 반환해야 함을 알리고 그 응답이 없으면 응답을 프라미스로 묶어야 합니다. 결과적으로 동기인것처럼 비동기코드를 작성할 수 있다는 것으로 이해했습니다.

4.reduce()

함수형 자바스크립트를 공부하다가 알게 된 reduce였습니다. 배열을 다루는 것이고, 인자로는 이전값,현재값,현재인덱스,배열을 가질 수 있으며 이전값부터 함수를 수행하고 결과로 나온값과 다음 값이 함수로 들어가 리턴값을 도출해 냅니다. (배열의 값들을 하나의 값으로 줄이는(reduce)는 것이라고 이해하고 있습니다. )

5.연산자 우선순위

연산자 우선순위에 대해서 잠깐 언급 하셨습니다. 찾아보니 JS에서 연산자 우선순위는 19단계가 있으며 단계가 높을 수록 우선순위를 가집니다. 가장 높은 19단계는 괄호(…) 이며 가장 낮은 단계는 놀랍게도 콤마(,) 였습니다. 콤마의 연산자 방향은 왼쪽에서 오른쪽 입니다.

Show your support

Clapping shows how much you appreciated 진영화(jin young hwa)’s story.