Node.js) ES2015 문법 (ES6) #1

자바스크립트는 매년 새로운 버전을 내고 있는데 자바스크립트를 공부하다 보면 ECMA Script, ES5, ES6 와 같은 용어를 접하게 된다.

종종 보게 되는ES란 ECMA Script의 약자이다. ES5는 ECMA Script 5의 규격을 따른다고 생각하면 된다.

ECMA Script란..?

자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라, 표준이 필요하게 되었다.
표준을 위해 자바스크립트를 ECMA( European Computer Manufacturers Association ) 라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다.

 

현재 사용하는 문법은 2015년 버전의 ES6이다. ES6의 문법들을 보자면 아래와같다.

ES 2015 (ES 6)

1. let, const 키워드 추가

기존의 변수는 함수 scope를 가진 var 키워드를 이용하여 선언하였다. 때문에 block scope 를 가진 let과 const 키워드를 추가하였다. 기존에는 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수임을 표시했다면, ES 6부터 const 키워드가 추가되어 값의 변경을 통제한다.

 

기존의 var val와 const let의 차이는 무엇일까?

if(true){
	var x = 3;
}
console.log(x);
//3이 출력됨

if(true){
	const x = 3;
}
console.log(x);
//에러뜸

 

 

const는 블록 밖으로 바져나갈 수 없고 또한 const는 상수이기 때문에 값을 바꿀수 없음

그러나 const에 객체가 할당된 경우 객체 내부 속성은 바꿀 수 있음

ex)

const h = [1,2,3,4,5]

h[0] = 3

위처럼 바꾸면 h = [3,2,3,4,5] 가 됨

 

let은 변수이기때문에 변경할 수 있음

2. arrow 문법 지원

arror 문법은 두 가지의 장점을 제공한다. 첫 번째는 익숙하면 편하고 간결해진 코드를 작성할 수 있다. 두 번째는 this 를 바인딩하지 않는다. (다르게 말하면, this는 해당 scope의 this와 같다.)

 

function fun1(x, y){//함수선언문
    return x+y
}

var fun2 = function(x,y){//함수표현식
    return x+y
}

const fun3 = (x,y)=>{//최종적인 화살표함수
    return x+y
}

 

위 두 함수중 원래는 1번과 같이 함수를 만들어 사용했으나 arrow 함수가 만들어지며 3번 함수처럼 변함 그러나 아직까지 1번도 쓰이는중

위와같이 함수의 내용이 return뿐일 때는 더욱 줄일 수 있음

 

const fun4 = (x,y)=>x+y

 

화살표가 있으나 중괄호가 없으면 바로 리턴한다고 보면 됨 

 

이렇게 짧고 편하게 사용이 가능하지만 function이 아직 살아남은 이유는 this임 바깥쪽 this를 그대로 쓰고싶으면 arrow함수를 쓰면되고 다른 this를 쓰고싶으면 function을 쓰면 됨

 

 

3. 탬플릿문자열

문자열을 더할때 평상시에 a+" "+b+" "+c 이런식으로 더하는데 이럴때 헷갈릴 수 있음 그것이 es2015에서는 좀 더 편리하게 바뀜 키보드 위에 숫자1옆에 백틱( ` )을 따옴표대신 양쪽끝에 붙인다음 내부에 각 변수들을 ${ }로 감싸줌

`${a} ${b} ${c}` 이렇게 하면 위에 문자열과 같은 결과를 도출 할 수 있음

4. 객체 리터럴의 변화

객체리터럴이란 { }안에 변수들이나 함수들이 들어가는 문법임

 

const obj = {
    examFun : function(){
        console.log("one")
    }
}

const obj = {
    examFun(){
        console.log("one")
    }
}

 

위처럼 불필요한 function부분이 사라짐 또한 키값과 밸류의값이 같은 경우 {data : data, value : value} 같이 표시를 했어야했는데 이제는 같을경우  {data , value}로 표현 할 수 있음

 

5. 비구조화 할당(destructuring)

객체안에 있는 변수나 function을 호출할때

const mValue = obj1.mValue;

cosnt mFun = obj1.mFun;

위와 같이 호출을 한다고 치면 ES6에서는 더 편리한 기능을 제공함

const {mVlaue, mFun } = obj1 //뒤에있는 객체에서 앞에있는 속성값을 꺼내오는것

위와같이 편리하게 바꿀 수 있음

 

const arr = ['node.js', {}, 10, true]
var node = array[0]
var obj = array[1]
var bool = array[2]

const arr = ['node.js', {}, 10, true]
const [node, obj, , bool] = array

 

위도 마찬가지로 비구조화 할당임 위 코드중 윗부분과 아랫부분은 같은 코드에 해당함

 

 

6. rest 문법

'...'을 사용해서 남은 변수들을 한번에 처리할 수 있음

 

const arr = ['node.js', {}, 10, true]
const [node, obj, ...bool] = array
//이렇게하면 bool에는 [10, true]이 들어감 

const m = (x,y) => console.log(x,y)

const m = (x,...y) => console.log(x,y)

 

위 함수의 경우는 m(1,2, 3, 4, 5) 했을때 위 에는 1 2 출력 밑에는 (1) [2,3,4,5] 출력됨