ES5와 ES6

새로운 Front-End면담을 해보니 부족한 부분에 대해서 다시 정리하는 기회를 가져 보겠습니다.

개념도 잘 이해 못하면서 열심히 코딩만 했던것 같습니다. 그러한 반성의 자세를 갖고 다음에 대해서 알아보겠습니다,

 

ES5와 ES6의 차이점

1. 블록범위
2. Arrow 문법
3. 비공개 필드
4. 클래스 상속

var에서 let, const

전 블로그에서 잠깐 언급했던 내용입니다.

var는 funtion()단위에서 사용하고, let과 const는 block 범위에서 사용하게 됩니다.

javascript의 범위는 scope 개념이 Funtion 단위 이기 때문에 혼란을 줍니다.

if 조건문의 block과는 상관없이 외부에서도 접근이 가능합니다. 

var keyword의 장점은 어디서든지 호이스팅이 되기 때문에 var 로 생성 안하고 그냥 변수로 사용해도 Error없이 사용이 가능하다

이러한 경우 스크립트 파일이 많아지거나 길어지면 의도치 않은 동일 변수명에 다른 값을 넣어서 시스템이 문제를 발생시킬수 있습니다.

 

이러한 리소스 비용을 줄이기 위해서 let을 사용합니다.

let - block scope로 일반 변수 생성시 사용. 중복 선언시 Type error를 발생시킵니다. 장점은 잘못된 변수 사용으로 인해 발생하는 오해의 소지를 줄여줄수 있기때문에 정확한 사용으로 생산성 상승

const - block scope로 javasciprt에서 상수용 변수로 사용된다. 처음 생성시 초기값을 지정해주어야 한다.

 

함수 선언 방식 변경 (arrow 문법)

항상 익명 함수, this의 값을 현재 문맥에 바인딩 시킨다

function (a,b){ reutn a+b}

var plus = function(a,b) { return a+b}

 

let plus = (a,b)=> return{a+b}

 

this의 변화도 있습니다. 실제 사용시 => 문법에 대해서 조금더 많이 적용해겠습니다,

//this 사용 방법
//es5
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
//es6
$('.btn').click((event) = > { this.senddata()})

//es6 , es5의 _this = this 표현식이 필요없음
var logUppercase = function() {
	this.string = this.string.toUpperCase()
    return () => console.log(this.string)
}

logUppercase.call({string : `es6 rocks`})();

//결과의 암시적 반환
var ids =['112','113']
//es5
var msg = ids.map(function(value) {
	return value
})
//es6
var mds = ids.map(value = > value);

//여러개 인자가 있는 경우
var msg = ids.map(function(i,j,k){
	return i + j + k;
})

var msg = ids.map((i,j,k) => i+j+k);

 

템플릿 리터럴

//ES5

'your name is '+ fist + second

//ES6

` your name is ${fisrt} ${second}`

3.멀티라인 문자열("`")

 

4.비구조화 할당

//es5
var body = req.body
username = body.username
password = body.password

//es6
var {username, password} = req.body

5.향상된 객체 리터럴 : 

 

6.Promise : 비동기 실행에 대한 ES 예시 참고

*동기와 비동기 : 동기는 블로킹인 반면 비동기는 콜백 후 실행, 메인스레드가 긴 작업을 완료 할때까지 블로킹 하지 않고 다른 작업을 수행 할수 있음.

//ES6에서 표준 Promise

//es5
setTimeout(function(){
	console.log('yay')
}, 1000)

//es6
var wait100 = new promise(function(resolve, reject){
	retrun setTimeout(resolve, 1000)
}).then(function(){
	console.log('yay')
})

//es6 arrow 문법 변형
var wait100 = new promise( (resolve, reject) => {
	setTimeout(1000)
}).then(()=>{
console.log('yay')})

7.클래스(Classes) : class는 get,set 키워드를 이용하여 선언된 함수를 아래와 같이 사용합니다.

class baseModel {
 constructor(option ={} , data = []){
   this.name = 'Baze'  
   this.url = 'https://ddd'
   this.data = data;
   this.option = option;
  }
  
  getName(){
  	console.log(`class name: ${this.name}` );
  }     
}


clase AccountModel extends baseModel {
	constrouctor(option, data) {
    	super({private: true}, ['1','2']);
        this.name = 'test'
        this.url += '/account/';
    }
    
    get accountData(){
    	return this.data;
    }
}

8.Modules

es6 에서 공식적으로 모듈을 제공하지 않기 전까니는 commonjs, AMD, RequireJS 등의 비공식 모듈 스펙을 사용해 왔다. ES6에서 제공하는 모듈 스펙은 기존과 유사하지만 차이가 있습니다

//es5 ... modul.js 작성 내용
module.exports = {
	prot: 3000,
    getAccounts : function(){
    ...
    }
}

//main.js
var service = require('module.js')
console.log(service.port)


//es6 module.js 작성 내용
export var port =3000
export function gatAccounts(){ }

//main.js
import {port, gatAccounts} from 'module'
//or
import * as service from 'module'