ES6

ES6(ECMAScript) 문법 사용정리


NodeJS v4 부터는 스크립트 ES6 문법을 사용할 수 있습니다.



1.  Template Literals (Grave Accent)


ES6에서는 Grave Accent ( 키보드 좌측 상단의 ` ) 를 사용하여 코드를 가독성 있고 편리하게 작성할 수 있다.

GraveAccent 를 사용하면  문자열 내에서 줄바꿈 과  문자열 내에 변수 사용 이 가능하다.


예를 들어, 스크립트에서 HTML 코드를 동적 생성해야 하는 경우, 아래와 같이 작성해야한다.


var name   =     "mingcho";

var img     =     "img.jpeg";

var temp   =     "<a style='cursor:pointer' class='mingcho_class' tmp_attr='"+name+"'><img src='/mingcho/"+img"' /></a>";



GraveAccent를 사용하면 위코드를 아래와 같이 변경 가능하다.


var name   =     "mingcho";

var img     =     "img.jpeg";

var temp   =     `

<a style="cursor:pointer" class="mingcho_class" temp_attr= ${name}>

<img src="/mingcho/${img}"    />

</a>

`;




2.  Arrow Function


처음에 보고 굉장히 헷갈렸던 문법이다. (커피스크립트의 -> 와 같다고 한다).

기존의 function 키워드를 간략화 하여 표현하는 방식인데 예를 들어 ES5의 경우 


http.createServer( function (request, response) {


response.write("mingming");

response.end();


}).listen(port);



Arrow Function 사용할 경우, 아래와 같이 변경 가능하다. 


http.createServer( (req, res) => {


req.write("mingming");

req.end();


}).listen(port);



파라미터가 한개일 경우


soket.on("error", function(e) {

});  //아래와 같이 변경가능.


soket.on("error", e => {

});




[참고]

http://blog.jeonghwan.net/2016/04/28/es6.html

* 이 포스트는 "ES6 사용에 앞서" 알아본 내용을 정리하는 개인적인 포스트입니다!


[참고/출처]

* https://nodejs.org/

* http://blog.nekoromancer.kr/2016/01/26/es6-var-let-%EA%B7%B8%EB%A6%AC%EA%B3%A0-const/

http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/



ES6는 뭘까?


NodeJS를 공부하기 위해 http://www.nodejs.org 에서 샘플 소스를 옮겨적어봤다.

내용은



Webstorm에서 에러를 잔뜩 표시해준다 

뭔가 해서 살펴봤더니 처음보는 아이들 const.. => .. 얘네는 뭘까 ㅎ.ㅎ

그래서 찾아보니 2015년 6월에 공개된 자바스크립트(JS) 표준 ECMAScript 6 의 문법이라고한다.

지금은 2017년인데 처음봐..ㅎㅎ ECMAScript 6 의 특징들 (한글번역)



그래서 일단은 const 와 let에 대해 알아보기로한다.

아! Webstorm에서의 빨간줄은 File -> Setting-> Languages & Frameworks 에서 

Javascript를 선택한 후 Javascript language version 을 ECMAScript 6로 변경해주면 말끔히 사라진다 ㅎ.ㅎ




자바스크립트에서 변수의 범위(VAR) 와 호이스팅


[자세한내용보기] http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/


contst 와 let을 알기에 앞서 먼저 var에 대해서 알필요가 있다.

변수는 지역 범위(local scope)와 전역 범위(global scope) 둘 중 하나를 가진다.



1. 지역변수(local scope)


스크립트의 가장 큰 특징 중 하나는 다른 언어들과 달리 블럭 {} 수준의 범위를 가지고 있지 않다.

그 대신 함수 수준의 범위를 가진다.

예를 들어 



위에 같은 경우 함수안에서 선언된 name 변수는 지역범위를 가진다. 그러므로 함수밖에서 선언된 name 의 값은 

전역변수 mingcho.

그러나 아래와 같이 



블럭 안에서 값을 할당하면 전역변수의 값이 바뀐다. 블럭수준의 범위에 해당되지 않는다.

위와 같은 경우 if 문안에서 var name = "minyoung" 과 같이 변수를 다시 선언해도 name은 여전히 전역 변수이며 

전역변수의값은 블럭안에서 할당된 값으로 변경된다. (블럭수준 X / 블럭범위의 변수가 아님)

그러나 함수안에서 var name = "minyoung" 과 같이 선언될 경우 name은 전역변수가 아닌 지역변수로 간주된다.


또한, 함수안에서 사용하더라도 선언을 해주지 않았을 경우엔 전역변수로 간주된다.

그러니 함수안에서 지역변수를 사용하고 싶을 땐 항상 선언을 해주도록 하자.

지역변수는 함수내에서 전역변수보다 높은 우선 순위를 가진다.


2. 전역변수(global scope)


함수의 외부에서 선언된 모든 변수는 전역 범위를 가진다.

모든 전역변수는 window객체와 연결되어 window객체를 통해 모든 전역 변수에 접근이 가능하다.




만약 변수가 최초 선언 없이 초기화 되었다면, 이 변수는 함수 내에 들어있더라도 전역변수가 된다.

또한, 함수가 아닌 블럭 {} 내에서 선언될 경우에도 전역변수로 간주된다.


for문의 경우도 같다.



또한, setTimeout 안에서 선언된 모든 함수는 전역 범위에서 실행된다.

setTimeout안에서의 this는 window객체.


스크립트를 잘쓰려면 가급적 전역 범위에 변수를 생성하는 것을 피해야한다.

function name(){} 이런식으로 생성하는 함수역시 전역범위에 포함된다.



3. 변수 호이스팅


스크립트의 모든 변수선언은 호이스트 된다.

호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다.

즉, 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우 전역범위의 최상위로 

변경되는 것을 뜻한다.



위와 같은 경우 처음에 name의 값을 찍어봣을때 선언부가 아래있음에도 에러가 아닌 undefined라는 결과가 나온다.

이 경우 지역변수 name이 최상위로 호이스트 되었기 때문이다.

이 경우에 ES6의 const, let 과 다른 특성을 보여준다.


호이스트 되었을 때, 함수 선언은 변수선언을 덮어쓴다. 

즉 변수를 선언한 후 같은 이름의 함수를 선언할 경우 그 이름의 주인은 함수가 된다.

하지만 변수에 값이 할당될 경우에는 반대로 변수가 함수 선언을 덮어쓴다. 



const , let 의 사용


[자세한내용보기] http://blog.nekoromancer.kr/2016/01/26/es6-var-let-%EA%B7%B8%EB%A6%AC%EA%B3%A0-const/


contst 와 let은 var와 같이 변수의 선언에 사용되는 ES6용어이다.

다만 이들은 var보다 훨씬 엄격한 규칙을 가지고있다.


1. 중복선언 금지


var의 경우 



위와 같이 선언을 두번 해줘도 에러가 나지 않는다. 

하지만 const, let은 경우 위와 같은 경우 에러를 발생시킨다.


2. 호이스팅!?


var의 경우 선언을 해주기전에 값을 출력해도. 선언된 변수가 호이스팅 되므로 출력값은 "undefined"

하지만 const 와 let은 다르다. ERROR! 먼저 선언을 하고 사용하자.

이를 임시적 사각지대라고한다.



3. 함수범위 X , 블럭범위 O


위에서 살펴봤듯이 스크립트 변수는 함수수준의 범위를 가진다 .

그러므로 if 나 for문 등 블럭안에서 전역변수와 같은 이름의 변수를 선언할 경우 이는 전역변수로 간주!

그러나 const 와 let은 블럭범위(Block-scope)이다.

블럭안에서 선언하여 사용할 경우 블럭밖에서 선언된 변수와는 다른 변수로 간주되어 사용된다.


4. 임시적 사각지대(TDZ)


어떤 변수가 호출되었을 때 블록 안에 같은 이름의 변수가 없으면 상위 블록에서 선언된 같은 이름의 변수를 호출한다.

하지만 블록안에서 const 나 let으로 선언된 변수가 있다면 그 이름의 변수는 변수가 선언되기 이전까지 그 블록안에서는

정의 되지 않는 내용으로 간주된다.



5. let , const 의 적절한 사용


일반적으로, 값의 변경이 있는 경우는 let으로 

값의 변경이 되지 않는 경우는 상수 const로 사용합니다. 

단, 참조형의경우는 const로 사용하는 것이 바람직합니다.

@ ES6에서 var의 사용은 지양합시당


+ Recent posts

티스토리 툴바